Chrome扩展获取Twitter主页推文失败：返回空NodeList求助

• 问题核心：Twitter是单页应用（SPA），主页内容是动态异步加载的。document_idle时机仅表示页面基础DOM结构就绪，但推文数据还没从后端拉取并渲染到页面上，所以此时执行元素查询会返回空列表。

• 解决方法1：用MutationObserver监听DOM变化
  这是最可靠的方案，能在推文元素被添加到DOM时立即捕获到。示例代码：

  // 创建DOM变化监听器
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      // 检查是否有新增节点
      if (mutation.addedNodes.length) {
        const tweets = document.querySelectorAll("[data-testid='tweetText']");
        if (tweets.length) {
          // 这里处理你的推文逻辑
          console.log('捕获到推文:', tweets);
          // 如果只需要执行一次，可在此停止监听
          // observer.disconnect();
        }
      }
    });
  });
  
  // 选择时间线的父容器（可根据实际DOM结构调整，Twitter主时间线通常在primaryColumn容器内）
  const targetContainer = document.querySelector("[data-testid='primaryColumn']") || document.body;
  // 开启监听：监听子元素变化，包括子树
  observer.observe(targetContainer, { childList: true, subtree: true });
  

• 解决方法2：延迟执行查询
  简单直接的临时方案，通过推迟查询时间给页面留足加载空间：

  setTimeout(() => {
    const tweets = document.querySelectorAll("[data-testid='tweetText']");
    console.log(tweets);
  }, 3000); // 3秒后执行，可根据实际加载速度调整时长
  

• 额外注意事项

  • 确认选择器有效性：Twitter可能会更新DOM结构和data-testid属性值，建议手动打开Chrome开发者工具（F12），检查推文文本元素的实际属性，确保选择器无误。
  • 更新匹配规则：如果当前访问的是https://x.com/home（Twitter已更名），需要把manifest中的matches改为"https://x.com/home"，避免脚本无法注入页面。

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