设置content_scripts.world为MAIN后，如何与后台页面通信？

由于将Content Script的world设为MAIN后，脚本无法访问任何Chrome扩展API，因此需要通过自定义DOM事件结合中间层的方式实现前后台通信，以下是具体方案：

1. 后台页面向MAIN世界的Content Script发送数据 #

方式一：直接通过chrome.scripting.executeScript注入代码传递数据 #

后台可直接在MAIN世界执行代码，并将数据作为参数传入，通过自定义事件让MAIN脚本接收：

// 后台脚本（background.js/service-worker.js）
async function sendToMainWorld(tabId, data) {
  await chrome.scripting.executeScript({
    target: { tabId: tabId, allFrames: true },
    world: 'MAIN',
    func: (payload) => {
      window.dispatchEvent(new CustomEvent('bgToMainMsg', { detail: payload }));
    },
    args: [data] // 要传递的数据
  });
}

// 调用示例：向ID为123的标签页发送数据
sendToMainWorld(123, { type: 'update', content: '新数据内容' });

MAIN世界的Content Script监听事件接收数据：

// MAIN世界脚本
window.addEventListener('bgToMainMsg', (event) => {
  const receivedData = event.detail;
  console.log('收到后台数据:', receivedData);
  // 后续处理逻辑
});

方式二：借助ISOLATED世界的脚本做持久通信桥梁 #

如果需要持续收发消息，可配置一个ISOLATED世界的普通Content Script作为中间层：

1. 在manifest.json中添加两个Content Script配置：

{
  "manifest_version": 3,
  "content_scripts": [
    // MAIN世界脚本
    {
      "matches": ["<all_urls>"],
      "js": ["main-script.js"],
      "world": "MAIN",
      "all_frames": true
    },
    // ISOLATED世界的桥梁脚本
    {
      "matches": ["<all_urls>"],
      "js": ["bridge-script.js"],
      "all_frames": true
    }
  ]
}

2. 后台向桥梁脚本发送消息：

// 后台脚本
chrome.tabs.sendMessage(tabId, { type: 'forwardToMain', data: '来自后台的消息' });

3. 桥梁脚本转发消息到MAIN世界：

// bridge-script.js（ISOLATED世界）
chrome.runtime.onMessage.addListener((msg) => {
  if (msg.type === 'forwardToMain') {
    window.dispatchEvent(new CustomEvent('bridgeToMain', { detail: msg.data }));
  }
});

4. MAIN脚本监听事件接收数据：

// main-script.js（MAIN世界）
window.addEventListener('bridgeToMain', (event) => {
  console.log('通过桥梁收到后台数据:', event.detail);
});

2. MAIN世界的Content Script向后台页面发送数据 #

同样依赖自定义DOM事件+ISOLATED世界的桥梁脚本完成转发：

1. MAIN世界脚本触发事件传递数据：

// main-script.js（MAIN世界）
function sendToBackground(data) {
  window.dispatchEvent(new CustomEvent('mainToBridge', { detail: data }));
}

// 调用示例：向后台发送请求
sendToBackground({ action: 'fetchUserData', userId: 1001 });

2. 桥梁脚本监听事件，通过Chrome API转发给后台：

// bridge-script.js（ISOLATED世界）
window.addEventListener('mainToBridge', (event) => {
  chrome.runtime.sendMessage(event.detail, (response) => {
    // 可选：将后台的响应回传给MAIN世界
    window.dispatchEvent(new CustomEvent('bgResponseToMain', { detail: response }));
  });
});

3. 后台脚本接收并处理消息：

// 后台脚本
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.action === 'fetchUserData') {
    // 模拟数据查询逻辑
    const userData = { id: msg.userId, name: '测试用户' };
    sendResponse({ status: 'success', data: userData });
  }
});

4. （可选）MAIN世界脚本监听后台响应：

// main-script.js（MAIN世界）
window.addEventListener('bgResponseToMain', (event) => {
  console.log('收到后台响应:', event.detail);
});

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