Chrome扩展Content Script无法访问指定Window对象的问题求助

原因 #

1. 控制台快照与实时求值差异：你在content script里打印的window是代码执行时的静态快照，而Chrome控制台展开window对象时会实时读取当前属性值——这就是为什么控制台能看到THEOplayer，但代码直接访问返回undefined，本质是代码执行时该对象还未被页面脚本挂载。
2. 动态加载延迟：即使load事件触发，页面的THEOplayer可能是通过异步脚本（如webpack chunk、动态import）加载的，load事件触发时机早于THEOplayer的挂载时机。
3. 属性隐藏机制：部分网站会用Object.defineProperty将THEOplayer配置为不可枚举属性，常规属性访问可能受限于此，但控制台仍能读取到。

可行解决方案 #

方案1：轮询等待对象挂载（简单直接） #

通过setInterval定期检查window.THEOplayer，获取到后停止轮询：

// content.js
const checkTHEOplayer = setInterval(() => {
  if (window.THEOplayer) {
    clearInterval(checkTHEOplayer);
    console.log("获取到THEOplayer:", window.THEOplayer);
    // 这里执行你的业务逻辑
  }
}, 100); // 每100ms检查一次，可根据实际调整间隔

// 防止无限轮询，设置超时时间
setTimeout(() => {
  clearInterval(checkTHEOplayer);
  console.log("超时未获取到THEOplayer");
}, 30000); // 30秒超时

方案2：注入页面原生脚本（最可靠） #

部分网站的隔离机制可能限制MAIN world content script的访问，直接在页面原生上下文注入脚本是更稳妥的方式：

// content.js
// 创建脚本标签，注入到页面原生上下文
const script = document.createElement('script');
script.textContent = `
  // 这里的代码运行在页面原生上下文，能直接访问所有全局对象
  if (window.THEOplayer) {
    // 通过自定义事件传递给content script
    window.dispatchEvent(new CustomEvent('THEOplayerReady', {
      detail: window.THEOplayer
    }));
  } else {
    // 用轮询确保获取到
    const check = setInterval(() => {
      if (window.THEOplayer) {
        clearInterval(check);
        window.dispatchEvent(new CustomEvent('THEOplayerReady', {
          detail: window.THEOplayer
        }));
      }
    }, 100);
  }
`;
document.documentElement.appendChild(script);
script.remove(); // 注入后移除脚本标签，避免DOM污染

// 在content script中监听自定义事件
window.addEventListener('THEOplayerReady', (e) => {
  const theoPlayer = e.detail;
  console.log("通过原生脚本获取到THEOplayer:", theoPlayer);
  // 执行你的业务逻辑
});

方案3：MutationObserver监听全局属性变化 #

通过监听window对象的属性变化，精准捕获THEOplayer的挂载事件：

// content.js
const observer = new MutationObserver((mutations) => {
  if (window.THEOplayer) {
    observer.disconnect();
    console.log("获取到THEOplayer:", window.THEOplayer);
    // 执行业务逻辑
  }
});

// 监听window对象的属性变化
observer.observe(window, {
  attributes: true,
  subtree: false
});

// 设置超时断开监听
setTimeout(() => {
  observer.disconnect();
  console.log("超时未获取到THEOplayer");
}, 30000);

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