extension.config.js(或 .mjs / .cjs),並套用到每個指令與 bundler。
運作方式
在專案根目錄(通常和package.json 同層)加上 extension.config.js。
支援的檔名:
extension.config.jsextension.config.mjsextension.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:
chrome、edge、firefox、chromium、chromium-based、gecko-based、firefox-based。
常用的瀏覽器欄位:
profile、persistProfilepreferencesbrowserFlags、excludeBrowserFlagschromiumBinary、geckoBinaryextensions(僅載入的附屬擴充功能)
瀏覽器目標能力
指令設定
用commands 定義每個指令的預設值:
- Extension.js 會把頂層的
extensions與transpilePackages合併進各指令的預設值。 - 各指令的值會覆寫頂層的值。
start指令會在內部依序執行build與preview。Extension.js 會套用commands.start中的設定,包括profile、browserFlags與startingUrl等瀏覽器啟動選項。你也可以把建置專屬的設定放在commands.build。
指令共用能力
build 指令能力
dev 指令能力
記錄能力
Rspack 設定
需要進階的 bundler 客製化?使用config 來修補產生出的 Rspack 設定:
config 也可以是物件,Extension.js 會把它合併到產生出的設定之上。
完整範例
最佳實務
- 瀏覽器專屬值放在
browser:讓指令定義專注於工作流程,而非瀏覽器內部細節。 - 有意識地使用頂層預設:把共用的
extensions/transpilePackages放在根層,只在需要的地方覆寫。 - 優先使用
chromiumBinary/geckoBinary名稱:它們與當前的指令與型別介面一致。 confighook 保持最小:只補上 Extension.js 一級選項尚未涵蓋的部分。

