Bilibili-Cleaner深度解析：基于DOM操作的网页净化原理与实践

1. 项目概述：为什么我们需要一个“清洁”的B站？

作为一名重度B站用户，同时也是内容创作者，我几乎每天都要花几个小时泡在B站上。从追番、看科技评测到学习专业知识，B站已经成了我获取信息和娱乐的核心平台。但不知道从什么时候开始，我发现自己的观影体验正在被各种“杂质”侵蚀：视频播放前的贴片广告、视频下方的推广卡片、评论区里时不时冒出的营销号、还有那些设计得越来越“花哨”却干扰注意力的UI元素。更别提一些UP主为了恰饭，在视频中硬插入的、时长堪比正片的广告段落了。

这些干扰，对于只想安静看个视频的用户来说，无疑是一种体验上的“噪音污染”。它们不仅打断了内容的连贯性，消耗了我们的时间和注意力，有时甚至会让整个页面变得杂乱不堪，难以聚焦。于是，我开始寻找解决方案。官方的“大会员”可以免除部分广告，但无法解决所有问题，比如那些UP主自主添加的推广内容、或者某些动态页面的信息流推荐。这时候，一个名为Bilibili-Cleaner的项目进入了我的视野。

简单来说，Bilibili-Cleaner 是一个浏览器扩展脚本（通常基于用户脚本管理器如 Tampermonkey 或 Violentmonkey 运行），它的核心目标只有一个：通过技术手段，对Bilibili网页端的页面元素进行“外科手术式”的清理，移除广告、推广、以及各种非必要的UI组件，还用户一个极致纯净的观影和浏览环境。它不是官方出品，而是由社区开发者基于对网页结构的分析，编写的一系列规则集合。今天，我就来深度拆解这个项目，分享它的实现原理、安装使用全流程，以及我在长期使用中积累的实操心得和避坑指南。

2. 核心功能与实现思路拆解

Bilibili-Cleaner 的功能并非魔法，其背后是一套对网页文档对象模型（DOM）进行精确识别与操作的技术逻辑。它的实现思路，可以概括为“观察-识别-移除”三部曲。

2.1 功能全景：它到底能清理什么？

在深入技术细节前，我们先全景式地看看 Bilibili-Cleaner 能为我们解决哪些具体的“痛点”。根据其常见的功能列表和我的实测，清理范围主要包括以下几个大类：

1. 视频播放广告：这是最核心的需求。包括视频播放前的贴片广告、暂停时出现的广告浮层、以及视频播放器下方可能出现的广告横幅。这些广告通常由B站服务器动态加载，嵌入在播放器容器内。
2. 页面内容推广：
   • 推广卡片：在视频播放页面下方、推荐视频列表旁，经常出现的带有“广告”、“推广”标识的卡片式内容。
   • 活动横幅/浮窗：网站大型活动时，页面顶部、侧边或角落出现的动态活动入口，有时会遮挡部分内容。
   • 直播推广：在非直播板块页面出现的直播房间推荐入口。
3. UP主商业推广内容：部分UP主会在视频中段或结尾插入自主招商的广告。Bilibili-Cleaner 的一些高级版本或规则，会尝试识别这些固定片段的特征（如特定的标题提示、时长、或UP主标记），并提供跳过或折叠的选项。
4. UI组件与干扰元素：
   • 右侧悬浮栏：包含“点赞”、“投币”、“收藏”等按钮的右侧固定工具栏，有些用户希望获得更沉浸的观看体验，会选择隐藏它。
   • 评论区特定内容：可以过滤掉包含特定关键词（如“求关注”、“互粉”）的评论，或者直接隐藏整个评论区。
   • 动态页“热门”等标签：在动态 feed 流中，移除“热门”、“活动”等非关注UP主发布的推荐内容。
   • 首页特定板块：移除首页如“游戏中心”、“会员购”等商业气息较浓的板块。

2.2 技术实现原理：基于选择器的DOM操作

Bilibili-Cleaner 的本质是一个用户脚本（UserScript）。它依靠 Tampermonkey 这类管理器，在目标网页（即B站）加载完成后，将脚本注入到页面中执行。其核心技术是使用 JavaScript 操作 DOM。

核心步骤分解：

1. 监听与等待：脚本首先会监听页面的加载状态。它需要确保整个页面的DOM树已经构建完成，或者目标元素已经加载到页面上，才能进行后续操作。这通常通过监听DOMContentLoaded事件或使用MutationObserverAPI 来实现。MutationObserver尤其重要，因为B站是单页面应用（SPA），页面内容通过Ajax动态更新，仅仅监听初始加载是不够的，必须持续观察DOM树的变化。

2. 元素识别（关键）：这是脚本的“眼睛”。开发者需要精确找到那些代表广告和干扰元素的HTML节点。如何找到它们？主要依靠以下几种“特征”：

   • CSS 选择器：这是最主要的手段。通过浏览器的开发者工具（F12），我们可以审查广告元素的HTML结构，找到其独一无二的CSS类名（class）、ID 或其他属性。例如，一个推广卡片的容器可能有一个类名如.bili-video-card__spread或[class*=\"ad-\"]（类名包含“ad”）。脚本中就会包含类似document.querySelector(‘.bili-video-card__spread’)的代码来定位它。
   • 元素属性：广告元素常常带有特定的数据属性，如>问题现象可能原因解决方案脚本完全不起作用1. Tampermonkey 未启用。
     2. 脚本未启用。
     3. 脚本匹配的URL规则不包含当前B站域名。1. 检查浏览器扩展是否启用。
     2. 在Tampermonkey仪表盘检查脚本是否“已启用”。
     3. 编辑脚本，查看@match或@include元数据，是否包含*://*.bilibili.com/*。部分广告未被清除1. B站页面结构已更新，脚本规则过期。
     2. 该广告类型不在脚本清理范围内。1. 访问脚本发布页，查看是否有更新，或查看评论区。
     2. 尝试使用 uBlock Origin 等插件作为补充。
     3. 学习使用开发者工具，尝试自行定位并反馈给作者。页面布局错乱/功能缺失1. 脚本移除或隐藏了关键功能元素。
     2. 与其他脚本或浏览器扩展冲突。1. 进入脚本配置面板，关闭可能导致问题的选项（如过度隐藏UI）。
     2. 使用浏览器的“无痕模式”仅启用该脚本测试，排查冲突。脚本导致页面加载变慢脚本中的MutationObserver或定时器检查过于频繁，或规则过于复杂。1. 检查是否有脚本的多个版本同时运行，禁用重复的。
     2. 如果脚本有性能设置，尝试降低检查频率。
     3. 如果问题严重，考虑更换另一个更轻量的同类脚本。视频无法播放或报错极少数情况下，脚本可能误伤了视频播放器相关的关键元素或请求。1. 临时禁用该脚本，刷新页面，确认是否由脚本引起。
     2. 在脚本配置中关闭所有与播放器相关的修改选项。

     5.2 安全与隐私提醒

     • 来源可信：务必从 Greasy Fork、OpenUserJS 等正规平台安装脚本，并查看脚本的代码更新频率和用户评价。避免安装来源不明、要求过多权限的脚本。
     • 权限审查：安装脚本时，Tampermonkey 会显示它要求访问的网站权限。一个正常的B站清理脚本，其权限应仅限于*.bilibili.com/*。如果脚本要求访问你的所有网站（*://*/*），则需要高度警惕。
     • 账号安全：理论上，脚本可以访问和操作当前页面的所有数据，包括你输入的文本。虽然大多数开源脚本是善意的，但为安全起见，尽量避免在启用未知脚本的页面上输入密码等极度敏感信息。使用B站时，保持登录状态是安全的，但关键在于信任脚本作者。

     5.3 关于使用此类工具的伦理思考

     最后，我想分享一点个人思考。使用 Bilibili-Cleaner 这类工具，本质上是在移除平台用于盈利的广告和推广内容。

     • 对平台的影响：B站的服务器、带宽、UP主的创作激励，很大程度上依赖于广告和大会员收入。大规模使用去广告工具，从商业模型上看，确实会影响平台的收入。
     • 对UP主的影响：许多UP主的收入包含“视频激励”，这与播放量、互动量相关。去广告工具提升了你的体验，但并未直接损害UP主利益。然而，跳过UP主自主插入的广告片段，则可能直接影响其广告合作收入。
     • 个人的平衡：我个人采取的态度是“支持性使用”。我购买了B站大会员，以支持平台和正版内容。我使用清理脚本，主要目标是移除那些过度干扰、设计拙劣、与当前浏览意图完全无关的推广信息，而非剥夺平台所有盈利可能。对于我喜爱和支持的UP主，我会选择观看他们精心制作的“恰饭”内容，甚至通过“一键三连”来直接支持。

     技术是工具，如何用它，取决于我们自己的选择。Bilibili-Cleaner 给了我们一个追求更佳浏览体验的选项，但我们也应当理解平台和创作者需要生存。在享受纯净的同时，不妨思考一下如何以更直接、更有效的方式，支持那些为你带来快乐和知识的平台与人们。这或许才是技术向善的体现。