页面动态新增文本元素时，如何重新运行扩展脚本？

我懂这种头疼的感觉——做浏览器扩展碰到这种无URL更新的动态内容（比如Facebook滚动刷feed、Youtube加载新视频），确实容易卡壳，尤其是MutationObserver看起来没报错但就是不干活的情况。我来给你拆解下可能的问题和具体解决方案：

首先，排查MutationObserver没生效的常见坑 #

• 目标节点选错了：你可能只监听了初始加载的某个小容器，但动态内容其实是加到了另一个父容器里，甚至监听的节点本身被页面脚本替换了。比如Youtube的新视频会加到#contents容器，Facebook的feed内容在div[role="feed"]里，要是没盯对地方，Observer自然啥也看不到。
• 配置选项不全：MutationObserver默认只监听目标节点本身的变化，如果你没开subtree: true，深层子节点的新增就不会被捕捉；没开childList: true，节点的添加/移除事件也不会触发——这俩是处理动态内容的核心配置，缺一不可。
• 初始化时机不对：如果你的content script在DOM还没加载完就跑了，监听的目标节点可能还不存在，Observer自然绑定失败。
• 重复替换或节点被跳过：你的文本替换逻辑可能没处理新增节点，或者不小心跳过了某些元素（比如脚本、样式节点），导致看起来没生效。

具体解决方案：正确实现MutationObserver #

下面给你一套经过验证的代码模板，适配Chrome和Firefox，能处理大部分动态加载场景：

第一步：编写文本替换核心函数 #

先写一个安全的替换函数，避免重复处理节点，也跳过脚本、样式这类不需要替换的内容：

function replaceTextInNode(node) {
  // 跳过非文本节点、脚本/样式节点，以及已经处理过的节点
  if (node.nodeType !== Node.TEXT_NODE 
      || ['SCRIPT', 'STYLE'].includes(node.parentElement.tagName)
      || node.parentElement.dataset.textReplaced === 'true') {
    return;
  }

  // 这里替换你的自定义过滤规则，比如把"旧文本"换成"新文本"
  node.textContent = node.textContent.replace(/旧文本/g, '新文本');

  // 给父节点打标记，避免重复替换
  node.parentElement.dataset.textReplaced = 'true';
}

第二步：批量处理节点的工具函数 #

不管是初始页面内容还是新增的动态节点，都用这个函数统一处理，还能兼容Shadow DOM（比如某些现代网站会用）：

function processNodes(nodes) {
  nodes.forEach(node => {
    if (node.nodeType === Node.ELEMENT_NODE) {
      // 处理Shadow DOM里的内容
      if (node.shadowRoot) {
        processNodes(Array.from(node.shadowRoot.childNodes));
      }
      // 遍历当前元素的所有子节点
      node.childNodes.forEach(replaceTextInNode);
    } else if (node.nodeType === Node.TEXT_NODE) {
      replaceTextInNode(node);
    }
  });
}

第三步：初始化MutationObserver #

确保在DOM加载完成后绑定Observer，监听整个页面的节点变化（如果性能有要求，可以换成具体的父容器）：

function initTextReplacementObserver() {
  // 监听整个body，覆盖所有动态内容场景；也可以换成具体的容器，比如Youtube的#contents
  const targetNode = document.body;
  const observerConfig = {
    childList: true,  // 监听子节点的添加/移除
    subtree: true     // 监听所有后代节点的变化
    // 如果需要监听属性变化（比如某些文本通过属性更新），可以加attributes: true
  };

  const mutationCallback = (mutationsList) => {
    for (const mutation of mutationsList) {
      // 只处理新增节点的情况
      if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
        processNodes(Array.from(mutation.addedNodes));
      }
    }
  };

  // 创建并启动Observer
  const observer = new MutationObserver(mutationCallback);
  observer.observe(targetNode, observerConfig);

  // 页面初始加载时，先处理一遍现有内容
  processNodes([document.body]);
}

// 确保DOM加载完成后初始化，兼容不同页面的加载状态
if (document.readyState === 'complete' || document.readyState === 'interactive') {
  initTextReplacementObserver();
} else {
  document.addEventListener('DOMContentLoaded', initTextReplacementObserver);
}

第四步：调试技巧 #

如果还是没生效，用这些方法排查：

• 在mutationCallback里加console.log(mutationsList)，看看有没有捕捉到新增节点的变化。如果没有，检查目标节点是不是选对了。
• 打开浏览器控制台，确认你的content script已经正确注入到页面（可以加个console.log('文本替换脚本已加载')验证）。
• 检查网站是否用了Shadow DOM，要是有的话，确保你的processNodes函数已经处理了shadow root。

最后注意事项 #

• 有些网站会有防篡改机制，可能会重置文本内容，这时候你可能需要调整替换时机，或者监听属性变化（比如textContent的变化）。
• 尽量避免监听document.documentElement（整个HTML节点），性能开销会比较大，优先用具体的父容器。

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