Chrome扩展：X.com(Twitter)注入脚本无法获取DOM元素，如何判断DOM加载完成？

X.com是单页应用（SPA），chrome.tabs.onUpdated触发的complete状态仅代表初始HTML文档加载完成，页面核心内容是通过JS异步渲染的，所以此时直接查询DOM元素大概率会失败，延迟方案不稳定也是因为异步渲染的时间没有固定标准。以下是几个可靠的解决方法：

1. 使用MutationObserver监听DOM变化（最推荐） #

通过MutationObserver监听DOM树的节点添加事件，直到目标元素出现后再执行你的逻辑，这是针对动态渲染页面最通用可靠的方案。

function waitForElement(selector, callback) {
  // 先检查当前DOM中是否已存在目标元素
  const targetElements = document.querySelectorAll(selector);
  if (targetElements.length > 0) {
    callback(targetElements);
    return;
  }

  // 创建观察者实例
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      // 只关注新增的节点
      if (mutation.addedNodes.length) {
        const targetElements = document.querySelectorAll(selector);
        if (targetElements.length > 0) {
          observer.disconnect(); // 找到元素后停止监听，避免资源浪费
          callback(targetElements);
        }
      }
    });
  });

  // 配置监听范围：监听body下所有子节点的变化
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
}

// 调用示例：等待[role="tab"]元素出现后执行逻辑
waitForElement('[role="tab"]', (tabs) => {
  // 这里处理找到的tab元素
  console.log('目标tab元素已加载：', tabs);
  // 执行你的业务逻辑
});

2. 配合Content Script的run_at配置 #

在扩展的manifest.json中，将Content Script的run_at设置为document_idle（默认值，明确配置更清晰），确保脚本在初始DOM稳定后再注入，再结合上面的MutationObserver：

{
  "content_scripts": [
    {
      "matches": ["https://x.com/*"],
      "js": ["your-injected-script.js"],
      "run_at": "document_idle"
    }
  ]
}

3. 监听X.com的内部加载事件（可选） #

X.com会在页面内容加载完成时触发一些内部事件，你可以监听这些事件来判断时机，但这种方法依赖平台实现，通用性不如MutationObserver：

// 监听DOMContentLoaded事件（初始DOM加载完成）
document.addEventListener('DOMContentLoaded', () => {
  // 再通过MutationObserver等待目标元素
  waitForElement('[role="tab"]', (tabs) => { /* 执行逻辑 */ });
});

内容的提问来源于stack exchange，提问作者dr.Xis