Chrome Debug MCP

🚀 Chrome Debug MCP Server

A Model Context Protocol (MCP) server for Chrome browser automation via debugging protocol. It connects to Chrome debugging ports and enables browser automation with persistent login sessions.

🚀 Quick Start

Option 1: Direct Usage (Recommended)

Launch with npx - no installation required:

# 1. Start Chrome in debug mode
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug

# 2. Run MCP server directly
npx chrome-debug-mcp

Option 2: Local Development

git clone https://github.com/rainmenxia/chrome-debug-mcp.git
cd chrome-debug-mcp
npm install
npm run build
npm start

✨ Features

• ✅ Chrome Debug Port Connection: Based on standard Chrome DevTools Protocol, no extensions required
• 🏢 Enterprise-Grade Deployment: Zero-dependency deployment, no Chrome Web Store approval needed
• 📱 Intelligent Tab Management: Reuse tabs for same domains, avoid duplicate openings
• 🖼️ Real-time Screenshot Feedback: Automatic screenshots after each operation for visual feedback
• 🌐 Network Activity Monitoring: Auto-wait for page load completion
• 🐳 Native Docker Support: Perfect support for containerized Chrome instances, no extension limitations
• ⚡ Two-Step Launch: Start Chrome in debug mode then run npx chrome-debug-mcp, no complex installation required
• 🔍 Smart Browser Discovery: Auto-discover Chrome instances in local and Docker environments

📦 Installation

1. Start Chrome Debug Mode (Required)

The server needs to connect to a Chrome instance with debugging port enabled:

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug

# Windows
chrome.exe --remote-debugging-port=9222 --user-data-dir=c:\temp\chrome-debug

# Linux
google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug

⚠️ Important Note

• The --user-data-dir parameter points to a temporary directory, ensuring Chrome starts in debug mode.
• After startup, you can log into websites normally, and login sessions will be preserved.
• The server will reuse this Chrome instance, no need to re-login.

2. Configure MCP Client

Add the following configuration to your MCP client:

{
  "mcpServers": {
    "browser-automation": {
      "command": "npx",
      "args": ["chrome-debug-mcp"]
    }
  }
}

That's it! No installation, no downloads, no complex path configuration needed.

💡 Usage Tip

Global Installation:

npm install -g chrome-debug-mcp

{
  "mcpServers": {
    "browser-automation": {
      "command": "chrome-debug-mcp"
    }
  }
}

Local Project Installation:

npm install chrome-debug-mcp

{
  "mcpServers": {
    "browser-automation": {
      "command": "npx",
      "args": ["chrome-debug-mcp"]
    }
  }
}

💻 Usage Examples

1. launch_browser

Connect to Chrome debug port and initialize browser session.

{
  "name": "launch_browser",
  "arguments": {
    "remote_host": "http://localhost:9222"  // optional
  }
}

2. navigate_to

Navigate to specified URL with intelligent tab management.

{
  "name": "navigate_to", 
  "arguments": {
    "url": "https://example.com"
  }
}

3. click

Click at specified coordinates.

{
  "name": "click",
  "arguments": {
    "coordinate": "100,200"
  }
}

4. type_text

Input text content.

{
  "name": "type_text",
  "arguments": {
    "text": "Hello World"
  }
}

5. scroll_down / scroll_up

Scroll the page.

{
  "name": "scroll_down",
  "arguments": {}
}

6. hover

Hover mouse at specified position.

{
  "name": "hover",
  "arguments": {
    "coordinate": "100,200"
  }
}

7. resize_browser

Resize browser window.

{
  "name": "resize_browser",
  "arguments": {
    "size": "1200,800"
  }
}

8. get_page_content

Get current page HTML content.

{
  "name": "get_page_content",
  "arguments": {}
}

9. close_browser

Close browser connection.

{
  "name": "close_browser",
  "arguments": {}
}

📚 Documentation

Typical Use Cases

1. Social Media Automation

# Manually log into Twitter/Weibo in Chrome first
# Then use MCP tools for automation
launch_browser -> navigate_to -> click -> type_text

2. E-commerce Operations

# Keep logged-in state for Taobao/JD
# Automate product search, price monitoring, etc.
launch_browser -> navigate_to -> type_text -> click

3. Data Scraping

# Scrape data from login-required websites
# Bypass login verification, direct operations
launch_browser -> navigate_to -> get_page_content

Advanced Features

Intelligent Tab Management

• Same domains (e.g., example.com) reuse existing tabs
• Different domains automatically create new tabs
• Avoid duplicate openings of same websites

Auto-wait Mechanisms

• Monitor network activity, wait for complete page loading
• HTML content stability detection
• Automatic handling of dynamic content loading

Error Recovery

• Auto-reconnect on connection drops
• Cache successful connection endpoints
• Detailed error logs and feedback

Docker Environment Support

If Chrome runs in a Docker container:

# Start Chrome in Docker
docker run -d --name chrome-debug \
  -p 9222:9222 \
  --shm-size=2gb \
  zenika/alpine-chrome \
  --no-sandbox \
  --disable-dev-shm-usage \
  --remote-debugging-address=0.0.0.0 \
  --remote-debugging-port=9222

The server will automatically discover Chrome instances in Docker environments.

Troubleshooting

Chrome Connection Failed

1. Confirm Chrome is started with --remote-debugging-port=9222
2. Check if port 9222 is occupied: lsof -i :9222
3. Ensure no other Chrome instances are running

Operation Timeout

1. Check network connection
2. Increase page load timeout
3. Confirm target website is accessible

Screenshot Failed

1. Confirm page is fully loaded
2. Check browser window size settings
3. Try refreshing page and retry operation

🔧 Technical Details

Technical Architecture

MCP Client ←→ stdio ←→ MCP Server ←→ Chrome Debug Port ←→ Chrome Browser

Development & Debugging

# Watch mode compilation
npm run dev

# View MCP communication logs
DEBUG=mcp* npm start

Publishing to npm

# Build project
npm run build

# Publish to npm
npm publish

Acknowledgments

This project's design philosophy and core concepts were inspired by the RooCode project. RooCode is an excellent browser automation MCP server implementation that provided valuable technical references and design insights.

Special thanks to the RooCode team for their contributions in the following areas:

• 🎯 MCP Protocol Integration: Provided technical solutions for combining MCP servers with browser automation
• 🔗 Browser Connection: Demonstrated elegant browser connection and session management
• 📋 Tool API Design: Provided reference frameworks for standardizing browser operations

Building upon RooCode's foundation, this project further focuses on browser automation with persistent login sessions, achieving more practical automation capabilities by connecting to existing Chrome debug ports to maintain user sessions.

📄 License

MIT License

Core Advantage: The biggest feature of this MCP server is its ability to connect to existing Chrome instances and maintain login sessions, making it ideal for automation scenarios requiring user authentication. Through Chrome debug ports, it can take over user-logged browser sessions, achieving true "session-persistent" browser automation.