使用 Vite TS 建立瀏覽器擴充功能

讓我們開始這個練習，重點是設定最基本的擴充結構，其中只包含一個清單檔案和一個服務工作者。清單充當設定文件，指定允許擴充功能執行的操作，而服務工作執行緒處理後台任務，主要響應瀏覽器事件，在本例中，它會在安裝擴充功能時記錄日誌。

{
  "name": "Simple",
  "version": "0.0.1",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  }
}

manifest.json

console.log("Initialized background script!");

chrome.runtime.onInstalled.addListener((object) => {
  console.log("Installed background script!");
});

background.js

Service Worker 可以根據需要變得複雜，但我們暫時保持簡單，因為此任務的目標是將這個簡單的兩個檔案擴充轉換為 Vite 專案。

那為什麼要使用Vite呢？主要是因為我決定使用 TypeScript，這將顯著提高程式碼品質、可維護性和生產力。除了提供自我文件之外，TypeScript 還允許我在編譯時而不是運行時捕獲與類型相關的錯誤，從而增強整體開發體驗。

維特

雖然帶有 TypeScript 的 Node 專案足以將我的 TS 程式碼編譯成我的擴充所需的普通 JavaScript，但我選擇了 Vite。 Vite，特別是其 Rollup 捆綁器，提供了廣泛的功能，例如樹搖動和捆綁縮小。此外，如果我決定將來為擴充功能創建 UI 元件，Vite 強大的插件生態系統將使我能夠輕鬆整合 React。

考慮到這一點，讓我們開始使用其 vanilla-ts 範本建立 Vite 專案。

npm create vite@latest simple-extension -- --template vanilla-ts

執行指令並安裝依賴項後，您將擁有一個使用 TypeScript 設定的小型 Web 專案。但是，由於此設定並不完全符合我們的需要，因此我們將從一些清理開始。首先，從根資料夾中刪除 index.html 文件，因為它不再需要了。然後，刪除 src 資料夾中除 vite-env.d.ts 之外的所有文件，該文件為 Vite 特定功能提供類型定義。最後，刪除公用資料夾中的所有內容。

⚠️ 如果您在 tsconfig 檔案中遇到有關未知編譯器選項的錯誤，請確保您的編輯器使用為專案安裝的相同 TypeScript 版本。

接下來，在src資料夾中建立一個名為background.ts的新文件，並將原始background.js檔案中的程式碼複製到其中。

您很快就會注意到 TypeScript 需要額外的上下文才能正常運行，因為如果沒有適當的類型，它無法識別 chrome 物件。若要解決此問題，請安裝 @types/chrome 為 chrome 提供必要的類型定義。

{
  "name": "Simple",
  "version": "0.0.1",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  }
}

安裝後，TypeScript 錯誤就會消失。但是，您可能會注意到 onInstalled 回呼中出現一條警告訊息。這是由於 Vite 在 TypeScript 設定中為我們配置了 linting 屬性。

console.log("Initialized background script!");

chrome.runtime.onInstalled.addListener((object) => {
  console.log("Installed background script!");
});

tsconfig.json

由於我們定義了一個未使用的對象，所以讓我們繼續刪除它。這應該就是我們所需要的，所以現在我們可以編譯專案了。

npm create vite@latest simple-extension -- --template vanilla-ts

似乎有一個問題——預設的 Vite 配置仍在嘗試使用我們剛剛刪除的一些檔案作為程式碼入口點。

npm i -D @types/chrome

我們需要自訂 Vite 配置以在庫模式下運行。這是該項目所需的最低配置。

/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true

vite.config.ts

在上面的配置中，我們只是將項目的輸入設為 ./src/background.ts 並將輸出檔名調整為 [name].js。預設情況下，Vite 會在生產版本的檔案名稱中附加一個雜湊值（例如，background-[hash].js），但我們需要一個精確的檔案名稱匹配，manifest.json 才能正常運作。

說到manifest.json，它應該位於哪裡？這部分很簡單：任何應原樣複製（無需轉換）到輸出資料夾的檔案都應放置在公用資料夾中。現在，如果我們再次建立項目，我們將在 dist 資料夾中找到編譯的兩個檔案瀏覽器擴充功能。

npm run build

安裝

現在讓我們驗證一切是否如預期般運作。如果您之前沒有在本地測試過瀏覽器擴展，只需按照以下簡單步驟操作：

1. 在新分頁中輸入 chrome://extensions 開啟擴充頁面。
2. 透過切換開發者模式開關啟用開發者模式。
3. 點選載入解壓縮後的，選擇擴充目錄，即Vite產生的dist資料夾。 就是這樣！擴充功能現已安裝。如果您單擊 Service Worker 鏈接，該 Service Worker 的 DevTools 將打開，您可以在其中查看我們的 Worker 運行時產生的日誌。

簡單的 vite 擴充

以上是使用 Vite TS 建立瀏覽器擴充功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！