Bilibili-Old：现代化技术栈重构经典B站界面解决方案

Bilibili-Old：现代化技术栈重构经典B站界面解决方案

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

Bilibili-Old是一个基于TypeScript开发的浏览器扩展项目，通过模块化架构实现Bilibili旧版界面的完整恢复。项目采用现代前端技术栈，提供Chrome扩展和Tampermonkey用户脚本两种部署方式，解决了新版B站界面复杂化带来的用户体验问题，同时保留了弹幕系统、播放器增强等核心功能的技术兼容性。

🎯 技术架构概览

Bilibili-Old采用分层架构设计，核心模块位于src/core/目录，通过TypeScript实现类型安全的组件化开发。项目主要包含以下技术组件：

• 页面转换引擎：智能检测B站页面类型并应用相应的旧版样式
• API适配层：处理新版B站API到旧版接口的兼容性转换
• 弹幕处理系统：支持protobuf、XML等多种弹幕格式
• 播放器增强模块：在经典播放器基础上集成现代编码支持

项目加载动画：经典小电视图标，象征旧版界面的恢复过程

⚙️ 快速部署指南

环境准备流程

具体操作步骤

Chrome扩展部署（完整功能）

1. 克隆项目仓库：git clone https://gitcode.com/gh_mirrors/bi/Bilibili-Old
2. 进入项目目录：cd Bilibili-Old
3. 构建Chrome扩展：npm run chrome
4. 在Chrome中打开扩展管理页面（chrome://extensions/）
5. 启用开发者模式，点击"加载已解压的扩展程序"
6. 选择构建生成的chrome/dist目录

Tampermonkey脚本部署（轻量级）

1. 安装Tampermonkey浏览器扩展
2. 构建用户脚本：npm run tampermonkey
3. 在Tampermonkey管理面板导入tampermonkey/dist/main.user.js
4. 刷新B站页面即可生效

🔧 核心功能详解

页面恢复系统

项目通过src/page/目录下的模块化处理器实现各类页面的智能转换：

• 视频页面转换（src/page/av.ts）：将新版BV页面恢复为经典av页面布局
• 番剧页面适配（src/page/bangumi.ts）：支持旧版番剧播放界面
• 搜索页面重构（src/page/search.ts）：恢复简洁的搜索结果展示
• 主页网格化（src/page/index.ts）：将瀑布流布局转换为经典网格

弹幕技术栈

弹幕系统位于src/core/danmaku.ts，提供完整的弹幕处理能力：

// 弹幕处理核心类示例 class Danmaku { // Protobuf弹幕解码 decodeProtobuf(data: Uint8Array): DanmakuItem[] // XML弹幕解析 parseXML(xml: string): DanmakuItem[] // 弹幕发送者反查 reverseLookup(crc32: number): number | null // 互动弹幕支持 handleInteractiveDanmaku(config: InteractiveConfig): void }

播放器增强模块

播放器模块（src/core/player.ts）在旧版基础上增加现代功能：

• 多编码支持：AVC、HEVC、AV1编码自动切换
• 区域限制解除：通过API代理绕过地理限制
• 分段进度条：精确的视频分段控制
• CC字幕集成：外挂字幕文件支持

API兼容层

src/io/目录包含完整的API适配系统，处理B站接口变化：

• 播放地址获取（src/io/api-playurl.ts）：统一新旧版播放地址接口
• 用户信息适配（src/io/account-getcardbymid.ts）：用户数据格式转换
• 弹幕接口封装（src/io/grpc/api-dm-web.ts）：protobuf弹幕协议处理

📊 特性优势矩阵

🚀 进阶配置技巧

自定义样式覆盖

项目支持通过CSS变量进行深度定制，在src/css/目录下创建自定义样式：

/* 自定义旧版主题 */ :root { --bili-old-primary-color: #fb7299; --bili-old-background: #f4f5f7; --bili-old-border-radius: 8px; } /* 应用到特定组件 */ .bili-old-player { background: var(--bili-old-background); border-radius: var(--bili-old-border-radius); }

性能优化配置

在src/core/storage.ts中调整缓存策略：

// 优化本地存储策略 const storageConfig = { danmakuCacheTTL: 3600, // 弹幕缓存1小时 apiResponseCache: 300, // API响应缓存5分钟 maxCachedPages: 20, // 最大页面缓存数 enableCompression: true // 启用存储压缩 };

开发环境配置

项目使用TypeScript和esbuild构建，支持热重载开发：

# 监控模式开发 npm run chrome -- --watch # 生成TypeScript类型检查 npm run tsc # 构建所有版本 npm run build:all

🔍 故障排除手册

常见问题解决方案

问题1：页面转换后样式异常

• 症状：界面元素错位或样式丢失
• 解决方案：检查浏览器缓存，强制刷新页面（Ctrl+Shift+R）
• 技术排查：查看控制台CSS冲突，调整src/css/中的样式优先级

问题2：弹幕无法显示

• 症状：视频播放正常但弹幕区域空白
• 解决方案：验证网络连接，检查protobuf解码器状态
• 技术排查：使用src/core/danmaku.ts的调试模式输出弹幕数据

问题3：播放器编码切换失败

• 症状：特定编码视频无法播放
• 解决方案：更新浏览器编解码器支持
• 技术排查：检查src/core/player.ts中的编码检测逻辑

问题4：API请求失败

• 症状：页面数据加载超时或返回错误
• 解决方案：验证B站API接口状态，检查网络代理设置
• 技术排查：查看src/io/目录下的API适配器日志

调试工具使用

项目内置调试系统位于src/utils/debug.ts：

// 启用详细日志 Debug.enable('danmaku', 'api', 'player'); // 查看特定模块状态 Debug.inspect('page-converter', { currentPage: window.location.pathname, conversionStatus: 'success', appliedStyles: 15 });

💡 最佳实践建议

性能优化策略

1. 按需加载模块：通过动态导入减少初始包体积
2. 缓存策略优化：合理设置API响应和弹幕数据的缓存时间
3. DOM操作批处理：减少页面转换时的重绘次数
4. 内存泄漏预防：及时清理事件监听器和定时器

代码维护指南

1. 模块化开发：保持src/core/中各模块的单一职责
2. 类型安全优先：充分利用TypeScript的类型系统
3. API版本管理：在src/io/中维护API变更记录
4. 测试覆盖：为关键功能添加单元测试

用户体验优化

1. 渐进式增强：确保基本功能在不支持高级特性的浏览器中可用
2. 错误友好提示：为用户提供清晰的错误信息和解决方案
3. 设置持久化：通过src/core/storage.ts保存用户偏好
4. 无障碍支持：确保旧版界面符合WCAG标准

📈 未来发展规划

技术路线图

1. Web Components迁移：将UI组件逐步迁移到标准Web Components
2. Service Worker集成：实现离线缓存和后台同步功能
3. PWA支持：提供渐进式Web应用体验
4. 跨浏览器兼容：扩展对Firefox、Safari等浏览器的支持

功能增强计划

1. 智能页面检测：基于机器学习优化页面转换准确性
2. 弹幕AI过滤：集成智能弹幕内容过滤系统
3. 播放器插件化：支持第三方播放器插件扩展
4. 数据可视化：提供用户观看习惯的数据分析面板

社区发展目标

1. 开发者文档完善：建立完整的API文档和贡献指南
2. 插件生态系统：支持第三方功能扩展开发
3. 多语言支持：国际化界面和文档
4. 性能基准测试：建立持续的性能监控体系

Bilibili-Old项目不仅是对经典界面的技术性恢复，更是对Web前端工程实践的深度探索。通过模块化架构、类型安全设计和现代化构建工具，项目展示了如何在保持向后兼容性的同时，集成现代Web技术的创新应用。

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