如何在站点自身JavaScript加载完内容后注入谷歌扩展的JavaScript代码

• 调整content script注入时机
  首先在扩展的manifest.json中调整content script的run_at配置，不要设置为document_start，改为document_idle或者document_end，确保基础DOM加载完成后再注入脚本，基础配置示例：

  "content_scripts": [
    {
      "matches": ["目标站点匹配规则"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ]
  

• 用MutationObserver监听DOM变化（推荐方案）
  针对动态渲染的播放器元素，直接监听DOM树的插入事件，匹配到目标播放器元素后再执行后续逻辑，不会有轮询的性能损耗，示例代码：

  // 监听body下的所有DOM变动
  const observer = new MutationObserver((mutations) => {
    const videoPlayer = document.querySelector('你要找的播放器选择器，比如video标签或对应class/id的元素');
    if (videoPlayer) {
      // 找到元素后停止监听，执行你的业务逻辑
      observer.disconnect();
      handlePlayer(videoPlayer);
    }
  });
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
  
  function handlePlayer(player) {
    // 你的播放器操作逻辑写在这里
    console.log('找到播放器元素', player);
  }
  

• 轮询兜底方案（适合临时验证逻辑）
  如果站点DOM结构复杂MutationObserver配置成本高，可以用短间隔轮询实现，注意匹配到元素后要清除定时器避免性能浪费：

  const checkPlayerTimer = setInterval(() => {
    const videoPlayer = document.querySelector('目标播放器选择器');
    if (videoPlayer) {
      clearInterval(checkPlayerTimer);
      handlePlayer(videoPlayer);
    }
  }, 300); // 间隔300ms查询，可根据实际情况调整
  

• 额外注意事项
  如果目标站点的播放器是放在shadow DOM中，常规的querySelector无法直接捕获，需要先定位到shadow root节点再查询内部元素。

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