Bilibili-Old技术方案与部署指南：旧版界面恢复系统架构解析

Bilibili-Old技术方案与部署指南：旧版界面恢复系统架构解析

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

Bilibili-Old是一个专门用于恢复B站旧版界面的技术解决方案，通过浏览器扩展和用户脚本两种实现方式，为需要传统界面体验的用户提供完整的技术支持。该方案基于现代Web扩展技术架构，实现了对B站新版UI组件的深度替换和功能还原。

问题背景与解决方案概述

随着B站界面持续迭代更新，部分用户对旧版界面布局和交互方式存在使用习惯。Bilibili-Old项目通过分析新版B站页面结构，识别关键UI组件，并基于DOM操作和样式注入技术实现界面还原。

核心功能包括播放器样式重构、弹幕系统兼容、页面布局调整等。项目采用TypeScript开发，确保代码类型安全和维护性。系统架构分为核心层、UI层和接口层，分别处理业务逻辑、界面渲染和网络通信。

核心实现原理与技术架构

模块化架构设计

项目采用分层架构设计，主要包含以下核心模块：

• 主控制器：src/core/bilibili-old.ts 作为系统入口，负责初始化各功能模块
• UI组件系统：src/core/ui/ 目录下实现完整的自定义UI组件库
• 网络请求层：src/io/ 目录处理所有API通信和数据获取
• 页面适配器：src/page/ 目录针对不同页面类型提供专门的适配逻辑

DOM操作与样式注入机制

系统通过content script在页面加载时注入自定义样式和脚本。在chrome/manifest.json中配置的内容脚本会在document_start阶段执行，确保在B站主界面渲染前完成必要的DOM修改。

扩展权限管理

根据manifest.json配置，系统申请了必要的浏览器权限：

• storage：用于保存用户配置
• tabs：管理浏览器标签页状态
• scripting：动态执行脚本
• declarativeNetRequest：网络请求重定向

部署配置流程详解

环境准备与依赖安装

首先克隆项目仓库到本地：

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

安装项目依赖：

npm install

构建与打包流程

项目使用TypeScript编译器和相应的构建工具链。构建过程包括：

1. TypeScript代码编译为JavaScript
2. 资源文件复制和优化
3. 生成最终的可分发包

浏览器扩展部署

1. 打开Chrome浏览器，访问chrome://extensions/
2. 启用开发者模式
3. 点击"加载已解压的扩展程序"
4. 选择项目中的chrome目录完成安装

用户脚本配置

对于Tampermonkey用户，直接导入tampermonkey/main.user.js文件即可启用脚本功能。

常见使用场景与最佳实践

播放器定制场景

针对视频播放页面的定制需求，系统通过src/core/player.ts模块实现播放器组件的重写。该模块监听播放器初始化事件，在适当时机注入自定义样式和功能。

弹幕系统优化

弹幕功能在src/core/danmaku.ts中实现，包括：

• 弹幕数据解析与渲染
• 弹幕样式自定义
• 弹幕交互功能增强

性能监控与调试

系统内置了完善的监控机制，通过src/core/observer.ts模块跟踪页面加载状态和功能执行情况。

故障排查与性能优化

常见问题诊断

扩展未生效排查步骤：

1. 确认扩展已启用且无冲突
2. 检查浏览器控制台错误信息
3. 验证页面匹配规则是否正确

样式冲突解决方案：

1. 使用CSS命名空间避免样式污染
2. 实现样式优先级管理机制
3. 提供样式重置功能

性能优化策略

1. 懒加载机制：非关键功能按需加载
2. 缓存优化：合理利用浏览器缓存机制
3. 资源压缩：对静态资源进行优化处理

社区生态与发展规划

技术路线图

项目持续跟进B站界面更新，确保兼容性。主要技术方向包括：

• 适配新的API接口
• 优化资源加载性能
• 增强自定义配置能力

贡献指南

开发者可以通过以下方式参与项目：

1. 报告兼容性问题
2. 提交功能改进建议
3. 参与代码审查和测试

Bilibili-Old项目为技术爱好者提供了深入了解现代Web扩展开发的机会，通过分析项目源码可以学习到浏览器扩展开发的最佳实践。

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