Chrome扩展开发：监听Twitter话题区新增元素及页面切换问题

嘿，作为Chrome扩展新手遇到这种问题太正常啦，我来帮你一步步拆解解决～

一、为什么change事件监听无效？ #

change事件是专门为表单元素（比如<input>、<select>）设计的，像<ul>这种普通容器元素根本不会触发这个事件。要监听DOM元素的新增/删除，你需要用MutationObserver——这是浏览器提供的专门用来监听DOM变化的API。

实现代码示例： #

// 选中话题区域的ul（建议用更稳定的属性选择器，避免Twitter改类名）
const getTrendList = () => document.querySelector('[data-testid="trend-items"]') || document.querySelector('.trend-items');

// 定义你要执行的函数
function doMyThings() {
  console.log('新的话题li元素添加啦！');
  // 这里写你的业务逻辑，比如遍历新添加的li处理内容
}

// 创建MutationObserver实例，监听子节点变化
function setupTrendObserver() {
  const trendList = getTrendList();
  if (!trendList) return;

  // 先执行一次，处理页面已有的li
  doMyThings();

  const observer = new MutationObserver((mutations) => {
    // 遍历所有变化记录
    mutations.forEach(mutation => {
      // 如果有新节点添加
      if (mutation.addedNodes.length > 0) {
        // 检查新增的节点里是否有li元素
        const newLis = Array.from(mutation.addedNodes).filter(node => node.tagName === 'LI');
        if (newLis.length > 0) {
          doMyThings();
        }
      }
    });
  });

  // 配置监听选项：监听子节点的添加，以及子树的变化（适配嵌套结构）
  observer.observe(trendList, {
    childList: true,
    subtree: true
  });

  return observer;
}

二、解决Twitter SPA页面切换后代码不执行的问题 #

Twitter是单页应用（SPA），切换页面（比如从首页到个人主页）不会刷新整个页面，只是更新DOM和路由。这时候你的content script不会重新执行，所以需要监听路由变化，在路由切换后重新初始化监听逻辑。

常用的路由监听方法： #

// 保存原始的history方法，避免破坏原有逻辑
const originalPushState = history.pushState;
const originalReplaceState = history.replaceState;

// 重写pushState，监听路由跳转
history.pushState = function(...args) {
  const result = originalPushState.apply(this, args);
  // 路由变化后重新初始化监听
  setupTrendObserver();
  return result;
};

// 重写replaceState
history.replaceState = function(...args) {
  const result = originalReplaceState.apply(this, args);
  setupTrendObserver();
  return result;
};

// 监听浏览器前进后退的popstate事件
window.addEventListener('popstate', () => {
  setupTrendObserver();
});

三、整合代码，初始化执行 #

最后，别忘了在页面加载完成后先执行一次初始化：

// 页面加载完成后初始化监听
document.addEventListener('DOMContentLoaded', () => {
  setupTrendObserver();
});

额外提示 #

• 在Chrome扩展的manifest.json里，确保content script的注入时机设置为"run_at": "document_idle"（默认值），这样能保证DOM加载完成后再注入脚本。
• Twitter经常调整页面元素的类名，优先用带data-testid属性的选择器，比类名更稳定。

内容的提问来源于stack exchange，提问作者Pablo Gutiérrez