Bilibili-Evolved 哔哩哔哩增强脚本完整指南：从 10 分钟装好到自定义组件开发

Bilibili-Evolved 哔哩哔哩增强脚本完整指南从 10 分钟装好到自定义组件开发【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved项目定位这款哔哩哔哩增强脚本解决什么问题Bilibili-Evolved下文简称 BE是一款运行在 Tampermonkey / Violentmonkey 里的哔哩哔哩增强脚本它本身不带任何功能页面的所有定制能力都以组件 / 插件 / 样式三种可独立开关的单元按需装配。它针对的矛盾很具体B 站的页面结构、顶栏内容、下载产物的编码格式用户说了不算而市面上多数脚本要么功能写死、要么一崩全崩。BE 用一套核心层保证稳定、组件层承载功能的架构把增强能力拆成可独立安装的积木。本文按定位 → 安装 → 架构分层 → 核心机制 → 典型场景 → 性能开销 → 排坑 → 进阶扩展的顺序展开文中路径均可在仓库中直接对照源码。快速上手10 分钟安装路径与验证方法前提条件浏览器为最新版 Chrome110或 Firefox140Safari 仅理论上可运行官方未测试脚本管理器为 Tampermonkey 5.0 或 Violentmonkey 2.18Greasemonkey 与 AdGuard 明确不兼容已登录 B 站账号脚本默认不对未登录状态做适配。最短安装路径装好脚本管理器后从仓库 README 的安装表格挑一个正式版直链jsDelivr 源或 GitHub 源安装刷新任意 B 站页面页面左侧中央出现功能面板与设置面板的悬浮入口打开设置面板 → 左下的组件 / 插件 / 样式管理用批量逐行粘贴功能直链、浏览载入本地功能文件、在线打开在线仓库窗口或底部输入框粘贴单个链接任选一种方式安装功能。验证方法打开控制台输入window.bilibiliEvolved有对象输出即代表脚本成功注入——该对象在src/client/init.ts的启动流程中挂载到页面上同时页面左侧应能看到悬浮入口。一个必须建立的反直觉认知全新安装的脚本一个功能都没有。src/components/built-in-components.ts中只内置了设置面板、启动栏、自动更新等 7 个基础组件其余全部能力都要手动装配这是装完没反应这一类问题最常见的根源。v1 老用户可装v1 设置迁移组件registry/lib/components/utils/v1-migrate/自动把旧版设置对应的新组件批量拉下来。架构全景这个项目的四层结构BE 的源码按职责切成四层理解这个切分方式比背功能清单更有用。核心层src/core/不面向具体页面功能负责脚本的运行环境——life-cycle.ts提供headLoaded/contentLoaded/fullyLoaded三个可等待的页面时机settings/是一套完整的设置读写系统shadow-root/处理 Shadow DOM 隔离ajax.ts统一封装网络请求performance/下是性能追踪器。它是所有组件共享的地基改动频率最低。组件层registry/lib/components/功能主体按feeds / live / style / touch / utils / video六大类组织每个功能一个目录统一由index.ts元数据与入口、index.md自动注入设置面板的描述文档和可选的Widget.vue设置选项面板构成。src/components/则存放随脚本分发的内置组件设置面板、启动栏等与registry下的用户组件物理分离。插件层src/plugins/与registry/lib/plugins/提供组件之间的互通扩展点核心是data.ts的数据注入 API 与hook.ts的代码注入 API具体插件如启动栏的多种搜索源registry/lib/plugins/launch-bar/、按键映射扩展registry/lib/plugins/utils/都挂在这一层。文档与工具层dev-tools/、webpack/、doc/dev-server/是开发服务按需编译 热更新 WebSocket 控制面pr-check/校验 PR 的元数据与文档一致性feature-docs/从源码 AST 自动生成doc/features/里的功能文档——功能清单不是手写的而是构建产物。核心机制拆解元数据驱动与数据注入机制一元数据契约 按组件隔离的启动管线是什么每个组件不是一段执行代码而是一份声明式契约。defineComponentMetadata里声明name、entry启动函数、reload/unload热插拔钩子、urlInclude生效页面范围、options设置项、widget设置面板组件核心层据此统一调度无需读取任何组件内部实现。为什么这样设计脚本管理器装的是几十个独立来源的代码块任何一个都可能因 B 站改版而崩溃。契约化让核心层能回答这个组件能不能在这条 URL 上跑、挂了怎么回收、设置面板长什么样这三个问题而隔离崩溃则靠启动管线的容错实现。代码里怎么落地src/components/component.ts中整批组件用Promise.allSettled包裹加载单个组件失败只记录名称与错误不中断管线启动时机则由加载模式二选一决定const results await Promise.allSettled(components.map(loader)) results.forEach((result, index) { if (result.status rejected) { console.error(message, { componentName: components[index].name, error: result.reason, }) } })if (generalSettings.scriptLoadingMode LoadingMode.Delay) { fullyLoaded(() loadComponents()) // 延后等 load 事件不抢首屏资源 } else if (generalSettings.scriptLoadingMode LoadingMode.Race) { contentLoaded(() loadComponents()) // 同时DCL 即跑可能与 B 站原脚本竞争 }设计要点在于故障隔离与启动时机都被做成了显式的、用户可配置的策略而不是隐藏在时序里的隐含行为。机制二单向数据注入池——组件互通不靠 import是什么功能之间不互相引用代码而是通过src/plugins/data.ts的全局数据池通信接收方用registerData(key, ...data)交出可被修改的对象提供方用addData(key, provider)提交修改getData时被一次性应用。为什么这样设计如果下载组件直接 import 弹幕下载组件卸载后者时前者就报错了。数据注入把依赖关系从编译期引用降级为运行时可选增量——提供方装上不装接收方拿到的是空池或满池两侧代码互不认识。代码里怎么落地provider 采用惰性求值addData在registerData之前或之后调用都合法provider 在getData时批量执行且每个只执行一次执行完立即丢弃export const addData (key: string, provider: PluginDataProvider) { if (pluginDataMap.has(key)) { const { providers, loaded, data } pluginDataMap.get(key) if (loaded) { provider(...data) } else { providers.push(provider) } } else { pluginDataMap.set(key, { registered: false, data: [], loaded: false, providers: [provider], }) } }完整案例下载视频组件的registry/lib/components/video/download/DownloadVideo.vue用registerAndGetData(downloadVideo.assets, [])建立资产池弹幕下载组件registry/lib/components/video/danmaku/download/index.ts的内置插件则往同一个 key 里addData推送一个下载弹幕资产。装上它下载列表里多一个选项卸载选项消失。整条通路上没有一行 import 指向对方。典型使用场景四个高频需求及其入口从结构地图落到使用地图BE 的能力最终收敛到几类高频需求上。整理动态流与首页动态区入口在registry/lib/components/feeds/filter/按类型或关键词过滤动态内容并可移除侧边卡片注意若同时启用了直播信息扩充正在直播板块需先关掉才生效。想要更彻底的改造则上registry/lib/components/style/home-redesign/内含fresh与minimal两套重构方案前者把信息流重排成卡片布局后者偏极简。顶栏可被registry/lib/components/style/custom-navbar/整条替换内部拆成home / search / user-info / settings等 15 子模块支持透明填充与主题色 Logo。下载视频与弹幕registry/lib/components/video/download/直接对接 B 站 DASH 流可单独下载音频、分别指定视频与普通 / FLAC 音频的扩展名dashCodecFallback默认回退到 AVC 以保证下游播放器能识别部分环境解不了 HEVC / AV1。弹幕相关能力被拆成registry/lib/components/video/danmaku/下的airborne / converter / download / expand / merger / unescape六个子模块覆盖过滤、展开、下载与格式转换且如上节所述下载弹幕是挂在下载组件资产池上的增量选项。外观与夜间模式夜间模式registry/lib/components/style/dark-mode/是最老也最重的组件目录里从 2018 年的遗留 CSSold/dark-slice-*.css到现行的分片 SCSSdark-slice-*.scss并存README.md内附完整的配色 Mixin 规范与选择器约束——改样式前读它能避免重蹈早期选择器过宽泛的老路。直播间增强直播相关功能集中在registry/lib/components/live/前后台音量front-back-volume/、礼物盒子gift-box/、弹幕面板拖拽适配chat-panel-fit/、去水印remove-watermark/等弹幕收发依赖src/components/live/live-socket.ts的 WebSocket 封装。性能与资源开销官方配置要求与自查瓶颈的方法README 对性能的措辞很直接这个是一个综合性的脚本对性能有较大影响。最低配置为8GB 内存、1920x1080 分辨率、Chrome 110 / Firefox 140、i5-10500 / R5 3600 级别处理器、10MB/s 网络推荐配置则到 32GB 内存、4K 分辨率。对只想下载一个视频的用户官方建议直接去找更专用的脚本而不是装整个 BE。项目自带了一套完整的瓶颈自查工具无需借助浏览器性能面板逐帧分析在设置面板开启开发者模式settingsPanel组件的devMode选项刷新后控制台会按阶段输出分组日志每行是组件名 毫秒数 占总耗时百分比由src/core/performance/stats.ts的logStats输出形如components block time: xx ms for N itemssrc/core/performance/component-trace.ts对每个组件分别记录启动耗时entry 执行到返回 Promise与解析耗时Promise settle能区分初始化慢和异步依赖慢同目录下plugin-trace与promise-trace分别追踪插件加载和启动阶段的关键 Promise。定位到耗时大户后的处置只有两条路把它的启动时机切到延后加载模式不与 B 站原脚本抢 DCL 时机或干脆停用。装得克制是这台增强引擎长期流畅的前提。常见问题高频坑位速答为什么装完脚本页面没有任何变化这是设计如此默认不预装任何功能组件。进设置面板的组件管理安装所需功能装完刷新页面即可。为什么 Greasemonkey / AdGuard 里跑不起来官方兼容性清单明确这两者不兼容套壳浏览器也不保证。换最新版 Chrome / Firefox 配 Tampermonkey 或 Violentmonkey并确认已登录 B 站。弹出脚本试图访问跨域资源是什么用链接安装组件、或把下载任务发往外部服务器时的已知提示属于正常的跨域操作。确认来源后可信后选始终允许避免每次重复弹窗。页面明显变卡怎么办先开devMode看控制台的分组件耗时日志锁定大户将其加载模式改为延后或停用同时确认机器满足 8GB 内存 / 1080p 的最低配置线。升级到新版后旧设置或功能出问题官方策略是新版正式发布后不再对旧版提供技术支持因此升级前应先在关于面板导出设置备份必须留在旧版时参考 doc/rollback.md 的回退指南。下载的 ASS 弹幕文件里少了部分内容预期行为ASS 格式弹幕下载不包含高级弹幕、字幕弹幕等类型文档已明确标注不是 bug。安装第三方来源的组件安全吗仓库自带的组件/插件完全匿名、数据只落本地但任何组件都对用户数据拥有完全访问能力。装外部组件前看它的index.md与源码网络请求统一走src/core/ajax.ts封装便于审查。进阶定制与扩展按角色选路线日常用户只做三件事装下载、夜间模式这类高频组件并保持克制把关于面板里的设置导出当成升级前的固定动作关注 CHANGELOG新版本发布后及时跟进因为旧版不再受支持。重度用户多读两份源码src/core/life-cycle.ts和src/core/loading-mode.ts各只有六行以内读完就能准确回答我的组件到底在页面哪个时机启动再配合性能日志调整每个组件的加载时机要动手改样式的先读 registry/lib/components/style/dark-mode/README.md 的分片规范与配色 Mixin再碰dark-slice-*文件。想写功能的开发者路径如下克隆仓库git clone https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved然后根目录pnpm install进入registry/再pnpm install本体与组件是两套依赖pnpm tsx dev-tools/dev-server/index.ts启动开发服务默认 23333 端口本体会编译出dist/bilibili-evolved.dev.user.jsChromium 系浏览器需按 CONTRIBUTING 指南把该文件file://引用进本地调试脚本再安装DevClient组件确认连接新组件在registry/lib/components/类别/下建目录index.ts用defineComponentMetadata导出元数据index.md写描述开发服务对registry/dist/components/id.js按需编译并从内存返回产物把链接粘进组件管理面板即装即调改代码自动热更新dev-tools/dev-server/command.ts提供build单独编译、watch监听、create脚手架等命令跨功能协作优先走addData/addHook而不是 import提交前跑pnpm run lint-check与pnpm run type。BE 把油猴脚本从一个成品还原成了一套装配规则核心层收敛变更风险组件层承载全部功能插件层负责互通连功能文档和 PR 检查dev-tools/pr-check/都是生成式工具链的产物。它真正可迁移的东西不是某个具体功能而是元数据契约 按组件故障隔离 单向数据注入 内置性能剖析这一整套工程化组合——换一个站点、换一个浏览器扩展场景这套写法几乎可以原样搬走。【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考