Chrome扩展：如何在DOM元素添加时移除元素以避免页面闪烁？

你的代码存在几处关键问题，导致无法捕获除<html>外的其他新增元素：

1. 无效的初始触发逻辑：在document_start阶段，<html>元素尚未被创建，此时调用onMutation([{ addedNodes: [document.documentElement] }])不会产生任何有效处理。
2. 未处理嵌套节点：当前逻辑只检查直接被添加的节点，若目标元素是作为子节点包含在某个父节点中被添加的，会直接被遗漏。
3. 冗余的stopped变量：该变量从未被赋值，导致后续if (stopped) observe()逻辑完全无效。

修正后的代码 #

contentScript.js #

const mo = new MutationObserver(onMutation);

// 等待<html>元素创建后再启动监听
waitForDocumentElement().then(() => {
  observe();
  // 处理已存在的DOM节点（防止脚本注入时已有部分节点加载）
  processNodes([document.documentElement]);
});

function waitForDocumentElement() {
  return new Promise(resolve => {
    if (document.documentElement) {
      resolve();
    } else {
      // 临时监听document的子节点变化，直到<html>出现
      const tempObserver = new MutationObserver(() => {
        if (document.documentElement) {
          tempObserver.disconnect();
          resolve();
        }
      });
      tempObserver.observe(document, { childList: true });
    }
  });
}

function onMutation(mutations) {
  for (const { addedNodes } of mutations) {
    processNodes(addedNodes);
  }
}

function processNodes(nodes) {
  for (const n of nodes) {
    if (!n.tagName) continue; // 跳过文本、注释等非元素节点

    // 替换为你的目标元素判断逻辑：按id/class筛选
    // 示例1：按id移除
    // if (n.id === 'your-target-id') {
    // 示例2：按class移除
    // if (n.classList.contains('your-target-class')) {
    // 示例3：移除所有DIV（原代码逻辑）
    if (n.tagName === 'DIV') {
      n.remove();
      continue; // 移除后无需再检查子节点
    }

    // 递归检查子节点，避免遗漏嵌套的目标元素
    processNodes(n.children);
  }
}

function observe() {
  mo.observe(document, {
    subtree: true,
    childList: true,
  });
}

关键优化点 #

• 等待DOM初始化：通过waitForDocumentElement确保在<html>元素存在后再启动监听，避免无效操作。
• 递归处理节点：processNodes函数会遍历当前节点的所有子节点，确保嵌套在父节点中的目标元素也能被捕获。
• 按需调整筛选逻辑：替换代码中的判断条件，即可实现按id/class精准移除或隐藏元素（若要隐藏而非移除，可将n.remove()改为n.style.display = 'none'或n.hidden = true）。
• 简化监听逻辑：移除冗余的无效代码，保证监听持续稳定运行。

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