用 Claude Code 整 Chrome extension：1 日內整一個自用工具

情境

你每日用 Chrome 撞到一個小煩惱：

• Gmail 唔可以將某個特定寄件人過濾落特定標籤
• IG 唔可以下載朋友 send 畀你嘅相（要截圖）
• Google Doc / Notion 缺少一個你想要嘅快捷鍵
• LinkedIn 你想隱藏某類貼文（但唔想 unfollow 個用戶）

呢類煩惱產品團隊永遠唔會修補，因為對佢哋嚟講唔係首要任務。但對你個人嚟講，每日花你 5 分鐘 = 一年 25 個鐘。

呢類「產品唔會修補嘅小問題」，Chrome extension 通常 30-60 分鐘可以整完。但你唔識網頁開發，止步於「我都唔知由邊度開始」。

呢篇用 Claude Code 由零教你起一個 Chrome extension，整個你自用嘅工具。單人項目，1 日內搞掂，唔需要發佈落 Chrome Web Store。

跟住做

1. 揀啱第一個項目（關鍵步驟）

唔好一開始就做大項目。揀一個你每日遇到 + 30 分鐘搞掂嘅小痛點。例子：

• Gmail 取消訂閱按鈕強化：揀走推銷電郵嘅「取消訂閱」連結，1 撳自動取消訂閱 + 封存
• Notion 剪貼簿自動排版：複製一段文字落 Notion 自動清埋來源格式
• YouTube 自動跳過開場：列出你睇嘅頻道，自動跳過頭 5 秒贊助片段
• Threads 收藏匯出工具：揀「Saved」頁面嘅所有貼文匯出落 CSV

唔好揀：

• 任何涉及金融交易嘅嘢（風險太高）
• 任何牽涉第三方 API 嘅嘢（第一個項目複雜度太高）
• 任何你冇切身需要嘅嘢（你會半途而廢）

2. 開 Claude Code，用呢個 prompt 起項目

開 Terminal：

mkdir my-chrome-ext
cd my-chrome-ext
claude

入到 Claude Code prompt：

我想整一個 Chrome extension，自用，唔發佈。功能：[描述你嘅具體痛點 + 你想 extension 做乜]
例：「我成日喺 Gmail 撳錯 Reply All 之後好驚。我想整 extension，撳 Send 之前如果係 Reply All 而且收件人多過 5 人，彈出確認視窗」要求：
Manifest V3（最新 Chrome extension 規格）
Permissions：只需最基本。如果只要讀取 DOM 唔觸發網絡要求，唔好要求額外權限
資料夾結構：保持簡單，最多 3-5 個檔案
唔使 build：原生 JS，唔用 React / Webpack（第一個項目唔需要整 build 流程嘅複雜度）
README：點樣喺本機安裝（未封裝嘅 extension）
請：
由 manifest.json 開始
寫 content script（如果需要注入頁面）或 background script
加 popup UI（如果需要用戶互動）
教我點安裝同測試
唔好過度設計。我係第一次整，目標係「今日之內我有個用得嘅工具喺我 Chrome 度」。

3. Claude Code 幫你寫 + 你安裝試吓

Claude Code 會逐個檔案建立。每個檔案你撳 enter 批准。

之後你安裝個 extension：

1. Chrome → chrome://extensions
2. 開「開發人員模式」（右上角）
3. 「載入未封裝項目」 → 揀你個項目資料夾
4. 個 extension 就會啟動

開你目標網頁（Gmail、IG、Notion，視乎你做乜），測試吓。

4. 反覆修正

通常第一個版本 80% 正常，20% 唔符合預期。撞到嘅問題直接同 Claude Code 講：

我啱啱安裝完個 extension，撞到呢個問題：[描述：邊度唔得、撳邊個掣會點、console 錯誤係咩]請：
估根本原因（可能性排序）
揀最有可能嘅假設去修補
解釋邊個檔案 / 邊行要改
改完之後我點樣 reload 個 extension 再測試

經過 5-10 次反覆修正，個 extension 就會達到「你真係用得著」嘅階段。通常一個下午就做到。

5. （可選）放上 GitHub 備份

git init
git add .
git commit -m "First version of [extension name]"
gh repo create my-chrome-ext --private
git push -u origin main

私人 repo OK。你係擁有人、唔需要分享。呢個備份嘅用處在於將來換 Mac 你想再安裝。

變化例子

變化 1：Extension 加簡單介面（彈出視窗）

我嘅 extension 而家只有 content script（自動觸發）。我想加 popup：
撳工具列圖示彈出一個 200x300 px 視窗
視窗入面有 [描述你嘅功能：例如列表、開關、按鈕]
用簡單 HTML + 一啲行內 CSS（唔用框架）
視窗狀態儲存喺 chrome.storage.local（reload 完都唔會唔見）
幫我將呢個 popup 功能加落現有 extension。

變化 2：跨分頁通訊

我想 extension 喺多個分頁之間共用狀態：例子：開咗 5 個 Gmail 分頁，我喺其中一個標示咗某類 email 做「忽略」，其他分頁都應該即時反映。請：
解釋 Chrome extension 邊個機制適合跨分頁通訊（chrome.runtime.sendMessage / chrome.storage.onChanged / 等等）
實作喺我現有 extension
簡單解釋你揀嘅方法嘅取捨

變化 3：升級 manifest 用第三方 API

我想我嘅 extension 呼叫第三方 API（例：Claude API、Anthropic、字典、地圖服務）。請：
更新 manifest.json 加入 host_permissions
解釋 CORS 喺 extension 環境下嘅行為（通常同一般網頁唔同）
安全儲存 API key（用 chrome.storage.local，唔好寫死）
整一個最基本例子：撳按鈕，呼叫 API，顯示結果
錯誤處理：API 失敗 / 超出配額點顯示
呢個係第一個「中等複雜度」嘅步驟，謹慎啲做。

拆解：點解 work，同邊度會仆街

跟到上面就已經整到一個用得嘅 extension。下面呢段係畀**想由「裝完試一次 OK」做到「用足幾個月都唔崩」**嘅人——初學者可以跳過，唔影響你跟住做。

寫 extension 最唔老實嘅地方係：你個 extension 唔係跑喺自己屋企，係寄人籬下喺人哋個網頁度。Gmail、IG 隨時改版，你冇得控制。呢幾個位實會爆，你要預咗：

1. 網站一改版，你個 selector 就死 你叫 Claude Code 用 .aDP 或者某個 class name 去揀個掣，但呢啲 class 係 Gmail 自動生成、隨時會變嘅。佢哋 deploy 一個新版面，你個 selector 對唔到嘢。

• 會出事：個 extension 靜靜雞唔做嘢，唔會彈錯，你以為仲 work，其實已經死咗一個禮拜。
• 點救：揀嘢盡量靠穩定嘅嘢（aria-label、文字內容、data- 屬性），唔好靠亂碼 class；喺 code 加一句「揀唔到就 console.warn 出嚟」，等你一開 DevTools 就見到佢喊。

2. 頁面係慢慢載出嚟，你個 script 跑得太早 content script 一注入就即刻搵個元素，但 Gmail / Notion 呢類係 SPA，內容係 JS 慢慢砌出嚟。你跑嗰刻個元素根本未存在。

• 會出事：刷新有時 work 有時唔 work，你以為自己癲咗。
• 點救：叫 Claude Code 改用 MutationObserver 等個元素出現先做嘢，唔好用一個 setTimeout 嘅死時間去賭；同埋 SPA 切頁係唔會 reload 嘅，要 listen URL 變化重新跑。

3. Manifest V3 嘅 background 唔係長開，係 service worker 會瞓著 你可能 demo 嗰陣 background 記住咗個狀態，但 MV3 嘅 service worker 閒置一陣就會被 Chrome 殺咗，記憶體裏面啲變數全部清零。

• 會出事：擺一陣返嚟，之前嘅設定 / 計數無端端 reset。
• 點救：所有要記住嘅嘢一律寫落 chrome.storage.local，唔好淨係擺喺一個全域變數度當佢會永遠喺度。

4. 改完 code 唔 reload，你以為改咗其實冇 你改完檔，但個 extension 仲係載住舊版。content script 尤其陰公，有時要連目標分頁都 reload 埋先食到新 code。

• 會出事：你同 Claude Code 嘥成個鐘 debug 一個「其實已經改好」嘅問題，兩邊都黐線。
• 點救：每次改完去 chrome://extensions 撳一下個 reload 圖示，再 refresh 返目標頁；debug 時養成「改一次、reload 一次、試一次」嘅節奏，唔好一次過改五樣嘢。

5. 權限攞得太闊，將來想分享或者上架就還神 為咗方便，prompt 可能畀 Claude 加咗 <all_urls> 或者一大堆 permission。自己用冇人理，但一旦你想 send 個 repo 畀朋友、或者真係上 Chrome Web Store，過唔到審核又或者朋友見到個權限提示會卻步。

• 會出事：朋友裝嗰陣見到「可讀取你所有網站嘅資料」即刻縮沙。
• 點救：原文 prompt 已經叫咗「只攞最基本權限」——記得真係 review 返 manifest.json，將個 host 收窄到你真正用嘅網域（例如淨係 mail.google.com），唔好留住個 demo 時嘅闊權限。

呢幾個位，就係「裝完試一次 OK」同「用足幾個月都信得過」之間嘅距離。

一個思維框架

唔好跌落「我要發佈落 Chrome Web Store」嘅陷阱。

發佈會增加 100 倍複雜度（審核、截圖、私隱條款、支援、更新）。你第一個 extension 99% 嘅價值在於你自己日日用得著。私人安裝就夠。

單人開發者 / vibe coder 嘅獨特優勢：你可以做「受眾得 1 個人」嘅產品。

呢類「自己整嘢自己用」嘅專案，最直接展示 Claude Code 嘅槓桿：將「我都唔知由邊度開始」嘅距離，縮短到「我晏晝就可以試一試」。

整完第一個 extension 之後，你會發現點解咁多開發者同你講「vibe coding 改變晒我」。唔係因為個框架神奇，係因為你由工具嘅消費者變成工具嘅創造者。

呢種觀念嘅轉變，經歷過一次就返唔到轉頭。而 Claude Code 嘅大眾市場價值，就係降低呢種觀念轉變嘅門檻。