B站助手扩展开发指南：架构设计与功能模块解析

B站助手扩展开发指南：架构设计与功能模块解析

bilibili-helper-o 哔哩哔哩 (bilibili.com) 辅助工具，可以替换播放器、推送通知并进行一些快捷操作 项目地址: https://gitcode.com/gh_mirrors/bi/bilibili-helper-o

项目概述

B站助手是一款基于Chrome扩展技术开发的工具，旨在为B站用户提供增强型功能体验。该项目采用模块化架构设计，通过功能管理器(FeatureManager)实现各功能组件的动态加载和管理，使开发者能够高效地扩展新功能。

核心架构设计

1. 模块化架构体系

该扩展采用分层架构设计，主要包含以下核心组件：

• 功能管理器(FeatureManager)：负责所有功能模块的加载和管理
• 权限管理器(PermissionManager)：处理功能权限验证和状态管理
• UI管理器(UIManager)：负责界面元素的动态加载和渲染
• 消息存储(MessageStore)：实现跨模块通信和数据共享

这种设计使得各功能模块保持高度独立性，同时又能在统一框架下协同工作。

2. 运行流程

1. 扩展启动时，background.js通过FeatureManager加载所有注册的功能模块
2. 每个功能模块加载时会经过PermissionManager的权限验证
3. 当用户访问特定页面(如视频页)时，对应页面的入口文件会请求相关功能配置
4. UI管理器根据配置动态加载和渲染功能界面

功能开发指南

1. 基础功能开发

开发者可以通过继承基础Feature类来创建新功能模块。根据功能类型不同，开发方式也有所差异：

• 定时任务功能：参考dynamicCheck模块实现
• 带UI界面的功能：参考menu模块实现
• 需要前后端通信的功能：参考videoDownload模块实现

2. 页面功能集成

如需为特定页面添加功能并集成到统一UI中，需要：

1. 先创建类似VideoAnchor的锚点模块(容器)
2. 参考danmu模块实现UI注入逻辑

3. 权限管理

功能模块可以通过定义permissions属性来声明所需权限。例如：

• login：验证用户登录状态
• 权限状态变更时会触发Feature类的permissionHandle${PermissionName}方法

4. 国际化支持

为功能添加多语言支持时，可参考menu模块的实现方式：

1. 在模块目录下创建_locales子目录
2. 按语言分类存放翻译文本

开发环境配置

项目使用npm作为包管理工具，提供以下常用命令：

# 开发模式(带热更新和打包分析)
npm run watch

# 构建正式版
npm run build

# 构建测试版
npm run build:test

# 设置版本号(可选参数)
npm run watch --setversion=1.2.2
npm run build:test --setversion=1.2.2-beta.1

项目规范约定

为确保代码质量和可维护性，项目制定了以下开发规范：

1. 模块加载：必须通过FeatureManager加载功能
2. 开发基础：基于Feature类和UI类进行二次开发
3. 目录结构：遵循统一目录规范
4. 权限管理：使用PermissionManager统一处理
5. 国际化：模块单独维护_locales目录
6. 样式管理：使用Styled-component注入样式
7. 主题颜色：统一使用theme.color调用样式库颜色

测试策略

虽然目前测试体系尚未完全实现，但规划了以下测试方案：

单元测试

1. 目录结构验证
2. 命名规范检查
3. 功能配置测试
4. API接口测试

生产环境测试

1. 基础类(FeatureManager/Feature/UI)行为验证
2. 通过调试输出人工确认运行结果

总结

B站助手扩展项目通过清晰的架构设计和严格的开发规范，实现了功能模块的高内聚低耦合。开发者可以基于现有框架快速实现新功能，同时保证项目的可维护性和扩展性。这种设计模式特别适合需要长期迭代维护的浏览器扩展项目。

bilibili-helper-o 哔哩哔哩 (bilibili.com) 辅助工具，可以替换播放器、推送通知并进行一些快捷操作 项目地址: https://gitcode.com/gh_mirrors/bi/bilibili-helper-o