專案介紹
一款讓海外使用者觀看網頁版 Bilibili(www.bilibili.com)影片與直播更順暢的開源、永久免費瀏覽器擴充套件。B 站預設分配的取流 CDN 節點對海外用戶常繞路、速度不佳(造成緩衝與載入緩慢),此擴充會將影片與直播取流的 CDN host 動態重排為對當地最快的節點,並在偵測到分段請求失敗或播放卡住時自動 fallback 至 B 站原生備援節點。
支援全球所有國家:台灣、新加坡、香港、日本、澳洲、美國等已收錄國家的節點經當地使用者實測篩選,其他國家可搭配自製的 CDNSpeedTest 桌面測速工具建立專屬的自訂節點列表。同一份原始碼同時支援 Chrome / Edge / Firefox / Safari 四大瀏覽器平台,以及繁中/簡中/英文/日文/韓文五語系介面。
專案以社群回饋驅動迭代——持續在 Bilibili 相關論壇與社群蒐集使用者意見,據此決定功能方向與修復優先順序。從技術架構、開發到上架與維護皆為個人獨立完成。
重大成就
獨立判斷產品方向,僅以 2 天開發完成並上架;未投放任何付費廣告,靠主動在 Bilibili 相關論壇/社群發文推廣所帶來的自然流量,上架 9 天周活躍使用者(WAU)即突破 1,000
上架 83 天(不到 3 個月)週活躍使用者突破 10,000(2026/10/18 達 10,706),最近 4 週平均每週成長 28%、每日淨增約 240 名使用者;依 chrome-stats 全商店統計,上架 3 個月內達到 1 萬使用者的擴充不到 0.1%,規模已超過 Chrome 線上應用程式商店 97% 的擴充
累計 163 則評分、平均 4.9★、98% 為 5 星(160 則),其中 106 則附有具體文字回饋,Edge 與 Firefox 的評分全數 5 星;持續在論壇與社群蒐集回饋,據此排定修復優先順序、驅動功能迭代方向,形成「推廣—蒐集回饋—迭代」的正向循環
技術亮點
- 01
Vibe Coding 實踐
全程以 Claude Code 作為編碼 agent 開發,從技術架構、程式碼撰寫到商店上架素材,僅耗時 1 個週末即完成並上線
- 02
MAIN world 注入攔截 fetch/XHR 與 JSON 屬性
透過 Manifest V3 content script 注入頁面 MAIN world,hook
fetch/XMLHttpRequest以及playinfo物件的 setter,即時改寫 playurl / DASH manifest 中的 CDN host,完成串流節點重排且不影響頁面原生行為;依網頁版播放器的實測行為調整做法——只改寫 playurl 對播放中的影片無效,因此直接改寫分段請求(.m4s)的 host - 03
雙 world 橋接架構與訊息信任邊界
MAIN world 無法存取
chrome.storage/chrome.i18n等擴充 API,因此設計 ISOLATED world 的橋接腳本,透過postMessage/localStorage與 MAIN world 溝通,同步設定與多語系文案;頁面上任何腳本都能偽造postMessage,所以會寫入設定的訊息(自動測速結果、節點切換)只接受本輪送測清單或白名單內的 CDN host,避免第三方腳本永久改掉使用者的節點 - 04
自動容錯 Fallback 機制
即時監控分段請求狀態(403/404/5xx/逾時)與播放進度,偵測到失敗或卡頓(8 秒內無進度且無網路流量)時,先靜默切換至 B 站原生備援節點,備援也失效才彈出提示,交由使用者決定是否切換備用 URL
- 05
即時節點測速工具
獨立測速頁面,針對「當前影片、當前畫質」的實際分段逐一實測各 CDN 節點下載速度(8MB 或 5 秒取先到者),不影響使用者當下實際使用的 CDN;結果依吞吐量標示該節點夠看 8K/4K/1080P/720P 還是可能卡頓,測速門檻可一鍵套用快/適中/準確三種預設
- 06
直播串流選線
攔截路徑含
/live-bvc/的 FLV / m3u8 / fMP4 串流請求,以正規表示式解析ov|cn-gotcha<集群號>host 並改寫為使用者偏好的線路(國際 / 中國 / 各自備用),再呼叫livePlayer.reload()在播放器內重新拉流、不整頁刷新;快取getRoomPlayInfo(含頁面 SSR 注入的roomInitRes)讓同一直播間固定同一組節點,線路不存在、失敗或卡住時就地退回國際線路 - 07
直播測速模型
FLV 依碼率推送,吞吐量≈碼率、量不出餘裕,因此改量兩個獨立指標——「切台卡頓」(請求到首個可播放音視訊 tag/起播所需分片的時間,N 次平均)與「持續觀看掉隊秒數」:以播放緩衝模型計算 max(0, 經過牆鐘秒 − 已收節目秒) 的最大值(Skorokhod reflection),FLV 以 tag 時間戳、fMP4 以
#EXTINF計算節目秒;全程使用原生fetch繞開自身 hook,不干擾正在播放的線路 - 08
依地區自動選線與自動測速
節點清單擴充至約 300 個、橫跨 67 個 CDN 池,透過 B 站 zone API 回傳的國際電話區碼自動判定國家並套用該國依 CDN 池分散的建議前 10 名;安裝後或切換國家時,第一支影片會在背景自動測速一次並換到最快節點;可選的「自動切換最快節點」會在每支影片背景測速後換到最快節點,並以 sessionStorage 記錄已測影片、以世代計數器讓手動測速可中途取代自動測速
- 09
群眾外包測速桌面工具 CDNSpeedTest 與資料驅動選節點
以 Python(tkinter + PyInstaller)打包成 Windows exe,讓海外使用者在當地網路實測各節點:依「總頻寬 × 0.5 ÷ B 站單連線速度」動態決定並行數並據此預估耗時;系統 DNS 不代表當地時改走 Google DoH 並帶出口 IP 的 /24 作為 ECS;以 ip-api / proxycheck、本機預設路由網卡與時區差等多重訊號偵測 VPN;B 站 QR code 登入的 cookie 只存在記憶體。測速報告經 Google Apps Script 回收至 Google Sheets 與 Neon(Postgres),再依各國 ISP 市占加權的「覆蓋率」從累積報告中挑出每國預設節點與建議清單,並以擴充內依國家顯示的公告欄與測速招募抽獎持續補齊樣本不足的 ISP
- 10
跨程式安全匯入節點
瀏覽器不允許外部程式寫入擴充 storage,因此設計
#cdnsw-import=URL hash 深連結——桌面工具讀取 Chrome / EdgePreferences、Firefoxextensions.json偵測哪個瀏覽器設定檔裝了擴充,再以對應設定檔開啟深連結,由擴充自行寫入「自訂節點列表」;background 端只接受內建白名單中的節點,避免任意網站藉此把影片導向自己的網域;建議清單同一 CDN 池最多 2 個,單池故障時仍有其他池可切換 - 11
一鍵問題回報與診斷管線
擴充內的回報視窗自動附上版本、設定與最近 10 分鐘的診斷事件(節點、速度、卡頓與自動切換紀錄),送到 Cloudflare Worker(KV 做每 IP 限流)後寫入私有 GitHub repo 保存完整日誌、同時開公開 issue 讓使用者追蹤處理進度,並經 Google Apps Script 寄出確認信;除錯疊層同步顯示緩衝秒數、卡頓計時與最近事件
- 12
可重現建置(Reproducible Build)
純 Node.js 腳本(jszip + sharp + puppeteer)將同一份原始碼依 Chrome / Edge / Firefox 三種 manifest 分別打包成 zip,只要原始碼不變,跨平台每次打包產出的 zip bytes 完全相同
- 13
自動化商店素材產出
以 Puppeteer 自動開啟真實 Bilibili 影片頁與擴充畫面,依序切換五語系拍下真實素材,再以 sharp 合成 Chrome / Edge / Firefox、Mac、iPhone、iPad 四組商店截圖與總覽圖
- 14
發版流程自動化
以五語系
changelog.json同時維護未上架(unreleased)與各版本內容,打包時自動剔除未上架項目避免功能外流;擴充更新後首次開啟設定選單顯示一次性「更新內容」提示;git pre-push hook 在 changelog 未更新時攔截推送;Node.js 腳本透過 Chrome / Edge / Firefox 商店 API 自動上傳版本草稿,並以 Claude Code skill 串起升版、建 release 分支、更新五語商店文案到合併回主線的完整流程 - 15
Safari Web Extension(iOS + macOS)
建立 Xcode 專案,以相對路徑直接參照同一份
src/的 manifest、JS、HTML 與語系檔而不複製檔案,四大瀏覽器平台共用單一原始碼並送審 Mac App Store - 16
論壇反饋驅動迭代與成長追蹤
大量蒐集並追蹤 Bilibili 相關論壇與社群中的使用者反饋與討論,歸納出常見痛點以排定修復優先順序、驅動功能迭代方向;自動彙整三家商店後台、GA 與測速樣本產生成長報告,據此決定下一個主攻市場與要補的 ISP