如何用代码本地访问并修改网站HTML，实现网页敏感词屏蔽？

别纠结抓取替换的思路了，直接做Chrome浏览器扩展才是解决这个问题的最优解——它能直接操作当前页面的DOM（就是你用DevTools手动修改的结构），实时处理敏感词，还能应对动态加载的内容，完全匹配你的需求。

为什么你的原有方案不可行 #

• 抓取元素文本替换：只能处理静态加载的内容，页面滚动、AJAX加载的新内容没法自动处理，而且直接操作DOM文本节点才是最直接的方式，没必要额外抓取。
• 替换整个HTML：会丢失页面的交互状态（比如输入框内容、滚动位置、已展开的菜单），用户体验极差，完全没必要这么做。

具体实现步骤（基于Chrome扩展V3） #

1. 搭建扩展基础结构 #

创建一个文件夹，里面放两个核心文件：

• manifest.json：扩展的配置文件，告诉Chrome你的扩展要执行的逻辑
• content.js：内容脚本，负责在网页中执行敏感词替换操作

2. 编写manifest.json #

{
  "manifest_version": 3,
  "name": "敏感词屏蔽工具",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 对所有网页生效
      "js": ["content.js"],
      "run_at": "document_idle" // 页面加载完成后执行
    }
  ]
}

3. 编写content.js核心逻辑 #

这里的思路和你用BeautifulSoup遍历节点类似，只不过是直接操作浏览器的DOM节点：

// 自定义敏感词列表
const sensitiveWords = ["敏感词1", "敏感词2", "敏感词3"];
// 生成全局匹配的正则
const sensitiveRegex = new RegExp(sensitiveWords.join("|"), "gi");

// 替换文本节点的函数
function replaceSensitiveText(node) {
  if (node.nodeType === Node.TEXT_NODE) {
    // 只处理纯文本节点
    const originalText = node.textContent;
    const replacedText = originalText.replace(sensitiveRegex, "***");
    if (replacedText !== originalText) {
      node.textContent = replacedText;
    }
  } else if (node.nodeType === Node.ELEMENT_NODE) {
    // 跳过不需要处理的标签（比如脚本、样式、框架）
    const skipTags = ["SCRIPT", "STYLE", "NOSCRIPT", "IFRAME"];
    if (!skipTags.includes(node.tagName)) {
      // 递归遍历子节点
      for (const child of node.childNodes) {
        replaceSensitiveText(child);
      }
    }
  }
}

// 处理初始加载的页面内容
replaceSensitiveText(document.body);

// 监听DOM变化，处理动态加载的新内容
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    mutation.addedNodes.forEach((node) => {
      replaceSensitiveText(node);
    });
  });
});

// 启动监听器，监听body下所有节点变化
observer.observe(document.body, {
  childList: true,
  subtree: true
});

4. 安装扩展测试 #

1. 打开Chrome，输入chrome://extensions/进入扩展管理页面
2. 开启右上角的「开发者模式」
3. 点击「加载已解压的扩展程序」，选择你创建的文件夹
4. 打开任意网页，测试敏感词是否被替换为***

额外优化建议 #

• 可以添加popup页面，支持随时添加/修改敏感词列表
• 可以给替换后的内容加样式（比如红色背景），把文本替换为带样式的<span>元素即可
• 若只想针对特定网站生效，修改manifest.json里的matches字段，比如只对*://*.example.com/*生效

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