Claude Code 寫 Chrome 擴展：按 Manifest V3 起步，加載未打包的擴展，改了哪些文件要重新加載

本文根據 Chrome 開發者官方文檔《Hello World extension》《Manifest V3》和 Claude Code 官方《Best practices for Claude Code》整理，資料核對於 2026-11-05。配圖為本站整理的示意圖，不是介面截圖。本站（bigolab.com）不是 Anthropic 或 Google 官方網站。

適用於誰

• 想做一個自己用的小插件（比如整理網頁、改頁面樣式、加快捷按鈕）的人；
• 會一點網頁前端（HTML、JavaScript），想讓 Claude Code 幫忙起步的人；
• 不知道擴展怎麼在瀏覽器裏試跑、改了代碼要不要重裝的人。

結論先說

1. 新擴展用 Manifest V3。 manifest.json 裏 manifest_version 寫 3；官方說明 V3 把後台頁面改成按需運行的 service worker，並且不再允許使用遠程託管的代碼，擴展只能執行包內已有的 JavaScript。
2. 本地試跑不用打包。 官方步驟：地址列輸入 chrome://extensions，打開右上角的 Developer mode（開發者模式） 開關，點 Load unpacked（加載未打包的擴展程序），選擴展所在的文件夾。
3. 改完代碼要不要刷新，取決於改了哪裏。 官方表格：改 manifest、service worker 必須重新加載擴展；content script 要重新加載擴展並刷新網頁；彈窗（popup）、選項頁等其他擴展頁面不用重新加載。
4. Claude Code 能寫代碼，但點瀏覽器擴展頁面這一步要你自己做，它也看不到你的 Chrome 窗口。出錯時把 chrome://extensions 裏 Errors 按鈕的內容和控制檯報錯貼給它。
5. 權限只申請需要的，這是本站建議，不是官方逐條規定。

圖：本站根據 Chrome 官方：Hello World 擴展 整理的示意圖

一個擴展最少需要什麼

Chrome 官方的入門教學只用兩個文件：manifest.json，描述擴展的能力和配置；以及一個彈窗頁面 hello.html。官方的 manifest 示例包含 name、description、version、manifest_version: 3，以及 action 裏的 default_popup 和 default_icon（工具欄圖標和點擊後顯示的頁面）。

json
{
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

這是官方示例原文。讓 Claude Code 寫擴展時，先把它指向這個最小結構，再逐步加功能。

第一步：先說清楚想做什麼，讓它出方案

提示詞 1：擴展方案，不寫代碼

text
我想做一個 Chrome 擴展：【在任意網頁上，點擊工具欄圖標後，彈窗裏顯示這個頁面的標題和字數，並能一鍵複製標題】。
請使用 Manifest V3。先不要寫代碼，給我方案：
1）需要哪些文件，各自做什麼；
2）manifest.json 裏要聲明哪些權限，並逐項說明為什麼需要；能不申請的就不要申請；
3）有沒有用到遠程託管的代碼（不允許），所有腳本都放在擴展包內；
4）我怎麼在 Chrome 裏加載和測試。

要求它逐項解釋權限，是為了避免「順手多要一堆權限」。

第二步：生成並加載

提示詞 2：生成最小可運行版本

text
請按方案在當前目錄創建擴展，先做最小可運行版本：manifest.json、popup.html、popup.js，圖標先用佔位的 png 文件說明（告訴我需要放什麼尺寸，不要生成二進制內容）。
所有腳本放在包內，不要引用任何 CDN 上的腳本。
寫完後告訴我加載步驟，並列出我應當看到的結果。

然後你自己操作：

1. 在 Chrome 地址列輸入 chrome://extensions；
2. 打開 Developer mode；
3. 點 Load unpacked，選擇擴展文件夾；
4. 官方說，預設擴展會收在工具欄的拼圖圖標裏，可以把它固定到工具欄方便開發。

第三步：改代碼以後，哪些要重新加載

官方的表格是這樣的：

• manifest：需要重新加載擴展；
• service worker：需要重新加載擴展；
• content script：需要重新加載擴展，還要刷新目標網頁；
• 彈窗、選項頁、其他擴展頁面：不需要。

重新加載的辦法：在 chrome://extensions 頁面點開關旁邊的刷新圖標。很多「改了沒效果」就是漏了這一步。把這段規則告訴 Claude，也讓它在每次改完後提醒你該怎麼刷新。

第四步：看日誌和報錯

官方教學裏的辦法：要看彈窗的控制檯，先打開彈窗，在彈窗上點右鍵選 Inspect（檢查），進入 DevTools 的 Console（控制檯） 面板。擴展代碼出錯時，chrome://extensions 裏該擴展會出現一個 Errors 按鈕，點開能看到報錯。

提示詞 3：把報錯交給 Claude

text
擴展加載後，點擊圖標彈窗裏沒有顯示字數。下面是我在彈窗上右鍵檢查後，Console 裏的完整報錯：
【粘貼報錯原文】
以及 chrome://extensions 裏 Errors 按鈕顯示的內容：
【粘貼】
請先判斷是 manifest 配置、權限還是代碼邏輯的問題，說明依據，再給最小修改；改完告訴我需要重新加載擴展還是隻需刷新頁面。

官方「Fix bugs efficiently」工作流的第一步，就是把報錯交給 Claude；最佳實踐裏也建議寫清症狀和復現辦法，比說「不能用了」有效得多。

圖：本站根據 Chrome 官方：Hello World 擴展 整理的示意圖

功能要一個一個加

擴展出問題，往往是因為一次疊了太多東西：彈窗、後台、頁面腳本、存儲全寫在一起，出錯後不知道是哪一層。建議每一輪只讓 Claude 加一個功能，加完立刻加載試一次，再繼續。比如先讓彈窗能顯示標題，再加複製按鈕，最後才加頁面腳本。每輪都把「剛才我加載後看到了什麼」告訴它，這比一次寫完再調試省時間，也方便你用 git diff 看清每一輪改了什麼。

第五步：權限和私隱自查

提示詞 4：權限審查

text
請審查這個擴展的 manifest.json 和全部源碼：
1）列出聲明的每一個權限和可訪問的網址範圍，說明現在的功能是否真的需要，哪些可以去掉或縮小；
2）代碼裏有沒有讀取頁面敏感內容（輸入框、cookie、表單）、有沒有把數據發到外部地址；
3）有沒有引用遠程腳本。
只給審查結果，不要修改文件。

擴展能讀寫你訪問的網頁，所以不要裝來路不明的擴展，也不要把你自己寫的未經審查的擴展發給別人用。要上架 Chrome 應用商店，請閱讀官方的商店計劃政策，本文不展開。

常見問題

Q：「Load unpacked」按鈕看不到？

先確認右上角的 Developer mode 已打開，官方步驟裏這是第二步。

Q：想讓 Claude 直接看瀏覽器裏的效果？

Claude Code 官方有 Chrome 集成（通過 Claude in Chrome 擴展），可以讓它操作網頁，設定見 /guides/claude-in-chrome。它是另一個功能，不等於它能管理你的擴展頁面，請以官方說明為準。

Q：想做能聯網請求別人 API 的擴展？

V3 不允許遠程託管代碼，但沒有說不能發請求。具體要聲明的權限請查官方 Permissions 頁面。

訂閱和額度

寫一個小擴展通常會話不長。訂閱選擇見 /chongzhi/claude-code，價格和額度以官方頁面當前顯示為準。

相關教學

• /guides/claude-code-build-frontend-project-react-vue：從零搭前端項目
• /guides/claude-code-getting-started：Claude Code 入門
• /guides/claude-in-chrome：Claude in Chrome

參考資料

• Chrome 開發者：Hello World extension — https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world
• Chrome 開發者：Manifest V3 概覽 — https://developer.chrome.com/docs/extensions/develop/migrate/what-is-mv3
• Claude Code 文檔：Best practices for Claude Code — https://code.claude.com/docs/en/best-practices