如何让Chrome扩展在新页面加载时立即生效

要让你的代码在页面加载时自动运行，核心是使用Chrome扩展的内容脚本（Content Scripts）——它能直接注入到匹配的网页中，并在页面加载阶段自动执行。具体步骤如下：

1. 配置manifest.json（Manifest V3版本） #

如果你的扩展使用Manifest V3（Chrome 88+推荐版本），修改根目录下的manifest.json，添加content_scripts字段，指定注入规则：

{
  "manifest_version": 3,
  "name": "文本自动替换工具",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 匹配所有网站，可按需改为特定域名，如"https://*.example.com/*"
      "js": ["content.js"], // 要注入的脚本文件名
      "run_at": "document_end" // DOM加载完成后立即执行，默认值"document_idle"也适用
    }
  ]
}

2. 编写内容脚本文件（content.js） #

把你的文本替换逻辑放到单独的content.js文件中，同时优化替换规则（全局替换所有"The"，而非仅第一个）：

function change() {
  const textElements = document.querySelectorAll("h1, h2, h3, h4, h5, p, li, td, caption, span, a");
  textElements.forEach(element => {
    if (element.innerHTML.includes("The")) {
      // 正则全局替换所有"The"，如需忽略大小写可改为/The/gi
      element.innerHTML = element.innerHTML.replace(/The/g, "A");
    }
  });
}

// 页面加载完成后执行替换
change();

3. 处理动态加载内容（可选） #

如果网页存在动态加载的内容（比如滚动加载、AJAX渲染），上述代码仅能处理初始DOM。要覆盖动态内容，可添加MutationObserver监听DOM变化：

function change() {
  const textElements = document.querySelectorAll("h1, h2, h3, h4, h5, p, li, td, caption, span, a");
  textElements.forEach(element => {
    if (element.innerHTML.includes("The")) {
      element.innerHTML = element.innerHTML.replace(/The/g, "A");
    }
  });
}

// 监听DOM变化，处理动态加载的内容
const observer = new MutationObserver(() => change());
observer.observe(document.body, { childList: true, subtree: true });

// 先执行一次初始替换
change();

最后一步 #

在Chrome扩展管理页面（chrome://extensions/）开启开发者模式，点击扩展的"重新加载"按钮，即可生效。

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