4 4
5# Use Claude Code with Chrome (beta)5# Use Claude Code with Chrome (beta)
6 6
7> Connect Claude Code to your browser to test web apps, debug with console logs, and automate browser tasks.7> Connect Claude Code to your Chrome browser to test web apps, debug with console logs, automate form filling, and extract data from web pages.
8
9Claude Code integrates with the Claude in Chrome browser extension to give you browser automation capabilities from the CLI or the [VS Code extension](/en/vs-code#automate-browser-tasks-with-chrome). Build your code, then test and debug in the browser without switching contexts.
10
11Claude opens new tabs for browser tasks and shares your browser's login state, so it can access any site you're already signed into. Browser actions run in a visible Chrome window in real time. When Claude encounters a login page or CAPTCHA, it pauses and asks you to handle it manually.
8 12
9<Note>13<Note>
10 Chrome integration is in beta and currently works with Google Chrome only. It is not yet supported on Brave, Arc, or other Chromium-based browsers. WSL (Windows Subsystem for Linux) is also not supported.14 Chrome integration is in beta and currently works with Google Chrome only. It is not yet supported on Brave, Arc, or other Chromium-based browsers. WSL (Windows Subsystem for Linux) is also not supported.
11</Note>15</Note>
12 16
13Claude Code integrates with the Claude in Chrome browser extension to give you browser automation capabilities directly from your terminal. Build in your terminal, then test and debug in your browser without switching contexts.17## Capabilities
14
15## What the integration enables
16 18
17With Chrome connected, you can chain browser actions with terminal commands in a single workflow. For example: scrape documentation from a website, analyze it, generate code based on what you learned, and commit the result.19With Chrome connected, you can chain browser actions with coding tasks in a single workflow:
18 20
19Key capabilities include:21* **Live debugging**: read console errors and DOM state directly, then fix the code that caused them
20 22* **Design verification**: build a UI from a Figma mock, then open it in the browser to verify it matches
21* **Live debugging**: Claude reads console errors and DOM state directly, then fixes the code that caused them23* **Web app testing**: test form validation, check for visual regressions, or verify user flows
22* **Design verification**: Build a UI from a Figma mock, then have Claude open it in the browser and verify it matches24* **Authenticated web apps**: interact with Google Docs, Gmail, Notion, or any app you're logged into without API connectors
23* **Web app testing**: Test form validation, check for visual regressions, or verify user flows work correctly25* **Data extraction**: pull structured information from web pages and save it locally
24* **Authenticated web apps**: Interact with Google Docs, Gmail, Notion, or any app you're logged into without needing API connectors26* **Task automation**: automate repetitive browser tasks like data entry, form filling, or multi-site workflows
25* **Data extraction**: Pull structured information from web pages and save it locally27* **Session recording**: record browser interactions as GIFs to document or share what happened
26* **Task automation**: Automate repetitive browser tasks like data entry, form filling, or multi-site workflows
27* **Session recording**: Record browser interactions as GIFs to document or share what happened
28 28
29## Prerequisites29## Prerequisites
30 30
32 32
33* [Google Chrome](https://www.google.com/chrome/) browser33* [Google Chrome](https://www.google.com/chrome/) browser
34* [Claude in Chrome extension](https://chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn) version 1.0.36 or higher34* [Claude in Chrome extension](https://chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn) version 1.0.36 or higher
35* [Claude Code CLI](/en/quickstart#step-1-install-claude-code) version 2.0.73 or higher35* [Claude Code](/en/quickstart#step-1-install-claude-code) version 2.0.73 or higher
36* A paid Claude plan (Pro, Team, or Enterprise)36* A direct Anthropic plan (Pro, Max, Team, or Enterprise)
37
38## How the integration works
39
40Claude Code communicates with Chrome through the Claude in Chrome browser extension. The extension uses Chrome's [Native Messaging API](https://developer.chrome.com/docs/extensions/develop/concepts/native-messaging) to receive commands from Claude Code and execute them in your browser. This architecture lets Claude Code control browser tabs, read page content, and perform actions while you continue working in your terminal.
41
42When Claude encounters a login page, CAPTCHA, or other blocker, it pauses and asks you to handle it. You can provide credentials for Claude to enter, or log in manually in the browser. Once you're past the blocker, tell Claude to continue and it picks up where it left off.
43
44Claude opens new tabs for browser tasks rather than taking over existing ones. However, it shares your browser's login state, so if you're already signed into a site in Chrome, Claude can access it without re-authenticating.
45 37
46<Note>38<Note>
47 The Chrome integration requires a visible browser window. When Claude performs browser actions, you'll see Chrome open and navigate in real time. There's no headless mode since the integration relies on your actual browser session with its login state.39 Chrome integration is not available through third-party providers like Amazon Bedrock, Google Cloud Vertex AI, or Microsoft Foundry. If you access Claude exclusively through a third-party provider, you need a separate claude.ai account to use this feature.
48</Note>40</Note>
49 41
50## Set up the integration42## Get started in the CLI
51 43
52<Steps>44<Steps>
53 <Step title="Update Claude Code">45 <Step title="Launch Claude Code with Chrome">
54 Chrome integration requires a recent version of Claude Code. If you installed using the [native installer](/en/quickstart#step-1-install-claude-code), updates happen automatically. Otherwise, run:46 Start Claude Code with the `--chrome` flag:
55 47
56 ```bash theme={null}48 ```bash theme={null}
57 claude update49 claude --chrome
58 ```50 ```
51
52 You can also enable Chrome from within an existing session by running `/chrome`.
59 </Step>53 </Step>
60 54
61 <Step title="Start Claude Code with Chrome enabled">55 <Step title="Ask Claude to use the browser">
62 Launch Claude Code with the `--chrome` flag:56 This example navigates to a page, interacts with it, and reports what it finds, all from your terminal or editor:
63 57
64 ```bash theme={null}58 ```text theme={null}
65 claude --chrome59 Go to code.claude.com/docs, click on the search box,
60 type "hooks", and tell me what results appear
66 ```61 ```
67 </Step>62 </Step>
68
69 <Step title="Verify the connection">
70 Run `/chrome` to check the connection status and manage settings. If the extension isn't detected, you'll see a warning with a link to install it.
71 </Step>
72</Steps>63</Steps>
73 64
74You can also enable Chrome integration from within an existing session using the `/chrome` command.65Run `/chrome` at any time to check the connection status, manage permissions, or reconnect the extension.
75 66
76## Try it out67For VS Code, see [browser automation in VS Code](/en/vs-code#automate-browser-tasks-with-chrome).
77 68
78Once connected, type this into Claude to see the integration in action:69### Enable Chrome by default
79 70
80```71To avoid passing `--chrome` each session, run `/chrome` and select "Enabled by default".
81Go to code.claude.com/docs, click on the search box,
82type "hooks", and tell me what results appear
83```
84 72
85Claude opens the page, clicks into the search field, types the query, and reports the autocomplete results. This shows navigation, clicking, and typing in a single workflow.73In the [VS Code extension](/en/vs-code#automate-browser-tasks-with-chrome), Chrome is available whenever the Chrome extension is installed. No additional flag is needed.
86 74
87## Example workflows75<Note>
76 Enabling Chrome by default in the CLI increases context usage since browser tools are always loaded. If you notice increased context consumption, disable this setting and use `--chrome` only when needed.
77</Note>
88 78
89Claude can navigate pages, click and type, fill forms, scroll, read console logs and network requests, manage tabs, resize windows, and record GIFs. Run `/mcp` and click into `claude-in-chrome` to see the full list of available tools.79### Manage site permissions
90 80
91The following examples show common patterns for browser automation.81Site-level permissions are inherited from the Chrome extension. Manage permissions in the Chrome extension settings to control which sites Claude can browse, click, and type on.
82
83## Example workflows
84
85These examples show common ways to combine browser actions with coding tasks. Run `/mcp` and select `claude-in-chrome` to see the full list of available browser tools.
92 86
93### Test a local web application87### Test a local web application
94 88
95When developing a web app, ask Claude to verify your changes work correctly:89When developing a web app, ask Claude to verify your changes work correctly:
96 90
97```91```text theme={null}
98I just updated the login form validation. Can you open localhost:3000,92I just updated the login form validation. Can you open localhost:3000,
99try submitting the form with invalid data, and check if the error93try submitting the form with invalid data, and check if the error
100messages appear correctly?94messages appear correctly?
104 98
105### Debug with console logs99### Debug with console logs
106 100
107If your app has issues, Claude can read console output to help diagnose problems:101Claude can read console output to help diagnose problems. Tell Claude what patterns to look for rather than asking for all console output, since logs can be verbose:
108 102
109```103```text theme={null}
110Open the dashboard page and check the console for any errors when104Open the dashboard page and check the console for any errors when
111the page loads.105the page loads.
112```106```
117 111
118Speed up repetitive data entry tasks:112Speed up repetitive data entry tasks:
119 113
120```114```text theme={null}
121I have a spreadsheet of customer contacts in contacts.csv. For each row,115I have a spreadsheet of customer contacts in contacts.csv. For each row,
122go to our CRM at crm.example.com, click "Add Contact", and fill in the116go to the CRM at crm.example.com, click "Add Contact", and fill in the
123name, email, and phone fields.117name, email, and phone fields.
124```118```
125 119
129 123
130Use Claude to write directly in your documents without API setup:124Use Claude to write directly in your documents without API setup:
131 125
132```126```text theme={null}
133Draft a project update based on our recent commits and add it to my127Draft a project update based on the recent commits and add it to my
134Google Doc at docs.google.com/document/d/abc123128Google Doc at docs.google.com/document/d/abc123
135```129```
136 130
140 134
141Pull structured information from websites:135Pull structured information from websites:
142 136
143```137```text theme={null}
144Go to the product listings page and extract the name, price, and138Go to the product listings page and extract the name, price, and
145availability for each item. Save the results as a CSV file.139availability for each item. Save the results as a CSV file.
146```140```
151 145
152Coordinate tasks across multiple websites:146Coordinate tasks across multiple websites:
153 147
154```148```text theme={null}
155Check my calendar for meetings tomorrow, then for each meeting with149Check my calendar for meetings tomorrow, then for each meeting with
156an external attendee, look up their company on LinkedIn and add a150an external attendee, look up their company website and add a note
157note about what they do.151about what they do.
158```152```
159 153
160Claude works across tabs to gather information and complete the workflow.154Claude works across tabs to gather information and complete the workflow.
163 157
164Create shareable recordings of browser interactions:158Create shareable recordings of browser interactions:
165 159
166```160```text theme={null}
167Record a GIF showing how to complete the checkout flow, from adding161Record a GIF showing how to complete the checkout flow, from adding
168an item to the cart through to the confirmation page.162an item to the cart through to the confirmation page.
169```163```
170 164
171Claude records the interaction sequence and saves it as a GIF file.165Claude records the interaction sequence and saves it as a GIF file.
172 166
173## Best practices
174
175When using browser automation, keep these guidelines in mind:
176
177* **Modal dialogs can interrupt the flow**: JavaScript alerts, confirms, and prompts block browser events and prevent Claude from receiving commands. If a dialog appears, dismiss it manually and tell Claude to continue.
178* **Use fresh tabs**: Claude creates new tabs for each session. If a tab becomes unresponsive, ask Claude to create a new one.
179* **Filter console output**: Console logs can be verbose. When debugging, tell Claude what patterns to look for rather than asking for all console output.
180
181## Troubleshooting167## Troubleshooting
182 168
183### Extension not detected169### Extension not detected
184 170
185If Claude Code shows "Chrome extension not detected":171If Claude Code shows "Chrome extension not detected":
186 172
1871. Verify the Chrome extension (version 1.0.36 or higher) is installed1731. Verify the Chrome extension is installed and enabled in `chrome://extensions`
1882. Verify Claude Code is version 2.0.73 or higher by running `claude --version`1742. Verify Claude Code is up to date by running `claude --version`
1893. Check that Chrome is running1753. Check that Chrome is running
1904. Run `/chrome` and select "Reconnect extension" to re-establish the connection1764. Run `/chrome` and select "Reconnect extension" to re-establish the connection
1915. If the issue persists, restart both Claude Code and Chrome1775. If the issue persists, restart both Claude Code and Chrome
192 178
179The first time you enable Chrome integration, Claude Code installs a native messaging host configuration file. Chrome reads this file on startup, so if the extension isn't detected on your first attempt, restart Chrome to pick up the new configuration.
180
181If the connection still fails, verify the host configuration file exists at:
182
183* **macOS**: `~/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json`
184* **Linux**: `~/.config/google-chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json`
185* **Windows**: check `HKCU\Software\Google\Chrome\NativeMessagingHosts\` in the Windows Registry
186
193### Browser not responding187### Browser not responding
194 188
195If Claude's browser commands stop working:189If Claude's browser commands stop working:
196 190
1971. Check if a modal dialog (alert, confirm, prompt) is blocking the page1911. Check if a modal dialog (alert, confirm, prompt) is blocking the page. JavaScript dialogs block browser events and prevent Claude from receiving commands. Dismiss the dialog manually, then tell Claude to continue.
1982. Ask Claude to create a new tab and try again1922. Ask Claude to create a new tab and try again
1993. Restart the Chrome extension by disabling and re-enabling it1933. Restart the Chrome extension by disabling and re-enabling it in `chrome://extensions`
200 194
201### First-time setup195### Connection drops during long sessions
202 196
203The first time you use the integration, Claude Code installs a native messaging host that allows communication between the CLI and Chrome. If you encounter permission errors, you may need to restart Chrome for the installation to take effect.197The Chrome extension's service worker can go idle during extended sessions, which breaks the connection. If browser tools stop working after a period of inactivity, run `/chrome` and select "Reconnect extension".
204 198
205## Enable by default199### Windows-specific issues
206 200
207Chrome integration requires the `--chrome` flag each time you start Claude Code. To enable it by default, run `/chrome` and select "Enabled by default".201On Windows, you may encounter:
208 202
209<Note>203* **Named pipe conflicts (EADDRINUSE)**: if another process is using the same named pipe, restart Claude Code. Close any other Claude Code sessions that might be using Chrome.
210 Enabling Chrome by default increases context usage since browser tools are always loaded. If you notice increased context consumption, disable this setting and use `--chrome` only when needed.204* **Native messaging host errors**: if the native messaging host crashes on startup, try reinstalling Claude Code to regenerate the host configuration.
211</Note>205
206### Common error messages
207
208These are the most frequently encountered errors and how to resolve them:
212 209
213Site-level permissions are inherited from the Chrome extension. Manage permissions in the Chrome extension settings to control which sites Claude can browse, click, and type on. Run `/chrome` to see current permission settings.210| Error | Cause | Fix |
211| ------------------------------------ | ------------------------------------------------ | --------------------------------------------------------------- |
212| "Browser extension is not connected" | Native messaging host cannot reach the extension | Restart Chrome and Claude Code, then run `/chrome` to reconnect |
213| "Extension not detected" | Chrome extension is not installed or is disabled | Install or enable the extension in `chrome://extensions` |
214| "No tab available" | Claude tried to act before a tab was ready | Ask Claude to create a new tab and retry |
215| "Receiving end does not exist" | Extension service worker went idle | Run `/chrome` and select "Reconnect extension" |
214 216
215## See also217## See also
216 218
217* [CLI reference](/en/cli-reference) - Command-line flags including `--chrome`219* [Use Claude Code in VS Code](/en/vs-code#automate-browser-tasks-with-chrome): browser automation in the VS Code extension
218* [Common workflows](/en/common-workflows) - More ways to use Claude Code220* [CLI reference](/en/cli-reference): command-line flags including `--chrome`
219* [Getting started with Claude for Chrome](https://support.anthropic.com/en/articles/12012173-getting-started-with-claude-for-chrome) - Full documentation for the Chrome extension, including shortcuts, scheduling, and permissions221* [Common workflows](/en/common-workflows): more ways to use Claude Code
222* [Data and privacy](/en/data-usage): how Claude Code handles your data
223* [Getting started with Claude in Chrome](https://support.claude.com/en/articles/12012173-getting-started-with-claude-in-chrome): full documentation for the Chrome extension, including shortcuts, scheduling, and permissions