Chrome 擴充功能開發流程 SOP 文件

適用對象：開發者、新手教學者、有意將功能商品化者
範例專案：Quick Text Copy（標題＋網址一鍵複製工具）

蔡教練第一個 Chrome擴充功能上架了 Quick Text Copy 用最直覺的方式，一鍵複製標題與網址 – 漫遊數位 https://rd.coach/chrome-quick-text-copy/

⬛ 01｜前期規劃

✅ 任務定義

明確功能目標（Ex：複製標題＋網址）
預估用戶場景（Ex：研究人員、部落客、教學者）

✅ 技術選擇與工具

開發 IDE：Kiro / VS Code
設計規範：Manifest v3
測試瀏覽器：Google Chrome 開發人員版本

✅ 檔案結構規劃：

root/
│
├── manifest.json
├── background.js
├── content.js
├── popup.html
├── popup.js
├── icons/
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png

⬛ 02｜功能開發與測試

✅ Manifest 設定（v3）

{
  "manifest_version": 3,
  "name": "Quick Text Copy",
  "version": "1.0",
  "permissions": ["activeTab", "clipboardWrite", "scripting"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icons/icon48.png"
  },
  "background": {
    "service_worker": "background.js"
  }
}

✅ 功能撰寫與測試

popup.html：建立按鈕介面
popup.js：加上 navigator.clipboard.writeText 控制邏輯
content.js（如需抓取頁面內容）

✅ 本機測試流程

打開 Chrome → 更多工具 → 擴充功能
啟用「開發人員模式」
點選「載入未封裝項目」選擇資料夾
測試功能是否運作（可用 console.log 配合偵錯）

⬛ 03｜上架前準備

✅ 必要素材：

Icon 三尺寸圖（16×16、48×48、128×128）
螢幕截圖（1280×800 推薦）
英文與中文的說明文件（功能簡介、使用方式）

✅ 開發者帳號

註冊 Google 開發者帳號（一次性 5 美元費用）
登入 Google 開發者儀表板：https://chromewebstore.google.com

⬛ 04｜打包與提交

✅ 打包流程：

將完整資料夾壓縮成 .zip（內容物為原始碼，不含外層資料夾）
上傳到開發者儀表板 → 新增項目

✅ 填寫項目說明

名稱、描述（50 字內與詳細說明）
關鍵字（最多 5 個）
分類（工具 / 效率 / 教育等）

✅ 提交審核

按照流程提交
通常需 1～3 天審核，視功能與描述內容而定

⬛ 05｜優化與更新

✅ 審核後處理

若為「審核中」但可搜尋到，表示 Google 已建立頁面但尚未全開放
可使用 Manus / Notion 快速建立產品頁與教學頁面

✅ 版本更新

每次修改記得提升 version 編號（如 1.0 → 1.1）
上傳新 .zip 並附上 changelog

✅ 用戶回饋蒐集

建議使用 Google 表單 + QR Code 作為回報管道
也可考慮用 GitHub Issues or Telegram Bot 接收反饋

🔄 補充建議

項目	工具/建議
開發平台管理	Kiro、Cursor、GitHub
自動產官網頁	Manus / Typedream / Dora.run
短網址管理	bit.ly / reurl.cc
QA 測試平台	與朋友共用壓縮檔 or 實機同步測試
文件備份	Notion / Obsidian / Google Drive