BiliPlus 项目教程

1. 项目目录结构及介绍

BiliPlus 项目的目录结构如下：

biliplus/
├── css/
├── img/
├── scripts/
├── settings/
├── .gitignore
├── .hintrc
├── .prettierrc
├── LICENSE
├── README.md
├── README.zh.md
├── logo.png
├── make.bat
├── makefile
├── manifest.json

目录介绍

• css/: 存放项目的样式文件。
• img/: 存放项目的图片资源。
• scripts/: 存放项目的 JavaScript 脚本文件。
• settings/: 存放项目的配置文件。
• .gitignore: Git 忽略文件，指定哪些文件或目录不需要被 Git 管理。
• .hintrc: 代码风格检查配置文件。
• .prettierrc: Prettier 代码格式化配置文件。
• LICENSE: 项目的开源许可证文件。
• README.md: 项目的英文介绍文档。
• README.zh.md: 项目的中文介绍文档。
• logo.png: 项目的 Logo 图片。
• make.bat: Windows 平台下的构建脚本。
• makefile: Linux/MacOS 平台下的构建脚本。
• manifest.json: Chrome/Edge 扩展的配置文件。

2. 项目启动文件介绍

BiliPlus 项目的启动文件主要是 manifest.json 文件。这个文件是 Chrome/Edge 扩展的核心配置文件，定义了扩展的基本信息、权限、以及启动时需要加载的脚本和样式。

manifest.json 文件内容示例

{
  "manifest_version": 3,
  "name": "BiliPlus",
  "version": "1.0.3",
  "description": "A Chrome/Edge extension to feel better in bilibili.com",
  "permissions": [
    "storage"
  ],
  "background": {
    "service_worker": "scripts/background.js"
  },
  "content_scripts": [
    {
      "matches": ["*://*.bilibili.com/*"],
      "js": ["scripts/content.js"],
      "css": ["css/content.css"]
    }
  ],
  "icons": {
    "48": "logo.png"
  }
}

启动文件介绍

• manifest_version: 指定 manifest 文件的版本，通常为 3。
• name: 扩展的名称。
• version: 扩展的版本号。
• description: 扩展的描述信息。
• permissions: 扩展所需的权限列表。
• background: 定义后台服务工作者的脚本文件。
• content_scripts: 定义在特定页面加载时注入的脚本和样式。
• icons: 定义扩展的图标。

3. 项目的配置文件介绍

BiliPlus 项目的配置文件主要集中在 settings/ 目录下。这些配置文件用于定义扩展的行为和功能。

配置文件示例

{
  "cleanHomeMode": true,
  "feedRollBack": true,
  "videoSummary": true,
  "viewerCount": true,
  "hideComments": false,
  "hideHotSearches": true,
  "videoSpeedAdjustment": true
}

配置文件介绍

• cleanHomeMode: 是否启用首页干净模式。
• feedRollBack: 是否启用首页“换一换”回溯功能。
• videoSummary: 是否启用视频封面 AI 总结功能。
• viewerCount: 是否显示视频观看人数。
• hideComments: 是否隐藏某个用户的所有评论。
• hideHotSearches: 是否隐藏搜索框中的 Bilibili 热搜。
• videoSpeedAdjustment: 是否启用无级调节视频速度功能。

这些配置文件可以通过扩展的设置界面进行修改，以满足用户的个性化需求。