Skip to main content
Extension.js 用 SWC 編譯 TypeScript,它只抹除型別,從不檢查型別。型別檢查是你用 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.*:
建置並不需要這些套件。SWC 從來不讀型別,所以不論有沒有它們,建置都會成功。

固定你自己的版本

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
當 Extension.js 為一個還沒有 tsconfig.json 的專案寫出一份 tsconfig.json 時,那份檔案不帶 include 陣列。TypeScript 於是會讀取專案資料夾底下的每一個檔案,所以照樣找得到 extension-env.d.ts。而一個你自己寫、卻漏掉這個檔案的 include 陣列,會讓資源匯入與 browser 全域變數一起失效。

症狀與修正

最佳實務

  • 把 extension-env.d.ts 當成建置產物看待。你想提交它也可以,但絕不要編輯它。
  • 只有當你需要某個型別套件的特定版本時,才在你自己的 devDependencies 裡宣告它。
  • 在持續整合中執行 tsc --noEmit。Extension.js 的建置不會因為型別錯誤而失敗。

下一步