Chrome扩展内容脚本中如何访问Module Federation远程模块？

问题背景 #

• 现有两个应用：extension（Chrome扩展主应用）和actionsLogger（通过Module Federation暴露模块的应用），actionsLogger对外暴露logClick函数，用于获取页面点击坐标。
• 将导入该函数的tracker.js配置为内容脚本时，出现remoteEntry.js加载失败的错误。
• 改用注入脚本方式可正常运行，但部分网站的内容安全策略（CSP）会阻止远程模块的请求，导致功能失效。

可行解决方案 #

1. 将远程模块打包到Chrome扩展内部，避免远程请求 #

把actionsLogger的remoteEntry.js和相关模块打包进extension应用中，从本地加载模块，彻底绕开CSP限制和远程加载问题。

配置步骤：

• 修改actionsLogger的Module Federation配置，生成可本地引用的模块包：

// actionsLogger/webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'actionsLogger',
      filename: 'remoteEntry.js',
      exposes: {
        './logClick': './src/logClick',
      },
      publicPath: '', // 禁用远程公共路径，改用相对路径
    }),
  ],
};

• 构建actionsLogger，将生成的remoteEntry.js和相关chunk文件复制到extension的public或assets目录下。
• 修改extension的Module Federation配置，指向本地的remoteEntry.js：

// extension/webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'extension',
      remotes: {
        actionsLogger: 'actionsLogger@./remoteEntry.js', // 使用本地相对路径
      },
    }),
  ],
};

• 在manifest.json中确保内容脚本能访问本地资源，将相关文件添加到web_accessible_resources：

{
  "web_accessible_resources": [
    {
      "resources": ["remoteEntry.js", "actionsLogger.*.js"],
      "matches": ["<all_urls>"]
    }
  ]
}

2. 利用Chrome扩展背景脚本作为中转代理 #

通过背景脚本加载远程模块，再将logClick函数的能力传递给内容脚本，避免内容脚本直接发起远程请求。

实现步骤：

• 在manifest.json中配置背景脚本：

{
  "background": {
    "service_worker": "background.js"
  }
}

• 在背景脚本中加载并初始化远程模块，监听内容脚本消息：

// background.js
(async () => {
  const remoteUrl = 'https://your-actionslogger-domain/remoteEntry.js';
  // 动态加载远程入口文件
  await import(/* webpackIgnore: true */ remoteUrl);
  // 获取暴露的logClick函数
  const { logClick } = await import('actionsLogger/logClick');
  
  // 响应内容脚本的坐标请求
  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.type === 'GET_CLICK_COORDS') {
      const coords = logClick(message.eventData);
      sendResponse(coords);
    }
    return true;
  });
})();

• 内容脚本改为向背景脚本发送消息，不再直接导入远程模块：

// tracker.js（内容脚本）
document.addEventListener('click', (e) => {
  chrome.runtime.sendMessage(
    { type: 'GET_CLICK_COORDS', eventData: { x: e.clientX, y: e.clientY } },
    (coords) => {
      console.log('点击坐标：', coords);
      // 后续业务逻辑处理
    }
  );
});

3. 针对CSP限制的临时适配方案 #

如果必须保留远程加载方式，可以通过Chrome扩展的content_security_policy配置放宽限制，但仅建议在必要时使用：

{
  "content_security_policy": {
    "extension_pages": "script-src 'self' https://your-actionslogger-domain; object-src 'self'",
    "content_scripts": "script-src 'self' https://your-actionslogger-domain; object-src 'self'"
  }
}

注意：该方案可能降低扩展安全性，且部分严格网站的CSP仍可能阻止请求，仅作为临时适配手段。

内容的提问来源于stack exchange，提问作者Nikita Kolokoltsev