如何通过JS实现浏览器扩展网页文本无感替换，避免原文本先加载闪现

原有代码问题说明 #

1. 第一次代码出现文本闪现是因为脚本默认注入时机太晚，执行时页面已经完成了部分内容渲染，所以会先看到原文本再被替换。
2. 第二次代码完全不生效是因为MutationObserver仅会监听观察者挂载之后发生的DOM变更，启动前已经存在的DOM内容不会被触发处理，同时缺少提前注入的配置，无法拦截初始渲染的内容。

第一步：调整扩展manifest配置 #

首先需要在manifest中配置脚本提前注入，保证代码在页面DOM开始解析前就运行，从根源避免初始内容闪现。以下为Manifest V3示例配置：

{
  "manifest_version": 3,
  "name": "文本替换工具",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_start",
      "all_frames": true
    }
  ]
}

如果使用Manifest V2版本，仅需将manifest_version字段值改为2即可，其余配置逻辑一致。

第二步：修正后的核心JS代码（content.js内容） #

const TARGET_WORD = "winter";
const REPLACEMENT_WORD = "summer";
// 全局替换正则，加g标志匹配所有出现的目标词，可按需加i开启大小写不敏感匹配
const REPLACE_REG = new RegExp(TARGET_WORD, 'g');

// 排除不需要处理的元素类型，避免破坏页面JS、CSS等可执行代码
const SKIP_TAGS = new Set(['SCRIPT', 'STYLE', 'NOSCRIPT', 'IFRAME', 'META', 'HEAD']);

// 替换指定节点内的所有符合要求的文本节点
function replaceTextInNode(node) {
  if (SKIP_TAGS.has(node.nodeName)) return;
  // 直接处理文本节点
  if (node.nodeType === Node.TEXT_NODE) {
    const originalText = node.nodeValue;
    const newText = originalText.replace(REPLACE_REG, REPLACEMENT_WORD);
    if (newText !== originalText) {
      node.nodeValue = newText;
    }
    return;
  }
  // 遍历元素节点下的所有子文本节点
  const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, null);
  let textNode;
  while (textNode = walker.nextNode()) {
    if (!SKIP_TAGS.has(textNode.parentElement.nodeName)) {
      const originalText = textNode.nodeValue;
      const newText = originalText.replace(REPLACE_REG, REPLACEMENT_WORD);
      if (newText !== originalText) {
        textNode.nodeValue = newText;
      }
    }
  }
}

// 先处理启动时已加载的DOM内容
if (document.body) {
  replaceTextInNode(document.body);
}

// 监听后续新增/修改的DOM节点，动态处理
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 处理新增节点
    mutation.addedNodes.forEach(node => {
      replaceTextInNode(node);
    });
    // 处理现有节点的文本修改场景
    if (mutation.type === 'characterData') {
      replaceTextInNode(mutation.target);
    }
  });
});

observer.observe(document.documentElement, {
  childList: true,
  subtree: true,
  characterData: true
});

核心优化说明 #

• 全量内容覆盖：先手动扫描启动时已存在的DOM内容，再用MutationObserver监听后续的节点变更，不会遗漏任何文本内容
• 异常规避：过滤了脚本、样式等特殊标签的内容，不会破坏页面原有功能
• 全局匹配：使用带g标志的正则替换所有出现的目标词，不会仅替换第一个匹配项

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