在 Chrome 中使用 Claude Code

​

功能

• 即時除錯：直接讀取控制台錯誤和 DOM 狀態，然後修復導致它們的程式碼
• 設計驗證：從 Figma 模型建立 UI，然後在瀏覽器中開啟以驗證它是否相符
• 網頁應用程式測試：測試表單驗證、檢查視覺回歸或驗證使用者流程
• 已驗證的網頁應用程式：與 Google Docs、Gmail、Notion 或您已登入的任何應用程式互動，無需 API 連接器
• 資料提取：從網頁中提取結構化資訊並將其儲存在本地
• 任務自動化：自動化重複的瀏覽器任務，如資料輸入、表單填充或多網站工作流程
• 工作階段錄製：將瀏覽器互動錄製為 GIF，以記錄或分享發生的情況

​

先決條件

• Google Chrome 或 Microsoft Edge 瀏覽器
• Claude in Chrome 擴充功能 版本 1.0.36 或更高版本，可在 Chrome Web Store 中為兩個瀏覽器取得
• Claude Code
• 直接 Anthropic 計畫（Pro、Max、Team 或 Enterprise）

​

在 CLI 中開始

claude --chrome

Go to code.claude.com/docs, click on the search box,
type "hooks", and tell me what results appear

​

預設啟用 Chrome

​

管理網站權限

​

計畫模式中的瀏覽器工具

• 唯讀呼叫：read_page、get_page_text、find、讀取主控台訊息或網路請求，以及擷取螢幕截圖
• 改變狀態的呼叫：點擊、輸入、導航、標籤和視窗管理，以及錄製 GIF

​

範例工作流程

​

測試本地網頁應用程式

I just updated the login form validation. Can you open localhost:3000,
try submitting the form with invalid data, and check if the error
messages appear correctly?

​

使用控制台日誌進行除錯

Open the dashboard page and check the console for any errors when
the page loads.

​

自動填充表單

I have a spreadsheet of customer contacts in contacts.csv. For each row,
go to the CRM at crm.example.com, click "Add Contact", and fill in the
name, email, and phone fields.

​

在 Google Docs 中起草內容

Draft a project update based on the recent commits and add it to my
Google Doc at docs.google.com/document/d/abc123

​

從網頁中提取資料

Go to the product listings page and extract the name, price, and
availability for each item. Save the results as a CSV file.

​

執行多網站工作流程

Check my calendar for meetings tomorrow, then for each meeting with
an external attendee, look up their company website and add a note
about what they do.

​

錄製演示 GIF

Record a GIF showing how to complete the checkout flow, from adding
an item to the cart through to the confirmation page.

​

故障排除

​

未偵測到擴充功能

1. 驗證 Chrome 擴充功能已安裝並在 chrome://extensions 中啟用
2. 透過執行 claude --version 驗證 Claude Code 是否為最新版本
3. 檢查 Chrome 是否正在執行
4. 執行 /chrome 並選擇「重新連接擴充功能」以重新建立連接
5. 如果問題仍然存在，請重新啟動 Claude Code 和 Chrome

• macOS：~/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
• Linux：~/.config/google-chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
• Windows：在 Windows 登錄中檢查 HKCU\Software\Google\Chrome\NativeMessagingHosts\

• macOS：~/Library/Application Support/Microsoft Edge/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
• Linux：~/.config/microsoft-edge/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json
• Windows：在 Windows 登錄中檢查 HKCU\Software\Microsoft\Edge\NativeMessagingHosts\

​

瀏覽器無回應

1. 檢查是否有模態對話框（警告、確認、提示）阻止頁面。JavaScript 對話框會阻止瀏覽器事件並防止 Claude 接收命令。手動關閉對話框，然後告訴 Claude 繼續。
2. 要求 Claude 建立新標籤頁並重試
3. 透過在 chrome://extensions 中停用並重新啟用 Chrome 擴充功能來重新啟動它

​

長工作階段期間連接中斷

​

Windows 特定問題

• 命名管道衝突 (EADDRINUSE)：如果另一個程序正在使用相同的命名管道，請重新啟動 Claude Code。關閉任何可能使用 Chrome 的其他 Claude Code 工作階段。
• 原生訊息主機錯誤：如果原生訊息主機在啟動時崩潰，請嘗試重新安裝 Claude Code 以重新產生主機設定。

​

常見錯誤訊息

​

另請參閱

• 電腦使用：當任務無法在瀏覽器中完成時控制原生 macOS 應用程式
• 在 VS Code 中使用 Claude Code：VS Code 擴充功能中的瀏覽器自動化
• CLI 參考：命令列標誌，包括 --chrome
• 常見工作流程：更多使用 Claude Code 的方式
• 資料和隱私：Claude Code 如何處理您的資料
• Claude in Chrome 入門：Chrome 擴充功能的完整文件，包括快捷鍵、排程和權限