tsc 另外執行的一步。本頁說明這一步如何解析 chrome.*、browser.* 與 process.env。
Extension.js 會產生什麼
當專案使用 TypeScript 時,extension dev 與 extension build 會在 package.json 旁邊寫下一個 extension-env.d.ts 檔案。它在每次執行時都會重新產生,所以不要編輯它。
這個檔案會引入 extension 套件所發佈的環境型別:
extension-env.d.ts
EXTENSION_* 環境變數鍵也在這裡取得型別。這就是 process.env.EXTENSION_MODE 不需要額外設定就能解析的原因。
隨 Extension.js 一起安裝的型別
從 Extension.js 4.1.19 起,extension 套件把這些引用需要的三個型別套件列為相依套件:
它們會隨
extension 一起安裝,所以在一個新專案裡,tsc 不需要額外安裝就能解析 chrome.* 與 browser.*:
固定你自己的版本
extension 套件接受這三個型別套件的任何版本。當你的專案自己宣告了其中一個時,npm、pnpm 與 Bun 會重複使用你的專案所安裝的那一份。
當你的 tsconfig.json 沒有 types 陣列時,TypeScript 也會載入你的專案所宣告的那一份。以你自己 package.json 裡的版本為準:
package.json
使用 Extension.js 4.1.18 或更早版本的專案
在 4.1.19 之前,extension/types 引用了 chrome,但不會安裝 @types/chrome。一個呼叫 chrome.*、卻沒有自己那一份型別的專案跑 tsc 會失敗:
extension 升級到 4.1.19 或更新的版本。如果你留在更早的版本上,請手動安裝這個套件:
@types/webextension-polyfill 之前,browser 的型別是 any。想為 browser.* 提供型別,請把這個套件也裝上:
升級後 browser.* 出現型別錯誤
從 4.1.19 起,browser 擁有完整的 webextension-polyfill 型別,而不再是 any。以前能通過 tsc 的程式碼可能會出現新的型別錯誤,例如呼叫了 polyfill 沒有宣告的 API。
修正這個呼叫,或者對只有 Chromium 提供的 API 改用 chrome.*。同一個選擇在執行階段那一側的樣子,請閱讀 跨瀏覽器相容。
讓 extension-env.d.ts 留在 include 清單裡
只有當 TypeScript 讀得到它時,這個產生出來的檔案才有用。範本產生的tsconfig.json 會點名它:
tsconfig.json
tsconfig.json 的專案寫出一份 tsconfig.json 時,那份檔案不帶 include 陣列。TypeScript 於是會讀取專案資料夾底下的每一個檔案,所以照樣找得到 extension-env.d.ts。而一個你自己寫、卻漏掉這個檔案的 include 陣列,會讓資源匯入與 browser 全域變數一起失效。
症狀與修正
最佳實務
- 把
extension-env.d.ts當成建置產物看待。你想提交它也可以,但絕不要編輯它。 - 只有當你需要某個型別套件的特定版本時,才在你自己的
devDependencies裡宣告它。 - 在持續整合中執行
tsc --noEmit。Extension.js 的建置不會因為型別錯誤而失敗。
下一步
- 閱讀 TypeScript 設定的其餘部分。
- 了解這些型別所宣告的環境變數。
- 檢視跨瀏覽器相容。

