Claude Code with Chrome
Chrome integration lets Claude Code interact with web pages for testing, debugging, and automation tasks that cannot be solved from repository files alone.
- Last verified
- Applies to
- Claude Code 2.1.x. CLI spellings were checked on local version 2.1.198; official docs may describe newer 2.1.x behavior.
- Verification method
- Chrome setup, site permissions, request confirmation, and limitations were reviewed in official docs; the extension was not installed, connected, or given access to any site.
- Official sources
- Chrome integrationPermissionsChangelog
Reproducible practice
Reproduce one public-page defect with the smallest Chrome permission scope
Capture URL, visible state, console evidence, and a repeatable path without exposing an authenticated session or submitting data.
Prerequisites
- A supported Chrome environment and the official extension.
- A public or disposable test page containing no personal account data.
- Site permissions limited to the exact test origin.
Steps
Record the test boundary
Write the exact URL, viewport, expected result, and actions that are allowed before enabling Chrome.
Connect explicitly
Start Claude Code with Chrome only for this session; connection was not tested in this audit.
Step 2 claude --chromeReproduce without transmission
Navigate and inspect visible state and console output; stop before login, form submission, upload, purchase, or permission prompt.
Capture minimal evidence
Record the final URL, screenshot or console error, and deterministic reproduction steps, then disconnect.
Expected result
The defect is reproduced or ruled out on one permitted origin with no sensitive input, submission, or unrelated browsing access.
Validation
- Review extension site permissions before and after the test.
- Repeat the path from a clean page state.
- Confirm evidence contains no cookie, token, account identifier, or private URL.
Failure handling
Extension cannot connect
Check supported versions and extension state before changing site permissions broadly.
Reproduction requires an account
Use a disposable test account only with explicit authorization; otherwise record the blocker.
Cleanup or rollback
- Disconnect Chrome and remove the temporary site permission if it is no longer needed.
- Delete sensitive screenshots or logs through the approved retention process, not ad hoc sharing.
Boundaries and when not to use it
- Browser access can expose authenticated content and transmit data through clicks or forms; confirmation is required at the action boundary.
- A public-page reproduction does not prove behavior for another account, region, extension set, or backend state.
What Chrome integration adds
With Chrome connected, Claude Code can inspect pages, read console output, interact with DOM elements, and validate browser behavior while you stay in the terminal or IDE.
Web app testing
Exercise UI flows and catch browser-only regressions.
Read guideConsole debugging
Use live console logs to investigate frontend failures.
Read guideForm automation
Fill and submit forms for repeatable manual QA paths.
Read guideData extraction
Pull structured information from pages during research tasks.
Read guideChrome in the full stack
Browser tasks rarely end in the browser alone. Plan the edit, verify, and review path across Chrome, IDE, and repository tests.
IDE for patches
Apply component and type fixes with inline diffs after reproducing in Chrome.
Read guideWorkflows
Define acceptance checks with project test commands after browser validation.
Read guideAuthentication
Cookie and OAuth bugs need valid login state in the browser session.
Read guideCode review
Run /code-review before committing frontend fixes verified in Chrome.
Read guideEnable Chrome integration
Chrome support is enabled through Claude Code flags and in-session configuration. Verify browser permissions and authentication before debugging prompt behavior.
| Command | Description |
|---|---|
claude --chrome | Start a session with Chrome browser integration enabled. |
/chrome | Configure Claude in Chrome settings inside a session. |
claude auth status --text | Confirm auth before using browser-connected workflows. |
claude --chrome "Open the local app, reproduce the login bug, and capture console errors."Good browser test prompts
Browser tasks need a clear URL, reproduction path, and expected outcome. Ask Claude Code to capture console output and name the acceptance check.
Name the URL
Include local dev URL, route, and account state if relevant.
Require evidence
Ask for console logs, screenshots, or DOM findings before proposing a fix.
Keep scope narrow
Review one user flow at a time to reduce flaky automation.
Pair with repo tests
Browser checks should still align with the project's test commands.
Read guideWhen to use Chrome vs IDE
Use Chrome integration for live browser behavior. Use IDE integration when inline code edits and visual diffs matter more than page interaction.
Prefer Chrome
Frontend bugs, routing issues, auth cookies, and visual regressions in the browser.
Read guidePrefer IDE
Component refactors, type fixes, and generated test updates.
Read guideCombine both
Reproduce in Chrome, patch in IDE, then rerun browser and unit checks.
Read guideChrome checklist
Start from a known URL
Give Claude Code the exact page and route to open.
Read guideCapture console evidence
Require console or network findings before accepting a root cause.
Read guideUse --chrome intentionally
Enable browser tools only for tasks that need live page access.
Read guideVerify with project tests
Finish with the repository's frontend or integration test command when available.
Read guide