擴充功能中的 JavaScript 與 TypeScript

​

範本範例

​

javascript

npx extension@latest create my-extension --template=javascript

​

content

npx extension@latest create my-extension --template=content

​

JavaScript 能力

​

支援的 script 進入點

​

在 manifest.json 中宣告 script 的範例

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "background": {
    "service_worker": "./scripts/background.ts"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["./scripts/content-script.ts"]
    }
  ]
}

​

開發行為

• Content script： Extension.js 注入 hot module replacement（HMR）／重新掛載流程，達成快速更新。
• 擴充功能頁面： 頁面 script 走頁面 HMR 行為。
• Background／service worker： 視變更類型而定，script 更新可能觸發整個擴充功能的 hard reload。
• 進入點清單變更： 變更 manifest script 結構可能需要重新啟動開發伺服器。

​

Script 位置與慣例

• 把 script 為主的擴充功能進入點放在專案根目錄的 scripts/。
• 把帶有自己 script 的 HTML 進入點放在 pages/。
• 維持 manifest 參考路徑穩定；不要在沒更新 manifest 的情況下移動進入檔案。

​

轉譯與打包預設

• 預設使用 SWC 作為 JS／TS／JSX／TSX 的轉譯器。
• Extension.js 使用以瀏覽器為優先的 package.json 欄位解析（browser、module、main）。
• Extension.js 會以可預期方式輸出進入點，預設不會把程式碼拆分到不同輸出檔。
• 路徑解析會改寫支援的 API 中靜態的擴充功能路徑文字。

​

動態 import 注意事項

• Content script 的動態 import 有執行階段限制；Extension.js 會在可能時使用 loader 後備。
• Service worker 的延遲載入有瀏覽器限制；對於 service worker 啟動時必須立即可用的程式碼，請優先使用 eager import。

​

最佳實務

• 讓進入 script 保持精簡，把功能邏輯放到共用模組。
• 對擴充功能 API 優先使用靜態 import 路徑，讓路徑解析能安全標準化它們。
• 避免在 content script 與 service worker 中做不必要的動態 import。
• 在開發流程中把 manifest script 清單的編輯視為結構性變更。

​

後續步驟

• 在 dev 更新行為中了解更新結果。
• 透過 Special folders 學習如何組織檔案。
• 繼續閱讀 background script 與 service worker。