如何从Chrome扩展中调用网页内函数并获取其返回值

Chrome扩展的内容脚本（Content Script）与目标网页运行在相互隔离的独立JS执行环境中，二者的全局作用域、挂载在window上的变量/函数完全不互通，无法直接在扩展脚本中访问页面定义的getData()方法，需要通过页面上下文注入+跨上下文消息通信的方案实现，以下是基于当前Chrome官方要求的Manifest V3标准的可落地步骤：

1. 配置扩展基础权限 #

在扩展根目录的manifest.json中配置内容脚本注入规则，示例配置如下：

{
  "manifest_version": 3,
  "name": "页面函数调用Demo",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://你的目标站点地址/*"], // 替换为实际需要生效的页面地址，测试阶段可临时用<all_urls>
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ]
}

2. 编写内容脚本逻辑 #

在扩展根目录新建content.js文件，实现「注入页面脚本调用函数、接收返回结果」的完整逻辑：

// 动态创建script标签，将代码注入到页面自身的执行上下文
const pageScript = document.createElement('script');
pageScript.textContent = `
  // 此段代码运行在页面上下文，可直接访问页面内定义的所有全局函数
  const funcResult = getData();
  // 将执行结果通过postMessage发送给同页面的内容脚本
  window.postMessage(
    {
      extFlag: 'call-page-fn',
      result: funcResult
    },
    window.location.origin // 限定消息接收源为当前站点，避免安全风险
  );
`;
// 插入脚本到页面DOM触发执行
(document.head || document.documentElement).appendChild(pageScript);
// 执行完成后移除临时脚本标签，避免污染页面DOM
pageScript.remove();

// 监听页面回传的消息，拿到函数返回值
window.addEventListener('message', (e) => {
  // 校验消息标识，过滤无关的页面消息
  if (e.source === window && e.data?.extFlag === 'call-page-fn') {
    const finalResult = e.data.result;
    // 此处即可拿到getData()的返回值，针对示例页面会得到1
    console.log('页面函数返回结果：', finalResult);
    // 后续可基于返回结果编写扩展的业务逻辑
  }
});

常见场景适配说明 #

• 如果需要调用的页面函数是异步函数（返回Promise），只需把注入脚本内的逻辑改为async/await写法，拿到异步结果后再调用postMessage回传即可。
• 如果需要给页面函数传递参数，可将可序列化的参数（普通对象、字符串、数字等，不可传递函数、循环引用对象）拼接到注入脚本的代码中传入。
• 如果仍在使用旧版Manifest V2，核心通信逻辑完全一致，仅需调整manifest.json中的权限配置字段适配V2规范即可。

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