建立 Google Chrome 擴充功能是增強 Web 體驗或展示 Web 開發技能的好方法。 Chrome 擴充功能是小型軟體程序，可透過擴展 Chrome 的功能來客製化您的瀏覽體驗。這是一個快速指南，可幫助您從頭開始建立自己的 Chrome 擴充功能。
第 1 步：了解基礎
在深入研究之前，請先了解 Chrome 擴充功能的關鍵組件：
-
清單檔案 (manifest.json)： 擴充的設定檔。
-
HTML/CSS/JavaScript 檔案： 定義擴充程式的介面和功能。
-
圖示和其他資產：用於品牌推廣和精美外觀。
第 2 步：設定您的項目
-
為您的擴充檔案建立一個資料夾。這將保存所有必需的文件。
- 在此資料夾中，建立一個名為manifest.json的檔案。
第3步：撰寫清單檔案
manifest.json 是您的擴充的藍圖。這是一個基本範例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | {
"manifest_version": 3,
"name": "My First Chrome Extension",
"version": "1.0",
"description": "A simple Chrome extension to demonstrate functionality.",
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"permissions": ["activeTab"],
"action": {
"default_popup": "popup.html",
"default_icon": "icon48.png"
}
}
|
登入後複製
說明：
-
"manifest_version": 3 指定使用Manifest V3，最新版本。
-
“名稱”和“版本”描述了擴充功能。
-
「action」連結點擊擴充功能圖示時將出現的彈出視窗。
第四步：建立彈出式介面
- 在同一資料夾中建立 popup.html 檔案：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html>
<html>
<head>
<title>My Extension</title>
</head>
<body>
<h1>Hello, Chrome!</h1>
<button>
<ol>
<li>Add some interactivity with JavaScript. Create popup.js:
</li>
</ol>
<pre class="brush:php;toolbar:false">document.getElementById("changeColor").addEventListener("click", function() {
document.body.style.backgroundColor = "#FFD700";
});
|
登入後複製
第 5 步：新增圖示
準備三種尺寸的圖示（16x16、48x48 和 128x128 像素）並將它們放在專案資料夾中。
第 6 步：在 Chrome 中載入擴充功能
- 開啟 Chrome 並前往 chrome://extensions/。
- 啟用開發者模式（在右上角切換）。
- 點擊載入已解壓縮的並選擇您的專案資料夾。
第 7 步：測試您的擴充
點擊 Chrome 工具列中的擴充功能圖標，然後查看正在運行的彈出視窗。測試所有功能並確保一切按預期工作。
選購增強功能
- 新增後台腳本即使在彈出視窗關閉時也可以執行操作。
- 使用內容腳本直接與網頁互動。
- 探索進階 API，例如用於保存資料的 chrome.storage 或用於在腳本之間進行通訊的 chrome.runtime。
最後的想法：
建立 Chrome 擴充功能是一個有益的過程，可以從簡單的工具擴展到功能強大的應用程式。透過這個基本結構，您可以從小處開始，並隨著了解更多而擴展您的擴展。深入研究 Chrome 的開發者文件以了解更多高級功能。
以上是如何建立 Google Chrome 擴充功能：逐步指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
