如何实现MAIN环境的内容脚本与扩展后台脚本之间的消息通信

嗨，我来帮你解决这个问题～ 你遇到的核心问题是：运行在MAIN世界的内容脚本没法直接调用扩展的browser.runtime.sendMessage这类API，因为MAIN世界是和页面原生JS共享的上下文，没有访问扩展内部特权API的权限。得靠一个隔离世界的内容脚本当“中间人”，通过页面的window.postMessage来传递消息，再转发给后台。具体实现步骤如下：

第一步：修改manifest.json，添加隔离世界的转发脚本 #

我们需要新增一个默认隔离世界（ISOLATED）的内容脚本，用来接收MAIN脚本的消息并转发给后台：

{
  "content_scripts": [
    {
      "world": "MAIN",
      "js": ["src/contentScripts/registerConsoleLogs.ts"],
      "matches": ["http://*/*", "https://*/*"],
      "run_at": "document_start"
    },
    {
      "world": "ISOLATED", // 这个字段可以省略，默认就是隔离世界，写出来更清晰
      "js": ["src/contentScripts/messageForwarder.ts"],
      "matches": ["http://*/*", "https://*/*"],
      "run_at": "document_start"
    }
  ]
}

第二步：修改registerConsoleLogs.ts，用window.postMessage发消息 #

MAIN脚本里捕获到console.log后，不能直接调用扩展API，而是通过页面的消息机制把数据发出去，注意要转义arguments为普通数组（因为arguments是特殊对象，没法直接通过postMessage传递）：

console.stdlog = console.log.bind(console);
console.log = function () {
  console.stdlog.apply(console, arguments);
  // 把arguments转为普通数组，避免postMessage传递失败
  const logArgs = Array.from(arguments);
  // 发送消息，带上自定义类型标识，方便后续验证
  window.postMessage(
    {
      type: "FROM_MAIN_CONSOLE_LOG_SCRIPT",
      payload: {
        name: 'registerLog',
        severity: 'warning',
        log: logArgs
      }
    },
    window.location.origin // 限制消息发送范围，提升安全性
  );
};

export default {};

第三步：创建messageForwarder.ts，作为消息转发中间件 #

这个隔离世界的脚本会监听页面的消息事件，验证消息合法性后，再用扩展API转发给后台：

window.addEventListener('message', (event) => {
  // 严格验证消息来源和类型，防止页面其他恶意脚本干扰
  if (event.source !== window || event.data.type !== "FROM_MAIN_CONSOLE_LOG_SCRIPT") {
    return;
  }

  // 转发消息到后台脚本，记得处理可能的错误
  browser.runtime.sendMessage(event.data.payload)
    .catch(err => console.error('转发消息到后台失败:', err));
});

export default {};

第四步：后台脚本background.ts保持原有逻辑即可 #

你的后台代码不需要大改，只要能正确接收并处理registerLog类型的消息就好：

browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.name === 'registerLog') {
    console.log('收到日志: ');
    console.log(request.payload);
  }
});

关键注意事项 #

• 消息验证很重要：一定要检查消息的来源和自定义类型，避免页面中的其他脚本发送恶意消息干扰扩展逻辑。
• 特殊对象处理：像arguments这种特殊的类数组对象，必须转为普通数组才能通过postMessage传递，否则会丢失数据。
• 权限边界：MAIN世界的脚本本质是页面上下文的一部分，没有扩展特权，所以必须借助隔离世界的脚本作为桥梁才能和后台通信。

备注：内容来源于stack exchange，提问作者Bruno Francisco