Skip to main content
用一份設定檔同時設定瀏覽器預設值、指令行為與 bundler 客製化。 跨團隊共用瀏覽器預設、指令選項與建置設定,不再重複輸入 CLI 旗標。Extension.js 會從專案根目錄讀取 extension.config.js(或 .mjs / .cjs),並套用到每個指令與 bundler。

運作方式

在專案根目錄(通常和 package.json 同層)加上 extension.config.js 支援的檔名:
  • extension.config.js
  • extension.config.mjs
  • extension.config.cjs
頂層的鍵:

型別安全的設定

Extension.js 從 extension 套件匯出 FileConfig 型別,讓編輯器能對你的設定自動完成與型別檢查。用 JSDoc @type 標籤標註匯出——它可在 extension.config.js.mjs.cjs 中運作,且不需要建置步驟:

設定檔的環境載入

extension.config.* 在 Node 中執行,應該從 process.env.* 讀取值。
  • Extension.js 在評估 extension.config.* 之前,會預先載入 env 檔。
  • 它會先檢查專案資料夾。
  • 在 monorepo 中,若 Extension.js 找不到專案本地的 .env*,會 fallback 到最近的 workspace 根目錄,也就是包含 pnpm-workspace.yaml 的資料夾。
  • 比起在設定檔中匯入 dotenv,建議優先使用內建的 env 預載。

瀏覽器設定

需要為每個目標設定不同的瀏覽器預設值?使用 browser
支援的瀏覽器鍵包括:chromeedgefirefoxchromiumchromium-basedgecko-basedfirefox-based 常用的瀏覽器欄位:
  • profilepersistProfile
  • preferences
  • browserFlagsexcludeBrowserFlags
  • chromiumBinarygeckoBinary
  • extensions(僅載入的附屬擴充功能)

瀏覽器目標能力

指令設定

commands 定義每個指令的預設值:
注意事項:
  • Extension.js 會把頂層的 extensionstranspilePackages 合併進各指令的預設值。
  • 各指令的值會覆寫頂層的值。
  • start 指令會在內部依序執行 buildpreview。Extension.js 會套用 commands.start 中的設定,包括 profilebrowserFlagsstartingUrl 等瀏覽器啟動選項。你也可以把建置專屬的設定放在 commands.build

指令共用能力

build 指令能力

dev 指令能力

記錄能力

Rspack 設定

需要進階的 bundler 客製化?使用 config 來修補產生出的 Rspack 設定:
config 也可以是物件,Extension.js 會把它合併到產生出的設定之上。

完整範例

最佳實務

  • 瀏覽器專屬值放在 browser:讓指令定義專注於工作流程,而非瀏覽器內部細節。
  • 有意識地使用頂層預設:把共用的 extensions / transpilePackages 放在根層,只在需要的地方覆寫。
  • 優先使用 chromiumBinarygeckoBinary 名稱:它們與當前的指令與型別介面一致。
  • config hook 保持最小:只補上 Extension.js 一級選項尚未涵蓋的部分。

下一步