Chrome版本更新后content_scripts无法访问DOM元素问题求助

• 调整注入时机：默认content_scripts可能在DOM未完全渲染时执行，导致找不到元素。可以在manifest.json里把run_at设为"document_idle"或"document_end"；或者在脚本里监听DOMContentLoaded事件，等页面加载完成后再执行获取操作：

  document.addEventListener('DOMContentLoaded', () => {
    const videos = document.getElementsByTagName('video');
    // 后续逻辑
  });
  

• 排查Shadow DOM：如果目标video元素嵌套在Shadow DOM中，直接用document.getElementsByTagName无法穿透。可以遍历页面中的Shadow Root来查找：

  function findVideosInShadowDOM(root = document) {
    let videos = Array.from(root.getElementsByTagName('video'));
    Array.from(root.querySelectorAll('*')).forEach(el => {
      if (el.shadowRoot) {
        videos = videos.concat(findVideosInShadowDOM(el.shadowRoot));
      }
    });
    return videos;
  }
  const allVideos = findVideosInShadowDOM();
  

• 监听DOM动态变化：部分网站会动态加载video元素，此时可以用MutationObserver监听DOM树变化，当元素出现时再执行获取：

  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if (mutation.addedNodes.length) {
        const videos = document.getElementsByTagName('video');
        if (videos.length > 0) {
          // 处理逻辑
          observer.disconnect(); // 找到后可停止监听
        }
      }
    });
  });
  observer.observe(document.body, { childList: true, subtree: true });
  

• 验证manifest配置：检查content_scripts的matches规则是否正确覆盖目标网站，避免因匹配范围错误导致脚本未注入。
• 直接在页面控制台测试：手动执行document.getElementsByTagName('video')，确认页面确实存在video元素，排除元素本身未加载的情况。

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