Bilibili-Evolved 组件化哔哩哔哩增强脚本：一次装好功能清单、启动机制与排坑全流程指南

Bilibili-Evolved 组件化哔哩哔哩增强脚本：一次装好功能清单、启动机制与排坑全流程指南

【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved

Bilibili-Evolved（下文简称 BE）是一个跑在 Tampermonkey / Violentmonkey 里的油猴增强脚本，但它的产品形态和绝大多数油猴脚本不一样：核心脚本本身不带任何功能，全部能力——夜间模式、视频下载、弹幕处理、自定义顶栏——都是以"组件 / 插件 / 样式"三种单元独立装配上去的，装不装、装哪几个完全由你自己决定。这篇文章从"装完为什么没反应"这个几乎人人会遇到的起点讲起，再给出一份按使用频率排过序的功能清单，然后拆开它决定功能何时启动、如何让互不相识的组件互相协作的两个核心机制，最后落到常见问题排查与开发者入门路线，文中所有路径都对照过源码。

装完脚本没有任何效果？先确认 Bilibili-Evolved 安装成功的三个信号

"装完什么都没发生"是这个项目最反直觉、也最多人会踩的一点：它默认不预装任何功能组件。内置的只有 7 个支撑脚本自身运转的组件（设置面板、启动栏、i18n、自动更新、版本提醒、二定位故障、兼容性处理），名单在 src/components/built-in-components.ts 里。除此之外的一切能力，都需要你手动装配。

安装与验证的步骤很短：

1. 从 README.md 给出的安装链接装正式版脚本（要求 Tampermonkey 5.0+ 或 Violentmonkey 2.18+，最新版 Chrome / Firefox）；
2. 刷新任意 B 站页面，页面左侧中央出现功能面板入口，即为注入成功；
3. 控制台输入window.bilibiliEvolved，能输出对象说明脚本已把对外 API 挂到了页面上（挂载逻辑在 src/client/init.ts）。

装功能没有任何成本，设置面板左下的"组件/插件/样式管理"给了四个入口：批量（逐行粘贴功能直链一次装完）、浏览（载入本地功能文件）、在线（打开在线仓库窗口）、底部输入框（粘贴单个直链）。装上即生效。v1 老用户不用手动搬——装v1 设置迁移组件（registry/lib/components/utils/v1-migrate/），它会自动把旧版设置里开启的功能对应的组件批量拉下来，用法见 doc/v1-migrate.md。关于面板支持设置整体导出/导入，建议把它养成升级前的固定动作。

装哪些功能不踩雷：Bilibili-Evolved 最值得装的组件清单与分类地图

全部功能收在 registry/lib/components/ 下，按feeds / live / style / touch / utils / video六大类组织。每个功能一个目录，目录结构高度统一：index.ts是元数据与入口，index.md是自动注入到设置面板的描述文档，可选的Widget.vue是设置面板里的选项组件，有的还会挂一个独立的内置插件。

按使用频率排序，真正值得优先装的集中在下面这些：

几点补充：直播相关（前后台音量、礼物盒、弹幕面板适配、去水印等）都在live/下，弹幕收发配合 src/components/live/live-socket.ts 的 WebSocket 封装；夜间模式目录里从 2018 年的遗留 CSS（old/dark-slice-*.css）到现行的分片 SCSS（dark-slice-*.scss，每片约定 1000 行左右）都有，配套一份完整的配色规范和选择器约束写在 registry/lib/components/style/dark-mode/README.md——想动夜间模式的样式，先读规范再动手，那是 2018 年"选择器写太宽泛"踩出来的教训。另外每个组件都用urlInclude / urlExclude按页面精准注入（video/danmaku/只在视频和番剧页生效），这也是它装了一堆组件也不会处处生效的原因。

功能什么时候才生效：Bilibili-Evolved 组件启动时机与加载模式选择

组件何时运行由两个文件决定：src/core/life-cycle.ts 和 src/core/loading-mode.ts，各 60 行以内，值得直接读。

life-cycle.ts把页面启动拆成三个可等待的时机：headLoaded（<head>就绪）、contentLoaded（DOMContentLoaded）、fullyLoaded（load事件），启动过程中还会向页面派发be:start→be:style-loaded→be:components-loaded→be:end四个生命周期事件。所有组件真正开始加载的开关在 src/components/component.ts 的loadAllComponents里，它读取通用设置中的加载模式：

if (generalSettings.scriptLoadingMode === LoadingMode.Delay) { fullyLoaded(() => loadComponents() ...) // "延后": 等 load 事件，不抢首屏 } else if (generalSettings.scriptLoadingMode === LoadingMode.Race) { contentLoaded(() => loadComponents() ...) // "同时": DCL 即跑，可能与 B 站原脚本竞争 }

"延后"是省首屏的选择，"同时"是换组件生效更早的选择，这个权衡被直接暴露在了设置里，用户不用读代码就能自行决定。加载阶段还有个容错设计：每个组件用Promise.allSettled单独包裹并打日志，单个组件挂了不会拖垮其余组件，控制台会打印失败组件的name和错误详情。

组件之间如何互通：Bilibili-Evolved 数据注入 API 的解耦设计

功能之间不互相 import，通信走 src/plugins/data.ts 这套数据注入 API：一方用registerData(key, ...data)交出可被修改的对象，另一方用addData(key, provider)提交修改，getData时才一次性应用。这套机制是单向累加的——只能 commit，不能 reset，provider 应用完即丢弃。

仓库里有个完整的现成案例：弹幕下载组件 registry/lib/components/video/danmaku/download/index.ts 的entry是none（组件本体什么也不跑），真正起作用的是它挂的内置插件：

addData('downloadVideo.assets', async (assets) => { assets.push({ name: 'downloadDanmaku', getAssets: ... }) })

下载视频组件并不引用它，只是往自己的downloadVideo.assets数据池取数。装上"下载弹幕"后，下载列表里凭空多出一个选项；卸载后消失。两边代码互不认识，这就是组件能独立开关而互不干扰的原因。

另一条通道是 src/plugins/hook.ts 的钩子 API（addHook/getHook，before/after 两段式）。典型用途：自动更新组件挂在userComponents.add钩子上记录安装来源——组件管理面板本身没有任何更新逻辑，它只是被外部"注入"了记录能力。

页面卡顿、面板不显示、ASS 缺弹幕？Bilibili-Evolved 常见问题排查清单

绝大多数"故障"其实是环境问题或预期行为，按现象对号入座：

"页面变卡"一行的处置比开devMode还具体：它是设置面板组件的一个选项，打开后控制台会按阶段分组打印耗时日志（形如components block time: xx ms for N items，每行是组件名 + 毫秒数 + 百分比，由 src/core/performance/stats.ts 的logStats输出）。找到占比最高的组件，调整它的加载时机或直接停用，再刷一次对比——这是逐组件剖析，比浏览器性能面板逐帧翻快得多；src/core/performance/下另有component-trace/plugin-trace/promise-trace三个追踪器分别对应组件、插件和启动阶段。

最后一条不是排坑而是装第三方组件前的审查习惯：README 隐私声明写得很直白——本仓库组件完全匿名、数据只落本地，但任何组件对用户数据都有完全访问能力。装外部来源组件前，先看它的index.md和代码里有没有可疑网络请求；仓库内网络请求统一走 src/core/ajax.ts 封装，审查面因此收窄到一处。

想写自己的功能？Bilibili-Evolved 开发服务热更新调试与组件脚手架路线

开发者路线分四步：

1. 克隆仓库：git clone https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved
2. pnpm install（registry/目录下还要再装一次依赖）
3. pnpm tsx dev-tools/dev-server/index.ts启动开发服务（默认 23333 端口）
4. 在registry/lib/components/<类别>/下建目录，index.ts用defineComponentMetadata导出元数据，index.md写描述

开发服务对http://localhost:23333/registry/dist/components/<id>.js这类链接按需编译、从内存返回，把链接粘进组件管理面板即装即调，改代码自动热更新；dev-tools/dev-server/command.ts提供单独编译、监听、脚手架等命令行操作，协议细节见 dev-tools/dev-server/README.md。跨功能协作优先走addData/addHook，提交前跑pnpm run lint-check和pnpm run type。

这套"元数据 + 懒加载 + 数据注入"的组合，为什么值得抄走

BE 真正的价值不在任何一个具体功能，而在于它把油猴脚本从"一个大文件"还原成了一套装配规则：核心层（src/core/）只管生命周期、设置、性能追踪、网络封装这类不随功能变的东西；功能全部外置成可独立装卸的单元；单元之间只通过数据池和钩子通信；连 doc/features/features.md 这份功能总览和 dev-tools/pr-check/ 的 PR 自动校验，都是生成式工具链的一部分，而不是手工维护的文档。"元数据 + 懒加载 + 数据注入"这套写法换一个站、换一个场景几乎可以原样搬走；而"组件故障隔离"和"把加载时机做成用户可选项"这两个决策，对任何跑在第三方页面上的脚本，都是直接可抄的设计。

【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved