如何通过Chrome Extension的JavaScript获取网页window.services属性

问题本质 #

Chrome扩展的Main World（content脚本所在的隔离环境）与网页主执行上下文相互隔离，两者的window对象并非同一实例，因此直接调用window.services会提示属性不存在。

可行解决方法 #

1. 注入脚本到网页主上下文 #

通过content脚本向页面注入代码，让代码在网页自身的执行环境中运行，从而访问到window.services，再通过自定义事件将数据传递回扩展的content脚本。

具体实现：

• 编写注入脚本（可单独存为inject.js）：

  (() => {
    // 轮询等待services加载完成，间隔可根据页面实际情况调整
    const checkInterval = setInterval(() => {
      if (window.services) {
        clearInterval(checkInterval);
        // 触发自定义事件传递数据
        window.dispatchEvent(new CustomEvent('servicesLoaded', { detail: window.services }));
      }
    }, 100);
  })();
  

• 在content脚本中完成注入并监听事件：

  // 创建script标签注入页面
  const injectScript = document.createElement('script');
  injectScript.src = chrome.runtime.getURL('inject.js');
  document.documentElement.appendChild(injectScript);
  injectScript.onload = () => injectScript.remove();
  
  // 监听自定义事件接收services数据
  window.addEventListener('servicesLoaded', (event) => {
    const targetServices = event.detail;
    // 此处可对services数据进行后续处理
    console.log('获取到的服务信息:', targetServices);
  });
  

2. 配置扩展权限规避安全问题 #

直接嵌入内联脚本可能触发CSP安全限制，可通过扩展配置解决：

• 在manifest.json中添加web_accessible_resources配置，允许目标网页访问注入脚本：

  {
    "web_accessible_resources": [
      {
        "resources": ["inject.js"],
        "matches": ["https://目标网站域名/*"] // 替换为实际目标网站的URL规则
      }
    ]
  }
  

3. 优化加载时机 #

确保注入脚本的时机合理，可在manifest.json中设置content脚本的run_at参数，让脚本在页面合适阶段注入：

{
  "content_scripts": [
    {
      "matches": ["https://目标网站域名/*"],
      "js": ["content.js"],
      "run_at": "document_start" // 或document_end，根据页面加载逻辑选择
    }
  ]
}

注意点 #

• 若window.services包含复杂对象，传递时需注意序列化问题，可通过JSON.stringify和JSON.parse转换后传递，避免循环引用导致的异常。
• 轮询间隔可根据页面服务加载速度调整，避免不必要的性能消耗。

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