检测getElementsByClassName()集合大小变化的Chrome扩展问题

错误原因 #

你代码里的问题主要有两个：

1. document.getElementsByClassName("myClassName")返回的是HTMLCollection（类数组的节点集合），不是单个DOM节点，直接用它访问childList属性会得到undefined，而MutationObserver.observe的第一个参数必须是合法的DOM节点，这就是报错的根源。
2. 就算拿到了单个节点，你也不该传f.childList给observe，第一个参数应该是你要监听的节点本身，而不是它的属性。

修正后的实现代码 #

假设你要监听的是动态更新列表的父容器（优先选离目标列表最近的、不会被替换的节点；如果找不到稳定父节点，也可以用document.body，但尽量用更靠近的父节点减少性能开销），示例代码如下：

// 找到稳定的父节点（比如列表的外层容器）
const targetParent = document.querySelector('.list-parent');
// 找不到稳定父节点时的备选方案
// const targetParent = document.body;

// 处理DOM变化的回调函数
function handleMutations(mutations) {
  mutations.forEach(mutation => {
    // 遍历所有新增的节点
    mutation.addedNodes.forEach(node => {
      // 检查当前节点是否是目标元素
      if (node.classList?.contains('myClassName')) {
        // 这里写你的HTML替换逻辑
        node.innerHTML = '<div>替换后的内容</div>';
      }
      // 如果目标元素是新增节点的子元素，递归检查处理
      else if (node.querySelectorAll) {
        const targetNodes = node.querySelectorAll('.myClassName');
        targetNodes.forEach(target => {
          target.innerHTML = '<div>替换后的内容</div>';
        });
      }
    });
  });
}

// 初始化MutationObserver
const observer = new MutationObserver(handleMutations);
// 配置监听规则：监听子节点变化，同时监听后代节点（如果需要）
observer.observe(targetParent, {
  childList: true,
  subtree: true // 目标元素可能出现在深层子节点时开启
});

// 初始化时处理页面已存在的目标节点
const existingTargets = targetParent.querySelectorAll('.myClassName');
existingTargets.forEach(target => {
  target.innerHTML = '<div>替换后的内容</div>';
});

更优实践建议 #

• 优先监听最近的稳定父节点：不要直接监听document.body，否则页面所有DOM变化都会触发回调，增加不必要的性能消耗。找到包含动态列表、且自身不会被删除/替换的父容器，只监听它的变化。
• 避免重复处理：给已经处理过的节点加标记（比如data-processed="true"），下次回调里跳过已标记节点，避免重复执行替换逻辑。
• 调试用console.log代替alert：alert会阻塞页面，调试时用控制台输出更友好。

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