
建立 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中文網其他相關文章!