一、技术背景与需求分析

百度搜索结果页面的热榜模块作为信息流产品，通过固定位置展示实时热点内容。对于开发者而言，该模块可能干扰自动化测试流程、影响数据采集效率，或导致个性化搜索结果被稀释。技术实现层面，热榜模块通过DOM元素注入和异步数据加载实现，其核心特征包括：

1. 固定CSS类名（如hotsearch-wrapper）
2. 异步AJAX请求获取数据
3. 响应式布局适配不同屏幕尺寸

二、浏览器扩展开发方案

1. Chrome扩展实现原理

通过manifest v3规范创建内容脚本，监听DOM变化并移除目标元素。关键实现步骤：

// manifest.json 配置示例
{
  "manifest_version": 3,
  "name": "百度热榜屏蔽器",
  "version": "1.0",
  "content_scripts": [{
    "matches": ["*://www.baidu.com/s*"],
    "js": ["content.js"],
    "run_at": "document_end"
  }]
}
// content.js 实现代码
const observer = new MutationObserver((mutations) => {
  const hotSearch = document.querySelector('.hotsearch-wrapper');
  if (hotSearch) {
    hotSearch.remove();
    observer.disconnect();
  }
});
observer.observe(document.body, {
  childList: true,
  subtree: true
});

2. 扩展开发要点

• 使用MutationObserver应对动态加载内容
• 配置精确的URL匹配模式
• 考虑添加开关控制功能
• 打包为CRX文件供用户安装

三、CSS注入方案

1. 用户样式表实现

通过Stylus等浏览器扩展注入CSS规则，直接隐藏目标元素：

/* 百度热榜屏蔽规则 */
#content_left .hotsearch-wrapper,
#rs .hotsearch-container {
  display: none !important;
}

2. 方案优势

• 无需JavaScript执行权限
• 资源占用极低
• 兼容所有现代浏览器
• 适用于移动端浏览器

四、HTTP请求拦截方案

1. 代理服务器实现

通过配置Nginx反向代理，修改返回的HTML内容：

location /s {
  proxy_pass https://www.baidu.com/s;
  sub_filter '<div>' '';
  sub_filter_once on;
  proxy_set_header Accept-Encoding '';
}

2. 客户端实现

使用Python的mitmproxy库编写中间件：

from mitmproxy import http
def response(flow: http.HTTPFlow) -> None:
    if "baidu.com/s" in flow.request.url:
        html = flow.response.content.decode()
        modified = html.replace(
            '<div>', 
            '<!-- 热榜模块已屏蔽 -->'
        )
        flow.response.content = modified.encode()

五、用户脚本实现

1. Tampermonkey脚本示例

// ==UserScript==
// @name         百度热榜屏蔽器
// @namespace    http://tampermonkey.net/
// @version      0.1
// @match        *://www.baidu.com/s*
// @grant        none
// ==/UserScript==
(function() {
    'use strict';
    const style = document.createElement('style');
    style.textContent = `
        .hotsearch-wrapper, .c-container-hotsearch {
            display: none !important;
        }
    `;
    document.head.appendChild(style);
    // 处理动态加载的情况
    setTimeout(() => {
        const observer = new MutationObserver(() => {
            const hotSearch = document.querySelector('.hotsearch-wrapper');
            if (hotSearch) hotSearch.remove();
        });
        observer.observe(document.body, {childList: true, subtree: true});
    }, 1000);
})();

六、方案对比与选型建议

七、高级应用场景

1. 自动化测试环境配置

在Selenium测试框架中集成屏蔽逻辑：

from selenium import webdriver
class BaiduSearchPage:
    def __init__(self, driver):
        self.driver = driver
        self.execute_js("""
            const style = document.createElement('style');
            style.textContent = '.hotsearch-wrapper { display: none !important; }';
            document.head.appendChild(style);
        """)
    def execute_js(self, script):
        self.driver.execute_script(script)

2. 移动端适配方案

针对移动浏览器，建议使用Kiwi Browser等支持扩展的移动浏览器，配合uBlock Origin等扩展实现屏蔽。

八、安全与维护建议

1. 定期检查百度DOM结构变更
2. 维护多套屏蔽规则应对更新
3. 添加版本控制管理规则文件
4. 考虑实现白名单机制

九、未来演进方向

1. 机器学习识别动态元素
2. 跨浏览器标准屏蔽方案
3. 基于浏览器API的原生支持提案
4. 社区规则共享平台建设

通过上述技术方案的实施，开发者可以灵活选择最适合自身场景的屏蔽方式。实际开发中建议采用组合方案，例如CSS注入作为基础屏蔽，配合用户脚本处理动态内容，以实现最高效的屏蔽效果。所有技术实现均符合Web标准规范，不会影响百度搜索的核心功能使用。