chrome.md +218 −0 created
1# Use Claude Code with Chrome (beta)
2
3> Connect Claude Code to your browser to test web apps, debug with console logs, and automate browser tasks.
4
5<Note>
6 Chrome integration is in beta and currently works with Google Chrome only. Arc and Dia browsers are not yet supported. WSL (Windows Subsystem for Linux) is also not supported.
7</Note>
8
9Claude 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.
10
11## What the integration enables
12
13With 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.
14
15Key capabilities include:
16
17* **Live debugging**: Claude reads console errors and DOM state directly, then fixes the code that caused them
18* **Design verification**: Build a UI from a Figma mock, then have Claude open it in the browser and verify it matches
19* **Web app testing**: Test form validation, check for visual regressions, or verify user flows work correctly
20* **Authenticated web apps**: Interact with Google Docs, Gmail, Notion, or any app you're logged into without needing API connectors
21* **Data extraction**: Pull structured information from web pages and save it locally
22* **Task automation**: Automate repetitive browser tasks like data entry, form filling, or multi-site workflows
23* **Session recording**: Record browser interactions as GIFs to document or share what happened
24
25## Prerequisites
26
27Before using Claude Code with Chrome, you need:
28
29* [Google Chrome](https://www.google.com/chrome/) browser
30* [Claude in Chrome extension](https://chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn) installed
31* [Claude Code CLI](/en/quickstart#step-1:-install-claude-code) installed
32* A paid Claude plan (Pro, Team, or Enterprise)
33
34## How the integration works
35
36Claude 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.
37
38When 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.
39
40Claude 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.
41
42<Note>
43 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.
44</Note>
45
46## Set up the integration
47
48<Steps>
49 <Step title="Update Claude Code">
50 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:
51
52 ```bash theme={null}
53 claude update
54 ```
55 </Step>
56
57 <Step title="Start Claude Code with Chrome enabled">
58 Launch Claude Code with the `--chrome` flag:
59
60 ```bash theme={null}
61 claude --chrome
62 ```
63 </Step>
64
65 <Step title="Verify the connection">
66 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.
67 </Step>
68</Steps>
69
70You can also enable Chrome integration from within an existing session using the `/chrome` slash command.
71
72## Try it out
73
74Once connected, type this into Claude to see the integration in action:
75
76```
77Go to code.claude.com/docs, click on the search box,
78type "hooks", and tell me what results appear
79```
80
81Claude 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.
82
83## Example workflows
84
85Claude 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.
86
87The following examples show common patterns for browser automation.
88
89### Test a local web application
90
91When developing a web app, ask Claude to verify your changes work correctly:
92
93```
94I just updated the login form validation. Can you open localhost:3000,
95try submitting the form with invalid data, and check if the error
96messages appear correctly?
97```
98
99Claude navigates to your local server, interacts with the form, and reports what it observes.
100
101### Debug with console logs
102
103If your app has issues, Claude can read console output to help diagnose problems:
104
105```
106Open the dashboard page and check the console for any errors when
107the page loads.
108```
109
110Claude reads the console messages and can filter for specific patterns or error types.
111
112### Automate form filling
113
114Speed up repetitive data entry tasks:
115
116```
117I have a spreadsheet of customer contacts in contacts.csv. For each row,
118go to our CRM at crm.example.com, click "Add Contact", and fill in the
119name, email, and phone fields.
120```
121
122Claude reads your local file, navigates the web interface, and enters the data for each record.
123
124### Draft content in Google Docs
125
126Use Claude to write directly in your documents without API setup:
127
128```
129Draft a project update based on our recent commits and add it to my
130Google Doc at docs.google.com/document/d/abc123
131```
132
133Claude opens the document, clicks into the editor, and types the content. This works with any web app you're logged into: Gmail, Notion, Sheets, and more.
134
135### Extract data from web pages
136
137Pull structured information from websites:
138
139```
140Go to the product listings page and extract the name, price, and
141availability for each item. Save the results as a CSV file.
142```
143
144Claude navigates to the page, reads the content, and compiles the data into a structured format.
145
146### Run multi-site workflows
147
148Coordinate tasks across multiple websites:
149
150```
151Check my calendar for meetings tomorrow, then for each meeting with
152an external attendee, look up their company on LinkedIn and add a
153note about what they do.
154```
155
156Claude works across tabs to gather information and complete the workflow.
157
158### Record a demo GIF
159
160Create shareable recordings of browser interactions:
161
162```
163Record a GIF showing how to complete the checkout flow, from adding
164an item to the cart through to the confirmation page.
165```
166
167Claude records the interaction sequence and saves it as a GIF file.
168
169## Best practices
170
171When using browser automation, keep these guidelines in mind:
172
173* **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.
174* **Use fresh tabs**: Claude creates new tabs for each session. If a tab becomes unresponsive, ask Claude to create a new one.
175* **Filter console output**: Console logs can be verbose. When debugging, tell Claude what patterns to look for rather than asking for all console output.
176
177## Troubleshooting
178
179### Extension not detected
180
181If Claude Code shows "Chrome extension not detected":
182
1831. Verify the extension is installed in Chrome
1842. Check that Chrome is running
1853. Run `/chrome` and select "Reconnect extension" to re-establish the connection
186
187### Browser not responding
188
189If Claude's browser commands stop working:
190
1911. Check if a modal dialog (alert, confirm, prompt) is blocking the page
1922. Ask Claude to create a new tab and try again
1933. Restart the Chrome extension by disabling and re-enabling it
194
195### First-time setup
196
197The 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.
198
199## Enable by default
200
201Chrome integration requires the `--chrome` flag each time you start Claude Code. To enable it by default, run `/chrome` and select "Enabled by default".
202
203<Note>
204 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.
205</Note>
206
207Site-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.
208
209## See also
210
211* [CLI reference](/en/cli-reference) - Command-line flags including `--chrome`
212* [Common workflows](/en/common-workflows) - More ways to use Claude Code
213* [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 permissions
214
215
216---
217
218> To find navigation and other pages in this documentation, fetch the llms.txt file at: https://code.claude.com/docs/llms.txt