Advanced Technique

Chrome DevTools
MCP

Browser Automation with Claude Code. Give Claude direct control over Chrome's developer tools to automate data extraction and build reusable scripts.

The Golden Rule Part 1: Network Tab Part 2: Installing the MCP Part 3: Using Claude + MCP Part 4: Reusable Scripts Tips

The Golden Rule

The foundation of browser automation

If you can see it in your browser, it is available to you.

This guide teaches how to give Claude Code direct control over Chrome's developer tools to automate browser data extraction and build reusable scripts. Instead of manually copying data from your browser, you'll learn to let Claude do the heavy lifting -- and then turn that workflow into a one-click script you can use forever.

Prerequisites

  • Claude Code installed and working
  • Google Chrome browser
  • Terminal access (see Terminal Fundamentals if needed)
  • Tampermonkey browser extension (recommended over Greasemonkey -- LLMs are most familiar with it)
1

Understanding the Network Tab

The manual method first

Before we automate anything, you need to understand what the browser is doing under the hood. The Network tab in DevTools shows you every request your browser makes to a server.

01 Open DevTools

Right-click anywhere on a webpage and select Inspect, or use the keyboard shortcut:

Cmd + Option + I   (Mac)
Ctrl + Shift + I   (Windows/Linux)

The DevTools panel will open, usually docked to the right or bottom of your browser window.

02 Navigate to the Network Tab

Click the Network tab at the top of DevTools. This shows all requests your browser makes to servers -- every image, script, API call, and data file.

Refresh the page to see requests populate. You can then:

  • -- Filter by domain (e.g., loom.com) to narrow results to a specific service
  • -- Filter by file type (e.g., VTT for transcripts, JSON for data)

03 Copy as cURL

Once you find a request that contains the data you want, right-click it and select Copy > Copy as cURL. Paste this into your terminal to test it.

curl 'https://example.com/api/transcript.vtt' \
  -H 'accept: */*' \
  -H 'cookie: session=...'

If the command returns data, you've confirmed the URL works and you can automate it.

04 Security: Auth Tokens in URLs

Many URLs contain authentication tokens, Key Pair IDs, or session cookies. Before sharing or storing any URL you copy from the Network tab:

Be aware of Key Pair IDs, Policy tokens, and Signature parameters in URLs. Ask an LLM what's sensitive in the URL and whether the tokens expire. Most signed URLs expire after a short time, but treat them as credentials until you know otherwise.

2

Installing Chrome DevTools MCP

The key step

01 Run the Install Command

Open your terminal in your project directory and run this single command:

claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

This installs the MCP server for the current project. Claude Code will now be able to control Chrome in this project.

02 Global Installation (Optional)

To make the MCP available across all your projects, add the --global flag:

claude mcp add --global chrome-devtools -- npx chrome-devtools-mcp@latest

03 What Happens After Install

After installing, when Claude Code uses the MCP:

  • -- Chrome will open with a banner: "Chrome is being controlled by automated test software"
  • -- Claude can navigate pages, read the DOM, inspect network requests, and run JavaScript in the console
  • -- You'll see each tool call in your Claude Code session

Important: The Chrome DevTools MCP is newer than Claude's training data. If Claude doesn't seem to know how to use the MCP tools, tell it to do a web search first to learn the available commands.

3

Using Claude with the MCP

Let Claude drive the browser

01 Tell Claude Where to Go

In your Claude Code session, tell Claude to open Chrome and navigate to the target page. For example:

Open Chrome and go to https://www.loom.com/share/my-video-id
then find the transcript for this video.

02 Watch Claude Work

Claude will autonomously use the MCP tools to:

  • -- Navigate to the URL
  • -- List network requests to find data files (transcripts, JSON, etc.)
  • -- Evaluate JavaScript in the console to extract page data
  • -- Read page elements to find specific content

This replaces the manual copy-paste round trip. Claude will often make 10+ tool calls autonomously to find and extract what you need -- navigating, filtering, reading, and processing data without any manual intervention.

03 Example Prompts

Here are some things you can ask Claude to do with the MCP:

Go to this Loom video and download the transcript as a .txt file
Open this page and find all the API requests it makes, then list the endpoints
Navigate to my dashboard and extract the data from the table on the page
4

Building a Reusable Script

Use the LLM once, then use the script forever

01 Ask Claude to Create a Tampermonkey Script

Once Claude has figured out how to extract the data, ask it to turn that process into a Tampermonkey userscript. For example:

Now create a Tampermonkey userscript that adds a
"Download Transcript" button to every Loom video page.
When clicked, it should download the transcript as a .txt file.

Claude will generate a complete userscript with the // ==UserScript== header, URL matching, and the extraction logic it already figured out.

02 Install the Script in Tampermonkey

To install the userscript:

  1. Open the Tampermonkey dashboard (click the extension icon, then "Dashboard")
  2. Click the + tab to create a new script
  3. Delete the template code and paste the script Claude generated
  4. Press Cmd + S (or Ctrl + S) to save
  5. Refresh the target page -- you should see the new button

03 The Key Insight

You don't need to use the LLM every time. Use it once to create the workflow, then use the script. The LLM figures out the hard part -- the extraction logic, the right selectors, the API endpoints -- and bakes it into a script you can run with one click forever.

Tips & Best Practices

Get the most out of browser automation

1

Use Tampermonkey over alternatives

LLMs are most familiar with Tampermonkey's userscript format. You'll get better code generation and fewer bugs compared to Greasemonkey or Violentmonkey.

2

Be careful with auth tokens in URLs

URLs copied from the Network tab often contain session tokens, API keys, or signed parameters. Never commit these to version control or share them publicly.

3

Debug with the MCP when scripts break

If your Tampermonkey script stops working (the site changed their markup or API), just open Claude Code with the Chrome DevTools MCP and debug it live. Claude can inspect the page, find what changed, and update the script.

4

This works for ANY browser-visible data

This pattern isn't limited to transcripts. Any data you can see in your browser -- tables, dashboards, feeds, embedded content, API responses -- is fair game. If the browser can load it, Claude can extract it.

Want more?

Join the Claude Code Architects community for weekly live sessions

Join on Skool