Bilibili-Evolved 黑名单模式失效问题分析与修复

Bilibili-Evolved 是一款功能强大的B站网页增强脚本，其中黑名单功能是用户常用的核心模块之一。近期部分用户反馈该功能在首页界面出现异常，表现为两个功能按钮缺失。本文将深入分析该问题的技术背景、原因及解决方案。

问题现象

用户在使用脚本管理器时，无论正式版还是预览版，在B站首页均发现黑名单功能的部分UI组件缺失。具体表现为界面中本应显示的两个操作按钮不可见，影响了用户对黑名单功能的使用体验。

技术背景

Bilibili-Evolved 的黑名单功能通过注入自定义UI组件实现，这些组件需要与B站原页面DOM元素正确交互。该功能依赖于：

1. 脚本管理器的API
2. 浏览器内容安全策略(CSP)的兼容处理
3. 对B站页面DOM结构的准确识别

问题根源

经过代码审查和测试，发现问题主要源于：

1. DOM选择器失效：B站前端更新导致原有CSS选择器无法准确定位目标元素
2. 异步加载冲突：首页内容动态加载机制与脚本注入时机存在竞争条件
3. 样式覆盖问题：新增的B站CSS规则意外覆盖了脚本注入的UI组件样式

解决方案

开发团队通过以下方式修复了该问题：

1. 更新DOM选择器：重写了元素定位逻辑，采用更稳健的查询方式
2. 优化注入时机：使用MutationObserver监听DOM变化，确保在正确时机注入组件
3. 增强样式隔离：为自定义UI添加特定命名空间，避免样式冲突

技术实现细节

修复方案中值得注意的技术点包括：

• 采用data-*属性作为元素标识，提高选择器稳定性
• 实现双重检查机制，既监听DOM变化也设置超时回退
• 使用隔离DOM技术增强样式隔离性
• 添加错误边界处理，确保单一组件失败不影响整体功能

用户应对措施

遇到类似问题的用户可以：

1. 更新至最新版脚本
2. 清除浏览器缓存后重试
3. 检查脚本管理器是否被浏览器扩展冲突
4. 在开发者工具中检查是否有相关错误日志

该问题的修复体现了开源社区响应迅速、协作高效的特点，也展示了现代Web扩展开发中应对动态页面变化的典型解决方案。