快速摘要

Chrome 擴充功能是最適合用 AI 開發的專案類型之一。本文教你如何從一句 Prompt 開始，用 AI 輔助完成從開發到上架的完整流程，以及必須注意的安全與隱私問題。

飛飛安全評級

評估維度風險等級
資料敏感度高
本機檔案權限中
命令執行能力中
第三方連線高
新手誤用風險高
企業使用門檻中

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

Chrome 擴充功能是目前最適合用 AI 輔助開發的專案類型，原因有三：

  1. 技術棧簡單：只需要 HTML、CSS、JavaScript——AI 最擅長的語言組合。
  2. 結構清楚：manifest.json + popup + content script + background script，架構固定。
  3. 快速驗證：開發中可以即時載入測試，修改後重新載入即可。

但 Chrome 擴充功能的安全風險也很高——它可以讀取你瀏覽的所有網頁、存取瀏覽歷史、修改網頁內容。用 AI 開發時需特別注意安全審查。

Chrome 擴充功能架構基礎

一個 Chrome 擴充功能的基本組成：

  • manifest.json：設定檔，定義權限、頁面、腳本。使用 Manifest V3 格式。
  • popup.html / popup.js：點擊擴充功能圖示時顯示的小視窗。
  • content.js：注入到網頁中執行的腳本，可以讀取和修改網頁內容。
  • background.js（Service Worker）：在背景執行的腳本，處理事件和 API 呼叫。
  • options.html：擴充功能的設定頁面。

用 AI 開發的步驟

  1. 描述需求：用一段自然語言描述你想做的擴充功能。越具體越好。例如：「一個 Chrome 擴充功能，可以一鍵將當前網頁的文章內容摘要成 3 個重點，使用 OpenAI API。」
  2. 讓 AI 生成初始架構：使用 Cursor 或 Claude Code 生成 manifest.json 和基本檔案結構。
  3. 逐步開發功能：不要一次生成所有功能。先做核心功能，測試通過後再加入附加功能。
  4. 本地測試：在 Chrome 中開啟 chrome://extensions/，開啟開發者模式，載入未封裝的擴充功能。
  5. 安全審查：檢查權限、API Key 處理、資料傳輸等安全問題。
  6. 上架準備：準備圖示、截圖、描述、隱私政策。

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

以下是用 AI 開發一個「網頁摘要」擴充功能的完整流程：

Step 1：描述需求

在 Cursor 或 Claude Code 中輸入：「建立一個 Chrome 擴充功能（Manifest V3），功能是：用戶點擊圖示後，擷取當前網頁的文章文字，呼叫 OpenAI API 產生 3 點摘要，顯示在 popup 視窗中。API Key 由用戶在 options 頁面設定。」

Step 2：審查生成的 manifest.json

確認只請求必要權限。這個擴充功能只需要 activeTab（讀取當前分頁內容）和 storage（儲存 API Key）。如果 AI 加了 tabs、history、<all_urls> 等權限，要手動移除。

Step 3：測試核心流程

載入擴充功能後，在幾個不同網站測試。確認：文字擷取正確、API 呼叫成功、摘要顯示正常、錯誤處理完善。

安全檢查清單

  • 最小權限原則：manifest.json 中只保留真正需要的權限。<all_urls> 幾乎不應出現。優先使用 activeTab。
  • API Key 安全：絕對不要把 API Key 寫在程式碼中。使用 chrome.storage.local 儲存，讓用戶自行輸入。
  • CSP 設定：Manifest V3 強制使用 Content Security Policy。確認不要放寬到允許 unsafe-eval 或 unsafe-inline。
  • 資料傳輸：所有 API 呼叫必須使用 HTTPS。不要將用戶的網頁內容傳送到不信任的伺服器。
  • Content Script 安全：注入到網頁的腳本不應修改表單或讀取密碼欄位。
  • 第三方套件：盡量不使用第三方程式庫。Chrome 擴充功能應盡量輕量，依賴越少越安全。

上架 Chrome Web Store

  1. 註冊 Chrome Web Store 開發者帳號（一次性 $5 美元費用）
  2. 準備素材：128x128 和 48x48 圖示、截圖（1280x800）、詳細描述
  3. 撰寫隱私政策（必須）：說明收集哪些資料、如何使用、如何儲存
  4. 填寫「Single Purpose」描述——擴充功能必須有明確的單一用途
  5. 提交審查——通常需要 1-3 個工作天
  6. 審查未通過的常見原因：權限過度請求、缺少隱私政策、功能描述不符

常見問題

完全不會寫程式可以用 AI 做 Chrome 擴充功能嗎？

可以做出簡單的擴充功能。但上架品質的擴充功能需要理解基本的 JavaScript 和 Chrome API。建議先學習 HTML/CSS/JS 基礎。

開發 Chrome 擴充功能需要付費嗎？

開發和測試完全免費。上架到 Chrome Web Store 需要一次性支付 $5 美元的開發者註冊費。

AI 生成的擴充功能安全嗎？

不一定。AI 經常加入不必要的權限、硬編碼 API Key、或使用不安全的資料傳輸方式。必須進行人工安全審查。

Chrome 擴充功能可以賺錢嗎？

可以。常見模式包括：免費基礎版 + 付費進階功能、訂閱制、或在 Chrome Web Store 上設定一次性購買價格。

標籤：Chrome 擴充功能瀏覽器開發Vibe Coding上架

相關文章

用 AI 做網站 AI 生成程式碼審查 Cursor 完整指南 Claude Code 完整指南