纯JS开发Chrome扩展：无刷新加载DOM时的数据解析问题

嘿，我太懂你这个痛点了——那种靠脚本无刷新往页面插内容的电商网站，确实会把DOMContentLoaded直接废掉，毕竟这个事件只在初始页面的DOM第一次解析完成时触发一次，后续动态加载的新元素根本不会理它。给你几个纯JS的解决方案，都是我做Chrome扩展时踩坑总结出来的：

1. 最靠谱：用MutationObserver监听DOM变化 #

这是处理动态DOM的标准方案，它能实时监听DOM树的变化（比如新增节点、删除节点、属性变更），完美适配这种无刷新加载的场景。

举个具体的例子，假设你要监听body里新增的商品、分类或详情元素：

// 选择要监听的目标容器（建议尽量缩小范围，比如商品列表的父容器，别直接监听整个body，省性能）
const targetContainer = document.body;

// 配置监听规则：监听子节点的添加，并且深入到子树里
const observerConfig = { childList: true, subtree: true };

// 当DOM变化时触发的回调
const domChangeCallback = (mutations, observer) => {
  mutations.forEach(mutation => {
    // 只处理新增节点的情况
    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
      // 查找你需要的目标元素，比如商品卡片、分类链接、详情内容
      const targetElements = document.querySelectorAll('.product-card, .category-tab, .detail-section');
      
      if (targetElements.length > 0) {
        // 这里执行你的解析逻辑
        parseTargetElements(targetElements);
        
        // 如果只需要处理一次新内容，就断开监听；如果要持续监听后续的加载，就注释掉下面这行
        // observer.disconnect();
      }
    }
  });
};

// 创建观察者实例并启动监听
const domObserver = new MutationObserver(domChangeCallback);
domObserver.observe(targetContainer, observerConfig);

// 后续如果需要停止监听，调用 domObserver.disconnect();

👉 小提示：尽量把监听范围缩小到具体的容器（比如商品列表的div），不要监听整个body，这样能减少不必要的回调触发，提升性能。

2. 试试监听网站的自定义事件 #

有些电商网站在动态加载完成后，会自己触发一个自定义事件（比如contentLoaded、productUpdated之类的）。你可以试试抓这些事件：

// 监听自定义事件，名字需要你自己去网站里找
document.addEventListener('productContentUpdated', () => {
  // 此时新内容已经加载完成，直接解析就行
  const productItems = document.querySelectorAll('.product-card');
  parseTargetElements(productItems);
});

怎么找这些事件？打开Chrome开发者工具的Sources面板，搜索dispatchEvent，看看网站有没有触发自定义事件；或者在Console里输入monitorEvents(document, 'all')，然后操作页面，就能看到所有触发的事件了。

3. 兜底方案：短时间轮询（应急用，不推荐） #

如果上面两种方法都搞不定，那就用最笨但有效的轮询——每隔一段时间检查目标元素是否存在，找到后执行逻辑并停止轮询：

const checkTimer = setInterval(() => {
  const targetElements = document.querySelectorAll('.product-card');
  if (targetElements.length > 0) {
    parseTargetElements(targetElements);
    clearInterval(checkTimer); // 找到元素就停止轮询
  }
}, 200); // 每200ms检查一次，可根据页面加载速度调整

⚠️ 注意：轮询会持续消耗浏览器资源，能不用就不用，优先选前面两种方法。

另外，如果你是在Chrome扩展的content script里写的代码，记得确保脚本的注入时机是document_idle（默认就是这个），这样初始DOM加载完成后脚本才会运行，不会过早执行。

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