1. 项目概述为什么我们需要一个“清洁”的B站作为一名重度B站用户同时也是内容创作者我几乎每天都要花几个小时泡在B站上。从追番、看科技评测到学习专业知识B站已经成了我获取信息和娱乐的核心平台。但不知道从什么时候开始我发现自己的观影体验正在被各种“杂质”侵蚀视频播放前的贴片广告、视频下方的推广卡片、评论区里时不时冒出的营销号、还有那些设计得越来越“花哨”却干扰注意力的UI元素。更别提一些UP主为了恰饭在视频中硬插入的、时长堪比正片的广告段落了。这些干扰对于只想安静看个视频的用户来说无疑是一种体验上的“噪音污染”。它们不仅打断了内容的连贯性消耗了我们的时间和注意力有时甚至会让整个页面变得杂乱不堪难以聚焦。于是我开始寻找解决方案。官方的“大会员”可以免除部分广告但无法解决所有问题比如那些UP主自主添加的推广内容、或者某些动态页面的信息流推荐。这时候一个名为Bilibili-Cleaner的项目进入了我的视野。简单来说Bilibili-Cleaner 是一个浏览器扩展脚本通常基于用户脚本管理器如 Tampermonkey 或 Violentmonkey 运行它的核心目标只有一个通过技术手段对Bilibili网页端的页面元素进行“外科手术式”的清理移除广告、推广、以及各种非必要的UI组件还用户一个极致纯净的观影和浏览环境。它不是官方出品而是由社区开发者基于对网页结构的分析编写的一系列规则集合。今天我就来深度拆解这个项目分享它的实现原理、安装使用全流程以及我在长期使用中积累的实操心得和避坑指南。2. 核心功能与实现思路拆解Bilibili-Cleaner 的功能并非魔法其背后是一套对网页文档对象模型DOM进行精确识别与操作的技术逻辑。它的实现思路可以概括为“观察-识别-移除”三部曲。2.1 功能全景它到底能清理什么在深入技术细节前我们先全景式地看看 Bilibili-Cleaner 能为我们解决哪些具体的“痛点”。根据其常见的功能列表和我的实测清理范围主要包括以下几个大类视频播放广告这是最核心的需求。包括视频播放前的贴片广告、暂停时出现的广告浮层、以及视频播放器下方可能出现的广告横幅。这些广告通常由B站服务器动态加载嵌入在播放器容器内。页面内容推广推广卡片在视频播放页面下方、推荐视频列表旁经常出现的带有“广告”、“推广”标识的卡片式内容。活动横幅/浮窗网站大型活动时页面顶部、侧边或角落出现的动态活动入口有时会遮挡部分内容。直播推广在非直播板块页面出现的直播房间推荐入口。UP主商业推广内容部分UP主会在视频中段或结尾插入自主招商的广告。Bilibili-Cleaner 的一些高级版本或规则会尝试识别这些固定片段的特征如特定的标题提示、时长、或UP主标记并提供跳过或折叠的选项。UI组件与干扰元素右侧悬浮栏包含“点赞”、“投币”、“收藏”等按钮的右侧固定工具栏有些用户希望获得更沉浸的观看体验会选择隐藏它。评论区特定内容可以过滤掉包含特定关键词如“求关注”、“互粉”的评论或者直接隐藏整个评论区。动态页“热门”等标签在动态 feed 流中移除“热门”、“活动”等非关注UP主发布的推荐内容。首页特定板块移除首页如“游戏中心”、“会员购”等商业气息较浓的板块。2.2 技术实现原理基于选择器的DOM操作Bilibili-Cleaner 的本质是一个用户脚本UserScript。它依靠 Tampermonkey 这类管理器在目标网页即B站加载完成后将脚本注入到页面中执行。其核心技术是使用 JavaScript 操作 DOM。核心步骤分解监听与等待脚本首先会监听页面的加载状态。它需要确保整个页面的DOM树已经构建完成或者目标元素已经加载到页面上才能进行后续操作。这通常通过监听DOMContentLoaded事件或使用MutationObserverAPI 来实现。MutationObserver尤其重要因为B站是单页面应用SPA页面内容通过Ajax动态更新仅仅监听初始加载是不够的必须持续观察DOM树的变化。元素识别关键这是脚本的“眼睛”。开发者需要精确找到那些代表广告和干扰元素的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 给了我们一个追求更佳浏览体验的选项但我们也应当理解平台和创作者需要生存。在享受纯净的同时不妨思考一下如何以更直接、更有效的方式支持那些为你带来快乐和知识的平台与人们。这或许才是技术向善的体现。