VI EN
Claude Code

Claude Code + Chrome: let the agent open the browser, read the console and test UI

Binh 3 min read Đọc bài này bằng tiếng Việt

TL;DR

With claude --chrome, Claude opens tabs, clicks, reads the console and DOM, then fixes code in the same session using your login state. Limit site permissions and enable it only when needed to save context.

The familiar UI-fixing loop: Claude edits code, you open the browser, F12, copy the console error, paste it back to Claude, repeat. You become the "messenger" between the agent and the browser. Claude Code with Chrome removes that step: through the Claude in Chrome extension, Claude opens tabs, clicks, fills forms, reads the console and DOM, then goes back to fix code in the same session. The browser runs visibly and uses your existing login state.

What can it do?

TaskExample prompt
Debug via the console"Open the dashboard page and check the console for errors on load"
Test user flows"Open localhost:3000, submit the login form with invalid data, check the error messages"
Compare with the design"Build the page from the mockup, then open the browser to compare"
Logged-in web apps"Write a project update from recent commits into this Google Doc"
Extract data"Get each product's name, price and availability, save as CSV"
Record actions"Record a GIF of the checkout flow from add-to-cart to the confirmation page"

Setup in 3 steps

  1. Install the Claude in Chrome extension (version 1.0.36 or later) from the Chrome Web Store. Works on Chrome, Edge and Chromium browsers such as Brave and Arc.
  2. Launch: claude --chrome. The first time, a dialog explains how per-site permissions work.
  3. Type /chrome to see the status ("Status: Enabled", "Extension: Installed"), reconnect, or turn on Enabled by default.

Requirements: a direct paid Anthropic plan (Pro, Max, Team, Enterprise), signed in with /login. With an API key, a long-lived token, or via Bedrock/Vertex/Foundry the feature isn't available. WSL isn't supported yet.

Permissions and safety

  • Per-site permissions are managed in the extension. Each action may prompt "Claude in Chrome wants to…", with an option to allow all actions on that site for the session.
  • On a login page or CAPTCHA, Claude stops and asks you to handle it.
  • A repo can't turn Chrome on: if a project's .claude/settings.json tries to set CLAUDE_CODE_ENABLE_CFC, Claude Code ignores it. A repo you clone must not be able to connect Claude to your browser.
  • No uploading sensitive files: Claude refuses to upload files like .env, .pem, .key or anything under .ssh; each upload is capped at 10 MB.

Risks to remember

  • Claude uses your real logged-in sessions: Gmail, banking, admin consoles. Web content can contain prompt injection. Limit site permissions to the pages you need.
  • GIFs and screenshots capture everything visible, including account details. Review them before sharing.
  • Context cost: "Enabled by default" keeps browser tool definitions in context permanently. Enable it only when needed with --chrome.
  • alert/confirm dialogs block browser events; dismiss them yourself and tell Claude to continue.

Chrome, Playwright MCP or browser-use?

Chrome integration fits when you need your real browser and its existing login state, right inside a coding session. Playwright MCP fits when you need a clean, repeatable browser for automated tests. browser-use fits when building your own agent into an application.

How to apply it

  • Frontend devs: Add "open localhost, check the console and take a screenshot after fixing" to UI prompts so Claude verifies its own work.
  • Tech Lead: Use a separate Chrome profile for Claude, not logged in to production admin accounts.
  • PM/QA: Describe user flows in words, let Claude run them, and record GIFs as evidence for bug reports.

Sources & references

  1. Use Claude Code with Chrome — Claude Code Docs
More on Claude Code