開發 Chrome 瀏覽器插件（也稱為擴展）是一段有趣且有成就感的過程。在本教程中，我將引導你從零開始，逐步創建一個簡單的 Chrome 插件。無論你是編程新手還是有一定基礎的用户，我們都將以簡單易懂的方式介紹整個過程。
1. 什麼是 Chrome 插件？
Chrome 插件是可以添加到 Google Chrome 瀏覽器中的小程序，旨在增強瀏覽器的功能。它們可以改變網頁的外觀、增加新的功能、與用户交互等。
我們先從一個最簡單的 Chrome 擴展開始，你也可以參照我寫的這個微信公眾號小助手插件 https://github.com/pudongping/mp-vx-insight 來學習，好了，話不多説，直接開擼。
2. 準備工作
在開始之前，你需要確保：
- 已安裝 Google Chrome 瀏覽器。
- 有一個簡單的文本編輯器（如 Notepad、VS Code、Sublime Text）。
- 對 HTML、CSS 和 JavaScript 有基本瞭解。
3. 插件的基本結構
一個 Chrome 插件通常由以下幾個基本文件組成：
manifest.json：插件的配置文件，定義插件的基本信息和權限。background.js：插件的後台腳本，負責執行後台任務。popup.html：用户點擊插件圖標時顯示的界面。style.css：用於美化插件界面的樣式表。
4. 創建你的第一個插件
步驟 1：創建項目文件夾
在你的計算機上創建一個新的文件夾，例如 my_first_extension。
步驟 2：創建 manifest.json 文件
在項目文件夾中創建一個文件 manifest.json，並複製以下內容：
{
"manifest_version": 3,
"name": "My First Extension",
"version": "1.0",
"description": "This is my first Chrome extension!",
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
},
"background": {
"service_worker": "background.js"
},
"permissions": ["activeTab"]
}步驟 3：添加 Popup 界面
在同一文件夾中，創建 popup.html 文件並添加以下代碼：
<!DOCTYPE html>
<html>
<head>
<title>My First Extension</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello, Chrome!</h1>
<button id="clickMe">Click Me!</button>
<script src="popup.js"></script>
</body>
</html>步驟 4：創建樣式文件
在同一文件夾中，創建 style.css 文件，添加如下內容：
body {
width: 200px;
text-align: center;
}
h1 {
font-size: 16px;
color: #333;
}
button {
padding: 10px 15px;
font-size: 14px;
}步驟 5：添加 JavaScript 功能
接下來，創建 popup.js 文件，實現按鈕的點擊事件：
document.getElementById('clickMe').addEventListener('click', function() {
alert('Button clicked!');
});步驟 6：添加後台腳本
為了展示後台功能，創建一個 background.js 文件，內容可以是簡單的 console.log：
console.log('Background service worker running!');步驟 7：添加圖標
為了使你的插件更美觀，我們需要為其添加圖標。在項目文件夾中添加三種不同尺寸的圖標：icon16.png、icon48.png 和 icon128.png。你可以使用在線圖標生成器生成圖標，或從網絡下載適合的圖標。
5. 在 Chrome 中加載擴展
- 打開 Chrome 瀏覽器，輸入
chrome://extensions/並按回車。 - 在右上角啓用開發者模式。一定要開啓
- 點擊 “加載已解壓的擴展”，選擇你的項目文件夾（
my_first_extension）。 - 你會在擴展列表中看到你的插件。
6. 測試插件
點擊瀏覽器工具欄中的插件圖標，會彈出你定義的 Popup 界面。點擊按鈕，你應該會看到提示框彈出，顯示 “Button clicked!”。
現在，你已經成功創建了一個簡單的 Chrome 插件！是不是非常簡單呢？當然還有更多的一些特性由於篇幅的原因就不細講了，強烈建議你可以直接找一個 Chrome 插件源碼看看，比如我寫的這個微信公眾號小助手 Chrome 擴展 https://github.com/pudongping/mp-vx-insight 這樣可以學得更快！
7. 總結
通過這個簡單的教程，你已經瞭解瞭如何從零開始開發一個基本的 Chrome 插件。插件的開發不僅能提升你的編程技能，更能讓你在日常瀏覽中享受到便利。希望你在這個過程中感受到樂趣。
如需進一步學習，可以參考 Chrome 擴展文檔，深入瞭解不同的 API 和功能。
