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