# 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）：審核未通過時平台提供的具體原因，用於修正後再送審