从零开始：手把手教你开发油猴脚本屏蔽百度广告（含完整代码解析）
从零构建你的网页净化器：油猴脚本开发实战与深度解析
你是否也曾被网页上那些不请自来的信息流、闪烁的横幅广告或是突兀的搜索框推荐所困扰？对于追求纯净浏览体验的用户来说，这些元素不仅仅是视觉上的干扰，更是对注意力的无情掠夺。作为一名技术爱好者，我们并非只能被动接受。今天，我想和你分享的，是一种将控制权夺回手中的优雅方式——通过编写自己的浏览器用户脚本，来重塑你访问的每一个网页。
这并非高不可攀的黑客技术，而是建立在现代浏览器强大扩展能力之上的实用技能。无论你是前端开发者希望深入理解DOM操作，还是对自动化感兴趣的编程爱好者，掌握这项技能都能为你打开一扇新的大门。它让你能够针对特定网站，编写几行简洁的代码，就能实现屏蔽干扰元素、增强功能、甚至自动化重复操作。接下来，我将带你从最基础的概念开始，一步步深入到脚本的架构设计、调试技巧以及高级模式，最终让你能独立创作出功能强大且稳定的个性化脚本。
1. 油猴脚本：你的浏览器“瑞士军刀”
在深入代码之前，我们有必要先理解手中的工具。油猴脚本，更正式的名称是用户脚本，是一种运行在浏览器中的小型程序。它依赖于一个名为“用户脚本管理器”的浏览器扩展（如Tampermonkey、Violentmonkey等）来加载和执行。你可以把它想象成介于浏览器和网页之间的一层“滤镜”，能够在网页加载完毕后，但尚未完全呈现给你之前，对网页的内容和结构进行修改。
为什么选择油猴脚本？
- 轻量级与高性能：脚本直接运行在浏览器环境中，无需启动额外的应用程序，对系统资源占用极小。
- 高度定制化：你可以为任何一个你常访问的网站编写专属脚本，解决特定痛点，这是通用广告拦截插件难以做到的。
- 学习成本低：核心是JavaScript和DOM API，对于有前端基础或任何编程经验的人来说，上手非常快。
- 强大的社区与生态：有Greasy Fork等脚本分享平台，可以找到成千上万现成的脚本，同时也是学习和交流的宝库。
注意：使用用户脚本应遵守目标网站的服务条款，并仅用于提升个人浏览体验、学习研究或无障碍访问等合法合规目的。尊重版权和网站运营者的合法权益是首要原则。
1.1 搭建你的开发环境
工欲善其事，必先利其器。开发油猴脚本不需要复杂的IDE，但一个合理的配置能极大提升效率。
第一步：安装用户脚本管理器这是脚本运行的引擎。以最流行的Tampermonkey为例：
- 打开你的浏览器（Chrome、Edge、Firefox等均支持）。
- 访问浏览器的官方扩展商店（如Chrome网上应用店）。
- 搜索“Tampermonkey”并点击“添加到浏览器”。
安装成功后，浏览器工具栏区域会出现Tampermonkey的图标。点击它，选择“仪表盘”，你就进入了脚本的管理界面。
第二步：配置代码编辑器任何能编辑文本的软件都可以，但我强烈推荐使用专为代码设计的编辑器，它们能提供语法高亮、代码提示等功能。例如：
- Visual Studio Code (VSCode)：免费、强大、插件生态丰富。
- Sublime Text：轻量快速。
- 甚至浏览器的开发者工具：对于快速测试和修改，直接使用浏览器自带的“源代码”面板或“Snippets”功能也非常方便。
为了获得更好的油猴脚本开发体验，你可以在VSCode中安装诸如“JavaScript (ES6) code snippets”等插件。
第三步：理解脚本的元数据块每个油猴脚本的开头，都有一个由// ==UserScript==和// ==/UserScript==包裹的注释块，这被称为“元数据块”。它告诉脚本管理器这个脚本的基本信息。一个典型的元数据块包含以下关键指令：
| 指令 | 说明 | 示例 |
|---|---|---|
@name | 脚本的名称，显示在管理器中。 | // @name 百度搜索净化器 |
@namespace | 一个唯一的命名空间，通常使用你的域名或GitHub地址。 | // @namespace https://github.com/yourname |
@version | 脚本的版本号，用于更新判断。 | // @version 1.0.0 |
@description | 对脚本功能的简要描述。 | // @description 移除百度搜索页面的广告和推荐内容 |
@author | 作者信息。 | // @author YourName |
@match | 最重要：指定脚本在哪些网址上运行。支持通配符*。 | // @match *://www.baidu.com/* |
@grant | 声明脚本需要使用的特殊油猴API权限。如无需特殊API，可设为none。 | // @grant none |
2. 核心原理：与网页的“对话”艺术
油猴脚本的核心能力，来源于浏览器提供给JavaScript的文档对象模型（DOM）接口。简单来说，DOM将整个网页结构抽象成一棵由节点（Node）构成的树。脚本可以通过这棵树，找到任何一个页面元素（如一个<div>、一个<input>），然后读取、修改甚至删除它。
2.1 定位目标元素：选择器的艺术
要修改一个元素，首先得在茫茫“DOM树海”中找到它。我们主要依靠document.querySelector和document.querySelectorAll这两个方法。它们使用CSS选择器语法，非常灵活强大。
// 通过ID选择元素（ID在页面中应是唯一的） const searchInput = document.querySelector('#kw'); // 通过类名选择元素 const adBanners = document.querySelectorAll('.ad-banner, .c-container[data-tpl]'); // 通过属性选择元素 const newsFeed = document.querySelector('[data-feed="news"]'); // 更复杂的选择器：选择id为‘content_right’的div下的所有a标签 const rightSideLinks = document.querySelectorAll('#content_right a');实战技巧：如何应对动态加载的内容？现代网页大量使用Ajax或前端框架动态加载内容。你可能会发现，脚本在页面刚加载时运行，却找不到后来才出现的广告。这时，我们需要“监听”DOM的变化。
// 使用 MutationObserver API 监听特定区域DOM的变化 const targetNode = document.getElementById('content_left'); const config = { childList: true, subtree: true }; // 监听子节点和所有后代节点的变化 const callback = function(mutationsList, observer) { for(let mutation of mutationsList) { if (mutation.type === 'childList') { // 当目标区域有新的子节点加入时，执行我们的清理函数 cleanUpAds(); } } }; const observer = new MutationObserver(callback); observer.observe(targetNode, config); // 别忘了在脚本结束时（如果需要）断开监听 // window.addEventListener('unload', () => observer.disconnect());2.2 执行时机：何时“出手”是关键
脚本执行得太早，目标元素可能还没被浏览器解析出来；执行得太晚，用户可能已经看到了干扰内容。油猴脚本默认在DOMContentLoaded事件之后执行，这通常是个好时机。但为了更保险，我们常结合多种策略：
(function() { 'use strict'; // 主清理函数 function mainCleanup() { removeSidebarAds(); hideRecommendationBox(); // ... 其他清理操作 } // 策略一：DOM加载完成后立即执行 if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', mainCleanup); } else { mainCleanup(); // 如果文档已经加载完成，直接执行 } // 策略二：针对动态内容，使用延时或轮询（简单但有效） setTimeout(mainCleanup, 1000); // 1秒后再次检查 setTimeout(mainCleanup, 3000); // 3秒后再次检查 // 策略三（推荐）：监听页面URL的hash变化或SPA路由变化（针对单页应用） // 这里以监听hashchange为例 window.addEventListener('hashchange', mainCleanup); })();3. 实战：构建一个健壮的页面净化脚本
让我们以一个更通用、更健壮的页面内容清理脚本为例，而不仅仅是清空搜索框。假设我们的目标是移除某个信息流网站侧边栏的推荐模块、文章底部的相关阅读，以及页面中所有类名为“advertisement”的元素。
3.1 架构设计：模块化与可配置
好的脚本应该易于维护和扩展。我们可以将功能拆分成独立的模块。
// ==UserScript== // @name 通用页面内容清理助手 // @namespace http://tampermonkey.net/ // @version 1.1 // @description 尝试移除页面中的广告、推荐等干扰模块 // @author You // @match *://*.example.com/* // @grant none // ==/UserScript== (function() { 'use strict'; // 配置对象：将需要清理的元素选择器集中管理，方便修改 const selectorsToRemove = { sidebarAds: [ '#right-sidebar .recommend-module', '.widget-area .ad-container', 'aside section:has(> a[href*="sponsor"])' ], contentAds: [ 'article .inline-ad', '.post-content > div[class*="ad-"]', 'a[href*="doubleclick.net"]' ], floatingElements: [ '.floating-banner', '#fixed-bottom-bar' ] }; // 工具函数：安全地移除一组元素 function removeElements(selectorArray) { selectorArray.forEach(selector => { try { document.querySelectorAll(selector).forEach(el => { console.log(`[Cleaner] 移除元素: ${selector}`); el.remove(); }); } catch (e) { console.warn(`[Cleaner] 选择器 ${selector} 执行出错:`, e); } }); } // 主清理函数 function executeCleanup() { console.log('[Cleaner] 开始执行页面清理...'); Object.values(selectorsToRemove).forEach(removeElements); console.log('[Cleaner] 页面清理完成。'); } // 执行与监听 if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', executeCleanup); } else { executeCleanup(); } // 使用MutationObserver监听body的变化，应对无限滚动等场景 const observer = new MutationObserver((mutations) => { // 简单的防抖处理，避免频繁执行 clearTimeout(window.cleanupTimer); window.cleanupTimer = setTimeout(executeCleanup, 500); }); observer.observe(document.body, { childList: true, subtree: true }); })();3.2 处理复杂情况：样式覆盖与元素隐藏
有时直接remove()元素可能会破坏页面布局或功能。这时，我们可以选择用CSS将其隐藏。
// 创建一个<style>标签来注入CSS规则 const style = document.createElement('style'); style.textContent = ` /* 隐藏所有包含特定数据属性的广告 */ div[data-ad-unit], iframe[src*="ads"] { display: none !important; height: 0 !important; visibility: hidden !important; } /* 也可以更精细地控制，比如留出空白或替换为提示 */ .ad-placeholder { background-color: #f9f9f9; border: 1px dashed #ccc; text-align: center; padding: 20px; color: #666; } `; document.head.appendChild(style); // 或者，动态地为找到的元素添加隐藏类 function hideByAddingClass() { const elements = document.querySelectorAll('.sponsored-content'); elements.forEach(el => { el.classList.add('user-script-hidden'); // 你可以在页面的样式表中预先定义 .user-script-hidden { display: none; } }); }4. 调试、发布与维护你的脚本
开发完成后，如何确保脚本在不同环境下都能稳定工作？如何分享给他人？
4.1 高效的调试技巧
- 利用浏览器开发者工具：在脚本运行的页面上按F12，在“控制台(Console)”中可以看到脚本的
console.log输出。在“源代码(Sources)”中，可以找到“Tampermonkey”目录，里面有你正在运行的脚本，可以直接设置断点调试。 - 使用
@grant GM_log：如果你想使用比console.log更强大的日志功能，可以在元数据块中声明// @grant GM_log，然后在脚本中使用GM_log(‘消息’)。这些日志可以在Tampermonkey仪表盘的“正在运行”标签页中查看。 - 异常处理：用
try...catch包裹可能出错的代码块，避免因某个选择器失效导致整个脚本崩溃。
4.2 版本管理与发布
- 更新版本号：每次对脚本进行功能修改或修复后，务必更新元数据块中的
@version。这有助于用户脚本管理器识别并提示用户更新。 - 发布到脚本平台：你可以将脚本代码上传到Greasy Fork或OpenUserJS等社区。通常需要提供一个详细的描述、更新日志，并确保代码开源（如果选择）。
- 提供安装链接：在元数据块中配置
@downloadURL和@updateURL，这样用户安装后，Tampermonkey就能自动检查并更新你的脚本。
4.3 应对网站更新
网站前端结构会变化，你的选择器可能会失效。一个健壮的脚本应该：
- 使用多种备用选择器：如果一个ID变了，也许类名或数据属性还在。
- 提供用户配置界面（进阶）：使用
GM_getValue和GM_setValueAPI，允许高级用户自己添加或修改需要屏蔽的选择器。 - 关注控制台错误：鼓励用户在脚本失效时查看控制台报错，这能为你提供修复线索。
编写油猴脚本的过程，是一个不断与网页结构“斗智斗勇”的过程，充满了探索和解决问题的乐趣。从我个人的经验来看，最实用的脚本往往源于自身最切身的浏览痛点。开始时可以从修改一两个小地方入手，比如隐藏某个烦人的按钮，成功后获得的成就感会驱动你学习更复杂的技术。别忘了多看看Greasy Fork上高星脚本的源代码，那是绝佳的学习资料。最后，保持耐心，享受这种亲手打造个性化浏览环境的创造过程吧。