首页 / 资讯中心 / 文章详情

从空壳到定制:Bilibili-Evolved 如何让你决定哔哩哔哩长什么样

从空壳到定制:Bilibili-Evolved 如何让你决定哔哩哔哩长什么样 ★ FEATURED ARTICLE
从空壳到定制Bilibili-Evolved 如何让你决定哔哩哔哩长什么样【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-EvolvedBilibili-Evolved 是一个运行在 Tampermonkey / Violentmonkey 里的哔哩哔哩增强脚本它本身不内置任何功能页面顶栏改不改、下载什么编码、弹幕怎么存全由你按需装配的组件决定。装完它的第一反应通常是什么都没发生——页面该什么样还什么样只有一个悬浮入口安静地停在屏幕左侧。这不是安装失败而是它最核心的设计决策核心层只当空壳能力全部外挂在仓库的 registry/lib/components/ 里装不装、装哪些由你拍板。上图是设置面板左下组件/插件/样式管理区域有四个入口批量逐行粘贴功能直链一次装完、浏览载入本地功能文件、在线打开在线仓库窗口和底部输入框粘贴单个链接安装。核心自带的组件只有 7 个列在 src/components/built-in-components.ts设置面板、启动栏、自动更新、新版纳入提示、二分定位器等——它们负责管理功能这件事本身而不是功能。想确认脚本真的注入了打开控制台看window.bilibiliEvolved是否存在它是在 src/client/init.ts 里挂上unsafeWindow的对外 API。内核层管什么谁决定组件何时醒来整个脚本的启动编排集中在 src/client/init.ts等head就绪 → 打兼容性补丁 → 解析用户组件 → 预载样式 → 加载组件 → 收尾预取api.bilibili.com的 DNS。src/core/life-cycle.ts 把页面就绪拆成三个可等待的时机——headLoaded、contentLoaded即DOMContentLoaded、fullyLoadedload事件——并在启动过程中向页面派发be:start→be:style-loaded→be:components-loaded→be:end四个事件第三方代码可以监听它们决定自己的插入点。组件的总开关在 src/components/component.ts 的loadAllComponents里它读通用设置scriptLoadingMode只有两个值定义在 src/core/loading-mode.tsif (generalSettings.scriptLoadingMode LoadingMode.Delay) { fullyLoaded(() loadComponents()) // 延后等 load 事件不与页面抢资源 } else if (generalSettings.scriptLoadingMode LoadingMode.Race) { contentLoaded(() loadComponents()) // 同时DCL 即跑可能和 B 站原脚本竞争 }说白了这是把组件什么时候醒来做成了用户可调的旋钮怕拖慢首屏就选延后要组件更早生效就选同时不用读代码就能权衡。隔离性同样写死在调度里每个组件的加载都走Promise.allSettled包裹挂掉的组件只在控制台留下自己的 name 和错误不会传染给其余组件。能力层怎么读一个功能 一个目录 一份元数据所有可装的功能按feeds / live / style / touch / utils / video六大类平铺在 registry/lib/components/约定统一index.ts用defineComponentMetadata声明身份name、标签、选项、生效 URL 范围index.md写人类可读的描述需要交互的再挂一个Widget.vue。两个小样本能说明元数据能表达多少东西。签到助手 registry/lib/components/utils/check-in-center/index.ts 的entry是空函数none全部逻辑在 widget 里且condition返回Boolean(getUID())——没登录就不渲染组件代码本身不用写任何登录判断。夜间模式 registry/lib/components/style/dark-mode/ 则是最老的组件目录里躺着 2018 年的遗留 CSSold/dark-slice-*.css和现行的分片 SCSSregistry/lib/components/style/dark-mode/README.md 里把当年选择器写太宽泛的教训和现在的配色 Mixin 规范都写成了文档改样式前值得先读一遍。下载组件的选项定义registry/lib/components/video/download/index.ts展示了配置字段 ↔ 类型的闭环四个选项各带defaultValue和displayNamedashCodecFallback默认回退到 AVC因为部分播放环境解不了 HEVC/AV1回退后能保证你下下来的 DASH 流被播放器识别。设置持久化在脚本存储里每个组件一段{ enabled, options }可在关于面板整体导出/导入。上图是style/home-redesign/的 fresh 方案重构后的首页信息流被重排成卡片布局这是仓库里 Vue 组件最密集的目录之一和它同级的还有能整条替换顶栏的style/custom-navbar/内部拆成 home / search / user-info / settings 等 15 子模块。协作层为何解耦组件为何互不干扰组件之间从不直接互相 import通信走 src/plugins/data.ts 的数据池一方用registerData(key, ...data)交出可被修改的对象另一方用addData(key, provider)提交修改函数provider不立即执行而是存起来等getData(key)被调用时一次性应用并丢弃。方向是单向累加的——只能往上 commit不能 reset谁先装谁后装都不影响结果因为addData在注册前后调用都会被正确处理。仓库里最完整的案例是下载弹幕往下载视频里塞选项registry/lib/components/video/danmaku/download/index.ts 自己带一个内置 pluginsetup里往downloadVideo.assets数据池推一个getAssets资产装上它下载面板凭空多出一项下载弹幕卸载后消失两边代码互不认识。另一条通道是 src/plugins/hook.ts 的addHook/getHookbefore/after 两段式代码注入典型用途是自动更新组件挂在userComponents.add钩子上记录安装来源组件管理面板自身没有任何更新逻辑。装一个功能的过程由 src/core/install-feature.ts 统一收口拉取代码.zip会先用 fflate 解开、按有无entry/setup/style区分组件、插件、样式三种单元再进各自的安装器写入设置。用户组件的代码就存在settings.userComponents里下次启动时loadAllUserComponents解析回来——功能即数据删掉数据等于卸载。一条弹幕文件是怎么被拼出来的把上面三层串起来走一遍完整数据流你点击功能面板里的下载按钮入口是 registry/lib/components/video/download/Widget.vue 里懒创建的DownloadVideoPanel面板要下载哪些资产取决于downloadVideo.assets数据池此刻有谁。若你装过下载弹幕组件它提供的getAssets会先调 registry/lib/components/video/danmaku/download/utils.ts 的JsonDanmaku拿到aid/cid后走 B 站弹幕分片接口并行拉取各段再经DanmakuConverter转成你选的格式。产物交给 src/core/download.ts 的DownloadPackage收尾单个文件直接触发浏览器下载多个文件压成一个 zip重名自动加随机后缀。同页多个视频的取数用Promise.allSettled并发跑失败的段单独计入失败 N 个的 toast不会炸掉整个下载。整条链路里下载组件不知道弹幕组件存在弹幕组件也不知道下载组件存在中间只有downloadVideo.assets这个 key。上图是 B 站页面左侧的功能面板入口和展开后的设置面板下载、夜间模式等组件装完后都以按钮形式出现在这里。边界在哪限制、取舍与排坑有些行为看着像 bug其实是写死的取舍ASS 弹幕文件缺弹幕registry/lib/components/video/danmaku/download/index.md 明确ASS 弹幕下载不会包含高级弹幕、字幕弹幕等代码里case special也是直接跳过——预期行为。弹脚本试图访问跨域资源用链接安装组件、把下载任务发到外部服务器时的已知提示确认来源后选始终允许即可。页面变卡这是综合性脚本README 直说对性能有较大影响最低配置 8GB 内存 / 1080p。定位手段在 src/core/performance/devMode打开后component-trace、plugin-trace、promise-trace三个追踪器配合stats.ts的logStats按阶段输出组件名 毫秒数 占比找到大户改延后加载或停用即可。升级后出问题官方策略是新版本正式发布后不再对旧版本做技术支持doc/rollback.md 只教怎么手动回退旧脚本而不受理兼容问题——所以升级前在关于面板导出设置是固定动作v1 老用户则用v1 设置迁移组件批量拉对应组件。装第三方功能前隐私声明写得很直白本仓库组件完全匿名、数据只落本地但任何组件对用户数据都有完全访问能力外部来源装之前先看它的index.md和代码里的网络请求统一走 src/core/ajax.ts 的 XHR 封装便于审查。下一步走哪条路按你的身份分叉只用的人装下载、夜间模式这类高频组件并保持克制把关于面板导出设置养成升级前的固定动作盯住 CHANGELOG新版发布后尽快跟上旧版不再有支持。嫌慢的人读一遍 src/core/life-cycle.ts 和 src/core/loading-mode.ts都在 60 行以内理解组件何时被激活开devMode看性能日志给耗时大户切延后或停用动样式前先看dark-mode/README.md的分片规范再碰dark-slice-*。要写功能的人克隆仓库git clone https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved后pnpm installregistry/下再装一次依赖然后pnpm tsx dev-tools/dev-server/index.ts起开发服务默认 23333 端口。新组件就是在registry/lib/components/类别/下建目录index.ts写defineComponentMetadataindex.md写描述。开发服务对registry/dist/components/id.js这类虚拟 URL 按需编译、从内存返回把链接粘进组件管理面板即装即调改代码自动热更新dev-tools/dev-server/command.ts 提供单独编译、监听、脚手架等命令。写跨功能协作优先addData/addHook提交前跑pnpm run type和pnpm run lint-check。回到开头那个空壳它不是缺陷而是这套设计的入口。Bilibili-Evolved 留下的可迁移价值不在任何一个具体功能而在于元数据声明身份 生命周期决定时机 数据池解耦协作这个组合——功能即数据、安装即存码、卸载即删数据整套规则换个站、换个场景几乎可以原样搬走。【免费下载链接】Bilibili-Evolved强大的哔哩哔哩增强脚本项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
阅读完成 · 觉得有帮助?
咨询建站