SpyBara
Go Premium

chrome.md 2026-10-01 23:59 UTC to 2026-10-02 16:57 UTC

This page contains 102 additions and 31 deletions.

2026
Fri 2 18:00

在 Chrome 中使用 Claude Code

將 Claude Code 連接到您的 Chrome 瀏覽器，以測試網頁應用程式、使用控制台日誌進行除錯、自動填充表單，以及從網頁中提取資料。

Claude Code 與 Claude in Chrome 瀏覽器擴充功能整合，為您提供從 CLI 或 VS Code 擴充功能 進行瀏覽器自動化的功能。建立您的程式碼，然後在瀏覽器中測試和除錯，無需切換上下文。

Claude 為瀏覽器任務開啟新標籤頁，並共享您瀏覽器的登入狀態，因此它可以存取您已登入的任何網站。瀏覽器操作在可見的 Chrome 視窗中即時執行。當 Claude 遇到登入頁面或 CAPTCHA 時，它會暫停並要求您手動處理。

擴充功能會將 Claude 開啟的標籤頁收集到與您的工作階段綁定的 Chrome 標籤頁群組中。在本機工作階段中，工作階段結束時 Claude Code 是否會關閉該群組，取決於工作階段的結束方式：

  • 當您輸入 /clear 時，Claude Code 會關閉該群組（包括已開啟的頁面），除非在清除後仍會保留的工作仍在執行中
  • 當您使用 /resume 等命令切換工作階段、結束 Claude Code，或在清除後仍會保留的工作仍在執行時執行 /clear，Claude Code 只會在群組中僅包含空白新標籤頁時才關閉該群組，讓您可能仍在閱讀的頁面保持開啟

功能

連接 Chrome 後，您可以在單一工作流程中鏈接瀏覽器操作與編碼任務：

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

先決條件

在使用 Claude Code 與 Chrome 之前，您需要：

Chrome 整合還需要使用 /login 登入。如果您使用 API 金鑰或來自 claude setup-token 的長期 token 進行身分驗證，即使您傳入 --chrome，Claude Code 也會保持 Chrome 整合關閉，因為瀏覽器擴充功能無法使用這些憑證進行身分驗證。在 v2.1.216 之前，這些工作階段可以啟用 Chrome 整合，但每次嘗試連線至瀏覽器擴充功能時都會因 403 錯誤而失敗。

在 CLI 中開始

1

使用 Chrome 啟動 Claude Code

使用 --chrome 旗標啟動 Claude Code：

claude --chrome

第一次搭配 Chrome 啟動時，Claude Code 會顯示一次性的對話框，介紹此整合並說明網站權限的運作方式。按 Enter 繼續。

若要在未來的工作階段中不使用旗標即啟用 Chrome，請參閱預設啟用 Chrome。

2

要求 Claude 使用瀏覽器

此範例會導航到頁面、與其互動並回報其發現，全部在您的終端機或編輯器中完成：

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

如果 Claude Code 在執行瀏覽器操作前要求權限，請批准它。對話框以 Claude in Chrome wants to 開頭，並提供一個選項，可在此工作階段中允許該網站上的所有操作。Claude 會開啟新分頁並開始執行任務。

隨時執行 /chrome 以檢查連線狀態、管理權限、重新連線擴充功能，或選擇要使用的已連線瀏覽器。當狀態面板顯示「狀態：已啟用」和「擴充功能：已安裝」時，表示整合正常運作。

如果連線了多個瀏覽器，您可以選擇 Claude 要使用哪一個。當瀏覽器操作在您做出選擇之前開始時，Claude 會提示您選擇一個。若之後要切換瀏覽器，請執行 /chrome 並選擇 選擇瀏覽器…。即使有其他瀏覽器連線，Claude 仍會持續使用您的選擇。

對於 VS Code，請參閱 VS Code 中的瀏覽器自動化。

在 Claude 詢問時安裝擴充功能

當 Claude 在互動式工作階段中需要使用您的瀏覽器，而 Claude Code 未偵測到擴充功能時，Claude Code 會顯示標題為「Claude 想要使用您的瀏覽器」的安裝提示。Claude Code 每個工作階段最多詢問一次。

此提示提供三個選項：

  • 安裝擴充功能：在您的瀏覽器中開啟擴充功能安裝頁面，並開始引導式設定。Claude Code 會等待安裝完成、連線擴充功能，並在同一個工作階段中啟用瀏覽器工具。連線就緒後，選擇「繼續使用瀏覽器工具」，Claude 就會在您的瀏覽器中繼續執行任務。您可以選擇「不使用瀏覽器工具繼續」以離開設定，稍後再使用 /chrome 完成。
  • 暫時不要：不使用瀏覽器工具繼續執行任務。Claude Code 可能會在之後的工作階段中再次詢問。
  • 不要再詢問：在未來的工作階段中停止顯示此提示。您仍可隨時使用 /chrome 設定此整合。

有兩種受管 MCP 政策會關閉此提示：

預設啟用 Chrome

若要連線 Chrome 而不必每次都傳遞 --chrome，請在 CLI 工作階段中執行 /chrome 並選擇 預設啟用。在 VS Code 擴充功能中，於提示詞輸入框中輸入 /chrome 並開啟 預設啟用 開關。兩者共用同一個設定，因此在任一處開啟，都會同時在 CLI 和 VS Code 中開啟。

開啟此設定且使用 Claude Code v2.1.287 或更新版本時，每個 VS Code 工作階段會在啟動時連線到您的瀏覽器，因此 Claude 在您輸入 @browser 之前就能使用瀏覽器。在較早的版本中，或關閉此設定時，VS Code 工作階段會在您輸入 @browser 時才連線。

當 Chrome 未執行時，Claude Code 會正常啟動。在 v2.1.211 之前，若已啟用 Chrome 整合但 Chrome 未執行，啟動過程可能會停滯。

管理網站權限

網站級權限繼承自 Chrome 擴充功能。在 Chrome 擴充功能設定中管理權限，以控制 Claude 可以瀏覽、點擊和輸入的網站。在自動模式中，當自動模式分類器本身批准對某網站的瀏覽器呼叫時，擴充功能會針對該呼叫略過其本身的逐網站檢查，除非您的權限規則拒絕 Claude in Chrome 存取任何網站。

VS Code 工作階段中的權限提示

在 VS Code 工作階段中，Claude Code 是否會在瀏覽器操作前詢問您，取決於該工作階段連線到瀏覽器的方式：

  • 您輸入了 @browser：擴充功能會批准 Claude Code 原本會詢問您的每個瀏覽器操作。
  • 由預設啟用設定在啟動時連線：在 Manual、Edit automatically、Auto 和 Bypass permissions 模式下，Claude Code 都會在瀏覽器操作前詢問您，直到您在該工作階段中輸入 @browser 為止。

plan mode 中的瀏覽器工具

在 plan mode 中，Claude 錄製 GIF、開啟新分頁或執行捷徑之前，會出現權限提示，但在您輸入了 @browser 的 VS Code 工作階段中除外。在互動式 CLI 工作階段中，如果可使用略過權限模式，且功能旗標擷取已關閉，這些呼叫會在無提示的情況下執行。

tabs_context_mcp 呼叫在設定 createIfEmpty 時也會提示，包含上述任一操作的 browser_batch 呼叫亦同。

範例工作流程

這些範例展示了將瀏覽器操作與編碼任務結合的常見方式。執行 /mcp，選擇 claude-in-chrome，然後選擇 View tools 以查看可用瀏覽器工具的完整清單。

測試本地網頁應用程式

開發網頁應用程式時，要求 Claude 驗證您的變更是否正確運作：

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?

Claude 導航到您的本地伺服器、與表單互動並報告其觀察結果。

使用控制台日誌進行除錯

Claude 可以讀取控制台輸出以幫助診斷問題。告訴 Claude 要尋找的模式，而不是要求所有控制台輸出，因為日誌可能很冗長：

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

Claude 讀取控制台訊息，可以篩選特定模式或錯誤類型。

自動填充表單

加快重複資料輸入任務的速度：

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.

Claude 讀取您的本地檔案、導航網頁介面並為每筆記錄輸入資料。

上傳檔案到網頁

Claude 可以將您電腦上的檔案附加到頁面上的上傳欄位。Claude Code 會讀取檔案並將其內容傳送到瀏覽器，因此上傳在本地和遠端工作階段中皆可運作。需要 Claude Code v2.1.211 或更新版本。

此範例將日誌檔案附加到表單：

Open the bug tracker at bugs.example.com, create a new issue,
and attach logs/session.log to it

上傳適用三項限制：

  • 權限：只有在工作階段被允許讀取檔案時，Claude 才能上傳該檔案，因此拒絕對檔案進行 Read 存取的權限規則也會阻止上傳該檔案。
  • 大小：單次上傳的檔案總計最多可達 10 MB。
  • 硬連結：Claude 會拒絕具有多個硬連結的檔案，這在 node_modules 等套件管理器儲存區中很常見。請複製該檔案並上傳副本。

在 Google Docs 中起草內容

使用 Claude 直接在您的文件中寫入，無需 API 設定：

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

Claude 開啟文件、點擊編輯器並輸入內容。這適用於您已登入的任何網頁應用程式：Gmail、Notion、Sheets 等。

從網頁中提取資料

從網站中提取結構化資訊：

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

Claude 導航到頁面、讀取內容並將資料編譯成結構化格式。

執行多網站工作流程

協調多個網站之間的任務：

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.

Claude 跨標籤頁工作以收集資訊並完成工作流程。

錄製演示 GIF

建立瀏覽器互動的可共享錄製：

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

Claude 錄製互動序列並將其儲存為 GIF 檔案。錄製內容會擷取瀏覽器中所有可見的內容，包括已登入頁面上的帳戶詳細資料，因此在與團隊以外的人分享之前，請先檢查錄製內容。

將螢幕截圖儲存到磁碟

要求 Claude 將螢幕截圖保留為檔案：

Take a screenshot of the checkout page and save it to disk

Claude 會將圖片儲存到磁碟並回報檔案路徑。在 v2.1.211 之前，螢幕截圖工具的 save_to_disk 選項不會寫入檔案。

疑難排解

未偵測到擴充功能

如果 Claude Code 無法偵測到 Chrome 擴充功能：

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

第一次啟用 Chrome 整合時，Claude Code 會安裝原生訊息主機設定檔。Chrome 在啟動時讀取此檔案，因此如果擴充功能在您的第一次嘗試中未被偵測到，請重新啟動 Chrome 以取得新設定。

Claude Code 只會在第一次安裝時開啟瀏覽器標籤頁，提示您連接擴充功能。當稍後的工作階段重寫設定檔時（例如在切換建置或設定目錄後），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\

對於 Edge：

  • 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\

其他基於 Chromium 的瀏覽器會從各自以瀏覽器命名的設定目錄中讀取相同的檔案。例如，macOS 上的 Brave 使用 ~/Library/Application Support/BraveSoftware/Brave-Browser/NativeMessagingHosts/，而在 Windows 上，每個瀏覽器都有自己的登錄機碼，例如 HKCU\Software\BraveSoftware\Brave-Browser\NativeMessagingHosts\。

瀏覽器無回應

如果 Claude 的瀏覽器命令停止工作：

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

長工作階段期間連接中斷

Chrome 擴充功能的服務工作者可能在延長的工作階段期間進入閒置狀態，這會中斷連接。如果瀏覽器工具在一段時間不活動後停止工作，請執行 /chrome 並選擇「重新連接擴充功能」。

Windows 特定問題

在 Windows 上，您可能會遇到：

  • 命名管道衝突 (EADDRINUSE)：如果另一個程序正在使用相同的命名管道，請重新啟動 Claude Code。關閉任何可能使用 Chrome 的其他 Claude Code 工作階段。
  • 原生訊息主機錯誤：如果原生訊息主機在啟動時崩潰，請嘗試重新安裝 Claude Code 以重新產生主機設定。
  • 設定頁面無法開啟：請更新 Claude Code。在 v2.1.211 之前，提示您連接擴充功能的瀏覽器標籤頁在 Windows 上可能無法開啟。

常見錯誤訊息

以下是最常遇到的錯誤及其解決方法：

錯誤 原因 修復
「瀏覽器擴充功能未連接」 原生訊息主機無法到達擴充功能，或您組織的 IP 允許清單拒絕了與 bridge.claudeusercontent.com 的連接 重新啟動 Chrome 和 Claude Code，然後執行 /chrome 以重新連接。如果您的組織使用 IP 允許清單且錯誤仍然存在，請參閱組織 IP 允許清單與代理伺服器出口流量
擴充功能在 /chrome 中顯示「未偵測到」 Chrome 擴充功能未安裝或已停用 在 chrome://extensions 中安裝或啟用擴充功能
「沒有可用的標籤頁」 Claude 在標籤頁準備好之前嘗試操作 要求 Claude 建立新標籤頁並重試
「接收端不存在」 擴充功能服務工作者進入閒置狀態 執行 /chrome 並選擇「重新連接擴充功能」

另請參閱