建構第一個 Hello World 擴充功能，瞭解 Chrome 擴充功能開發作業的基本概念。
總覽
您將建立「Hello World」範例、在本機載入擴充功能、找出記錄檔，並瞭解其他最佳化建議。
Hello World
使用者點選擴充功能工具列圖示時，這個擴充功能會顯示「Hello Extensions」。
首先建立用來儲存擴充功能檔案的新目錄。您也可以視需要從 GitHub 下載完整原始碼。
接著，在這個目錄中建立名為 manifest.json 的新檔案。這個 JSON 檔案會說明擴充功能的功能和設定。舉例來說，大多數的資訊清單檔案都包含 "action" 鍵，用來宣告 Chrome 應將哪個圖片用作擴充功能的動作圖示，以及在點選擴充功能的動作圖示時，在彈出式視窗中顯示的 HTML 頁面。
{
"manifest_version": 3,
"name": "Hello Extensions",
"description": "Base Level Extension",
"version": "1.0",
"action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}
下載圖示至目錄，並務必將圖示名稱變更為 "default_icon" 鍵中的名稱。
針對彈出式視窗，請建立名為 hello.html 的檔案，然後加入下列程式碼：
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>
點選擴充功能的動作圖示 (工具列圖示) 時，現在會顯示彈出式視窗。您可以將檔案載入本機，在 Chrome 中進行測試。確認所有檔案都已儲存。
載入未封裝的擴充功能
如要在開發人員模式下載入未封裝的擴充功能，請按照下列步驟操作：
- 在新分頁中輸入
chrome://extensions，即可前往「延伸功能」頁面。(chrome://網址是設計為無法連結)。- 或者，您也可以按一下「額外資訊」選單的拼圖按鈕，然後選取選單底部的「管理額外資訊」。
- 或者，按一下 Chrome 選單，將滑鼠游標懸停在「更多工具」上，然後選取「擴充功能」。
- 按一下「開發人員模式」旁邊的切換鈕，啟用開發人員模式。
- 按一下「Load unpacked」按鈕，然後選取擴充功能目錄。
擴充功能頁面 (chrome://extensions)
好了！擴充功能已成功安裝。如果資訊清單中未納入任何擴充功能圖示，系統會為擴充功能建立一般圖示。
固定擴充功能
根據預設，當您在本機載入擴充功能時，該擴充功能會顯示在擴充功能選單 (
) 中。您可以將擴充功能固定在工具列，在開發期間快速存取擴充功能。
按一下擴充功能的動作圖示 (工具列圖示)，就會看到彈出式視窗。
重新載入擴充功能
回到程式碼，在資訊清單中將擴充功能的名稱變更為「Hello Extensions of the world!」。
{
"manifest_version": 3,
"name": "Hello Extensions of the world!",
...
}
儲存檔案後，您必須重新整理擴充功能，才能在瀏覽器中看到這項變更。前往「額外資訊」頁面，然後按一下「開啟」/「關閉」切換鈕旁的重新整理圖示：
重新載入擴充功能的時機
下表列出需要重新載入哪些元件，才能查看變更：
| 擴充功能元件 | 需要重新載入擴充功能 |
|---|---|
| 資訊清單 | 是 |
| Service worker | 是 |
| 內容指令碼 | 是 (加上代管網頁) |
| 彈出式視窗 | 否 |
| 「選項」頁面 | 否 |
| 其他擴充功能 HTML 網頁 | 否 |
尋找控制台記錄和錯誤
控制台記錄檔
在開發期間，您可以存取瀏覽器控制台記錄檔來偵錯程式碼。在這種情況下，我們會找出彈出式視窗的記錄。請先在 hello.html 中加入指令碼標記。
<html>
<body>
<h1>Hello Extensions</h1>
<script src="popup.js"></script>
</body>
</html>
建立 popup.js 檔案，並加入下列程式碼：
console.log("This is a popup!")
如要查看主控台中記錄的這則訊息，請按照下列步驟操作：
- 開啟彈出式視窗。
- 在彈出式視窗上按一下滑鼠右鍵。
- 選取「檢查」。
檢查彈出式視窗。 - 在 DevTools 中，前往「主控台」面板。
檢查彈出式視窗
錯誤記錄檔
接下來，我們來破解擴充功能。我們可以透過移除 popup.js 中的結尾引號來完成這項操作：
console.log("This is a popup!) // ❌ broken code
前往「Extensions」(額外資訊) 頁面，然後開啟彈出式視窗。畫面上會顯示「Errors」按鈕。
按一下「Errors」按鈕，進一步瞭解錯誤：
如要進一步瞭解如何偵錯服務工作者、選項頁面和內容指令碼，請參閱「偵錯擴充功能」。
設定擴充功能專案的結構
您可以透過多種方式建構擴充功能專案，但唯一的必要條件是將 manifest.json 檔案放在擴充功能的根目錄中，如以下範例所示：
使用 TypeScript
如果您使用 程式碼編輯器 (例如 VSCode 或 Atom) 進行開發，可以使用 npm 套件 chrome-types，充分利用 Chrome API 的自動完成功能。當 Chromium 原始碼有所變更時，這個 npm 套件會自動更新。
🚀? 準備好開始建構了嗎？
請選擇下列任一教學課程，開始擴充學習歷程。
| 擴充功能 | 學習目標 |
|---|---|
| 在每個網頁上執行指令碼 | 自動在每個網頁上插入元素。 |
| 將指令碼插入至有效分頁 | 在按下擴充功能動作後，在目前網頁上執行程式碼。 |
| 管理分頁 | 建立可管理瀏覽器分頁的彈出式視窗。 |
| 使用 Service Worker 處理事件 | 擴充功能服務 worker 處理事件的方式。 |