建立第一個 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」按鈕,然後選取擴充功能目錄。
達陣!已成功安裝擴充功能。如果資訊清單中未加入擴充功能圖示,系統會為該擴充功能建立通用圖示。
固定擴充功能
根據預設,在本機載入擴充功能時,擴充功能會顯示在擴充功能選單 () 中。將擴充功能固定在工具列上,即可在開發過程中快速存取擴充功能。
按一下擴充功能的動作圖示 (工具列圖示),畫面上隨即會顯示彈出式視窗。
重新載入擴充功能
返回程式碼,並將擴充功能的名稱變更為「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!")
如要在主控台中查看記錄這則訊息,請按照下列指示操作:
- 開啟彈出式視窗。
- 在彈出式視窗上按一下滑鼠右鍵。
- 選取「檢查」。
- 在DevTools中,前往「控制台」面板。
錯誤記錄檔
現在,讓我們切斷擴充功能。移除 popup.js
中的右引號即可:
console.log("This is a popup!) // ❌ broken code
前往「擴充功能」頁面,然後開啟彈出式視窗。系統隨即會顯示「Errors」按鈕,
點選「錯誤」按鈕可進一步瞭解錯誤:
如要進一步瞭解如何對 Service Worker、選項頁面和內容指令碼進行偵錯,請參閱「偵錯擴充功能」一文。
建構擴充功能專案
您可以透過許多方式建構擴充功能專案;然而,唯一的先決條件是將 manifest.json 檔案放在擴充功能的根目錄中,如以下範例所示:
使用 TypeScript
如果您是使用 VSCode 或 Atom 等程式碼編輯器進行開發,則可使用 npm 套件 chrome-types,藉此利用 Chrome API 的自動完成功能。當 Chromium 原始碼變更時,這個 npm 套件會自動更新。
🚀? 準備好開始建構了嗎?
選擇下列任一教學課程,展開擴充功能學習之旅。
延伸 | 學習目標 |
---|---|
在每個網頁上執行指令碼 | 如何在每個網頁自動插入元素。 |
在使用中分頁插入指令碼 | 點選擴充功能動作後,在目前網頁上執行程式碼。 |
管理分頁 | 建立管理瀏覽器分頁的彈出式視窗。 |
使用 Service Worker 處理事件 | 擴充功能服務工作站如何處理事件。 |