AI 编程应用：写Chrome插件屏蔽搜索页面干扰内容

背景

虽然搜索工具在调整，但是还是会用到百度的，百度让人烦的一点就是右侧的热搜榜，很是让人分心。今天想到用 Claude 写个插件屏蔽一下，两次对话就弄出来了，而且插件脚本想当简单，找到百度首页的热搜样式名称，直接设置 display:none 就可以了。

需求

屏蔽百度首页及搜索结果页右侧的热搜榜模块。

文件结构

复制代码

baidu-clean-extension/
├── manifest.json        # 插件配置，声明注入规则
├── hide-hotsearch.css   # 隐藏目标元素的样式
└── content.js           # MutationObserver 兜底动态插入的节点

content.js 内容为：

javascript 复制代码

// 百度部分内容通过 JS 动态插入，CSS 可能来不及覆盖，用 MutationObserver 兜底
const SELECTORS = [
  // 首页
  '#s-hotsearch-wrapper',
  '.s-hotsearch-wrapper',
  '#s_side_wrapper',
  '.s-side-content',
  // 搜索结果页
  '#content_right',
  '[tpl="right_hot_search"]',
  '[tpl="se_com_hotsearch"]',
];

function hideElements() {
  SELECTORS.forEach(sel => {
    document.querySelectorAll(sel).forEach(el => {
      el.style.setProperty('display', 'none', 'important');
    });
  });
}

// 页面加载完成后执行一次
hideElements();

// 监听 DOM 变化，处理动态插入的节点
const observer = new MutationObserver(hideElements);
observer.observe(document.documentElement, { childList: true, subtree: true });

manifest.json 关键配置

json 复制代码

{
  "manifest_version": 3,
  "content_scripts": [{
    "matches": ["*://www.baidu.com/*"],
    "css": ["hide-hotsearch.css"],
    "js": ["content.js"],
    "run_at": "document_start"
  }]
}

run_at: "document_start" 让 CSS 在 HTML 开始解析时就注入，避免热搜内容先渲染再被隐藏的闪烁问题。

选择器覆盖范围

选择器	作用页面	说明
`#s-hotsearch-wrapper`	首页	热搜榜主容器
`#s_side_wrapper`	首页	整个右侧栏
`.s-side-content`	首页	备用
`#content_right`	搜索结果页	整个右侧栏（较粗暴）
`[tpl*="hotsearch"]`	搜索结果页	按模块 tpl 属性匹配

注意：搜索结果页的选择器是根据经验推断的，未经 DevTools 实际验证。#content_right 会隐藏整个右侧栏。如需精准屏蔽，应在 DevTools 中检查热搜容器的实际 id/class/tpl 属性后更新。

双重保险机制

CSS：静态内容，渲染前生效
MutationObserver：监听 DOM 变化，处理百度异步 JS 动态插入的节点

js 复制代码

const observer = new MutationObserver(hideElements);
observer.observe(document.documentElement, { childList: true, subtree: true });

Chrome 插件核心概念

三类脚本对比

	Content Script	Background (Service Worker)	Popup
运行环境	网页 DOM 里	独立后台，无 DOM	弹窗页面
能访问 DOM	能	不能	不能（自己的 DOM）
生命周期	页面打开时	事件驱动，按需唤醒	弹窗打开时
典型用途	修改页面内容	网络拦截、跨 tab 通信	用户交互界面

manifest.json 完整字段说明

json 复制代码

{
  "manifest_version": 3,
  "name": "插件名",
  "version": "1.0",
  "content_scripts": [{ ... }],       // 注入网页的脚本/样式
  "background": {
    "service_worker": "background.js" // 后台脚本
  },
  "action": {
    "default_popup": "popup.html"     // 点击图标弹出的 UI
  },
  "permissions": ["storage", "tabs"],
  "host_permissions": ["*://example.com/*"]
}

安装方式

打开 chrome://extensions/
开启右上角"开发者模式"
点击"加载已解压的扩展程序"，选择插件目录
修改文件后，在扩展页点刷新按钮即可生效，无需重新安装

待优化

搜索结果页选择器需用 DevTools 实际验证，目前 #content_right 过于粗暴
可在 popup.html 中加开关，允许用户临时关闭屏蔽

启示录

插件安装后，搜索效果清爽多了：

C 站的文章发布样式又改了，谁家好公司天天盯着成熟功能的 UI 做调整呀！