简介Bilibili-Evolved 是一款面向哔哩哔哩重度用户与前端开发者的浏览器增强脚本基于 JavaScript 编写用于扩展网页端功能、优化交互体验。资源包共收录 2000 个文件以 1529 个 TypeScript 源码与 295 个 JavaScript 脚本为主体辅以 86 个 CSS、35 个 SCSS 样式文件及 26 个 Vue 组件另含 53 张 PNG、38 张 JPG 图片素材与 18 个 JSON 配置整体压缩包约 67.36MB结构完整便于二次开发与功能定制。脚本启用后可在网页左侧中央通过齿轮图标进入设置面板按需开启各项增强功能并支持正式版、预览版、离线版等多种安装渠道兼顾稳定性与更新频率。目前已有 955 人学习下载适合希望深入理解脚本架构、研究跨域资源处理与模块化构建思路的开发者参考借鉴。1. 浏览器里长出来的“增强层”Bilibili-Evolved 到底在改什么第一次在浏览器里装上一段用户脚本刷新页面后发现原本平平无奇的视频站首页多出了一排功能按钮那种感觉挺微妙的。Bilibili-Evolved 就是这类东西里做得最厚的一个它不是插件商店里那种点一下安装就完事的扩展而是一整套跑在浏览器里的增强脚本集合靠用户脚本管理器加载然后在页面加载完成后接管一部分 DOM、样式和请求行为。它解决的问题很具体——官方页面给不了的自定义布局、批量操作、播放器微调、动态过滤、下载辅助它用前端手段补上。适合谁适合愿意折腾浏览器、能看懂控制台报错、不排斥改配置的人。如果你只想装完就用、从不看设置面板那它大概率会让你觉得“怎么这么多开关”。反过来只要你有一点点前端调试习惯它就能把日常刷视频的体验拉到一个完全不同的层级。2. 先搞清楚它怎么跑起来加载链路与最小可用配置2.1 用户脚本管理器的选择与安装顺序Bilibili-Evolved 本体是一段用户脚本不是浏览器扩展。这意味着你必须先有一个用户脚本管理器常见的是 Tampermonkey 或 Violentmonkey两者在 Chromium 内核和 Firefox 上都能用。安装顺序不能反先装管理器再装脚本。如果先装脚本浏览器会把.user.js当成普通文本或下载文件不会触发安装界面。我一般会这样走一遍# 这不是命令行操作而是浏览器里的手动步骤用注释标出顺序 # 1. 在浏览器扩展商店搜索并安装 Tampermonkey # 2. 打开 Tampermonkey 仪表盘确认“已启用” # 3. 访问 Bilibili-Evolved 的发布页点击 .user.js 链接 # 4. Tampermonkey 会弹出安装页核对脚本名称和来源后点“安装” # 5. 打开视频站任意页面右下角应出现 Bilibili-Evolved 的设置入口逻辑说明第 3 步的.user.js链接必须由 Tampermonkey 拦截如果浏览器直接下载了文件说明管理器没生效或脚本链接不是用户脚本格式。第 5 步是验证点入口不出现就说明脚本没注入成功后面所有配置都无从谈起。参数说明Tampermonkey 的“配置模式”建议设为“高级”否则某些grant和run-at选项会被隐藏。run-at在 Bilibili-Evolved 里通常是document-start或document-end前者更早介入但可能拿不到完整 DOM后者更稳但会闪一下原页面。如果你遇到页面先正常后突然变样那是document-end的正常表现。2.2 首次运行时的组件加载与网络依赖Bilibili-Evolved 的脚本本体很小真正的功能模块是运行时按需拉取的。也就是说装完脚本只是装了一个加载器第一次打开页面时它会去请求组件清单和样式资源。这个过程依赖网络如果请求失败你会看到设置面板里一片空白或者功能列表加载不出来。// 这是 Bilibili-Evolved 内部加载组件时的典型逻辑示意不是源码原文 // 实际代码在脚本内部这里只说明它做了什么 const componentList await fetch(manifestUrl).then(r r.json()); // manifestUrl 指向组件索引包含每个组件的名称、版本、入口文件 for (const comp of componentList) { if (userEnabled(comp.name)) { const mod await import(comp.entry); mod.default?.(); } } // 如果 fetch 失败componentList 为空设置面板就没有可选项逻辑说明这段示意说明两件事——组件是动态导入的不是打包在脚本里用户开关决定哪些组件被激活。所以当你发现某个功能“消失了”先检查设置面板里对应开关是否被关掉而不是怀疑脚本坏了。参数说明组件索引的地址在脚本头部有声明通常是一个固定 URL。如果你所在网络环境对这个地址访问不稳定加载会间歇性失败。常见做法是把组件索引和资源地址换成可访问的镜像但这一步需要你确认镜像的完整性和更新频率不要随便用一个来路不明的地址。提示首次加载失败时先刷新一次页面再打开浏览器控制台看 Network 面板里哪个请求是红的。多数情况是索引请求超时而不是脚本本身有问题。3. 把功能拆开看几个高频组件的配置与参数3.1 自定义布局与动态过滤的开关逻辑Bilibili-Evolved 里最常被打开的两个方向是页面布局调整和动态流过滤。布局类组件改的是 CSS 变量和容器结构过滤类组件改的是数据渲染前的筛选条件。两者都不碰后端接口所以不会影响账号安全但会改变你看到的页面内容。// 动态过滤的配置结构示意 const filterConfig { enabled: true, keywords: [抽奖, 广告], // 标题命中这些词就隐藏 minDuration: 60, // 视频时长低于 60 秒的转发动态隐藏 hideRepost: false, // 是否隐藏纯转发 whitelist: [某UP主] // 白名单不参与过滤 }; // 过滤发生在动态列表渲染前命中规则的条目直接从 DOM 中移除逻辑说明关键词匹配是包含关系不是精确匹配所以“广告”会命中“广告位”也会命中“非广告”。minDuration只对带时长信息的视频动态生效纯文字动态不受影响。白名单优先级最高命中白名单的条目即使同时命中关键词也不会被隐藏。参数说明keywords数组里不要放太短的词比如“的”“了”否则会误伤大量正常内容。minDuration的单位是秒设成 0 等于关闭时长过滤。hideRepost打开后会隐藏所有转发动态包括带评论的转发如果你只是不想看无评论转发这个开关要慎用。3.2 播放器增强与快捷键冲突处理播放器增强组件会接管一部分键盘事件比如自定义倍速、截图、画中画。问题在于视频站本身也有一套快捷键两者容易打架。我遇到过按D键想切换弹幕结果触发了脚本的下载面板这就是事件监听顺序的问题。// 快捷键冲突时的排查思路在控制台里执行 // 列出当前页面上所有 keydown 监听器仅示意实际无法直接列出 // 更实际的做法是逐个关闭脚本里的快捷键开关 const beSettings window.__BILIBILI_EVOLVED_SETTINGS__; // 这个全局变量不一定存在取决于版本和加载时机 // 如果不存在直接进设置面板手动关 console.log(检查设置面板 - 播放器 - 快捷键);逻辑说明控制台里直接读全局设置变量不一定可靠因为脚本可能运行在隔离环境里。更稳的排查方式是进设置面板把播放器相关的快捷键逐个关掉每关一个就回页面按一次冲突键看行为是否恢复。这是最笨但最有效的方法。参数说明倍速快捷键通常绑定在Shift 和Shift 上截图绑定在Ctrl Shift S。如果你用的浏览器或系统已经占用了这些组合脚本里的绑定会失效或触发系统行为。改绑定时要避开浏览器保留快捷键比如Ctrl T、Ctrl W这类。注意不要同时装多个功能重叠的用户脚本。两个脚本都监听播放器事件时行为会变得不可预测而且报错信息会互相干扰排查成本翻倍。4. 避坑与排查那些让我重装过三次的问题4.1 脚本更新后设置丢失现象某次脚本自动更新后之前调好的布局和过滤规则全没了设置面板恢复默认。原因Bilibili-Evolved 的设置存在浏览器本地存储里键名和脚本版本或存储结构绑定。当更新涉及存储结构变更时旧键名可能被弃用新版本读不到旧数据。解决更新前在设置面板里导出配置为 JSON 文件更新后如果发现丢失用导入功能恢复。如果已经丢了检查浏览器开发者工具的 Application - Local Storage看旧键名的数据是否还在在的话可以手动迁移。4.2 组件加载一半失败导致页面卡顿现象页面能打开但滚动明显掉帧控制台里有一堆组件加载失败的报错。原因某个组件在document-end阶段同步执行了重 DOM 操作但它的依赖资源没加载完导致反复重试或阻塞渲染。解决进设置面板把最近新开的组件逐个关闭每关一个刷新一次页面定位到具体组件后先保持关闭等脚本更新或换用替代组件。不要一次性全关再全开那样定位不到问题源。4.3 与浏览器自带翻译或阅读模式冲突现象开启浏览器翻译后页面布局错乱脚本注入的按钮跑到奇怪的位置。原因翻译功能会替换文本节点改变 DOM 结构脚本里基于固定选择器的样式和事件绑定就失效了。解决在视频站页面上关闭自动翻译或者把脚本的布局组件设为“仅原始语言下生效”。阅读模式同理它会剥离大部分样式脚本的增强层基本都会失效。4.4 移动端浏览器上的兼容性问题现象在移动端浏览器里装同样的管理器脚本能装但设置面板打不开或显示不全。原因移动端浏览器的用户脚本支持程度参差不齐部分管理器对import()动态加载支持不完整而且触屏没有键盘快捷键依赖快捷键的功能直接不可用。解决移动端只开最基础的布局类组件不要开播放器和快捷键相关组件。如果设置面板打不开尝试用支持桌面模式的移动浏览器或者干脆不在移动端用这套方案。4.5 多账号切换后配置串号现象同一浏览器里切换不同账号发现过滤规则和布局设置跟着账号走了但有些设置又没跟着走。原因脚本的配置存储分两部分一部分存在浏览器本地跟浏览器实例走一部分存在账号相关的存储键里跟账号走。切换账号时本地部分不变账号部分重新加载导致看起来“一半保留一半重置”。解决如果你需要多账号各自独立的配置给每个账号单独用一个浏览器配置文件不要在同一配置文件里切账号。这是最干净的做法没有之一。5. 进阶用法把配置变成可迁移的资产走到这一步你已经不满足于在设置面板里点来点去了。真正让 Bilibili-Evolved 变得好用的是把配置当成代码来管理。设置面板里的导出功能会生成一个 JSON 文件里面包含所有组件的开关状态和参数。我一般会把这个文件放进一个版本管理目录里每次大改之前先提交一次改坏了直接回滚。# 把导出的配置文件纳入版本管理 mkdir -p ~/configs/bilibili-evolved # 假设导出的文件叫 be-settings.json mv ~/Downloads/be-settings.json ~/configs/bilibili-evolved/ cd ~/configs/bilibili-evolved git init git add be-settings.json git commit -m 初始配置布局过滤播放器基础开关 # 之后每次调整后重新导出并提交diff 能看出改了哪些参数逻辑说明导出的 JSON 是纯文本可以直接用diff或git diff比较两次配置的差异。这比在设置面板里凭记忆找改了哪里靠谱得多。如果你在多台机器上用把这个目录同步过去导入即可复现环境。参数说明导入时要注意版本兼容性。新版本导出的配置导入旧版本脚本可能报错反过来旧配置导入新版本通常没问题因为新版本一般会做向后兼容。如果导入失败先看控制台报错里提到哪个字段手动删掉那个字段再试。另一个进阶方向是只启用你真正需要的组件。Bilibili-Evolved 的组件列表很长但日常高频使用的可能就五六个。每多开一个组件就多一份加载失败和冲突的风险。我的习惯是每季度清一次组件列表把过去一个月没用过的关掉。这个习惯帮我省掉了至少三次因为冷门组件导致的页面卡顿排查。最后说一个我踩过的坑不要在生产力工具用的浏览器配置文件里折腾这套脚本。浏览器配置文件一旦被脚本改乱恢复起来很麻烦。单独开一个配置文件专门用来折腾折腾稳了再考虑要不要迁移到主力配置文件。这个习惯让我在脚本更新翻车时至少还能用另一个配置文件正常干活。希望帮到你。本文还有配套的精品资源点击获取