Skip to content

開發手冊 ​

這一部分寫給準備看原始碼、改規則或提 PR 的人。只需要安裝擴充功能的話,看 使用指南 就夠了。

章節 ​

  • 架構概覽 — 專案目錄結構、各模組職責、資料流
  • 規則檔案格式 — public/rules/ 下 JSON 怎麼組織,nested groups + defaults 繼承
  • 偵測流程 — 從 webRequest / 頁面注入到彈窗渲染走過哪些環節
  • 貢獻規則 — 怎麼往內建規則集合加入新技術
  • 建置與發布 — 本地建置、打包、簽署 crx、發布工作流程

技術棧概況 ​

專案主體是 Vite 8 + Vue 3 + TypeScript + @crxjs/vite-plugin 3.x。背景腳本是 Manifest V3 ESM service worker,套件管理器用 bun。

規則放在 public/rules/ 下,按頁面規則、回應標頭規則、WordPress / Drupal 生態等方向拆成多個 JSON 檔案。建置時會預處理規則,注入 __hints / __legacyHints / __keywordCombined 這類用於比對加速的欄位。

開發常用指令 ​

bash
bun install            # 安裝相依套件
bun run dev            # 啟動 vite dev server,擴充功能熱更新
bun run build          # 建置到 dist/,可載入到 chrome
bun run typecheck      # vue-tsc 嚴格型別檢查
bun run lint           # eslint 檢查
bun run docs:dev       # 啟動本文件站本地預覽
bun run docs:build     # 建置文件靜態站

dev 模式下,擴充功能頁面支援熱更新。改 popup / settings / help 通常會自動重新整理;改 src/background/ 或 content script 後,需要到 chrome://extensions/ 手動重新整理擴充功能卡片。

Vue 入口 ​

三個獨立 SPA 入口,分別建置,互不干擾:

入口檔案說明
popupsrc/ui/popup/index.html瀏覽器右上角點擴充功能圖示彈出的 440px × 600px 小視窗
settingssrc/ui/settings/index.html在 chrome://extensions/ 詳細資訊頁開啟的 options page
helpsrc/ui/help/index.html設定頁裡點「使用說明」開啟的獨立分頁

相關連結 ​

基於 MIT 協議發布