如何在Web扩展的content scripts中使用ES Modules？已试三种方法失败

嘿，这个问题我之前也碰到过！content scripts里用ES Modules确实有点麻烦，因为它的运行上下文和普通页面脚本、扩展的后台/弹窗不一样。先给你几个可行的解决方案：

方案1：升级到Manifest V3（最推荐） #

如果你的扩展可以升级到Manifest V3，那这是最直接的解决办法——V3原生支持给content scripts指定模块类型。

只需要在manifest.json的content scripts配置里加上"type": "module"：

"content_scripts": [
  {
    "matches": ["<all_urls>"], // 替换成你的匹配规则
    "js": ["content.js"],
    "type": "module"
  }
]

之后content.js里就能直接用import/export语法了，Chrome和最新版Firefox都支持这个特性，完美解决你第一种方法的报错问题。

方案2：Manifest V2下的消息桥接方案 #

如果还在使用Manifest V2，那可以通过content script作为中间层+页面模块脚本消息通信的方式绕开限制：

步骤1：编写桥接用的content script（非模块） #

创建一个bridge.js，负责和页面里的模块脚本通信，并代理浏览器API的调用：

// bridge.js
// 监听来自页面模块的消息
window.addEventListener('message', (event) => {
  // 过滤非预期消息
  if (event.source !== window || !event.data.fromExtensionModule) return;

  // 根据不同动作处理API调用
  switch (event.data.action) {
    case 'queryTabs':
      browser.tabs.query({}).then(tabs => {
        window.postMessage({
          fromExtensionBridge: true,
          responseId: event.data.requestId,
          data: tabs
        }, '*');
      });
      break;
    // 这里可以扩展你需要的其他浏览器API
  }
});

// 插入模块脚本到页面
const moduleScript = document.createElement('script');
moduleScript.src = browser.extension.getURL('content-module.js');
moduleScript.type = 'module';
document.body.appendChild(moduleScript);

步骤2：编写模块脚本 #

创建content-module.js，在这里使用ES Modules语法，通过消息调用浏览器API：

// content-module.js
import Foo from './foo.js';

// 封装调用扩展API的工具函数
async function callExtensionApi(action) {
  const requestId = Math.random().toString(36).slice(2, 11);
  return new Promise(resolve => {
    const listener = (event) => {
      if (event.source === window && event.data.fromExtensionBridge && event.data.responseId === requestId) {
        window.removeEventListener('message', listener);
        resolve(event.data.data);
      }
    };
    window.addEventListener('message', listener);
    // 发送消息给桥接脚本
    window.postMessage({
      fromExtensionModule: true,
      requestId,
      action
    }, '*');
  });
}

// 使用示例
callExtensionApi('queryTabs').then(tabs => {
  console.log('获取到的标签页：', tabs);
  // 这里可以正常使用导入的Foo模块
  const fooInstance = new Foo();
});

步骤3：配置可访问资源 #

在manifest.json里把模块相关文件声明为可被页面访问的资源：

// Manifest V2 配置
"web_accessible_resources": [
  "content-module.js",
  "foo.js"
]

这样就能解决你第三种方法里browser is not defined的问题——模块脚本运行在页面上下文，无法直接访问content script的browser对象，通过消息桥接就能间接调用扩展API。

方案3：打包成非模块脚本 #

如果不想折腾消息通信，也可以用打包工具（比如Rollup、Webpack）把你的ES Modules代码打包成IIFE或UMD格式的单文件脚本。打包后的脚本没有import/export语法，可以直接在Manifest声明的content scripts里使用，或者通过tabs.executeScript()加载，完美避开模块语法的报错问题。

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