Hello World 擴充功能

建立第一個 Hello World 擴充功能，瞭解 Chrome 擴充功能開發的基本概念。

總覽

您將建立「Hello World」範例、在本機載入擴充功能、找出記錄檔，以及探索其他建議。

Hello World

使用者按一下擴充功能工具列圖示時，這項擴充功能會顯示「Hello Extensions」。

Hello 擴充功能
Hello 擴充功能彈出式視窗

請先建立新的目錄來儲存擴充功能檔案。您可以視需要從 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 中載入本機測試，藉此進行測試。確保所有檔案皆已儲存。

載入未封裝的擴充功能

如何在開發人員模式中載入未封裝的擴充功能：

  1. 在新分頁中輸入 chrome://extensions，前往「擴充功能」頁面。(採用設計後，chrome:// 網址無法連結)。
    • 您也可以按一下「擴充功能」選單益智遊戲按鈕，然後選取選單底部的「管理擴充功能」。
    • 或者，按一下 Chrome 選單，將滑鼠遊標懸停在「更多工具」上，然後選取「擴充功能」。
  2. 按一下「開發人員模式」旁的切換按鈕，即可啟用開發人員模式。
  3. 按一下「Load unpacked」按鈕，然後選取擴充功能目錄。
    額外資訊頁面
    擴充功能頁面 (chrome://extensions)

達陣！已成功安裝擴充功能。如果資訊清單中未加入擴充功能圖示，系統會為該擴充功能建立通用圖示。

固定擴充功能

根據預設，在本機載入擴充功能時，擴充功能會顯示在擴充功能選單 (解謎) 中。將擴充功能固定在工具列上，即可在開發過程中快速存取擴充功能。

固定擴充功能
固定擴充功能

按一下擴充功能的動作圖示 (工具列圖示)，畫面上隨即會顯示彈出式視窗。

Hello World 擴充功能
Hello World 擴充功能

重新載入擴充功能

返回程式碼，並將擴充功能的名稱變更為「Hello Extensions of the world!」。

{
  "manifest_version": 3,
  "name": "Hello Extensions of the world!",
  ...
}

儲存檔案後，如果要在瀏覽器中查看變更，您必須重新整理擴充功能。前往「Extension」(擴充功能) 頁面，然後按一下「on/off」(開啟/關閉) 切換鈕旁邊的重新整理圖示：

重新載入擴充功能

重新載入擴充功能的時機

下表列出必須重新載入哪些元件才能看到變更：

擴充功能元件 需要重新載入擴充功能
資訊清單 是
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!")

如要在主控台中查看記錄這則訊息，請按照下列指示操作：

  1. 開啟彈出式視窗。
  2. 在彈出式視窗上按一下滑鼠右鍵。
  3. 選取「檢查」。
    正在檢查彈出式視窗。
    正在檢查彈出式視窗。
  4. 在DevTools中，前往「控制台」面板。
    開發人員工具程式碼面板
    檢查彈出式視窗

錯誤記錄檔

現在，讓我們切斷擴充功能。移除 popup.js 中的右引號即可：

console.log("This is a popup!) // ❌ broken code

前往「擴充功能」頁面，然後開啟彈出式視窗。系統隨即會顯示「Errors」按鈕，

顯示錯誤按鈕的擴充功能頁面

點選「錯誤」按鈕可進一步瞭解錯誤：

擴充功能錯誤詳細資料

如要進一步瞭解如何對 Service Worker、選項頁面和內容指令碼進行偵錯，請參閱「偵錯擴充功能」一文。

建構擴充功能專案

您可以透過許多方式建構擴充功能專案；然而，唯一的先決條件是將 manifest.json 檔案放在擴充功能的根目錄中，如以下範例所示：

擴充功能資料夾的內容：manifest.json、background.js、指令碼資料夾、彈出式資料夾和圖片資料夾。

使用 TypeScript

如果您是使用 VSCode 或 Atom 等程式碼編輯器進行開發，則可使用 npm 套件 chrome-types，藉此利用 Chrome API 的自動完成功能。當 Chromium 原始碼變更時，這個 npm 套件會自動更新。

🚀? 準備好開始建構了嗎？

選擇下列任一教學課程，展開擴充功能學習之旅。

延伸 學習目標
在每個網頁上執行指令碼 如何在每個網頁自動插入元素。
在使用中分頁插入指令碼 點選擴充功能動作後，在目前網頁上執行程式碼。
管理分頁 建立管理瀏覽器分頁的彈出式視窗。
使用 Service Worker 處理事件 擴充功能服務工作站如何處理事件。