--- # System prepended metadata title: ' How to Build a Chrome Extension Completely With AI' tags: [Chrome Extension] --- # Intro ## 影片主題與主角背景 * 主題是用 AI（Artificial Intelligence）從零打造 Chrome 擴充功能（Chrome extension），並上架到 Chrome Web Store（Chrome Web Store） * 主講者 Mor 表示自己不會寫程式（No-code）背景，從產品管理（Product management）轉成全職做軟體 * 影片流程分三段：規劃（Planning）→ 在 Cursor（Cursor）用對話式 AI 完整開發 → 上架流程（Publish） ## 為什麼選 Chrome Extension 當入門作品 * 相對容易上手，適合第一次做產品或第一次用 AI 開發的人 * 市場大，Chrome 使用者多，擴充功能較容易被發現（Discoverability） ## 擴充功能點子：X 貼文 Idea Finder * 使用情境是在 X（X/Twitter）滑貼文時找靈感 * 遇到覺得有趣的貼文，想「改寫/延伸」成同類型內容 * 點擊擴充功能後，抓取該貼文內容並產生 10 個相似發想（10 ideas） # 步驟 1：與 Claude 一起集思廣益，討論此擴充程式應具備哪些功能 ## 規劃階段的目的與做法 * 先建立「上下文邊界」（Context boundary）：把需求、假設與限制寫進同一段對話，後續可引用 * 先釐清 MVP（Minimum Viable Product）必備功能，避免一開始就做太多 * 再初步列出技術構成（Technical considerations）以便後續實作 ## MVP 需求縮減過程與最終版本 * 一開始 AI 提議包含右鍵選單（Context menu）、支援 Twitter/X、偏好寫作風格（Writing style）等，但被要求再簡化 * 最終 MVP 只保留：一鍵抓取貼文內容（One-click capture） * 設定頁只保留兩項：內容主題（Content themes）與目標受眾（Target audience） * 送出資料到 Anthropic API（Anthropic API）並請求回傳 10 個相似貼文點子 * Popup 顯示只需要「10 條點子清單」，不需要顯示原貼文、不需要複製按鈕（Copy button） ## 技術架構最小集合（MVP） * manifest（manifest.json）定義擴充功能權限與入口 * content script（Content script）從目前頁面抓取貼文內容 * popup（Popup page）顯示生成結果 * options（Options page）讓使用者設定內容主題與目標受眾 * background（Background script / Service worker）負責呼叫 API 與資料流協調 ## 資料流（Data flow）概念 * 使用者點擊擴充功能 * 內容腳本從頁面讀取目前貼文文字 * 將貼文文字 + 設定（主題/受眾）送到背景腳本 * 背景腳本呼叫 Anthropic API 取得 10 條點子 * 回傳結果到 Popup 顯示 ## 對「技術考量」的取捨（只做 MVP） * AI 也提到儲存設定（Chrome Storage API）、API Key 安全（Secure storage）、效能（Performance）等 * 主講者刻意先不管效能與安全細節，先把 MVP 做出來能跑即可 * 規劃完成後進入 Cursor 用 AI 對話式方式直接開始實作 --- # 步驟 2：在 Cursor 中建立擴充功能 ## 在 Cursor 開始：先做更小步的第一版 * 在 Cursor（Cursor）開新空專案，用 Agent mode（Agent mode）與模型 3.5 Sonnet（3.5 Sonnet） * 先刻意把範圍縮到「最小可測試」：只做從 X（X/Twitter）頁面讀取貼文文字並顯示在擴充功能 * 避免一次把整個規格丟給 AI 生成，因為容易堆出錯誤、難除錯 ## 產生骨架檔案並先去掉圖示 * AI 先生成基本檔案骨架（Skeleton files） * 為了測試方便，要求先移除 icons（icons）相關設定 * 用 chrome://extensions（chrome://extensions）開啟開發者模式（Developer mode）並 Load unpacked（Load unpacked）載入資料夾 * 把擴充功能固定到工具列（Pin） ## 第一次測試失敗：無法抽取貼文文字 * Popup 能顯示，但回傳「無法抽取貼文文字」 * AI 說明 X 的 DOM 結構（DOM structure）可能特別、且內容可能動態載入（Dynamic loading） * 使用者提供頁面元素的 HTML 片段協助定位抽取目標 * 修改抽取邏輯後成功抓到貼文文字，並顯示「成功抽取」 ## 用 Git 提交保存進度 * 在抽取成功後先做一次提交（Commit），標記里程碑（Text extraction working） * 移除除錯輸出（Debugging）後再測一次，確認抽取仍正常 ## 加入 Anthropic API：把貼文送去生成 10 個點子 * 下一步實作 API 串接（API integration）到 Anthropic（Anthropic） * 目標是把貼文內容送出並拿回 10 個創意點子（10 ideas） * 先不加入「內容主題/受眾」等個人化設定，先把 API 流程跑通 ## API 串接初期除錯：有 Loading 但顯示內容不對 * UI 出現 loading，表示 API 可能有被呼叫，但回來後只顯示原貼文文字 * 加入更多除錯以確認資料流哪裡出問題 * AI 修正 popup.js（popup.js）後，成功在 UI 中顯示「原貼文 + 生成點子清單」 * 觀察到偶爾需要再點一次才會成功，推測和頁面載入時機有關 ## UI 流程優化：先顯示原貼文，再顯示 ideas loading * 需求調整為：點開擴充功能先顯示抽取到的貼文文字 * ideas 區塊在 API 回來前顯示 loading，回來後再渲染點子 * 改善使用者體感，避免整個畫面空等 ## 加入本地儲存：關掉 Popup 不要丟資料 * 需求是關閉 Popup 後不要遺失目前抽取結果與生成點子 * AI 加了 local storage（Local storage）相關實作並要求 storage 權限（storage permission） * 初版導致生成失敗，後續修正：在 manifest 加 storage、背景腳本（background.js）儲存流程更健壯 * 最終達成：關掉再打開仍保留上一筆結果，切到新貼文時會更新成新的一組結果 ## 加入設定：把 API Key 放到 Settings * 需求是新增設定頁（Settings page）讓使用者儲存 Anthropic API key（API key） * 初版做成獨立頁面開新分頁，使用者不喜歡 * 改成在 Popup 內有 Settings 按鈕，切換到內嵌設定畫面保存 API key，再回到主畫面 * 測試新的貼文觸發生成，確認讀取到已保存的 API key 並正常呼叫 API ## 設定擴充：內容主題與目標受眾 * 在 Settings 增加兩個輸入欄位：內容主題（Content themes）與目標受眾（Target audience） * 保存後要能跨 session 持久化（Persist between sessions） * 呼叫 API 時把「貼文內容 + 主題 + 受眾」一起送出，生成更貼近自己的點子 ## 驗證個人化是否生效與 Prompt 調整 * 單看回覆不容易判斷是否真的用了主題/受眾，因此去檢查程式碼確認參數有帶入 API * 也請 AI 提供測試方法，並做些輸出/格式調整讓結果更容易觀察 * 後續結果開始在點子前綴帶入主題語境，顯示個人化內容大致有生效 * 主要剩下的是提示詞（Prompt）精煉，讓點子品質更穩定 ## UI 美化：保持功能不變，只改外觀 * 明確要求：不要改功能（Functionality），只讓 UI 更現代 * 第一次 UI 變更結果很差，選擇回復（Restore）到先前版本 * 改用 v0（v0）生成 UI 設計，視覺效果更好 * 移除不需要或尚未實作的按鈕（例如 regenerate、copy/tweet 等），避免介面誤導 * 把 Emoji icon 改成 SVG icons（SVG icons），解決圖示顯示與排版問題 * 最終 UI：貼文區塊 + 點子卡片（Cards）呈現 + 設定頁也更一致，僅剩小問題如雙滾動條（Double scrollbar）可再調整 --- # 步驟 3：如何在 Chrome 網路上應用程式商店發布您的擴充功能 ## 上架前準備：圖示、命名與基本檢查 * 先準備擴充功能圖示（Icon），可用 Canva（Canva）製作後放進專案，讓工具列能顯示圖示 * 最後確認擴充功能名稱（Name）與整體資訊已定稿 * 做基本安全檢查（Security checks），例如詢問 AI 專案中是否有不安全作法 * 確認程式碼內不要硬編碼 API Key（API keys），若有就先移除再上架 ## 打包成 zip 檔 * 將擴充功能專案檔案整包壓縮成 zip（zip file） * 這個 zip 會是後續上傳到 Chrome Web Store 的主要檔案 ## 進入 Chrome Web Store 開發者後台 * 前往 developer.chrome.com/webstore（Developer site）並開啟 Developer dashboard（Developer dashboard） * 第一次需要建立開發者帳號（Developer account），提到註冊費約 5 美元 * 帳號建立後會看到可上傳擴充功能的新項目頁面 ## 上傳擴充功能 * 在後台點選 New item（New item） * 上傳先前準備好的 zip（zip file），內容包含整個擴充功能與程式碼 ## 填寫商店頁面（Store listing） * 填寫擴充功能名稱與描述（Description） * 描述撰寫方式：參考其他擴充功能的文案，交給 AI 改寫成自己的版本，再自行微調 * 上傳商店資產（Assets）：包含 icon 與其他行銷圖片（Marketing images），也可用 Canva 製作 * 可補上相關連結（Link），用於導流或補充資訊 ## 隱私與權限說明（Privacy） * 需要完成隱私頁（Privacy page），描述所要求的權限（Permissions）以及使用理由 * 例如 activeTab（activeTab）需要解釋為何必須存取使用者當前分頁 * 不熟悉權限含義時可截圖權限清單交給 AI，讓 AI 依照專案實際使用情況撰寫理由 * 需要提供隱私政策（Privacy policy），範例是寫一份簡單政策並放在 Notion（Notion）等可公開頁面，再貼上連結 ## 提交審核與常見結果 * 完成後送出 Submit for review（Submit for review） * 審核通常需要幾天（A few days） * 提到首次提交一次通過，後續更新版本曾被拒絕是因為行銷素材（Marketing assets）不符合規範 * 若被拒絕會看到原因（Rejection reason），修正後即可重新提交（Resubmit） --- ## Terminology * AI 驅動開發（AI-driven Development）：以對話式 AI 協助規劃、寫碼、除錯與迭代交付的開發流程 * 無程式碼背景開發（Non-coder Builder Workflow）：在缺乏傳統工程能力下，依靠 AI 生成與修正程式完成產品 * 規劃階段（Planning Phase）：先定義目標、限制與核心流程，再進入實作以降低返工成本 * 情境邊界（Context Boundary）：把需求、假設、限制與參考資訊集中在同一對話中以便反覆引用 * 最小可行產品（MVP, Minimum Viable Product）：只保留核心價值功能，用最短時間驗證可用性與需求 * 功能裁切（Feature Scoping）：刻意縮小功能範圍，避免早期專案過度膨脹與失控 * 需求最小化（Requirement Minimization）：把需求縮到「可驗證」的最小集合以加速迭代 * 技術考量（Technical Considerations）：先盤點架構元件、權限、資料流與限制以避免卡關 * 擴充結構（Extension Architecture）：由 manifest、popup、content script、background、options 組成的架構配置 * 選項頁（Options Page）：用於一次性或進階設定（API Key、偏好）並儲存到瀏覽器的設定頁 * 彈窗頁（Popup UI）：使用者點擊擴充圖示後顯示的 UI，適合觸發動作與顯示結果 * 背景腳本（Background Script）：負責跨頁協調、事件處理與 API 呼叫等非 UI 工作 * 內容腳本（Content Script）：在網頁上下文讀取 DOM、抽取內容或注入行為的腳本 * 資料流（Data Flow）：從頁面抽取→背景處理→回傳結果→UI 渲染的端到端資料傳遞路徑 * 推文抽取（Tweet Extraction）：從 X 的動態 DOM 結構抓取貼文文字內容的解析流程 * DOM 結構定位（DOM Targeting）：以選擇器或節點關係鎖定目標元素（例如推文文字區塊） * 動態載入（Dynamic Rendering）：內容由前端框架延遲渲染，導致抽取需等待或重試 * 除錯紀錄（Debug Logging）：在抽取與 API 流程中加入日誌以快速定位失敗節點 * 漸進式測試（Incremental Testing）：每完成一小步就載入擴充測試，確保問題可控且可回溯 * 版本控管（Version Control）：用 Git 追蹤變更、回退錯誤修改並保留迭代歷史 * 提交（Commit）：將一組可運作的變更封存到版本庫，便於回滾與協作 * API 整合（API Integration）：把外部模型服務接入擴充流程，送出請求並解析回應 * 模型推理請求（Inference Request）：以 prompt 與輸入資料呼叫模型，取得生成結果 * 提示詞工程（Prompt Engineering）：設計輸入指令與結構化格式，讓輸出更符合目的 * 回應解析（Response Parsing）：把模型輸出文本切分、清理並轉換成可渲染的資料結構 * 結果渲染（Result Rendering）：把抽取的推文與生成點子以清單或卡片形式呈現在 UI * 載入狀態（Loading State）：在等待 API 回應時顯示進度提示以改善使用者體驗 * 分階段渲染（Progressive Rendering）：先顯示已知資訊（原推文），再補上生成內容 * 本機持久化（Local Persistence）：把生成結果與設定保存於本機，避免關閉彈窗後丟失 * Chrome Storage（chrome.storage）：擴充使用的儲存介面，用於保存 API Key 與偏好設定 * 儲存權限（storage Permission）：允許擴充讀寫 chrome.storage 的必要權限宣告 * 狀態復原（State Restoration）：重新開啟彈窗時從儲存讀回資料並恢復畫面狀態 * 設定頁內嵌（Embedded Settings）：把設定畫面放在同一個 popup 內切換，而非開新分頁 * API Key 管理（API Key Management）：以使用者輸入方式保存金鑰並用於後續呼叫 * 秘密資訊處理（Secret Handling）：避免把金鑰硬編碼在程式中，降低外洩與濫用風險 * 內容主題（Content Themes）：使用者創作領域與主題標籤，用於引導生成方向 * 目標受眾（Target Audience）：內容對象的人群描述，用於調整語氣、深度與用詞 * 情境化生成（Contextual Generation）：把推文內容＋主題＋受眾合併輸入模型以提高相關性 * 輸出約束（Output Constraints）：限制輸出數量、格式與風格（例如「10 條點子」清單） * UI 現代化（UI Modernization）：不改功能前提下，透過排版、字體、間距與元件提升質感 * 卡片式版面（Card Layout）：以卡片呈現每則點子，提升掃讀性與分段清晰度 * 圖示替換（Emoji-to-SVG Replacement）：以 SVG 圖示取代 emoji，確保跨平台一致性與可控樣式 * 捲動體驗（Scroll UX）：避免雙重捲軸與不必要滾動區，提升 popup 操作舒適度 * 上架前檢查（Pre-publish Checks）：檢查權限、秘密資訊、資源完整性與基本合規的上架準備流程 * 封裝壓縮（ZIP Packaging）：把擴充檔案打包成 ZIP 供 Chrome Web Store 上傳審核 * 開發者註冊費（Developer Registration Fee）：在 Web Store 建立開發者帳號的單次費用 * 商店列表（Store Listing）：上架頁面資訊（名稱、描述、截圖、圖示、宣傳素材） * 行銷素材（Marketing Assets）：用於商店展示的圖示、截圖與宣傳圖，影響轉換率 * 隱私揭露（Privacy Disclosure）：在上架流程中說明資料使用方式、收集範圍與第三方共享 * 權限合理化（Permission Justification）：逐項解釋為何需要 activeTab、storage 等權限以通過審核 * 隱私政策（Privacy Policy）：公開文件說明資料處理與保護方式，通常需提供可訪問連結 * 提交審核（Submit for Review）：向 Chrome Web Store 送審版本並等待平台審查結果 * 退件原因（Rejection Reason）：審核未通過時平台提供的具體原因，用於修正後再送審