Chrome 擴充功能 - 環境設定

我想在我的瀏覽器中添加一些愚蠢的功能。也許我可以透過簡單的擴充來添加它？雖然不存在，但自己寫應該很容易吧？

這就是我幾天前的想法。雖然我沒有完全錯，但開發過程的某些部分比我預期的要耗時一些。我不會說困難，而是很難使用可用的文件來弄清楚。雖然在developer.chrome.com上對API文件、核心概念等進行了很好的描述，但我想要一個特定的開發體驗：

• 具有正確鍵入 chrome 命名空間的 TypeScript
• 將程式碼拆分為多個檔案並匯入/匯出必要的內容
• 使用簡單的 console.log 和/或調試器來調試我的程式碼
• manifest.json 中的自動補全
• 簡單的設置，在我的node_modules中沒有任何捆綁程序和一半的互聯網
• 在瀏覽器中更新和測試擴充功能的簡單方法

無論好壞，我都設法按照自己的意願進行設定。在這篇文章中，我將簡要解釋一般擴展概念並向您展示我如何設定我的開發環境。在接下來的一兩篇文章中，我將重點介紹我的簡單頁面音訊擴充的實作細節。

TLDR：
如果您只想要程式碼，這裡是樣板儲存庫：

巫杜教 / chromium 擴充樣板

Chrom 擴充樣板

此儲存庫旨在成為開發 chromium 擴充功能的起點。

它盡可能簡約，但附有預先配置：

• manifest.json 的自動補全
• TypeScript 從 ts 資料夾轉譯到 dist 目錄
• chrome 命名空間的類型
• 正常工作匯出和匯入（使用 VS Code 工作區設定來實現正確的自動匯入格式）
• 範例清單.json

編碼愉快！

在 GitHub 上查看

ℹ️ 我在下面的所有地方都使用 Windows 11、MS Edge、VS Code 和 npm ℹ️

---

擴充的簡要介紹

讓我們從一般擴展概念的速成課程開始。

每個擴充功能都有一個manifest.json 文件，用於定義其名稱、版本、所需權限和使用的文件。擴充功能可以透過多種不同的方式提供功能：

• 透過彈出視窗 - 擴充功能彈出視窗是當您點擊擴充欄中的擴充圖示時打開的小窗口，
• 透過內容腳本 - 直接注入網站並具有 DOM 存取權限的腳本，
• 透過後台（服務工作者）腳本 - 腳本在單獨的上下文中運行，獨立於打開的網站

還有其他方法，但我將在本指南中堅持使用這三種方法。

另一個重要的概念是訊息傳遞。通常，我們需要結合上述方法，因為它們都有不同的限制。例如，後台腳本不依賴開啟的選項卡，對於持久狀態更有用，但無法存取任何網站的 DOM。因此，我們可能需要從後台腳本獲取一些擴展範圍的數據，使用訊息將其傳遞到內容腳本，並從那裡修改網站。

了解一些有關權限的基礎知識也很有用。簡而言之，如果 manifest.json 未指定正確的權限，某些 API 將無法如預期般運作。例如，如果我們不指定「tabs」權限，則從 tabs API 傳回的物件將不會有 url 欄位。另一方面，我們不應該要求太多的權限 - 如果擴充功能要公開，用戶可能會擔心授予對太多內容的存取權限。

---

創建一個簡單的擴展

靈感來自 https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world

讓我們先使用一個極其簡單的擴充功能來理解我們開發工作流程的核心概念，該擴充功能僅在彈出視窗中顯示一些文字。

文件

首先，我們需要一個manifest.json檔：

// manifest.json
{
  "name": "Hello World",
  "description": "Shows Hello World text",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

名稱、描述、版本和manifest_version可能是不言自明的。 action.default_popup 是點選擴充圖示時將呈現的 HTML 檔案的路徑。 default_icon 是擴充圖示的路徑。兩條路徑都相對於manifest.json 位置。

現在，在與manifest.json相同的目錄中加入icon.png（例如這個）和hello.html檔。
hello.html 看起來像這樣：

<!-- hello.html -->
<p>Hello world</p>

你的整個目錄應該是這樣的：

// manifest.json
{
  "name": "Hello World",
  "description": "Shows Hello World text",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

啟動擴充

要啟動您的擴充功能：

1. 前往edge://extensions/
2. 在左側邊欄中，啟用“開發者模式”
   • 可能還需要「允許其他商店的擴充」
3. 在擴充功能清單上方點選「已解壓縮的檔案」
4. 選擇包含擴充檔的資料夾
5. 您的擴充功能應該出現在清單中，並且其圖示出現在擴充功能工具列中？

現在，點擊圖示後，它將顯示一個帶有「Hello world」文字的小彈出視窗。

這涵蓋了最重要的基礎知識。讓我們轉向更有趣的事情。

---

頁面-音訊擴展環境設置

在manifest.json中自動完成

我們將從 manifest.json 和空目錄開始。

在編寫manifest.json 檔案時能夠自動完成會很棒，不是嗎？幸運的是，它是一個定義明確的標準，並且在 https://json.schemastore.org/chrome-manifest 上有一個 JSON 模式。我們只需要在manifest.json開頭的「$schema」鍵下使用它：

<!-- hello.html -->
<p>Hello world</p>

VS Code 立即開始幫助我們建議欄位名稱並在缺少必填欄位時顯示警告。太棒了！ ？

要使用一些東西來測試我們的設置，請使用manifest.json，如下所示：

.
├── hello.html
├── icon.png
└── manifest.json

• 圖示 - 這只是指定擴充圖示的不同方式
• 背景部分 - 指定 Service Worker JS 檔案的路徑及其類型；它是模組，因為程式碼稍後將使用匯出和匯入

打字稿

使用 TypeScript...好吧，需要 TypeScript。如果您尚未安裝，請從
開始

// manifest.json
{
    "$schema": "https://json.schemastore.org/chrome-manifest"
}

基本配置

為了讓事情組織起來，但又不要太複雜，我將 .ts 原始檔保留在 ts 目錄中。它們將被轉譯器從那裡獲取並作為 .js 檔案放入 dist 目錄中。

這由以下 .tsconfig 描述：

// manifest.json
{
    "$schema": "https://json.schemastore.org/chrome-manifest",
    "name": "Page Audio",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "icons": {
        "16": "icons/logo16x16.png",
        "32": "icons/logo32x32.png",
        "48": "icons/logo48x48.png",
        "128": "icons/logo128x128.png"
    },
    "background": {
        "service_worker": "dist/background.js",
        "type": "module"
    }
}

最重要的位子是compiler.rootDir 和compiler.outDir。其他欄位可以具有不同的值或完全刪除（至少其中一些）。

這是基本配置 - 將一些檔案放在 ts 目錄中並在根目錄中執行 tsc 將在 dist 中建立對應的 .js 檔案。然而，我們缺少一個重要的部分 - 我們將使用的 chrome 命名空間的類型。最簡單的解決方案是透過 npm 添加它們。

添加鍍鉻類型

建立一個空的package.json，只包含括號：

// manifest.json
{
  "name": "Hello World",
  "description": "Shows Hello World text",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

並在命令列中運行：

<!-- hello.html -->
<p>Hello world</p>

您也可以新增腳本來執行 tsc build 並在監視模式下執行。最終的 package.json 應如下圖所示：

.
├── hello.html
├── icon.png
└── manifest.json

ℹ️ chrome 類型版本可能會更高。 ℹ️

新增類型後，我們需要讓 TypeScript 了解它們。為此，只需更新 .tsconfig.json：

// manifest.json
{
    "$schema": "https://json.schemastore.org/chrome-manifest"
}

測試我們的設定是否正常運作：

1. 在ts資料夾中，建立background.ts文件，內容如下
   

   // manifest.json
   {
       "$schema": "https://json.schemastore.org/chrome-manifest",
       "name": "Page Audio",
       "version": "0.0.0.1",
       "manifest_version": 3,
       "icons": {
           "16": "icons/logo16x16.png",
           "32": "icons/logo32x32.png",
           "48": "icons/logo48x48.png",
           "128": "icons/logo128x128.png"
       },
       "background": {
           "service_worker": "dist/background.js",
           "type": "module"
       }
   }
   
   

2. 在命令列中，執行
   

   npm install -g typescript
   

3. 驗證 dist 目錄是否已建立且 background.js 檔案是否出現在其中

4. 更改 ts/background.ts 檔案中 console.log 字串中的某些內容並儲存

5. 檢查是否自動更新了 dist/background.js。

如果有效，那就太棒了！我們幾乎一切都準備好了？

您也可以驗證您的目錄結構是否類似：

// .tsconfig
{
    "compilerOptions": {
        "target": "ES6",
        "module": "ES6",
        "outDir": "./dist",
        "rootDir": "./ts",
        "strict": true,
    }
}

進出口

正如我所提到的，我想將程式碼分割成更小的檔案。為此，匯出和匯入必須正確工作。

朝這個方向邁出的一步是將manifest.json 中的service_worker 指定為「type」：「module」。然而，在使用模組時，TypeScript 和 JavaScript 之間有一個區別 - TypeScript 在導入時不需要檔案副檔名，而 JavaScript 則需要。例如，這個導入：

// package.json
{
}

在 TS 中可以工作，但 JS 需要

npm i -D chrome-types

了解 TS 轉換器 對導入路徑不執行任何操作 也很重要。它足夠“聰明”，能夠理解從 file.js 導入時它還應該查找 file.ts。

結合所有這些，TS 也會對 JS 風格的導入感到滿意，並且在從 file.js 導入時將使用相應的 TS 檔案。 我們需要做的是確保 TS 檔案中的所有導入都具有 .js 副檔名。要在 VS Code 中自動化：

1. 按 CTRL , 開啟設定
2. 切換到「工作區」標籤
3. 搜尋 typescript.preferences.importModuleSpecifierEnding
4. 將其設定為“.js / .ts”選項

現在，每當您使用 VS Code 自動匯入時，它都會將 .js 加入到檔案名稱中？

要測試一切是否正常運作：

1. 使用以下內容建立 ts/hello.ts 檔案
   

   // package.json
   {
       "scripts": {
           "build": "tsc",
           "watch": "tsc -w"
       },
       "devDependencies": {
           "chrome-types": "^0.1.327"
       }
   }
   

2. 在 ts/background.ts 中刪除目前的 console.log 行並開始輸入「hello」

3. 在您使用 Tab 接受建議後，VS Code 應該會自動完成它並添加正確的導入

4. 最後，文件應如下：
   

   // manifest.json
   {
     "name": "Hello World",
     "description": "Shows Hello World text",
     "version": "1.0",
     "manifest_version": 3,
     "action": {
       "default_popup": "hello.html",
       "default_icon": "icon.png"
     }
   }
   

請注意，導入以 .js 副檔名結尾。如果你檢查 dist/background.js 擴充也在那裡，這就是使一切正常工作的原因。

為了確保我們處於同一階段，您可以比較目錄結構：

<!-- hello.html -->
<p>Hello world</p>

Service Worker 的開發工具

好的，我們有不錯的開發經驗。我們還添加了一些 console.log 呼叫...但是現在在哪裡可以找到它們？

如果您在內容腳本中新增 console.log，您只需開啟開發工具，它們就會在那裡，因為內容腳本在與其註入的頁面相同的上下文中運作。然而，來自後台腳本的 console.log 被隱藏得更多一些。

1. 開啟 edge://extensions/ 並載入您的擴充功能（如果您尚未這樣做）
2. 在清單中找到您的擴充

3. 點選「檢查檢視」行中的「service worker」連結：

   

4. 應開啟一個新的開發工具窗口，您將在其中看到來自 Service Worker 的日誌

   • 如果您沒有看到日誌，請點選「檢查檢視」下方的「重新載入」

圖塊底部的三個連結也非常重要

• 「重新加載」-刷新整個擴展，包括對manifest.json的更改；查看此表以了解何時可能需要重新加載
• 「刪除」- 刪除擴充
• 「詳細資料」- 顯示有關擴充功能的更多信息，例如其權限
• （可選）「錯誤」 - 如果安裝 Service Worker 時發生錯誤，此連結將出現並帶您進入錯誤清單

唷。這花了一些時間，但最終我們的環境已經設定好了。從現在開始，我們只需

1. 運行 npm run watch （如果你停止了它）
2. 在 ts 目錄中寫入我們的程式碼
3. （可選）從擴充選項卡重新載入擴充

我們的擴充功能將自動更新！ ⚙️

如果您知道如何自動「重新載入」（無需精心設計的駭客攻擊），請在評論中告訴我

概括

我們的環境已經準備好了！

• 自動完成在manifest.json工作，所以我們不必猜測正確的值是什麼
• TypeScript 幫助我們正確使用 chrome API
• 程式碼可以分割成更小的邏輯檔
• 我們在ts資料夾中寫的程式碼會自動更新
• 我們知道在哪裡可以找到服務工作者和內容腳本的開發工具

在下一部分中，我將描述我的小型「頁面音訊」擴充功能的實作細節。

感謝您的閱讀！

以上是Chrome 擴充功能 - 環境設定的詳細內容。更多資訊請關注PHP中文網其他相關文章！