maximeallanic/chrome-devtools-mcp

Chrome DevTools MCP Server

Control Chrome browser directly from AI assistants using the Model Context Protocol (MCP)

A powerful Chrome extension + MCP server that gives AI assistants (like Claude) full control over Chrome DevTools capabilities. Monitor network requests, capture console logs, take screenshots, interact with DOM elements, and automate browser tasks.

Features

Browser Control

• Tab Management - Create, close, navigate, and manage Chrome tabs
• Navigation - Go back, forward, reload, navigate to URLs
• Screenshots - Capture full page or specific element screenshots

DevTools Integration

• Network Monitoring - Capture HTTP requests/responses with headers, timing, and body
• Console Logs - Real-time console messages (log, error, warn, info, debug)
• Performance Metrics - Performance timing and resource metrics

DOM Manipulation

• Element Selection - CSS selectors, XPath, text search, attribute matching
• Element Inspection - Get computed styles, attributes, dimensions, visibility
• Data Extraction - Extract tables, lists, forms, JSON-LD structured data

Browser Automation

• Click & Type - Click elements, fill forms, type with natural delays
• Scroll & Wait - Smart scrolling, wait for elements/conditions/AJAX
• Drag & Drop - Drag elements between locations
• Form Handling - Batch fill forms, select dropdowns, trigger events

Extension Debugging

• Extension Management - List, inspect, reload Chrome extensions
• Service Worker Logs - Capture logs from extension service workers
• External Extension Debugging - Debug other extensions with helper script

Architecture

┌─────────────────────────────────────────────────────────────┐
│                     Chrome Browser                          │
│  ┌─────────────────────────────────────────────────────┐   │
│  │           Chrome Extension (Manifest V3)            │   │
│  │  • chrome.debugger API for DevTools access          │   │
│  │  • chrome.tabs API for tab management               │   │
│  │  • chrome.scripting API for DOM interaction         │   │
│  └──────────────────────┬──────────────────────────────┘   │
└─────────────────────────┼───────────────────────────────────┘
                          │ HTTP (localhost:3456)
┌─────────────────────────┼───────────────────────────────────┐
│  ┌──────────────────────▼──────────────────────────────┐   │
│  │              MCP Server (Node.js)                   │   │
│  │  • Express HTTP server for extension communication  │   │
│  │  • MCP protocol for AI assistant integration        │   │
│  │  • 70+ tools for browser control                    │   │
│  └──────────────────────┬──────────────────────────────┘   │
└─────────────────────────┼───────────────────────────────────┘
                          │ MCP Protocol (HTTP)
┌─────────────────────────┼───────────────────────────────────┐
│  ┌──────────────────────▼──────────────────────────────┐   │
│  │            AI Assistant (Claude, etc.)              │   │
│  │  • Uses MCP tools to control browser               │   │
│  │  • Automates web tasks                              │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘

Quick Start

1. Clone and Install

git clone https://github.com/maximeallanic/chrome-devtools-mcp.git
cd chrome-devtools-mcp/server
npm install

2. Load Chrome Extension

1. Open Chrome and navigate to chrome://extensions/
2. Enable Developer mode (toggle in top right)
3. Click Load unpacked
4. Select the extension/ folder
5. Note the Extension ID displayed

3. Start the MCP Server

cd server
npm start

The server starts on http://localhost:3456

4. Configure Claude Code

Add to your Claude Code MCP settings (~/.claude/settings.json):

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "node",
      "args": ["/path/to/chrome-devtools-mcp/server/mcp-server.js"]
    }
  }
}

Or for HTTP mode:

{
  "mcpServers": {
    "chrome-devtools": {
      "type": "http",
      "url": "http://localhost:3456/mcp"
    }
  }
}

5. Use It!

In Claude Code, you can now:

"Take a screenshot of the current tab"
"Get all network requests from the last minute"
"Click the login button and fill in the form"
"Extract all links from the page"
"Wait for the loading spinner to disappear"

Available Tools (70+)

Use Cases

Web Scraping

"Extract all product names and prices from this e-commerce page"
"Navigate through pagination and collect all article titles"
"Get all images larger than 200x200 pixels"

Testing & QA

"Fill out the registration form and submit it"
"Check if the error message appears when submitting empty form"
"Take screenshots of all pages in the navigation"

Monitoring

"Watch for any console errors on this page"
"Monitor network requests and alert on failed API calls"
"Track page load performance metrics"

Automation

"Log into the admin panel and export the daily report"
"Click through the checkout flow and verify each step"
"Auto-scroll to load all comments, then extract them"

Configuration

Environment Variables

Extension Popup

The extension popup provides:

• Attach/Detach buttons for DevTools capture
• Status indicators for connection state
• Counters for captured data (network, console, metrics)

Troubleshooting

Extension won't attach

• Ensure you're on a regular webpage (not chrome:// pages)
• Check Chrome DevTools console for errors
• Try reloading the extension

MCP Server disconnected

• Verify server is running: npm start
• Check port 3456 availability: lsof -i :3456
• Restart Claude Code to reconnect

Tools not responding

• Ensure extension is attached to target tab
• Check server logs for errors
• Verify tab ID is correct

Development

Project Structure

chrome-devtools-mcp/
├── extension/                  # Chrome Extension
│   ├── manifest.json           # Extension manifest (v3)
│   ├── background.js           # Service worker
│   ├── popup.html/js           # Extension popup UI
│   ├── debug-helper.js         # External extension debugging
│   ├── icons/                  # Extension icons
│   └── content-scripts/        # DOM utility scripts
│       ├── dom-utilities.js
│       ├── interaction.js
│       ├── extraction.js
│       └── observer.js
│
├── server/                     # MCP Server (Node.js)
│   ├── mcp-server.js           # Main server
│   ├── package.json            # Dependencies
│   └── node_modules/
│
├── scripts/                    # Admin scripts
│   ├── start-server.sh
│   ├── stop-server.sh
│   ├── install-service.sh      # Systemd service setup
│   └── chrome-devtools-mcp.service
│
├── LICENSE
└── README.md

Running in Development

cd server

# Start server with auto-reload (if using nodemon)
npm run dev

# Or standard start
npm start

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see file for details.

Credits

Built as a robust alternative to existing Chrome MCP implementations, using a standalone HTTP-based architecture for better reliability and multi-client support.

Made with love for the AI-assisted development community