tsc 步驟、ts-loader 或額外的 bundler rule。
建置完全不需要 typescript 套件。SWC 會編譯你的原始碼並移除型別。這個套件只對編輯器工具與 tsc --noEmit 型別檢查有意義。也因此,缺少 typescript 套件永遠不會讓建置失敗,這一點和缺少框架整合套件不同。
什麼情況下適合使用 TypeScript
- 你希望在擴充功能各情境之間有更安全的重構與更明確的介面。
- 你會在 background script、content script 與 UI 介面之間共用邏輯。
- 你需要在使用 AI 產生程式碼時,仍能取得可預期的 API 使用方式。
範本範例
new-typescript

content-typescript

自動產生的 ambient 型別
對於 TypeScript 專案,Extension.js 會在你的專案根目錄產生extension-env.d.ts 檔,包含 ambient 宣告(browser/runtime 全域、EXTENSION_PUBLIC_* 環境變數,以及打包工具型別)。dev 與 build 都會重新產生它,因此編輯器型別與 CI 上的 tsc --noEmit 會保持同步。可以把它納入版本控管或加入 git ignore,兩種方式都可以——下一次執行時會重新建立。
在既有擴充功能中使用
依下列步驟把 TypeScript 加入既有擴充功能。安裝
- 將 TypeScript 安裝為 development dependency:
- 初始化 TypeScript 設定檔
tsconfig.json:
設定
TypeScript 偵測與需求
Extension.js 會在package.json 旁邊尋找 tsconfig.json。
- 有
.ts原始檔卻沒有tsconfig.json時,Extension.js 會在專案中寫入一份基準設定。建置會顯示Creating a default tsconfig.json並繼續進行。 - 若專案宣告了
typescript相依套件,但還沒有tsconfig.json、也還沒有.ts原始檔,Extension.js 會為它寫入一份基準設定。
moduleResolution是bundler,對應 Rspack + SWC pipeline。已被移除的node(node10)模式會讓 TypeScript 7 上的tsc --noEmit失敗。- 只有當 Extension.js 在專案中偵測到 JSX 框架時,
jsx才會是react-jsx。沒有偵測到時,它會維持preserve。
自動型別
開發階段,Extension.js 會在專案根目錄產生extension-env.d.ts。這個檔案包含 Extension.js API 與 browser polyfill 的型別宣告。
轉譯與型別檢查的差別
預設的打包 pipeline 會編譯 TypeScript,但不會在打包過程中執行完整的tsc 型別檢查。
建議的 scripts:
下一步
- 了解 Extension.js 如何處理 ECMAScript modules。
- 探索 Sass modules 等樣式選項。
- 閱讀 瀏覽器擴充功能中的 JavaScript 與 TypeScript 檔案。
- 用一套 TypeScript 程式碼跨瀏覽器發布,詳見 跨瀏覽器相容性。

