Bilibili-Evolved深度实战指南：从零定制你的专属哔哩哔哩增强脚本

Bilibili-Evolved深度实战指南从零定制你的专属哔哩哔哩增强脚本【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-EvolvedBilibili-Evolved是一款以模块化为核心的哔哩哔哩增强脚本它不预装任何功能而是把下载、弹幕处理、界面改造等能力拆成一个个可独立安装的组件让技术型用户按需拼装出属于自己的B站体验。为什么值得深入研究因为它不只是开箱即用的工具更是一套完整的用户脚本工程范本——TypeScript 编写、webpack 打包、Vue 驱动界面、shadow-root 隔离样式源码里藏着大量可以迁移复用的工程实践。这篇文章将从第一小时上手一路拆解到源码级原理最后带你亲手写一个组件完成一次从使用者到开发者的完整旅程。能力速览五个关键词看懂它凭什么强大在动手之前先用五个关键词建立对项目的整体认知关键词对应能力源码落点按需装配默认零功能组件/插件/样式三种扩展随意安装卸载registry/lib/components/界面重构自定义顶栏、夜间模式、首页改版、隐藏元素等深度样式改造registry/lib/components/style/视频增强多清晰度下载、弹幕过滤与导出、字幕处理、画质切换registry/lib/components/video/动态净化动态首页关键词/类型过滤、直播信息扩充、评论区折叠registry/lib/components/feeds/工程完备生命周期管理、设置读写代理、性能追踪、文档自动生成src/core/、dev-tools/这套分层架构的核心思想是核心稳定、功能游离src/core/只做基础设施所有具体功能都被隔离到registry/中按目录分类新增一个功能基本不影响其他模块。设置面板集中管理组件开关与选项是日常使用频率最高的入口场景化上手技术用户的第一小时假设你刚装好 Tampermonkey 或 Violentmonkey接下来这一小时会经历什么第 0-5 分钟安装与初次见面。从正式版/预览版链接安装脚本后打开任意B站页面左侧边缘会浮出两个入口——功能面板和设置面板。注意一个容易误判的点全新安装的脚本实际上没有任何功能它更像一个空壳运行时这恰恰是它与其他全家桶式脚本最大的设计差异。第 5-30 分钟按需装配。打开设置面板左下角有组件/插件/样式三种管理入口支持三种添加方式批量粘贴多个直链一次性安装、浏览载入本地功能文件、在线打开在线仓库窗口。首次配置建议按这个顺序尝试先装夜间模式registry/lib/components/style/dark-mode/感受主题色全局应用的效果再装自定义顶栏registry/lib/components/style/custom-navbar/把导航重构为你习惯的布局最后装一个视频类组件如弹幕过滤体验功能级定制。第 30-60 分钟理解配置即代码。每个组件的选项都由 TypeScript 元数据声明驱动例如自定义顶栏的globalFixed全局固定、fill主题色填充、blur背景模糊、transparent透明填充等这些选项会统一渲染成设置面板里的控件无需每个组件各自写 UI。组件管理面板是按需装配模式的核心操作台支持批量与在线两种安装路径原理深潜从数据流向看脚本如何在B站页面上运转理解这个项目关键是抓住一条数据流生命周期 → 设置代理 → 组件注册 → 隔离渲染。下面按这条链路逐个拆解。第一环生命周期——代码在什么时机执行src/core/life-cycle.ts定义了四个关键节点它们决定了增强逻辑的启动顺序export enum LifeCycleEventTypes { Start be:start, StyleLoaded be:style-loaded, ComponentsLoaded be:components-loaded, End be:end, }配合headLoaded、contentLoaded、fullyLoaded三个 Promise 封装组件可以精确选择head 就绪后注入样式还是DOM 完全加载后再挂逻辑。对B站这种动态渲染的 SPA 页面src/core/observer.ts提供的 DOM 观察器会在节点变化时回调保证增强功能对异步加载的内容同样生效。第二环设置代理——一次读写处处响应src/core/settings/目录里是整套设置系统proxy.ts用 Proxy 包装设置对象任何组件通过getComponentSettings读取或修改选项时listener.ts会向所有订阅者广播变更。这意味着你在设置面板拨动一个开关正在运行的相关组件会实时响应无需刷新页面。types.ts中Settings接口统一管理components、plugins、userStyles、userComponents等区块为设置导入/导出提供了结构基础。第三环组件注册——元数据驱动一切src/components/component.ts维护全局componentsMap组件通过defineComponentMetadata/defineOptionsMetadata定义在src/components/define.ts声明名称、入口、样式、选项等元数据。注册后由install-feature.ts按需拉取代码实现用到才加载。这也是脚本性能可控的关键未启用的组件不会进入运行时。第四环隔离渲染——不改坏B站原有页面增强脚本最怕两件事污染全局样式、被B站前端框架干扰。项目的解法是src/core/shadow-root/这一整套 shadow DOM 工具ShadowDomEntry负责把组件挂载进隔离的 DOM 子树ShadowRootStyles管理样式注入配合dom-observer.ts处理动态节点。这样自定义顶栏、首页改版等重样式组件无论怎么折腾都不会泄漏影响B站原生页面。进阶实战亲手写一个可安装的本地组件理解了元数据驱动写组件就变成填空式工作。以隐藏动态页侧边卡片类的小功能为例标准骨架如下import { defineComponentMetadata, defineOptionsMetadata } from /components/define const options defineOptionsMetadata({ keyword: { defaultValue: 推广, displayName: 过滤关键词, }, }) export default defineComponentMetadata({ name: my-feed-filter, displayName: 我的动态过滤器, entry: async () { const { myFilter } await import(./my-filter) myFilter() }, options, urlInclude: [https://t.bilibili.com/*], })要点有三entry用动态 import 实现懒加载options的元数据会自动生成设置面板控件urlInclude限定生效页面。开发完成后在组件管理面板选择浏览载入本地.user.js格式的文件即可安装调试。真正的项目里registry/lib/components/feeds/filter/就是一个比这复杂得多的范本——它包含options.ts选项定义、pattern.ts匹配规则、state.ts过滤状态、plugin.ts页面插件、以及多个 Vue 面板组件适合作为深入学习组件内部分层的参考。另外dev-tools/feature-docs/会扫描各组件目录下的index.md自动生成doc/features/features.md文档所以为组件写文档是强制规范而非可选项。调优与避坑可复用的性能技巧与问题清单项目对性能要求极高README 明确给出了最低 8GB 内存、1920x1080 的配置门槛因此沉淀了不少可复用的优化经验性能优化三件套懒加载成瘾所有功能代码都走动态importsrc/core/lazy-panel.ts进一步把设置面板等重量级 UI 推迟到真正打开时才渲染观察器精准化observer.ts只监听必要的节点类型与子树避免全页面高频 MutationObserver 造成掉帧生命周期对齐样式类功能挂在headLoaded逻辑类挂contentLoaded宁可稍晚启动也不阻塞首屏。常见问题清单组件装了没效果先查urlInclude是否覆盖当前页面再确认是否被其他组件冲突如直播信息扩充与动态侧边卡片过滤的已知冲突页面卡顿优先检查是否同时启用了多个重样式组件夜间模式与首页改版都属于高开销模块调试入口src/core/utils/log.ts提供分级日志配合src/core/performance/下的component-trace.ts、plugin-trace.ts可以精确追踪每个组件/插件的耗时。生态与参与从使用者到贡献者的三条路径如果你想更进一步项目提供了清晰的参与通道贡献组件在registry/lib/components/对应分类下新建目录实现逻辑、补充index.md文档提交后由dev-tools/pr-check/自动检查元数据与文档是否合规本地二次开发克隆仓库git clone https://gitcode.com/gh_mirrors/bi/Bilibili-Evolveddev-tools/dev-server/提供带热更新的本地开发服务器registry/webpack/区分了核心、组件、插件三类构建入口翻译与文档src/components/i18n/承载多语言支持文案与文档同样是重要的贡献方向。收尾把增强脚本当成工程来读回到开头的问题——为什么技术用户值得深入研究 Bilibili-Evolved因为它用一套完整的工程化实践回答了一个常见难题如何在别人家的复杂网页上安全、高效、可维护地注入自己的改造。分层架构、元数据驱动、shadow DOM 隔离、按需加载这些概念每一个单独拿出来都能写成一篇文章而这里它们被组合成了一个可运行、可扩展的真实项目。下一步行动建议很直接先装好脚本用一周时间按需装配你的组件组合再挑一个你最常用的组件读它的源码最后照着本文的骨架写一个自己的组件。当你能在设置面板里看到自己定义的那个开关时你就真正读懂了增强脚本这三个字。关于面板是版本管理与配置备份的枢纽设置导入/导出功能值得养成定期使用的习惯【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考