用 AI 做 Chrome 擴充功能：從 Prompt 到上架

為什麼 Chrome 擴充功能適合用 AI 來開發

Chrome 擴充功能是最適合用 AI 輔助開發的專案類型之一。原因有三個。

第一，規模小。一個功能完整的 Chrome Extension 通常只需要 3-5 個檔案（manifest.json、popup.html、popup.js、content.js、background.js），整個專案 AI 可以完整理解。

第二，結構固定。每個 Chrome Extension 都遵循 Manifest V3 的標準架構。AI 對這個架構非常熟悉，因為訓練資料中有大量範例。你不需要從零開始設計架構，只要告訴 AI 你想做什麼功能。

第三，即時看到結果。改完程式碼，到 Chrome 的 chrome://extensions 頁面按一下重新載入，馬上就能看到效果。這種即時回饋讓你可以快速迭代——跟 AI 說「加一個按鈕」，看效果不對再調整。

飛飛自己用 Claude Code 做過幾個 Chrome Extension，從想法到上架大概 2-3 小時。如果沒有 AI，同樣的事大概要一整天。

Chrome 擴充功能的基本架構

在開始用 AI 開發之前，先理解 Chrome Extension 的五個核心檔案。AI 可以幫你寫程式碼，但你需要知道每個檔案的角色，才能在 AI 出錯時判斷問題在哪裡。

manifest.json

擴充功能的設定檔，定義名稱、版本、權限、檔案入口。Chrome 讀這個檔案來理解你的擴充功能需要什麼。

{
  "manifest_version": 3,
  "name": "我的擴充功能",
  "version": "1.0",
  "description": "功能描述",
  "permissions": ["activeTab", "storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
  }]
}

permissions 的設定要注意：只申請你真正需要的權限。要求太多權限會讓使用者覺得不安全，也會讓 Chrome Web Store 的審核更嚴格。

popup.html / popup.js

使用者點擊擴充功能圖示時看到的介面。HTML 寫畫面，JS 寫互動邏輯。

content.js

注入到網頁中的腳本，可以讀取和修改網頁內容。例如，一個「高亮關鍵字」的擴充功能會用 content script 把網頁中的特定文字標黃。

background.js（Service Worker）

在背景執行的腳本，處理事件和跨頁面的邏輯。Manifest V3 改用 Service Worker，它不會一直跑，只在有事件觸發時才啟動。

用 AI 開發 Chrome Extension 的步驟

第 1 步：定義功能

先用一句話描述你要做什麼。越具體越好。

差的描述：「做一個 AI 助手擴充功能」 好的描述：「做一個 Chrome 擴充功能，在任何網頁上選取一段文字後，右鍵選單出現『摘要』選項，點擊後用 AI 把選取的文字摘要成三句話，顯示在彈出視窗中」

第 2 步：讓 AI 產生專案結構

用 Claude Code 或 Cursor 產生初始的專案結構和程式碼。

如果用 Claude Code：

claude "建立一個 Chrome Extension 專案，功能是：
選取網頁上的文字後，右鍵選單出現'摘要'選項，
點擊後呼叫 OpenAI API 摘要成三句話，
結果顯示在 popup 中。
使用 Manifest V3。"

如果用 Cursor：在 Composer 中輸入類似的描述，它會產生所有需要的檔案。

如果用 ChatGPT：把描述貼進對話，它會產出程式碼片段，但你需要自己建立檔案結構。

第 3 步：載入和測試

1. 打開 Chrome，輸入 chrome://extensions
2. 開啟右上角的「開發人員模式」
3. 點「載入未封裝項目」，選擇你的專案資料夾
4. 測試功能是否正常運作

第 4 步：迭代修正

幾乎不可能第一次就完美。常見的問題和對應的處理方式：

權限不足。Content script 無法存取某些 API → 檢查 manifest.json 的 permissions，可能需要加上 "tabs" 或 "scripting" 權限。

跨域請求被擋。在 content script 中呼叫外部 API 被 CORS 擋住 → 改成在 background.js（Service Worker）中做 API 呼叫，content script 透過 chrome.runtime.sendMessage() 傳遞請求。

Service Worker 不活躍。background.js 的程式碼沒有執行 → Manifest V3 的 Service Worker 不會一直跑，需要用事件驅動的方式寫。

CSS 衝突。你注入的 UI 元素樣式被網頁的 CSS 蓋掉 → 用 Shadow DOM 隔離你的 UI，或用非常具體的 class 名稱避免衝突。

第 5 步：安全加固

這是用 AI 開發最容易忽略的一步。AI 產生的程式碼可能有安全問題。

實作範例：網頁摘要擴充功能

這個範例做一個「選取文字 → 右鍵摘要」的擴充功能。

manifest.json：

{
  "manifest_version": 3,
  "name": "Quick Summary",
  "version": "1.0",
  "description": "選取文字，右鍵快速摘要",
  "permissions": [
    "contextMenus",
    "activeTab",
    "storage"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

background.js（Service Worker）處理右鍵選單和 API 呼叫：

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'summarize',
    title: '摘要選取的文字',
    contexts: ['selection']
  });
});

chrome.contextMenus.onClicked.addListener(async (info) => {
  if (info.menuItemId === 'summarize') {
    const text = info.selectionText;
    const result = await chrome.storage.local.get('apiKey');
    if (!result.apiKey) {
      // 通知使用者需要設定 API Key
      return;
    }
    try {
      const summary = await callAI(text, result.apiKey);
      await chrome.storage.local.set({ lastSummary: summary });
    } catch (e) {
      await chrome.storage.local.set({ lastSummary: '摘要失敗：' + e.message });
    }
  }
});

popup.html 顯示結果和設定 API Key：

<div id="app">
  <h3>Quick Summary</h3>
  <div id="summary">選取文字後，右鍵選擇「摘要」</div>
  <hr>
  <label>API Key</label>
  <input type="password" id="apiKey">
  <button id="save">儲存</button>
</div>

這個範例刻意把 API 呼叫放在 background.js 而不是 content.js，原因是 content script 受到 CORS 限制，而 Service Worker 可以自由呼叫外部 API。

安全檢查清單

用 AI 開發 Chrome Extension 最大的風險是安全。擴充功能可以讀取使用者瀏覽的網頁內容、存取書籤、甚至修改網頁。安全漏洞會影響到安裝你擴充功能的每個使用者。

權限最小化。manifest.json 中的 permissions 只列需要的。AI 產生的程式碼常常要求 "<all_urls>" 或 "tabs" 等廣泛權限，但你的功能可能只需要 "activeTab"。activeTab 只在使用者主動點擊擴充功能時才有權限，比 "<all_urls>" 安全得多。

API 金鑰的處理。不要把 API Key 寫死在程式碼裡。AI 產生的範例程式碼很常有這個問題——直接在 JS 裡寫 const API_KEY = "sk-xxx"。正確做法是讓使用者在設定頁面輸入自己的 API Key，存在 chrome.storage.local 中。

Content Security Policy。Manifest V3 禁止使用 eval() 和 inline script（<script> 標籤中的程式碼）。所有 JS 都要放在外部檔案中。AI 產出的程式碼有時候會產出 inline script，需要你自己檢查和修正。

XSS 防護。如果你的擴充功能會把外部內容顯示在 popup 或注入到網頁中，一定要做 HTML 轉義。AI 產出的程式碼有時候會直接用 innerHTML = response，這很危險——如果 API 回傳的內容包含惡意 HTML/JS，會被直接執行。用 textContent 替代 innerHTML，或用 DOMPurify 做淨化。

第三方程式庫。擴充功能裡盡量少用第三方程式庫。每多一個相依套件就多一個供應鏈攻擊的風險。Chrome Extension 的規模通常小到可以用原生 JavaScript 解決大部分需求。

資料傳輸。content script 和 background.js 之間用 chrome.runtime.sendMessage() 通訊。不要用 window.postMessage()——它可以被網頁上的其他 script 攔截。

飛飛的安全提醒：Chrome Extension 的安全問題不是理論上的風險。2024-2025 年有多起大規模擴充功能攻擊事件，攻擊者透過入侵開發者帳號或社交工程方式取得擴充功能的控制權，然後推送惡意更新。你的擴充功能如果有使用者，你就有保護他們的責任。

上架 Chrome Web Store

開發者帳號。需要一次性支付 5 美元的註冊費。

準備素材。需要至少一張 1280x800 的截圖、一個 128x128 的圖示、詳細的功能描述、隱私權政策（如果你的擴充功能會收集或傳輸任何資料）。

隱私權揭露。Chrome Web Store 會要求你說明擴充功能如何處理使用者資料。你需要回答：收集哪些資料、資料傳送到哪裡、是否與第三方分享、資料保留多久。

審核時間。通常 1-3 個工作天，如果權限要求較多或涉及遠端程式碼，審核時間可能更長。

常見被拒原因包含：權限要求過多（要求了但沒使用的權限）、缺少隱私權政策、功能描述和實際功能不符、包含混淆過的（obfuscated）程式碼。

常見錯誤

用 Manifest V2。Google 已經停止接受 Manifest V2 的新擴充功能，2025 年開始逐步停用現有的 V2 擴充功能。AI 的訓練資料中有大量 V2 範例，所以它有時候會生成 V2 的程式碼。如果你看到 "manifest_version": 2 或 "background": {"scripts": [...]} 或 "browser_action"，那就是 V2，要求 AI 改用 V3。

API Key 外洩。直接把 API Key 寫在程式碼中並上傳到 GitHub。Chrome Extension 的原始碼可以被任何人看到（直接解壓 .crx 檔案），所以即使沒有 push 到 GitHub，程式碼裡寫死的 Key 也不安全。

過度依賴 AI 不檢查結果。AI 可能產出語法正確但邏輯有問題的程式碼。例如，一個號稱「只在使用者點擊時啟動」的擴充功能，content script 卻在每個頁面載入時都執行並讀取頁面內容。

安全與限制

Chrome Extension 可以讀取使用者瀏覽的網頁內容，包含密碼輸入框的內容。開發擴充功能就是在處理使用者的信任——安全漏洞的影響不只是你自己，是所有安裝者。

AI 產出的程式碼沒有經過安全審計。上架前至少做一輪安全檢查：權限最小化、沒有硬編碼的敏感資訊、外部輸入有做轉義、通訊使用正確的 API。

Chrome Web Store 的審核不等於安全保證。Google 的審核主要看政策合規（權限使用、隱私揭露），不會做深入的程式碼安全審查。

Manifest V3 的 Service Worker 有 5 分鐘的存活時限。長時間執行的任務（例如大檔案處理）需要用 chrome.alarms 或 chrome.offscreen 來處理。AI 產出的程式碼可能假設 background script 永遠在跑，導致功能間歇性失效。

知識檢測

讀完文章後，測試一下你對這個主題的理解。

常見問題

參考資料

• Chrome Extensions Documentation — developer.chrome.com/docs/extensions
• Manifest V3 Migration Guide — developer.chrome.com/docs/extensions/develop/migrate
• Chrome Web Store Developer Dashboard — chrome.google.com/webstore/devconsole