Browser Automation
Claude drives a real browser — DevTools MCP for precision, Claude in Chrome for everyday.
TUTOR WITH THEFOCUS.AI
Copy this prompt into Claude, ChatGPT, or any external AI assistant. It points the assistant to the course instructions and links it to your student profile to track your progress and customize observations.
You are not enrolled yet. Enroll to generate a Student ID to track lesson completions and store learning notes.
Control a browser through Claude
Connect the Chrome DevTools MCP server — published by the Chrome team itself:
claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latestRestart 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.
Add the Chrome DevTools MCP server with claude mcp add. 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.
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?
Answer key — attempt every question first
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
Next: The Tool Hierarchy