Chrome扩展中querySelector失效：YouTube页面元素获取异常求助

YouTube是单页应用（SPA），页面里的#secondary这类非首屏核心元素是动态渲染的——DOMContentLoaded事件触发时，这些元素还没被添加到DOM树里。而#logo是页面顶部的基础元素，加载时机更早，所以你的代码能成功获取到它。

针对动态加载的元素，推荐用以下两种方式处理：

方法1：使用MutationObserver（更优雅） #

监听DOM树的变化，一旦目标元素出现就执行插入操作：

function injectContent() {
  const secondary = document.querySelector('#secondary');
  if (secondary) {
    const newElement = document.createElement('div');
    newElement.innerText = 'Hello from the YouTube Element Injector!';
    secondary.insertAdjacentElement('afterbegin', newElement);
    return true;
  }
  return false;
}

// 先尝试一次，避免不必要的监听
if (!injectContent()) {
  // 监听body下的DOM变化
  const observer = new MutationObserver(() => {
    if (injectContent()) {
      observer.disconnect(); // 找到元素后停止监听
    }
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
}

方法2：使用setInterval轮询（更直观） #

每隔一段时间检查元素是否存在，找到后执行操作并停止轮询：

const checkInterval = setInterval(() => {
  const secondary = document.querySelector('#secondary');
  if (secondary) {
    const newElement = document.createElement('div');
    newElement.innerText = 'Hello from the YouTube Element Injector!';
    secondary.insertAdjacentElement('afterbegin', newElement);
    clearInterval(checkInterval); // 停止轮询
  }
}, 500); // 每隔500ms检查一次

可以在manifest.json的content_scripts里加上"run_at": "document_idle"，让脚本在页面空闲时再执行，能减少提前执行的概率，但这不能替代上面的动态监听方案：

{
    "manifest_version": 3,
    "name": "tutorial",
    "version": "1.0",
    "description": "Add text to YouTube page",
    "content_scripts": [
      {
        "js": ["content.js"],
        "matches": ["https://www.youtube.com/*"],
        "run_at": "document_idle"
      }
    ]
}

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