---
title: "Browser Automation"
description: "Claude drives a real browser — DevTools MCP for precision, Claude in Chrome for everyday."
order: 31
duration: "10 min"
chapter: "08-when-apis-dont-exist"
type: lesson
---

## Control a browser through Claude

Connect the Chrome DevTools MCP server — published by the Chrome team itself:

```bash
claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest
```

Restart Claude Code. Now Claude can navigate web pages, take screenshots, fill forms, click buttons, and run Lighthouse audits — all through structured tool calls, not pixel-matching.

There is a second route to the browser that requires no terminal at all: the **Claude in Chrome** extension. Install it from the Chrome Web Store and Claude rides along in a side panel — reading pages, clicking, filling forms, running multi-step workflows in the browser you already have open. It is also how Cowork does browser work: give Cowork a task that needs a website, and it drives Chrome through the extension. Chrome DevTools MCP is the developer's precision tool; Claude in Chrome is the everyday one.

Cornwall Market: Sarah connects Chrome DevTools and asks Claude to navigate to her specialty coffee supplier's wholesale portal. "Go to the Ridgeline Coffee wholesale page and capture their current pricing for the beans we order." Claude navigates to the URL, screenshots the pricing page, and extracts the data into a structured table. No manual copy-paste, no forgetting to check the portal every month.

<div class="exercise">
  <div class="callout-label">Try This</div>
  <p>Add the Chrome DevTools MCP server with <code>claude mcp add</code>. Restart Claude Code. Ask Claude to navigate to a website you use for work — a supplier portal, a dashboard, an internal tool. Have it take a screenshot and describe what it sees. Try having it fill a form or click a button. Notice how this differs from copy-pasting URLs into a chat — Claude is controlling a real browser programmatically. If you are not a terminal person, install Claude in Chrome instead and give it the same task from the side panel.</p>
</div>

## Check your understanding

Answer in your own words — write it down before opening the key. Your tutor grades against the criteria and generates fresh variants on retries.

**Q1.** Claude in Chrome vs Chrome DevTools MCP: who is each for, and what is the underlying technical difference that makes DevTools more reliable for browser work?

<details>
<summary>Answer key — attempt every question first</summary>

## Answer key

### Q1

**Model answer:** Claude in Chrome is the everyday tool — a side panel in your real browser for errands, no terminal required. Chrome DevTools MCP is the developer's precision instrument. The technical difference: DevTools drives the browser through structured tool calls against the DOM (selectors, navigation, audits) rather than looking at rendered pixels — structured beats visual.

**Pass criteria:** audience split correct; DOM/structured-calls vs pixel/visual distinction stated

</details>


**Next:** [The Tool Hierarchy](/mastering-claude/08-when-apis-dont-exist/32-the-tool-hierarchy/)