如何使用MutationObserver跟踪Chrome扩展内容脚本中动态添加的节点？

核心问题分析 #

你之前的错误源于直接访问mutation.addedNodes[0]，但addedNodes可能为空（比如节点删除操作的mutation），或者首个节点并非目标div元素；另外动态加载的节点可能是容器，需要递归处理其内部的div子节点。

完整实现代码 #

// 通用函数：给单个div节点添加按钮（避免重复添加）
function addButtonToDiv(divNode) {
  if (divNode.querySelector('.custom-operation-btn')) return;
  
  const button = document.createElement('button');
  button.textContent = '操作';
  button.className = 'custom-operation-btn';
  
  // 自定义按钮逻辑示例
  button.addEventListener('click', () => {
    console.log('节点内容：', divNode.innerText);
  });
  
  divNode.appendChild(button);
}

// 批量处理指定节点下的直接div子节点
function processTargetDivs(parentNode) {
  // 使用:scope选择器确保仅处理parentNode的直接子div
  const divs = parentNode.querySelectorAll(':scope > div');
  divs.forEach(addButtonToDiv);
}

// 初始化逻辑
const targetSelector = '替换为你的目标节点选择器';
const target = document.querySelector(targetSelector);

// 先处理页面初始加载的div节点
if (target) {
  processTargetDivs(target);
}

// 配置MutationObserver
const observerConfig = {
  childList: true,    // 监听子节点的添加/删除
  subtree: true       // 监听目标节点的整个子树
};

// 观察者回调函数
const observerCallback = (mutations) => {
  mutations.forEach(mutation => {
    // 遍历所有新增节点
    mutation.addedNodes.forEach(node => {
      // 仅处理元素节点（跳过文本、注释等非元素节点）
      if (node.nodeType === Node.ELEMENT_NODE) {
        // 如果新增节点本身是div，直接处理
        if (node.tagName === 'DIV') {
          addButtonToDiv(node);
        }
        // 处理新增容器节点内的div子节点
        processTargetDivs(node);
      }
    });
  });
};

// 启动观察者
const observer = new MutationObserver(observerCallback);
if (target) {
  observer.observe(target, observerConfig);
}

关键优化点 #

• 避免重复操作：通过检查节点内是否已存在自定义按钮，防止重复添加
• 精准节点筛选：使用:scope > div仅处理目标节点的直接div子节点，避免嵌套div被误处理
• 兼容动态节点：遍历所有addedNodes，并判断节点类型，确保只处理有效元素节点；同时处理新增容器内的div子节点
• 初始节点处理：启动观察者前先处理页面已加载的节点，覆盖静态场景

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