建立 2026-09-17 更新 2026-09-17

開發環境與工具

Chrome Extension 開發不需要額外的框架或建置工具，只要瀏覽器本身與一套編輯器就能開始。這一頁說明需要準備什麼，以及如何在 Chrome 裡載入你自己寫的擴充功能。

需要準備的工具

• Google Chrome：開發與測試都在 Chrome 裡進行，建議使用最新版本以支援完整的 Manifest V3 功能。
• 程式碼編輯器：任何編輯器都可以，建議使用 Visual Studio Code，有良好的 JavaScript／JSON 語法提示。
• 基礎 HTML／CSS／JavaScript 知識：擴充功能的介面與邏輯就是用這三者寫成，沒有特殊語法。

進階開發（例如使用 TypeScript、React 或打包工具）不是必要條件，但等你熟悉基礎架構後，可以視專案需求再加入建置流程。

專案資料夾結構

一個最簡單的擴充功能，資料夾長得像這樣：

my-extension/
├── manifest.json      # 設定檔，告訴 Chrome 這個擴充功能是什麼、能做什麼
├── popup.html          # 點工具列圖示時顯示的頁面（可省略）
├── popup.js
├── background.js       # Background Service Worker（可省略）
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

不是每個檔案都必須存在，manifest.json 是唯一必要的檔案，其餘元件依需求增減，詳見 核心架構。

開啟開發者模式

Chrome Extension 在開發階段是以「未封裝（unpacked）」的資料夾形式載入，不需要打包成 .zip。步驟如下：

1. 在網址列輸入 chrome://extensions，開啟擴充功能管理頁。
2. 打開右上角的 開發人員模式（Developer mode） 開關。
3. 點擊 載入未封裝項目（Load unpacked），選擇你的專案資料夾。
4. 擴充功能會立刻出現在清單與工具列上；之後每次修改程式碼，回到這個頁面點擊該擴充功能卡片上的 重新載入（Reload） 圖示，變更才會生效。

下一步

環境準備好之後，前往 打造第一個擴充功能，實際寫出一個會運作的 Hello World。