Manifest V3扩展：如何调用网页本地函数并将结果传递给后台服务工作线程

我完全明白你遇到的困境——Manifest V3里内容脚本的两个执行世界（MAIN和ISOLATED）各自有明确的权限边界：MAIN世界能访问页面的函数/变量，但不能调用Chrome扩展API；ISOLATED世界能正常使用Chrome API，却无法直接触及页面的执行上下文。

要解决这个问题，我们可以通过DOM事件桥接的方式，让两个世界的脚本分工协作：一个负责调用页面函数，另一个负责与后台通信，两者通过自定义DOM事件传递数据。下面是具体的实现方案：

核心思路 #

1. 注册两个内容脚本：
   • 一个运行在MAIN世界：专门负责调用网页的本地函数，然后把结果通过自定义DOM事件发送出去
   • 一个运行在默认的ISOLATED世界：专门监听自定义DOM事件，收到数据后调用Chrome API把数据传给后台服务工作线程
2. 利用两个世界共享DOM的特性，通过自定义事件完成数据跨世界传递

修改后的完整代码 #

1. manifest.json（注册两个内容脚本） #

{
  "manifest_version": 3,
  "name": "ExtName",
  "version": "0.0.1",
  "content_scripts": [
    // MAIN世界脚本：负责访问页面本地函数
    {
      "matches": ["*://url/*"],
      "js": ["main-main.js"],
      "world": "MAIN"
    },
    // ISOLATED世界脚本：负责与后台通信
    {
      "matches": ["*://url/*"],
      "js": ["main-isolated.js"]
    }
  ],
  "host_permissions": [
    "*://*/*"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

2. main-main.js（MAIN世界脚本） #

这个脚本运行在页面的主执行上下文，能直接调用网页的getValue()函数：

var intervalID = window.setInterval(checkValue, 1000);

function checkValue() {
    try {
        // 调用网页的本地函数
        let value = getValue();
        if (value) {
            // 创建自定义DOM事件，将结果传递给ISOLATED世界的脚本
            const transferEvent = new CustomEvent('pageFunctionResult', { 
                detail: value,
                bubbles: true,  // 允许事件冒泡，确保能被监听到
                cancelable: true
            });
            window.dispatchEvent(transferEvent);
        }
    } catch (err) {
        console.error('调用页面本地函数出错:', err);
    }
};

3. main-isolated.js（ISOLATED世界脚本） #

这个脚本运行在扩展的隔离上下文，能正常调用Chrome扩展API：

// 监听MAIN世界脚本发来的自定义事件
window.addEventListener('pageFunctionResult', async (event) => {
    const pageValue = event.detail;
    try {
        // 将数据发送给后台服务工作线程
        const response = await chrome.runtime.sendMessage({ status: pageValue });
        console.log('后台响应:', response.text);
    } catch (err) {
        console.error('向后台发送消息出错:', err);
    }
});

4. background.js（保持原逻辑不变） #

function handleMessage(request, sender, sendResponse) {
    console.log('收到内容脚本传来的数据:', request.status);
    sendResponse({ text: "Received!" });
}

chrome.runtime.onMessage.addListener(handleMessage);

为什么这个方案能解决你的问题？ #

• 你之前在MAIN世界脚本里直接调用chrome.runtime.sendMessage报错，是因为MAIN世界不在扩展的权限上下文里，没有访问Chrome API的权限；现在MAIN脚本只负责调用页面函数，用DOM事件传数据，避开了这个限制。
• 你在ISOLATED世界脚本里直接调用页面函数报错，是因为隔离环境和页面上下文完全隔离；现在页面函数的调用交给MAIN脚本处理，ISOLATED脚本只负责接收数据和与后台通信。
• DOM事件是两个世界共享的通信桥梁，这是Manifest V3官方推荐的跨世界数据传递方式。

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