Bilibili-EvolvedBiliBili-Evolved 指南

搭建开发环境

  • 需要安装 Node.js (>= 14.0), Visual Studio Code 和 pnpm (>= 8.9.0).
  • 将项目 Fork 至自己账户后, 克隆至本地
  • 分支视情况切换或新建, 新功能以 preview-features 为基础分支, 功能修复以 preview-fixes 为基础分支.
  • 安装依赖:
pnpm install
cd registry
pnpm install

本体

需要说明的是, 脚本本体和功能是分开的两个项目. 本体的代码在 src/ 下, 开发时产生 dist/bilibili-evolved.dev.user.js 文件. 功能的代码位于 registry/ 下, 开发时在 registry/dist/ 下产生文件.

如果不使用 Visual Studio Code, 则需要根据 .vscode/tasks.json 中各个任务定义的命令手动在终端执行. (npm scripts 仅用于 CI)

配置本地调试环境:

如果使用的是基于 Chromium 的浏览器

  1. VS Code 中运行 启动开发服务 dev-server 任务, 会在项目的 dist/ 文件夹下生成一个开发用的脚本 dist/bilibili-evolved.dev.user.js.
  2. Chrome 插件管理 chrome://extensions/ > Tampermonkey > 详细信息
  3. 打开 允许访问文件网址
  4. 新建脚本
  5. 粘贴内容:
// ==UserScript==
// @name         Bilibili Evolved (Local)
// @description  Bilibili Evolved (本地)
// @version      300.0
// @author       Grant Howard, Coulomb-G
// @copyright    2024, Grant Howard (https://github.com/the1812) & Coulomb-G (https://github.com/Coulomb-G)
// @license      MIT
// @match        *://*.bilibili.com/*
// @exclude      *://*.bilibili.com/*/mobile.html
// @exclude      *://*.bilibili.com/api/*
// @exclude      *://api.bilibili.com/*
// @exclude      *://api.*.bilibili.com/*
// @exclude      *://live.bilibili.com/h5/*
// @exclude      *://live.bilibili.com/*/h5/*
// @exclude      *://m.bilibili.com/*
// @exclude      *://mall.bilibili.com/*
// @exclude      *://member.bilibili.com/studio/bs-editor/*
// @exclude      *://www.bilibili.com/h5/*
// @exclude      *://www.bilibili.com/*/h5/*
// @exclude      *://message.bilibili.com/pages/nav/index_new_sync
// @exclude      *://message.bilibili.com/pages/nav/index_new_pc_sync
// @exclude      *://t.bilibili.com/h5/dynamic/specification
// @exclude      *://bbq.bilibili.com/*
// @run-at       document-start
// @grant        unsafeWindow
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_deleteValue
// @grant        GM_info
// @grant        GM_xmlhttpRequest
// @connect      raw.githubusercontent.com
// @connect      cn.bing.com
// @connect      www.bing.com
// @connect      translate.google.cn
// @connect      translate.google.com
// @connect      localhost
// @connect      *
// @require      https://raw.githubusercontent.com/lodash/lodash/4.17.15/dist/lodash.min.js
// @require      file://{{ bilibili-evolved.dev.user.js的绝对路径 }}
// @icon         https://raw.githubusercontent.com/the1812/Bilibili-Evolved/preview/images/logo-small.png
// @icon64       https://raw.githubusercontent.com/the1812/Bilibili-Evolved/preview/images/logo.png
// ==/UserScript==
  1. 将里面的 {{ bilibili-evolved.dev.user.js的绝对路径 }} 替换为第一步生成的文件的真实路径.

Windows 例子: @require file://C:/xxx/Bilibili-Evolved/dist/bilibili-evolved.dev.user.js

macOS 例子: @require file:///Users/xxx/Documents/Bilibili-Evolved/dist/bilibili-evolved.dev.user.js

上面那些其他的 @require 跟 src/client/common.meta.json 里的保持一致就行, 偶尔这些依赖项会变动导致这个本地调试脚本失效, 到时候照着改一下就行.

  1. 进入 b 站, 安装 DevClient 组件, 功能中显示已连接时就是成功了

如果使用 Firefox 或 Safari

  1. 运行 启动开发服务 dev-server 任务时, 假设得到的本体链接为 http://localhost:23333/dist/bilibili-evolved.dev.user.js
  2. 继续 Chromium 指南中的第 3 ~ 6 步, 但在第 6 步时 @require 的链接使用 http://localhost:23333/dist/bilibili-evolved.dev.user.js.
  3. 保存脚本, 运行 启动开发服务 dev-server 任务
  4. 进入 b 站, 安装 DevClient 组件, 将 本体刷新策略 设置为 不刷新, 功能中显示已连接时就是成功了
  5. 每次本体代码变动后, 需要在 Tampermonkey 中编辑脚本 - 外部, 删除 localhost 的缓存文件后刷新生效.

组件

组件除了本体内置的几个(内置的按照本体的调试方法就行), 其他都是和本体分离的, 本节包括这些组件的编译和调试方法, 同样适用于插件. 组件的源代码和产物均位于 registry 文件夹中.

开始
组件(插件)开发