打造第一個擴充功能
紙上談兵不如動手做。這一頁會帶你從零寫出一個最小可行的擴充功能：點擊工具列圖示，跳出一個顯示「Hello, Chrome Extension!」的彈出視窗（popup）。完成後你會對 manifest.json、popup 頁面與載入流程有具體的感覺。
建立專案資料夾
建立一個資料夾（例如 hello-extension/），裡面新增以下三個檔案。
撰寫 manifest.json
{
"manifest_version": 3,
"name": "Hello Extension",
"version": "1.0.0",
"description": "我的第一個 Chrome 擴充功能",
"action": {
"default_popup": "popup.html"
}
}
manifest_version 固定為 3；action.default_popup 指定點擊工具列圖示時要開啟的頁面。完整欄位說明見 Manifest V3 設定檔。
撰寫 popup 頁面
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8" />
<style>
body { width: 220px; padding: 12px; font-family: sans-serif; }
button { width: 100%; padding: 6px; }
</style>
</head>
<body>
<p id="message">Hello, Chrome Extension!</p>
<button id="count-btn">點我計數</button>
<script src="popup.js"></script>
</body>
</html>
let count = 0;
const button = document.getElementById("count-btn");
button.addEventListener("click", () => {
count += 1;
document.getElementById("message").textContent = `已點擊 ${count} 次`;
});
Popup 頁面就是一般的網頁，可以用平常寫 HTML／CSS／JavaScript 的方式撰寫，唯一差別是它執行在擴充功能自己的環境裡，不是某個特定網站的頁面。
載入並測試
- 打開
chrome://extensions，確認 開發人員模式 已開啟。 - 點擊 載入未封裝項目，選擇
hello-extension/資料夾。 - 工具列會出現一個新的拼圖狀圖示（未指定 icon 時的預設圖示），點擊它就會跳出剛剛寫的 popup。
- 修改程式碼後，回到
chrome://extensions點擊重新載入，再次點擊工具列圖示確認變更生效。
加上自訂圖示
在 manifest.json 加入 "icons": { "16": "icons/icon16.png", "48": "icons/icon48.png", "128": "icons/icon128.png" }，並在 action 裡加上對應的 default_icon，就能換成自己的圖示，不用時可以先略過，Chrome 會顯示預設圖示。
完成這個練習後，你已經體驗了「設定檔＋頁面＋載入」的完整流程，接下來可以進一步認識各個欄位的用途，或直接進入 核心架構 了解更完整的元件分工。
推薦影音
freeCodeCamp：完整初學者課程
簡述：官方認證的免費教學平台 freeCodeCamp 出品，使用 Manifest V3 從零打造一個「YouTube 書籤」擴充功能，完整涵蓋 manifest 設定、事件監聽與資料儲存，適合想一次看完整流程的初學者。
Traversy Media：Manifest V3 實作示範
簡述：知名教學頻道 Traversy Media 示範如何用 Manifest V3 建立擴充功能，步驟精簡、講解清楚，適合已有基礎、想快速複習實作細節的讀者。