Bilibili-Old：技术解析与实战指南，如何解决新版B站界面不适配问题

Bilibili-Old：技术解析与实战指南，如何解决新版B站界面不适配问题

【免费下载链接】Bilibili-Old恢复旧版Bilibili页面，为了那些念旧的人。项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Old

对于习惯了经典B站界面的用户来说，新版界面的频繁更新往往带来操作习惯的颠覆性改变。Bilibili-Old作为一个开源项目，通过技术手段实现了对经典B站界面的恢复，为那些怀念旧版体验的用户提供了解决方案。本文将深入分析该项目的技术架构、实现原理，并提供详细的配置和使用指南，帮助技术爱好者和进阶用户掌握这一工具的核心价值和使用技巧。

项目核心价值与技术定位

Bilibili-Old主要面向两类用户群体：一是对技术有一定了解，能够自行安装和配置浏览器扩展或用户脚本的进阶用户；二是希望获得更稳定、更符合个人使用习惯的B站界面的普通用户。项目通过两种实现方式满足不同用户需求：基于Manifest V3的浏览器扩展和Tampermonkey用户脚本，两者都致力于恢复B站经典界面功能。

从技术角度看，该项目解决了新版B站界面带来的几个核心问题：界面布局的频繁变动导致用户学习成本增加、经典功能被隐藏或移除、个性化设置选项不足等。通过拦截和修改B站的网络请求、DOM操作和样式注入，Bilibili-Old实现了对页面结构的深度定制。

技术架构解析：如何实现界面恢复

模块化设计架构

Bilibili-Old采用高度模块化的设计，将不同功能拆分为独立的模块。核心模块位于src/core/目录下，每个模块负责特定的功能恢复：

• 播放器控制模块（src/core/player.ts）：负责恢复经典播放器布局，包括控制按钮位置、进度条样式和画质选择菜单
• 弹幕系统模块（src/core/danmaku.ts）：处理弹幕的获取、解析和显示，支持protobuf弹幕格式和本地弹幕加载
• 页面观察器模块（src/core/observer.ts）：监控页面加载状态，在适当时机注入恢复脚本
• 网络拦截模块（src/core/network-mock.ts）：拦截和修改B站的API请求，实现功能模拟和增强

页面恢复机制

项目通过多种技术手段实现页面恢复：

1. 样式注入技术：通过src/css/目录下的CSS文件，覆盖新版B站的样式定义，恢复经典视觉风格
2. DOM操作拦截：使用MutationObserver监控页面DOM变化，在关键元素加载完成后进行修改
3. API请求重写：拦截B站的网络请求，返回经过修改的数据或模拟旧版API响应
4. 事件监听系统：建立完善的事件监听机制，确保用户交互的正确响应

兼容性处理策略

考虑到B站不断更新的API和页面结构，Bilibili-Old采用了灵活的兼容性策略：

• 版本检测机制：自动检测B站页面版本，应用相应的恢复策略
• 降级处理方案：当某个功能无法完全恢复时，提供功能相近的替代方案
• 错误隔离设计：各个功能模块相互独立，单个模块的失败不会影响整体使用

安装配置指南：两种实现方式详解

浏览器扩展版安装

浏览器扩展版基于Chrome Manifest V3规范开发，提供了更稳定的运行环境和更好的性能表现。安装步骤如下：

1. 获取项目代码：

   git clone https://gitcode.com/gh_mirrors/bi/Bilibili-Old

2. 构建扩展文件： 进入项目目录后，执行构建命令：

   cd Bilibili-Old npm install npm run chrome

   构建完成后，在chrome目录下会生成扩展所需的完整文件。

3. 加载扩展程序： 在Chrome浏览器中打开chrome://extensions/，启用开发者模式，点击"加载已解压的扩展程序"，选择构建好的chrome目录。

用户脚本版配置

用户脚本版基于Tampermonkey脚本管理器，提供了更高的灵活性和自定义能力：

1. 安装脚本管理器： 在浏览器中安装Tampermonkey或Violentmonkey等用户脚本管理器。

2. 导入脚本文件： 打开tampermonkey/main.user.js文件，将其内容复制到脚本管理器的新建脚本编辑器中。

3. 配置脚本设置： 根据个人需求调整脚本的@match规则和运行参数，确保脚本在正确的域名下执行。

核心功能技术实现深度分析

播放器恢复技术实现

播放器恢复是Bilibili-Old的核心功能之一。项目通过多个技术层面实现播放器的经典布局：

DOM结构重写：src/core/player.ts文件中定义了播放器控制类的完整实现。该模块通过拦截B站播放器的初始化过程，替换原有的DOM结构，注入自定义的控制元素。关键技术点包括：

• 使用methodHook和propertyHook拦截播放器构造函数
• 通过xhrHook修改播放器配置数据的网络请求
• 动态加载CSS样式，覆盖播放器的视觉表现

画质选择机制：src/core/video-info.ts负责处理视频画质信息。该模块不仅恢复了经典的画质选择菜单，还增加了对AVC、HEVC和AV1编码的支持，以及CC字幕和分段进度条等增强功能。

弹幕系统优化方案

弹幕系统的恢复涉及多个复杂的技术挑战：

协议解析：新版B站使用protobuf格式传输弹幕数据，而旧版使用XML格式。src/core/danmaku.ts实现了两种格式的兼容处理：

• protobuf弹幕的实时解码和转换
• XML弹幕的历史数据加载支持
• 弹幕发送者信息的反查机制

显示优化：通过src/css/目录下的样式文件，调整弹幕的字体、颜色、滚动速度和显示位置，恢复经典的弹幕观看体验。

界面导航结构调整

界面导航的恢复主要通过页面级别的模块实现：

页面路由识别：src/page/目录下的各个页面模块负责识别不同的B站页面类型，并应用相应的恢复策略。例如：

• av.ts：处理视频播放页面
• bangumi.ts：处理番剧页面
• search.ts：处理搜索页面

UI组件注入：src/core/ui.ts作为主控制文件，协调各个UI组件的加载和初始化。该模块使用自定义的UI组件系统，替代B站原有的界面元素。

个性化定制与扩展开发

主题颜色自定义

用户可以通过修改CSS变量来自定义界面主题。在src/css/目录下的样式文件中，定义了大量的CSS自定义属性，允许用户调整：

• 主色调和辅助色
• 字体大小和家族
• 间距和边距设置
• 动画效果参数

快捷键操作增强

src/core/accesskey.ts文件提供了快捷键的自定义功能。用户可以根据个人习惯修改快捷键映射：

// 示例：自定义播放控制快捷键 export const customShortcuts = { playPause: 'Space', fullscreen: 'F', volumeUp: 'ArrowUp', volumeDown: 'ArrowDown' };

功能模块扩展开发

对于开发者来说，Bilibili-Old提供了良好的扩展接口。可以通过以下方式添加新功能：

1. 创建新的功能模块：在src/core/目录下添加新的TypeScript文件
2. 注册模块到主系统：在src/core/bilibili-old.ts中注册新模块
3. 配置模块依赖：确保模块在正确的时机加载和执行

常见问题诊断与解决方案

症状：安装后界面无变化

可能原因分析：

1. 浏览器缓存未正确清除
2. 扩展或脚本未正确启用
3. 页面加载监控模块工作异常

分级解决方案：

1. 基础排查：清除浏览器缓存（Ctrl+Shift+Delete），重启浏览器
2. 扩展检查：确认扩展或脚本已启用，检查控制台是否有错误信息
3. 模块诊断：检查src/core/observer.ts中的页面加载监控逻辑

症状：弹幕显示异常

可能原因分析：

1. 弹幕配置文件解析错误
2. 网络请求被拦截或修改
3. 显示样式冲突

分级解决方案：

1. 配置检查：验证danmaku/目录下的配置文件完整性
2. 网络监控：使用开发者工具检查弹幕API的请求和响应
3. 样式调试：检查src/css/相关样式文件的加载和应用情况

症状：部分功能失效

可能原因分析：

1. B站API接口更新
2. 页面结构变化
3. 功能模块兼容性问题

分级解决方案：

1. 版本检查：更新到最新版本的Bilibili-Old
2. API监控：检查src/io/目录下的API接口模块
3. 功能回退：暂时禁用相关功能模块，逐步排查问题

技术发展趋势与扩展可能性

模块化架构的优势

Bilibili-Old采用的模块化架构为其长期维护和扩展提供了良好基础。未来可能的扩展方向包括：

• 插件系统开发：允许第三方开发者创建功能插件
• 配置界面增强：提供更直观的图形化配置界面
• 多浏览器支持：扩展对Firefox、Edge等浏览器的支持

与现代Web技术的结合

随着Web技术的发展，Bilibili-Old可以考虑以下技术升级：

• Web Components应用：使用自定义元素重构UI组件
• Service Worker集成：实现离线功能和性能优化
• TypeScript严格模式：提升代码质量和类型安全

社区协作模式

开源项目的持续发展依赖于活跃的社区参与。建议建立：

• 完善的贡献指南：在.github/contributing.md中明确贡献流程
• 自动化测试体系：确保代码变更不会破坏现有功能
• 版本发布规范：建立稳定的版本发布机制

最佳实践与使用建议

开发环境配置建议

对于希望参与项目开发的用户，建议配置以下开发环境：

1. Node.js版本：使用LTS版本（建议v18或更高）
2. TypeScript配置：启用严格类型检查模式
3. 代码格式化：配置统一的代码风格检查工具
4. 构建优化：利用esbuild进行快速构建和开发热重载

生产环境部署注意事项

在实际使用中，需要注意以下事项：

1. 定期更新：关注Bilibili-Old的更新，及时获取兼容性修复
2. 备份配置：定期导出个性化配置，防止数据丢失
3. 问题反馈：遇到问题时，提供详细的复现步骤和环境信息
4. 安全考虑：仅从官方渠道获取项目代码，避免使用未经验证的修改版本

性能优化建议

为了获得最佳的使用体验，可以采取以下优化措施：

1. 按需加载模块：根据访问的页面类型动态加载所需模块
2. 缓存策略优化：合理配置本地存储和缓存机制
3. 资源压缩：启用Gzip压缩，减少网络传输量
4. 懒加载实现：对于非关键功能，采用延迟加载策略

Bilibili-Old作为一个技术驱动的开源项目，不仅解决了用户对经典B站界面的需求，更展示了现代Web技术在实际应用中的强大能力。通过深入理解其技术实现和架构设计，用户不仅可以更好地使用这一工具，还能从中学习到Web开发的最佳实践和问题解决思路。

【免费下载链接】Bilibili-Old恢复旧版Bilibili页面，为了那些念旧的人。项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Old