Chrome扩展：如何在异步脚本执行后访问ActiveTab的DOM元素？

我在开发Chrome扩展时需要注入/修改DOM元素，尝试通过监听document.readyState等待页面加载完成后操作，但目标元素（YouTube直播页面的#chips）是通过异步调用动态生成的，导致readyState为complete时仍返回null。我的content.js代码如下：

window.document.onreadystatechange = function () {
  console.log(window.document.readyState); /* "complete" */
  if (window.document.readyState === "complete") {
    console.log(window.document.getElementById('chips')); /* null */
  }
}

在控制台直接执行window.document.getElementById('chips')能正常获取元素，但上述代码不行，请问怎么在异步生成的元素加载完成后访问它？

方法1：使用MutationObserver监听DOM变化 #

这是最可靠的方式，能精准监听DOM树的变化，当目标元素出现时立即触发操作。

// 目标元素的选择器
const targetSelector = '#chips';
// 可选：指定父元素缩小监听范围，提升性能
const parentElement = document.body;

const observer = new MutationObserver((mutations) => {
  // 每次DOM变化后检查目标元素是否存在
  const targetElement = document.querySelector(targetSelector);
  if (targetElement) {
    console.log('找到目标元素:', targetElement);
    // 在这里执行你的DOM操作（注入元素、修改样式等）
    // 完成后停止监听，避免重复触发
    observer.disconnect();
  }
});

// 配置监听选项：监听子元素的添加/移除，以及子树的变化
observer.observe(parentElement, {
  childList: true,
  subtree: true
});

方法2：定时轮询检查元素 #

如果觉得MutationObserver过于复杂，也可以用简单的定时轮询，每隔一段时间检查元素是否存在：

const checkElementInterval = setInterval(() => {
  const targetElement = document.getElementById('chips');
  if (targetElement) {
    console.log('找到目标元素:', targetElement);
    // 执行你的DOM操作
    clearInterval(checkElementInterval); // 找到元素后清除定时器
  }
}, 500); // 每500毫秒检查一次，可根据实际情况调整间隔

额外提示 #

• 对于YouTube这类单页应用（SPA），页面内容可能会动态切换，若需在路由变化后重新捕获元素，可结合监听history.pushState事件，或者在页面切换时重新启动MutationObserver/轮询。
• 使用MutationObserver时，尽量指定具体的父元素而非监听整个body，减少不必要的性能消耗。

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