Chrome扩展：如何从MAIN世界注入脚本向后台发送消息？

问题原因 #

注入到MAIN世界的脚本属于页面自身的上下文，无法直接访问Chrome扩展的API（比如chrome.runtime），只有默认的ISOLATED世界脚本才能调用扩展提供的API，这就是你报错chrome.runtime未定义的核心原因。

解决方案 #

通过「自定义DOM事件」在MAIN世界和ISOLATED世界之间建立通信桥梁：让MAIN世界脚本把数据通过自定义事件传给ISOLATED世界脚本，再由后者调用chrome.runtime.sendMessage给后台发消息。

步骤1：修改后台脚本，同时注入两个脚本 #

更新background.js，先注入ISOLATED世界的通信桥脚本，再注入MAIN世界的业务脚本：

chrome.scripting.executeScript({
  target: { tabId: tabId },
  files: ['./js/bridge.js'] // 先加载ISOLATED世界的桥脚本
}).then(() => {
  return chrome.scripting.executeScript({
    target: { tabId: tabId },
    files: ['./js/asdf.js'],
    world: 'MAIN' // 再加载MAIN世界的业务脚本
  });
});

步骤2：编写MAIN世界的业务脚本（asdf.js） #

在需要发送消息的位置，触发自定义DOM事件并携带数据：

console.log("asdfasdf"); // 正常打印

// 构造要发送给后台的数据（可包含页面变量）
const messageData = { action: '...', pageData: window.somePageVariable };

// 触发自定义事件，把数据传给ISOLATED世界的桥脚本
document.dispatchEvent(new CustomEvent('sendToBackground', { detail: messageData }));

// （可选）监听后台返回的响应
document.addEventListener('backgroundResponse', (e) => {
  console.log('收到后台响应:', e.detail);
  // 这里可以处理后台返回的数据
});

步骤3：编写ISOLATED世界的通信桥脚本（bridge.js） #

监听来自MAIN世界的事件，调用扩展API发消息给后台，再把响应回传给MAIN世界：

// 监听MAIN世界发来的消息
document.addEventListener('sendToBackground', async (e) => {
  try {
    // 调用扩展API发送消息到后台
    const response = await chrome.runtime.sendMessage(e.detail);
    // 把后台响应通过自定义事件传回MAIN世界
    document.dispatchEvent(new CustomEvent('backgroundResponse', { detail: response }));
  } catch (err) {
    console.error('发送消息失败:', err);
  }
});

步骤4：后台脚本监听消息（background.js补充） #

如果需要处理前端发来的消息，在background.js中添加监听逻辑：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log('收到页面消息:', message);
  // 处理你的业务逻辑
  sendResponse({ status: 'success', result: '后台处理完成' });
  // 若涉及异步处理，需返回true以保持通信通道开放
  // return true;
});

关键注意点 #

• MAIN世界脚本仅能操作页面DOM和变量，无法直接调用扩展专属API
• 自定义事件是两个世界间安全的通信方式，数据会自动完成序列化
• 建议先加载桥脚本再加载业务脚本，确保事件监听提前就绪

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