Bilibili-Evolved项目广告屏蔽功能的技术分析与优化

背景介绍

Bilibili-Evolved是一个针对B站网页端的用户脚本项目，主要功能包括界面美化、功能增强以及广告屏蔽等。近期用户反馈B站新增了一种右下角遮盖横幅广告，影响了用户体验。

技术分析

广告元素识别

根据用户提供的截图和HTML代码片段，可以分析出这种新型广告具有以下特征：

1. 位于页面右下角固定位置
2. 包含图片展示区域和关闭按钮
3. 采用响应式设计，适配不同屏幕尺寸
4. 使用CSS类名"palette-button-adcard"标识

广告加载机制

从代码结构来看，这类广告可能是通过B站的动态内容加载系统注入到页面中的。它们使用了现代Web技术：

• 图片采用多格式支持(avif/webp/fallback)
• 使用SVG矢量图标作为关闭按钮
• 采用CSS Flex布局实现响应式设计

解决方案

现有脚本的局限性

当前版本的Bilibili-Evolved(2.9.4)尚未包含对这种新型广告的屏蔽规则。这主要是因为：

1. 广告是近期新增的，脚本还未及时适配
2. 广告使用新的CSS类名，需要更新选择器
3. 广告位置和行为模式与之前处理的类型不同

技术实现方案

要有效屏蔽这类广告，可以考虑以下技术方案：

1. CSS选择器屏蔽：通过识别广告容器的特定类名，设置display:none属性
2. DOM监听拦截：使用MutationObserver监听DOM变化，在广告元素插入时立即移除
3. 请求拦截：分析广告资源的加载URL模式，在请求阶段就进行阻断

优化建议

对于脚本开发者，建议：

1. 建立更完善的广告元素特征库，提高识别率
2. 实现动态规则更新机制，无需等待脚本版本更新
3. 考虑用户自定义规则功能，增强灵活性

对于普通用户，可以：

1. 关注脚本的更新通知
2. 在遇到新广告时及时反馈具体信息
3. 临时使用浏览器插件辅助屏蔽

总结

Bilibili-Evolved项目通过持续的技术迭代，为用户提供更好的B站浏览体验。面对平台方不断变化的广告策略，需要开发者社区和用户的共同努力，才能保持高效的内容净化能力。这类项目也体现了开源社区在改善用户体验方面的重要价值。