开发浏览器扩展时iframe.contentWindow获取异常求助

• 核心原因：浏览器扩展的content脚本运行在**隔离环境（isolated world）**中，和页面自身的JS上下文完全独立。你通过content脚本直接获取的iframe.contentWindow属于隔离后的上下文，看不到页面主上下文里定义的Entry属性；而控制台手动打印的是页面主上下文的contentWindow，所以能看到预期属性。

• 解决方案：注入代码到页面主上下文
  同域场景下，我们可以把访问contentWindow属性的逻辑注入到页面主上下文执行，再通过自定义事件把结果传回content脚本：

  1. 创建script标签，写入获取Entry的逻辑并挂载到页面DOM
  2. 利用postMessage完成主上下文与content脚本的通信

  示例代码：

  // content脚本代码
  function getIframeEntry() {
    return new Promise((resolve) => {
      // 监听主上下文发来的消息
      window.addEventListener('message', function handler(e) {
        if (e.data?.type === 'IFRAME_ENTRY') {
          resolve(e.data.entry);
          window.removeEventListener('message', handler);
        }
      });
  
      // 注入脚本到页面主上下文
      const script = document.createElement('script');
      script.textContent = `
        // 替换成你的iframe选择器
        const targetIframe = document.querySelector('iframe[src="你的同域地址"]');
        const entryData = targetIframe.contentWindow.Entry;
        // 发送结果到content脚本
        window.postMessage({ type: 'IFRAME_ENTRY', entry: entryData }, window.location.origin);
      `;
      document.body.appendChild(script);
      script.remove(); // 执行后清理脚本
    });
  }
  
  // 调用并处理结果
  getIframeEntry().then(entry => {
    console.log('获取到的Entry:', entry);
    // 这里写你的业务逻辑
  });
  

• 额外提示

  • 务必等iframe加载完成再执行代码，可通过监听iframe的load事件，或在window.load之后触发逻辑
  • 同域下使用postMessage时，指定目标origin为当前域名（window.location.origin），比通配符*更安全

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