Bilibili-Old终极指南：3种方式快速恢复经典B站界面

Bilibili-Old终极指南：3种方式快速恢复经典B站界面

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

Bilibili-Old是一个开源项目，专门为怀念B站经典界面的用户提供完整的界面恢复解决方案。通过浏览器扩展和用户脚本两种方式，让用户能够重新体验简洁纯粹的旧版B站布局，解决新版界面带来的操作不适问题。无论你是技术爱好者还是普通用户，都能在几分钟内完成配置，让经典B站体验回归日常使用。

技术架构：模块化设计的界面恢复引擎

Bilibili-Old采用模块化架构设计，将复杂的界面恢复功能拆分为多个独立模块，每个模块负责特定的功能恢复。这种设计不仅提高了代码的可维护性，还使得功能扩展更加灵活。

核心模块架构

播放器恢复模块src/core/player.ts - 负责将新版播放器重构为经典样式，包括控制栏布局、进度条样式和倍速调节功能。通过DOM元素重排技术，在保留现代播放技术的同时还原经典操作体验。

弹幕系统模块src/core/danmaku.ts - 恢复旧版弹幕渲染引擎，支持protobuf弹幕格式、互动弹幕和代码弹幕。该模块还实现了弹幕发送者反查、在线/本地弹幕加载等增强功能。

界面观察器模块src/core/observer.ts - 自动检测B站页面结构变化，确保恢复功能在各种页面环境下都能正常工作。这是项目稳定性的关键技术保障。

快捷键配置模块src/core/accesskey.ts - 提供可自定义的快捷键系统，用户可以根据个人习惯调整操作热键，提升操作效率。

新旧版本功能对比

Bilibili-Old加载动画 - 经典的小电视图标唤起老用户的回忆

快速上手：3种安装方式对比

方案一：浏览器扩展版（推荐给新手）

浏览器扩展方案提供零代码安装体验，适合不熟悉脚本管理的普通用户：

1. 获取项目文件：使用git clone https://gitcode.com/gh_mirrors/bi/Bilibili-Old克隆项目到本地
2. 准备扩展文件：进入项目目录的chrome文件夹
3. 安装到浏览器：在Chrome地址栏输入chrome://extensions/，开启"开发者模式"，点击"加载已解压的扩展程序"，选择chrome文件夹

💡提示：安装后若界面无变化，可按Ctrl+Shift+R强制刷新页面，确保扩展资源正确加载。

方案二：Tampermonkey用户脚本（适合技术用户）

如果你已安装Tampermonkey脚本管理器，可以通过以下步骤获得更灵活的配置：

1. 安装脚本管理器：在浏览器应用商店安装Tampermonkey扩展
2. 导入核心脚本：打开项目中的tampermonkey/main.user.js文件
3. 配置运行选项：在Tampermonkey控制台中启用Bilibili-Old脚本

这种方式支持脚本参数自定义，适合需要深度调整界面的进阶用户。

方案三：开发者构建（适合贡献者）

对于想要参与项目开发的用户，可以使用本地构建方式：

# 克隆项目 git clone https://gitcode.com/gh_mirrors/bi/Bilibili-Old cd Bilibili-Old # 安装依赖 npm install # 构建扩展版本 npm run chrome # 构建用户脚本版本 npm run tampermonkey

核心功能详解：全面恢复经典体验

播放器界面还原

Bilibili-Old的播放器恢复功能是其核心亮点。通过分析新版播放器的DOM结构，项目能够精准识别并替换关键界面元素：

• 控制栏重构：恢复经典的控制按钮布局和样式
• 进度条优化：使用熟悉的进度条设计，提升拖动精度
• 倍速调节：恢复直观的播放速度选择界面
• 画质切换：支持AVC、HEVC、AV1等多种编码格式切换

弹幕系统增强

弹幕是B站文化的核心，Bilibili-Old在恢复经典弹幕样式的同时，还增加了多项增强功能：

• protobuf弹幕支持：兼容新版弹幕协议
• 弹幕发送者反查：通过CRC32算法逆向推导弹幕发送者ID
• 互动弹幕支持：完整支持新版互动弹幕功能
• 本地弹幕加载：支持导入本地弹幕文件

页面结构恢复

项目支持恢复多种B站页面类型，包括：

• 视频播放页（av/BV号）
• 番剧播放页
• 稍后再看列表
• 全站排行榜
• 搜索页面
• 用户空间

高级定制：个性化配置指南

样式自定义

通过编辑样式配置目录中的CSS文件，用户可以深度定制界面外观：

/* 修改主色调 */ :root { --primary-color: #fb7299; /* 修改为粉色主题 */ --secondary-color: #00a1d6; } /* 调整字体大小 */ .player-controls { font-size: 14px; /* 增大控制栏字体 */ }

快捷键配置

快捷键配置模块支持全面的快捷键自定义：

功能模块开关

项目支持按需启用/禁用特定功能模块：

// 在用户脚本设置中配置 const config = { playerRestore: true, // 播放器恢复 danmakuRestore: true, // 弹幕恢复 pageRestore: true, // 页面恢复 downloadSupport: false, // 下载功能（可选） liveEnhance: true // 直播增强 };

故障排除：常见问题解决方案

界面无变化的快速排查

如果安装后B站界面未发生变化，请按以下步骤检查：

1. 确认扩展/脚本状态：在浏览器扩展管理页面查看Bilibili-Old是否启用
2. 清除缓存数据：使用Ctrl+Shift+Delete清除浏览器缓存
3. 检查页面监控：页面加载监控模块会自动检测页面结构，异常时可尝试重启浏览器

功能冲突处理

当与其他B站增强插件同时使用时，可能出现功能冲突：

解决方案：

1. 暂时禁用其他B站相关扩展，单独测试Bilibili-Old
2. 调整插件加载顺序，将Bilibili-Old设为最高优先级
3. 检查控制台错误信息，定位冲突模块

已知问题及应对

技术实现亮点：关键创新设计

DOM重排算法

Bilibili-Old采用智能DOM重排算法，能够在保持页面功能完整性的同时，精确替换界面元素。算法通过以下步骤实现：

1. 元素识别：使用CSS选择器和DOM属性识别目标元素
2. 结构分析：分析元素层级关系和依赖
3. 安全替换：在确保功能不受影响的前提下进行替换
4. 事件重绑定：重新绑定必要的事件监听器

弹幕协议兼容

项目实现了新旧弹幕协议的双向兼容：

• XML弹幕：支持传统XML格式弹幕解析
• protobuf弹幕：兼容新版protobuf压缩格式
• 混合模式：自动检测并选择合适的解析方式

性能优化策略

为了确保流畅的用户体验，项目采用了多项性能优化：

• 懒加载机制：非关键功能延迟加载
• 缓存策略：频繁访问的数据本地缓存
• 请求合并：减少网络请求次数
• 增量更新：只更新变化的界面部分

社区贡献指南：参与项目开发

开发环境搭建

1. 环境要求：

   • Node.js v16+
   • TypeScript 4.0+
   • Chrome浏览器（用于测试）

2. 项目结构：

   Bilibili-Old/ ├── src/ # 源代码目录 │ ├── core/ # 核心功能模块 │ ├── io/ # 网络接口模块 │ ├── page/ # 页面处理模块 │ └── utils/ # 工具函数 ├── chrome/ # 浏览器扩展版本 └── tampermonkey/ # 用户脚本版本

贡献流程

1. Fork项目：创建个人分支
2. 功能开发：在本地分支上实现新功能
3. 测试验证：确保功能在各种页面下正常工作
4. 提交PR：向主仓库提交合并请求
5. 代码审查：等待维护者审查并合并

测试建议

• 跨页面测试：确保功能在av/BV、番剧、搜索等不同页面正常工作
• 浏览器兼容性：测试Chrome、Edge等主流浏览器
• 性能测试：监控内存使用和加载时间
• 回归测试：确保新功能不影响现有功能

结语：让经典体验持续传承

Bilibili-Old项目不仅是一个界面恢复工具，更是对B站经典设计理念的传承。通过开源协作的方式，项目持续更新以适应B站的技术变化，让经典体验能够在现代浏览器中延续。

🚀技术展望：未来项目计划增加更多个性化定制选项，支持更多浏览器平台，并优化移动端体验。欢迎开发者加入贡献，共同维护这个为念旧者打造的实用工具。

无论你是怀念旧版界面的老用户，还是追求简洁体验的新用户，Bilibili-Old都能为你提供稳定可靠的经典B站体验。只需几分钟的安装配置，就能让那个充满回忆的B站重新回到你的日常网络生活中。

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