用 Claude Code 整 Chrome 擴充功能：由一個自用小工具開始

先揀一件細事

你可能想喺指定網站加個閱讀模式，或者一撳就複製文章標題同網址。呢類功能範圍細、容易睇到結果，適合用嚟學整 Chrome 擴充功能。

先查網站本身有冇同類設定。例如 Gmail 已經有篩選寄件人同加標籤功能，唔需要為咗呢件事另寫工具。第一次亦唔建議做自動寄信、付款或代人取消訂閱：一個錯誤就可能直接影響其他人。

1. 寫清楚工具做乜

以下用「複製目前頁面標題同網址」做例子。只喺你撳按鈕時執行，唔持續讀取瀏覽紀錄。

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

幫我整一個自用 Chrome 擴充功能：撳工具列按鈕後，顯示目前分頁嘅標題同網址，再由我撳「複製」。

用 Manifest V3、原生 JavaScript、HTML 同 CSS，唔加框架。先解釋每項所需權限，再寫 manifest、彈出視窗同相關程式。

只申請功能所需嘅權限，唔好要求存取所有網站，唔收集瀏覽紀錄，唔連外部 API。複製失敗要有清楚提示。

加 README，講明點喺 Chrome 載入未封裝項目、更新同移除。完成後列出我要親手試嘅步驟。

「只讀頁面」唔代表一定毋須權限。可存取嘅分頁資料、執行程式方式同使用者手勢都會影響所需設定，要逐項檢查 manifest.json。

2. 載入，再試正常同失敗情況

開 chrome://extensions，啟用開發人員模式，揀「載入未封裝項目」，選取專案資料夾。介面名稱會因語言設定而略有不同。

第一次至少試：一般網頁、冇標題嘅頁面、唔允許執行擴充功能嘅 Chrome 內部頁面，以及剪貼簿操作失敗時嘅提示。唔好只試一次成功就當完成。

改完檔案，要喺擴充功能頁重新載入；如果有注入網頁嘅 content script，通常亦要重新整理目標分頁。

我已重新載入擴充功能，並重新整理目標頁面。

重現步驟：[逐步填寫]
預期結果：[填寫]
實際結果及 Console 錯誤：[刪除敏感資料後填寫]

先指出可能原因同所需證據，每次只驗證一個假設。改完列出要重試嘅案例，唔好順手加新功能。

3. 加設定時，要知道資料擺喺邊

例如想記住複製格式，可以用 chrome.storage.local。要記住嘅設定唔應該只留喺背景 service worker 嘅變數：Manifest V3 嘅 service worker 會停止同重新啟動。

不過，chrome.storage.local 唔係用嚟安全保管長期 API 密鑰嘅保險箱。唔好將供應商密鑰包入擴充功能、推上 GitHub，或者當儲存在本機就一定安全。需要收費 API 時，先另行設計授權同後端，唔好由呢個入門例子直接加上去。

如果真係要修改網站內容

閱讀模式、隱藏指定版面等功能，需要處理網站改版同動態載入。以下係最常見嘅檢查位：

• 選取元素時，盡量用有意義嘅標記；隨機 class 名容易變，但文字同 aria-label 亦可能因語言而變。
• 動態頁面可以用 MutationObserver 觀察內容，記得限制範圍、避免重複插入，唔好每次變動都掃全頁。
• 網站內切頁未必重新載入，要測試返回、下一頁同開新分頁。
• 搵唔到目標元素時應該停止並留下可診斷訊息，唔好改到旁邊另一個按鈕。

涉及 Gmail 等網站，亦唔好將自行寫嘅「寄信前確認」當成可靠防線。網站改版、鍵盤快捷鍵或者其他寄送路徑都可能繞過佢。

備份同後續維護

可以先備份原始碼同 README。用 GitHub 前，檢查有冇私人網址、測試資料、密鑰同唔應該上載嘅檔案。自己用得順之後，先考慮分享；公開上架仲要處理權限說明、私隱披露同更新。

完成嘅標準係：你知道佢會讀乜、改乜，失敗時睇得出，而且隨時可以停用。花幾耐取決於網站同功能，唔需要用「一日整好」做驗收條件。