我想在我的瀏覽器中添加一些愚蠢的功能。也許我可以透過簡單的擴充來添加它？雖然不存在，但自己寫應該很容易吧？
這就是我幾天前的想法。雖然我沒有完全錯，但開發過程的某些部分比我預期的要耗時一些。我不會說困難，而是很難使用可用的文件來弄清楚。雖然在developer.chrome.com上對API文件、核心概念等進行了很好的描述，但我想要一個特定的開發體驗：
無論好壞，我都設法按照自己的意願進行設定。在這篇文章中，我將簡要解釋一般擴展概念並向您展示我如何設定我的開發環境。在接下來的一兩篇文章中，我將重點介紹我的簡單頁面音訊擴充的實作細節。
TLDR：
如果您只想要程式碼，這裡是樣板儲存庫：
巫杜教
/
chromium 擴充樣板
此儲存庫旨在成為開發 chromium 擴充功能的起點。
它盡可能簡約，但附有預先配置：
編碼愉快！
ℹ️ 我在下面的所有地方都使用 Windows 11、MS Edge、VS Code 和 npm ℹ️
讓我們從一般擴展概念的速成課程開始。
每個擴充功能都有一個manifest.json 文件，用於定義其名稱、版本、所需權限和使用的文件。擴充功能可以透過多種不同的方式提供功能：
還有其他方法，但我將在本指南中堅持使用這三種方法。
另一個重要的概念是訊息傳遞。通常，我們需要結合上述方法，因為它們都有不同的限制。例如，後台腳本不依賴開啟的選項卡，對於持久狀態更有用，但無法存取任何網站的 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"
}
}
要啟動您的擴充功能：
現在，點擊圖示後，它將顯示一個帶有「Hello world」文字的小彈出視窗。
這涵蓋了最重要的基礎知識。讓我們轉向更有趣的事情。
我們將從 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
使用 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"
}
測試我們的設定是否正常運作：
在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"
}
}
在命令列中，執行
npm install -g typescript
驗證 dist 目錄是否已建立且 background.js 檔案是否出現在其中
更改 ts/background.ts 檔案中 console.log 字串中的某些內容並儲存
檢查是否自動更新了 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 中自動化：
現在，每當您使用 VS Code 自動匯入時，它都會將 .js 加入到檔案名稱中？
要測試一切是否正常運作：
使用以下內容建立 ts/hello.ts 檔案
// package.json
{
"scripts": {
"build": "tsc",
"watch": "tsc -w"
},
"devDependencies": {
"chrome-types": "^0.1.327"
}
}
在 ts/background.ts 中刪除目前的 console.log 行並開始輸入「hello」
在您使用 Tab 接受建議後，VS Code 應該會自動完成它並添加正確的導入
最後，文件應如下：
// 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>
好的，我們有不錯的開發經驗。我們還添加了一些 console.log 呼叫...但是現在在哪裡可以找到它們？
如果您在內容腳本中新增 console.log，您只需開啟開發工具，它們就會在那裡，因為內容腳本在與其註入的頁面相同的上下文中運作。然而，來自後台腳本的 console.log 被隱藏得更多一些。
點選「檢查檢視」行中的「service worker」連結：
應開啟一個新的開發工具窗口，您將在其中看到來自 Service Worker 的日誌
圖塊底部的三個連結也非常重要
唷。這花了一些時間，但最終我們的環境已經設定好了。從現在開始，我們只需
我們的擴充功能將自動更新！ ⚙️
如果您知道如何自動「重新載入」（無需精心設計的駭客攻擊），請在評論中告訴我
我們的環境已經準備好了！
在下一部分中，我將描述我的小型「頁面音訊」擴充功能的實作細節。
感謝您的閱讀！
以上是Chrome 擴充功能 - 環境設定的詳細內容。更多資訊請關注PHP中文網其他相關文章！
