簡(jiǎn)介Bilibili-Evolved 是一款面向嗶哩嗶哩重度用戶與前端開(kāi)發(fā)者的瀏覽器增強(qiáng)腳本基于 JavaScript 編寫(xiě)用于擴(kuò)展網(wǎng)頁(yè)端功能、優(yōu)化交互體驗(yàn)。資源包共收錄 2000 個(gè)文件以 1529 個(gè) TypeScript 源碼與 295 個(gè) JavaScript 腳本為主體輔以 86 個(gè) CSS、35 個(gè) SCSS 樣式文件及 26 個(gè) Vue 組件另含 53 張 PNG、38 張 JPG 圖片素材與 18 個(gè) JSON 配置整體壓縮包約 67.36MB結(jié)構(gòu)完整便于二次開(kāi)發(fā)與功能定制。腳本啟用后可在網(wǎng)頁(yè)左側(cè)中央通過(guò)齒輪圖標(biāo)進(jìn)入設(shè)置面板按需開(kāi)啟各項(xiàng)增強(qiáng)功能并支持正式版、預(yù)覽版、離線版等多種安裝渠道兼顧穩(wěn)定性與更新頻率。目前已有 955 人學(xué)習(xí)下載適合希望深入理解腳本架構(gòu)、研究跨域資源處理與模塊化構(gòu)建思路的開(kāi)發(fā)者參考借鑒。1. 瀏覽器里長(zhǎng)出來(lái)的“增強(qiáng)層”Bilibili-Evolved 到底在改什么第一次在瀏覽器里裝上一段用戶腳本刷新頁(yè)面后發(fā)現(xiàn)原本平平無(wú)奇的視頻站首頁(yè)多出了一排功能按鈕那種感覺(jué)挺微妙的。Bilibili-Evolved 就是這類東西里做得最厚的一個(gè)它不是插件商店里那種點(diǎn)一下安裝就完事的擴(kuò)展而是一整套跑在瀏覽器里的增強(qiáng)腳本集合靠用戶腳本管理器加載然后在頁(yè)面加載完成后接管一部分 DOM、樣式和請(qǐng)求行為。它解決的問(wèn)題很具體——官方頁(yè)面給不了的自定義布局、批量操作、播放器微調(diào)、動(dòng)態(tài)過(guò)濾、下載輔助它用前端手段補(bǔ)上。適合誰(shuí)適合愿意折騰瀏覽器、能看懂控制臺(tái)報(bào)錯(cuò)、不排斥改配置的人。如果你只想裝完就用、從不看設(shè)置面板那它大概率會(huì)讓你覺(jué)得“怎么這么多開(kāi)關(guān)”。反過(guò)來(lái)只要你有一點(diǎn)點(diǎn)前端調(diào)試習(xí)慣它就能把日常刷視頻的體驗(yàn)拉到一個(gè)完全不同的層級(jí)。2. 先搞清楚它怎么跑起來(lái)加載鏈路與最小可用配置2.1 用戶腳本管理器的選擇與安裝順序Bilibili-Evolved 本體是一段用戶腳本不是瀏覽器擴(kuò)展。這意味著你必須先有一個(gè)用戶腳本管理器常見(jiàn)的是 Tampermonkey 或 Violentmonkey兩者在 Chromium 內(nèi)核和 Firefox 上都能用。安裝順序不能反先裝管理器再裝腳本。如果先裝腳本瀏覽器會(huì)把.user.js當(dāng)成普通文本或下載文件不會(huì)觸發(fā)安裝界面。我一般會(huì)這樣走一遍# 這不是命令行操作而是瀏覽器里的手動(dòng)步驟用注釋標(biāo)出順序 # 1. 在瀏覽器擴(kuò)展商店搜索并安裝 Tampermonkey # 2. 打開(kāi) Tampermonkey 儀表盤(pán)確認(rèn)“已啟用” # 3. 訪問(wèn) Bilibili-Evolved 的發(fā)布頁(yè)點(diǎn)擊 .user.js 鏈接 # 4. Tampermonkey 會(huì)彈出安裝頁(yè)核對(duì)腳本名稱和來(lái)源后點(diǎn)“安裝” # 5. 打開(kāi)視頻站任意頁(yè)面右下角應(yīng)出現(xiàn) Bilibili-Evolved 的設(shè)置入口邏輯說(shuō)明第 3 步的.user.js鏈接必須由 Tampermonkey 攔截如果瀏覽器直接下載了文件說(shuō)明管理器沒(méi)生效或腳本鏈接不是用戶腳本格式。第 5 步是驗(yàn)證點(diǎn)入口不出現(xiàn)就說(shuō)明腳本沒(méi)注入成功后面所有配置都無(wú)從談起。參數(shù)說(shuō)明Tampermonkey 的“配置模式”建議設(shè)為“高級(jí)”否則某些grant和run-at選項(xiàng)會(huì)被隱藏。run-at在 Bilibili-Evolved 里通常是document-start或document-end前者更早介入但可能拿不到完整 DOM后者更穩(wěn)但會(huì)閃一下原頁(yè)面。如果你遇到頁(yè)面先正常后突然變樣那是document-end的正常表現(xiàn)。2.2 首次運(yùn)行時(shí)的組件加載與網(wǎng)絡(luò)依賴Bilibili-Evolved 的腳本本體很小真正的功能模塊是運(yùn)行時(shí)按需拉取的。也就是說(shuō)裝完腳本只是裝了一個(gè)加載器第一次打開(kāi)頁(yè)面時(shí)它會(huì)去請(qǐng)求組件清單和樣式資源。這個(gè)過(guò)程依賴網(wǎng)絡(luò)如果請(qǐng)求失敗你會(huì)看到設(shè)置面板里一片空白或者功能列表加載不出來(lái)。// 這是 Bilibili-Evolved 內(nèi)部加載組件時(shí)的典型邏輯示意不是源碼原文 // 實(shí)際代碼在腳本內(nèi)部這里只說(shuō)明它做了什么 const componentList await fetch(manifestUrl).then(r r.json()); // manifestUrl 指向組件索引包含每個(gè)組件的名稱、版本、入口文件 for (const comp of componentList) { if (userEnabled(comp.name)) { const mod await import(comp.entry); mod.default?.(); } } // 如果 fetch 失敗componentList 為空設(shè)置面板就沒(méi)有可選項(xiàng)邏輯說(shuō)明這段示意說(shuō)明兩件事——組件是動(dòng)態(tài)導(dǎo)入的不是打包在腳本里用戶開(kāi)關(guān)決定哪些組件被激活。所以當(dāng)你發(fā)現(xiàn)某個(gè)功能“消失了”先檢查設(shè)置面板里對(duì)應(yīng)開(kāi)關(guān)是否被關(guān)掉而不是懷疑腳本壞了。參數(shù)說(shuō)明組件索引的地址在腳本頭部有聲明通常是一個(gè)固定 URL。如果你所在網(wǎng)絡(luò)環(huán)境對(duì)這個(gè)地址訪問(wèn)不穩(wěn)定加載會(huì)間歇性失敗。常見(jiàn)做法是把組件索引和資源地址換成可訪問(wèn)的鏡像但這一步需要你確認(rèn)鏡像的完整性和更新頻率不要隨便用一個(gè)來(lái)路不明的地址。提示首次加載失敗時(shí)先刷新一次頁(yè)面再打開(kāi)瀏覽器控制臺(tái)看 Network 面板里哪個(gè)請(qǐng)求是紅的。多數(shù)情況是索引請(qǐng)求超時(shí)而不是腳本本身有問(wèn)題。3. 把功能拆開(kāi)看幾個(gè)高頻組件的配置與參數(shù)3.1 自定義布局與動(dòng)態(tài)過(guò)濾的開(kāi)關(guān)邏輯Bilibili-Evolved 里最常被打開(kāi)的兩個(gè)方向是頁(yè)面布局調(diào)整和動(dòng)態(tài)流過(guò)濾。布局類組件改的是 CSS 變量和容器結(jié)構(gòu)過(guò)濾類組件改的是數(shù)據(jù)渲染前的篩選條件。兩者都不碰后端接口所以不會(huì)影響賬號(hào)安全但會(huì)改變你看到的頁(yè)面內(nèi)容。// 動(dòng)態(tài)過(guò)濾的配置結(jié)構(gòu)示意 const filterConfig { enabled: true, keywords: [抽獎(jiǎng), 廣告], // 標(biāo)題命中這些詞就隱藏 minDuration: 60, // 視頻時(shí)長(zhǎng)低于 60 秒的轉(zhuǎn)發(fā)動(dòng)態(tài)隱藏 hideRepost: false, // 是否隱藏純轉(zhuǎn)發(fā) whitelist: [某UP主] // 白名單不參與過(guò)濾 }; // 過(guò)濾發(fā)生在動(dòng)態(tài)列表渲染前命中規(guī)則的條目直接從 DOM 中移除邏輯說(shuō)明關(guān)鍵詞匹配是包含關(guān)系不是精確匹配所以“廣告”會(huì)命中“廣告位”也會(huì)命中“非廣告”。minDuration只對(duì)帶時(shí)長(zhǎng)信息的視頻動(dòng)態(tài)生效純文字動(dòng)態(tài)不受影響。白名單優(yōu)先級(jí)最高命中白名單的條目即使同時(shí)命中關(guān)鍵詞也不會(huì)被隱藏。參數(shù)說(shuō)明keywords數(shù)組里不要放太短的詞比如“的”“了”否則會(huì)誤傷大量正常內(nèi)容。minDuration的單位是秒設(shè)成 0 等于關(guān)閉時(shí)長(zhǎng)過(guò)濾。hideRepost打開(kāi)后會(huì)隱藏所有轉(zhuǎn)發(fā)動(dòng)態(tài)包括帶評(píng)論的轉(zhuǎn)發(fā)如果你只是不想看無(wú)評(píng)論轉(zhuǎn)發(fā)這個(gè)開(kāi)關(guān)要慎用。3.2 播放器增強(qiáng)與快捷鍵沖突處理播放器增強(qiáng)組件會(huì)接管一部分鍵盤(pán)事件比如自定義倍速、截圖、畫(huà)中畫(huà)。問(wèn)題在于視頻站本身也有一套快捷鍵兩者容易打架。我遇到過(guò)按D鍵想切換彈幕結(jié)果觸發(fā)了腳本的下載面板這就是事件監(jiān)聽(tīng)順序的問(wèn)題。// 快捷鍵沖突時(shí)的排查思路在控制臺(tái)里執(zhí)行 // 列出當(dāng)前頁(yè)面上所有 keydown 監(jiān)聽(tīng)器僅示意實(shí)際無(wú)法直接列出 // 更實(shí)際的做法是逐個(gè)關(guān)閉腳本里的快捷鍵開(kāi)關(guān) const beSettings window.__BILIBILI_EVOLVED_SETTINGS__; // 這個(gè)全局變量不一定存在取決于版本和加載時(shí)機(jī) // 如果不存在直接進(jìn)設(shè)置面板手動(dòng)關(guān) console.log(檢查設(shè)置面板 - 播放器 - 快捷鍵);邏輯說(shuō)明控制臺(tái)里直接讀全局設(shè)置變量不一定可靠因?yàn)槟_本可能運(yùn)行在隔離環(huán)境里。更穩(wěn)的排查方式是進(jìn)設(shè)置面板把播放器相關(guān)的快捷鍵逐個(gè)關(guān)掉每關(guān)一個(gè)就回頁(yè)面按一次沖突鍵看行為是否恢復(fù)。這是最笨但最有效的方法。參數(shù)說(shuō)明倍速快捷鍵通常綁定在Shift 和Shift 上截圖綁定在Ctrl Shift S。如果你用的瀏覽器或系統(tǒng)已經(jīng)占用了這些組合腳本里的綁定會(huì)失效或觸發(fā)系統(tǒng)行為。改綁定時(shí)要避開(kāi)瀏覽器保留快捷鍵比如Ctrl T、Ctrl W這類。注意不要同時(shí)裝多個(gè)功能重疊的用戶腳本。兩個(gè)腳本都監(jiān)聽(tīng)播放器事件時(shí)行為會(huì)變得不可預(yù)測(cè)而且報(bào)錯(cuò)信息會(huì)互相干擾排查成本翻倍。4. 避坑與排查那些讓我重裝過(guò)三次的問(wèn)題4.1 腳本更新后設(shè)置丟失現(xiàn)象某次腳本自動(dòng)更新后之前調(diào)好的布局和過(guò)濾規(guī)則全沒(méi)了設(shè)置面板恢復(fù)默認(rèn)。原因Bilibili-Evolved 的設(shè)置存在瀏覽器本地存儲(chǔ)里鍵名和腳本版本或存儲(chǔ)結(jié)構(gòu)綁定。當(dāng)更新涉及存儲(chǔ)結(jié)構(gòu)變更時(shí)舊鍵名可能被棄用新版本讀不到舊數(shù)據(jù)。解決更新前在設(shè)置面板里導(dǎo)出配置為 JSON 文件更新后如果發(fā)現(xiàn)丟失用導(dǎo)入功能恢復(fù)。如果已經(jīng)丟了檢查瀏覽器開(kāi)發(fā)者工具的 Application - Local Storage看舊鍵名的數(shù)據(jù)是否還在在的話可以手動(dòng)遷移。4.2 組件加載一半失敗導(dǎo)致頁(yè)面卡頓現(xiàn)象頁(yè)面能打開(kāi)但滾動(dòng)明顯掉幀控制臺(tái)里有一堆組件加載失敗的報(bào)錯(cuò)。原因某個(gè)組件在document-end階段同步執(zhí)行了重 DOM 操作但它的依賴資源沒(méi)加載完導(dǎo)致反復(fù)重試或阻塞渲染。解決進(jìn)設(shè)置面板把最近新開(kāi)的組件逐個(gè)關(guān)閉每關(guān)一個(gè)刷新一次頁(yè)面定位到具體組件后先保持關(guān)閉等腳本更新或換用替代組件。不要一次性全關(guān)再全開(kāi)那樣定位不到問(wèn)題源。4.3 與瀏覽器自帶翻譯或閱讀模式?jīng)_突現(xiàn)象開(kāi)啟瀏覽器翻譯后頁(yè)面布局錯(cuò)亂腳本注入的按鈕跑到奇怪的位置。原因翻譯功能會(huì)替換文本節(jié)點(diǎn)改變 DOM 結(jié)構(gòu)腳本里基于固定選擇器的樣式和事件綁定就失效了。解決在視頻站頁(yè)面上關(guān)閉自動(dòng)翻譯或者把腳本的布局組件設(shè)為“僅原始語(yǔ)言下生效”。閱讀模式同理它會(huì)剝離大部分樣式腳本的增強(qiáng)層基本都會(huì)失效。4.4 移動(dòng)端瀏覽器上的兼容性問(wèn)題現(xiàn)象在移動(dòng)端瀏覽器里裝同樣的管理器腳本能裝但設(shè)置面板打不開(kāi)或顯示不全。原因移動(dòng)端瀏覽器的用戶腳本支持程度參差不齊部分管理器對(duì)import()動(dòng)態(tài)加載支持不完整而且觸屏沒(méi)有鍵盤(pán)快捷鍵依賴快捷鍵的功能直接不可用。解決移動(dòng)端只開(kāi)最基礎(chǔ)的布局類組件不要開(kāi)播放器和快捷鍵相關(guān)組件。如果設(shè)置面板打不開(kāi)嘗試用支持桌面模式的移動(dòng)瀏覽器或者干脆不在移動(dòng)端用這套方案。4.5 多賬號(hào)切換后配置串號(hào)現(xiàn)象同一瀏覽器里切換不同賬號(hào)發(fā)現(xiàn)過(guò)濾規(guī)則和布局設(shè)置跟著賬號(hào)走了但有些設(shè)置又沒(méi)跟著走。原因腳本的配置存儲(chǔ)分兩部分一部分存在瀏覽器本地跟瀏覽器實(shí)例走一部分存在賬號(hào)相關(guān)的存儲(chǔ)鍵里跟賬號(hào)走。切換賬號(hào)時(shí)本地部分不變賬號(hào)部分重新加載導(dǎo)致看起來(lái)“一半保留一半重置”。解決如果你需要多賬號(hào)各自獨(dú)立的配置給每個(gè)賬號(hào)單獨(dú)用一個(gè)瀏覽器配置文件不要在同一配置文件里切賬號(hào)。這是最干凈的做法沒(méi)有之一。5. 進(jìn)階用法把配置變成可遷移的資產(chǎn)走到這一步你已經(jīng)不滿足于在設(shè)置面板里點(diǎn)來(lái)點(diǎn)去了。真正讓 Bilibili-Evolved 變得好用的是把配置當(dāng)成代碼來(lái)管理。設(shè)置面板里的導(dǎo)出功能會(huì)生成一個(gè) JSON 文件里面包含所有組件的開(kāi)關(guān)狀態(tài)和參數(shù)。我一般會(huì)把這個(gè)文件放進(jìn)一個(gè)版本管理目錄里每次大改之前先提交一次改壞了直接回滾。# 把導(dǎo)出的配置文件納入版本管理 mkdir -p ~/configs/bilibili-evolved # 假設(shè)導(dǎo)出的文件叫 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 初始配置布局過(guò)濾播放器基礎(chǔ)開(kāi)關(guān) # 之后每次調(diào)整后重新導(dǎo)出并提交diff 能看出改了哪些參數(shù)邏輯說(shuō)明導(dǎo)出的 JSON 是純文本可以直接用diff或git diff比較兩次配置的差異。這比在設(shè)置面板里憑記憶找改了哪里靠譜得多。如果你在多臺(tái)機(jī)器上用把這個(gè)目錄同步過(guò)去導(dǎo)入即可復(fù)現(xiàn)環(huán)境。參數(shù)說(shuō)明導(dǎo)入時(shí)要注意版本兼容性。新版本導(dǎo)出的配置導(dǎo)入舊版本腳本可能報(bào)錯(cuò)反過(guò)來(lái)舊配置導(dǎo)入新版本通常沒(méi)問(wèn)題因?yàn)樾掳姹疽话銜?huì)做向后兼容。如果導(dǎo)入失敗先看控制臺(tái)報(bào)錯(cuò)里提到哪個(gè)字段手動(dòng)刪掉那個(gè)字段再試。另一個(gè)進(jìn)階方向是只啟用你真正需要的組件。Bilibili-Evolved 的組件列表很長(zhǎng)但日常高頻使用的可能就五六個(gè)。每多開(kāi)一個(gè)組件就多一份加載失敗和沖突的風(fēng)險(xiǎn)。我的習(xí)慣是每季度清一次組件列表把過(guò)去一個(gè)月沒(méi)用過(guò)的關(guān)掉。這個(gè)習(xí)慣幫我省掉了至少三次因?yàn)槔溟T(mén)組件導(dǎo)致的頁(yè)面卡頓排查。最后說(shuō)一個(gè)我踩過(guò)的坑不要在生產(chǎn)力工具用的瀏覽器配置文件里折騰這套腳本。瀏覽器配置文件一旦被腳本改亂恢復(fù)起來(lái)很麻煩。單獨(dú)開(kāi)一個(gè)配置文件專門(mén)用來(lái)折騰折騰穩(wěn)了再考慮要不要遷移到主力配置文件。這個(gè)習(xí)慣讓我在腳本更新翻車時(shí)至少還能用另一個(gè)配置文件正常干活。希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取