Bilibili-Evolved项目广告删除功能的技术分析与优化方案

功能背景

Bilibili-Evolved是一款针对B站网页端的用户脚本工具，提供了丰富的功能扩展和界面优化选项。其中广告删除功能(removePromotions)是用户常用的核心功能之一，旨在帮助用户去除B站页面上的各类广告内容，提升浏览体验。

问题现象

在2.8.13版本中，用户反馈启用广告删除功能后，首页广告会被完全移除且不保留任何空白占位空间。这导致页面布局出现异常，特别是广告区域下方的占位文本等功能完全失效，影响了页面的整体视觉效果和功能完整性。

技术分析

问题根源

1. DOM节点处理方式不当：当前实现可能直接移除了广告相关的DOM节点，而非采用隐藏或占位处理的方式。

2. CSS样式覆盖不足：广告容器被移除后，其占用的空间未被其他元素正确填充，导致布局塌陷。

3. 动态加载机制冲突：B站页面采用动态内容加载，直接移除广告节点可能干扰了后续内容的加载逻辑。

影响范围

该问题主要影响以下方面：

• 页面布局完整性
• 广告区域下方的功能模块
• 整体用户体验一致性

解决方案

推荐修复方案

1. CSS隐藏替代DOM移除：

   • 使用display: none或visibility: hidden隐藏广告元素
   • 保留DOM结构但清空内容，维持布局占位

2. 占位元素处理：

   • 计算广告区域原始尺寸
   • 插入等高等宽的空白div作为占位

3. 响应式调整：

   • 监听窗口大小变化
   • 动态调整占位元素尺寸

实现细节

// 示例代码 - 广告隐藏与占位处理
function handleAdRemoval() {
    const adContainers = document.querySelectorAll('.bili-ad-container');
    
    adContainers.forEach(container => {
        // 记录原始尺寸
        const originalHeight = container.offsetHeight;
        const originalWidth = container.offsetWidth;
        
        // 创建占位元素
        const placeholder = document.createElement('div');
        placeholder.style.height = `${originalHeight}px`;
        placeholder.style.width = `${originalWidth}px`;
        placeholder.className = 'bili-ad-placeholder';
        
        // 替换广告容器
        container.parentNode.replaceChild(placeholder, container);
        
        // 或者采用隐藏方式
        // container.style.display = 'none';
        // container.innerHTML = '';
    });
}

最佳实践建议

1. 渐进式处理：优先尝试隐藏而非直接移除DOM节点

2. 布局稳定性：确保处理后页面布局不发生明显跳动

3. 性能考量：避免频繁的DOM操作和重排

4. 兼容性测试：覆盖不同浏览器和B站版本

用户影响

修复后用户将获得：

• 更稳定的页面布局
• 保留的功能完整性
• 更流畅的浏览体验

总结

Bilibili-Evolved的广告删除功能优化需要平衡广告去除效果与页面布局稳定性之间的关系。通过采用更精细化的DOM处理策略，可以在去除广告内容的同时，保持页面的完整功能和视觉一致性。这种解决方案既满足了用户去除广告的核心需求，又避免了因粗暴移除导致的布局问题。