企业官网建设流程全解析

Bilibili-Evolved 完整拆解:一条油猴脚本如何接管 B 站的顶栏、下载与夜间模式

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

想把 B 站的顶栏改成自己的样子,却发现"大而全"的脚本要么全开要么全关?Bilibili-Evolved(下称 BE)是给"自己动手造 B 站"用户准备的油猴脚本:全新安装一个功能都没有,夜间模式、自定义顶栏、视频下载这些组件全靠你逐个挑装,核心是一套核心 + 组件 + 插件的三层扩展体系。

Bilibili-Evolved 脚本运行后出现在页面左侧的功能面板,是组件与插件管理的第一入口

油猴环境装 Bilibili-Evolved:环境、安装与首个组件怎么挑

1. 脚本管理器与浏览器:Tampermonkey 5.0+ 或 Violentmonkey 2.18+;Greasemonkey 与 AdGuard 明确不兼容,套壳浏览器未做测试;浏览器建议 Chrome 110+ / Firefox 140+ 最新版。
2. 安装脚本正式版,刷新任意 B 站页面,左侧出现功能面板,设置面板从其中打开。
3. 全新安装零功能。设置面板左下有"批量 / 浏览 / 在线"三个按钮,外加一个直链输入框;v1 老用户可用v1 设置迁移组件自动导入旧设置,见 doc/v1-migrate.md。
4. 本地开发(可选):

git clone https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved pnpm install pnpm build-core # 构建脚本主体 (webpack/webpack.prod.ts) pnpm build-features # 构建功能模块 (registry/webpack/all.ts)

⚠️ 硬件有门槛:最低 8GB 内存 + 1920x1080,推荐 32GB + 4K 高分屏,低配机器先做好卡顿准备。

一张表看懂三层扩展体系:core、组件与插件各自在哪

入口是src/client/bilibili-evolved.ts,只有两行:import { init } from './init'; init()。src/client/init.ts里每个阶段都套着 promise 追踪,页面被拆成<head>就绪、DCL、load三个时机(src/core/life-cycle.ts),组件各挑各的启动点;src/core/loading-mode.ts还有个全局开关——"延后"等 load 再跑,"同时"则与 B 站原脚本抢 DCL。

四个真实场景:夜间模式、自定义顶栏、视频下载与动态过滤

夜间模式:深夜刷 B 站别盯着白屏

痛点是凌晨两点,页面白底刺眼。BE 的夜间模式在registry/lib/components/style/dark-mode/:入口给 body 加dark类,顺手改写theme-color与color-scheme两个 meta 标签;样式拆成一批dark-slice-N.scss切片加载,另附 Shadow DOM 变体。

值得看的一个实现细节:组件自带一个插件,在 DCL 阶段提前注入.dark类,专门防首屏白闪;组件的urlExclude则把个别特殊页面排除在变暗之外。

💡 提示:style/dark-mode/下有 follow-system、schedule 子模块,可以跟随系统或按时间段自动切换,不用手动开。

自定义顶栏:把不用的入口藏起来

痛点是顶栏入口挤,自己又删不掉。registry/lib/components/style/custom-navbar/是样式类组件里的重头:home、search、settings、user-info 等 15+ 子模块各带一个 Vue 组件,options 里的hidden/order/fill/transparent/blur全部由defineOptionsMetadata声明后自动渲染成开关。

它的样式统一挂进src/core/shadow-root/,B 站页面样式渗不进顶栏,顶栏样式也渗不进页面——双向隔离。

💡 提示:"透明填充"默认开启,活动页底栏错位时先关它,再决定要不要开"背景模糊"。

视频加弹幕下载:DASH 分离流与回退编码

痛点是 B 站原生播放器不提供下载,而 DASH 源是 m4s 分离流,本地播放器不认。registry/lib/components/video/download/直接对接 DASH 接口:apis/dash.ts靠 codecs 字段识别 AVC/HEVC/AV1,目标档位不可用时按你配置的编码回退。

弹幕是独立组件,在video/danmaku/download/,它用addData('downloadVideo.assets')把自己的产物挂进下载流程——这是插件体系解耦最直接的例子。

💡 提示:老设备把回退编码留在 AVC/H.264;弹幕导出可配合src/components/video/xml-utils.ts与ass-utils.ts做 XML ↔ ASS 转换,喂给本地播放器。

动态过滤:屏蔽转发和广告的规则写法

痛点是动态页一半转发一半广告,B 站本体不给过滤入口。registry/lib/components/feeds/filter/的规则语法很短:纯字符串做子串匹配,/.../包裹走正则;关键词 up:UP主名可以同时匹配动态文本和 UP 主名,见pattern.ts。

💡 提示:高频规则放前面;过滤规则支持批量导入导出,配一次就能跨设备复用。

一份能导入的 JSON:三个组件的关键参数与理由

设置按组件存储(enabled + options,见src/core/settings/helpers.ts),在关于面板里可以整体导出 / 导入。下面这份是典型形态:

{ "downloadVideo": { "dashVideoExtension": ".mp4", "dashAudioExtension": ".m4a", "dashFlacAudioExtension": ".flac", "dashCodecFallback": "AVC/H.264" }, "customNavbar": { "hidden": ["gamesIframe", "creations"], "transparent": true, "blur": false, "globalFixed": true }, "settingsPanel": { "scriptLoadingMode": "延后", "styleLoadingMode": "同时", "dockSide": "left" } }

• dashCodecFallback:AVC 兼容性最好,设它比下载后再转码省事。
• customNavbar.hidden:只藏确定不用的入口,藏多了容易误伤临时要用的。
• globalFixed: true:顶栏滚动时固定,长视频页舒服;需要跟随时关掉。
• scriptLoadingMode: "延后":默认让路给 B 站,不与原脚本抢资源,怕卡就别动。
• styleLoadingMode: "同时":样式抢先进场,避免页面先闪一下"正常脸"。

Bilibili-Evolved 设置面板:左侧是组件开关,右侧对应当前组件的选项,全部设置都能经 JSON 导入导出

写第一个插件:注册机制与本地开发工具链

安装逻辑统一收敛在src/core/install-feature.ts:解析代码后按元数据特征分派——带entry的是组件、带setup的是插件、带style的是样式,连.zip包都支持(tryParseZip)。内置插件由src/plugins/plugin.ts用require.context自动收集,用户插件安装后写入settings.userPlugins,刷新即生效,这就是热插拔的落点。

跨功能协作走两条通道:addData/registerData写共享数据池,addHook/getHook订阅事件的 before / after 注入点。最小可运行插件:

import type { PluginMetadata } from '@/plugins/plugin' export const plugin: PluginMetadata = { name: 'helloBe', displayName: 'Hello BE', setup({ addHook }) { addHook('userPlugins.add', { before: () => console.log('[helloBe] 有新插件要装'), after: meta => console.log('[helloBe] 装好了:', meta.name), }) }, }

工具链:dev-tools/dev-server/提供本地开发服务器,组件按请求即时构建,WebSocket 调试通道在ws://localhost:23333,命令行用法pnpm tsx dev-tools/dev-server/command.ts build component <id>;pnpm build-docs从元数据自动生成功能文档;pnpm check-pr-files跑 PR 规则校验。

你大概率会踩的六个坑:现象、原因与解法

• 装完什么都没发生→ 全新安装默认零组件,这是设计 → 设置面板 → 组件管理,用批量 / 在线安装;老用户走 v1 设置迁移。
• 脚本不注入、面板不出现→ 脚本管理器或浏览器不支持 → 换 Tampermonkey 5.0+ / Violentmonkey 2.18+ 与 Chrome 110+ / Firefox 140+ 最新版。
• 页面明显卡顿→ "同时"模式与 B 站原脚本抢 DCL → 改"延后";开 devMode,用src/core/performance/里的追踪模块逐组件看耗时。
• 下载的视频老设备放不了→ HEVC/AV1 解不了 → 回退编码设成 AVC/H.264。
• 弹"脚本试图访问跨域资源"→ 用链接安装组件或走外链下载的正常提示 → 确认来源后选"始终允许"。
• 升级后设置丢了→ 新版发布后旧版不再受支持,且设置跟随组件 → 升级前在关于面板导出;必须留在旧版看 doc/rollback.md。

它适合谁,谁别碰

适合:想把 B 站按自己习惯逐项微调的人;愿意读一点源码的人——三层扩展 + 钩子体系,是油猴工程化的现成范本;以及想往 B 站扩展生态里加东西的开发者。

不适合:"装完就能用"型用户,组件得自己一个个挑;内存捉襟见肘的机器,最低 8GB、推荐 32GB;只想要一个下载功能的人,README 明确建议改用更专门的下载脚本。

脚本装上是空的,装齐了 B 站就是你要的样子——这是 Bilibili-Evolved 比大而全脚本多做对的一步。

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