Chrome Debug MCP Server

A Model Context Protocol (MCP) server for controlling Chrome with debugging capabilities, userscript injection, and extension support.

Features

Chrome Control

Launch Chrome with custom configurations
Support for custom Chrome executable paths
User profile management (default or custom user data directory)
Extension support and management
Disable Chrome's "Automation Controlled" banner

Page Automation

Click, type, and interact with page elements
Handle dropdowns and form inputs
Hover and wait for elements
Take screenshots of full page or elements
Navigate between pages
Set viewport size and device emulation
Extract text and attributes from elements

Tab Management

List all open tabs with their IDs and URLs
Open new tabs with specified URLs
Close tabs by ID
Switch between tabs
Track and manage multiple tab states

Debugging Capabilities

Remote debugging via Chrome DevTools Protocol (CDP)
Console log capture and monitoring
JavaScript evaluation in page context
Real-time console output streaming

Userscript Support

Inject userscripts into web pages
Greasemonkey-style API support:
- GM_setValue/GM_getValue for persistent storage
- GM_addStyle for CSS injection
- GM_xmlhttpRequest for cross-origin requests
- GM_openInTab for new tab creation
- GM_registerMenuCommand for menu commands

Extension Integration

Load unpacked extensions
Maintain extension states and configurations
Support for default Chrome profile extensions
Selective extension enabling/disabling

Installation

Prerequisites

Node.js (v14 or higher)
Chrome browser installed
Visual Studio Code
Roo Code Extension

Installing Roo Code Extension

Open Visual Studio Code
Go to Extensions (Ctrl+Shift+X)
Search for "Roo Code"
Click Install

Setting up Chrome Debug MCP Server

Clone this repository:

git clone https://github.com/yourusername/chrome-debug-mcp.git
cd chrome-debug-mcp

Install dependencies:
```
npm install
```
Build the project:
```
npm run build
```

Configure in Roo Code: Add to cline_mcp_settings.json:

{
  "mcpServers": {
    "chrome-debug": {
      "command": "node",
      "args": ["path/to/chrome-debug-mcp/build/index.js"],
      "disabled": false,
      "alwaysAllow": []
    }
  }
}

Usage

For a complete reference of all available commands, tools, and functions, see COMMANDS.md.

Basic Chrome Launch

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "launch_chrome",
  arguments: {
    executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
    url: "https://example.com"
  }
})

Launch with Custom Profile

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "launch_chrome",
  arguments: {
    executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
    userDataDir: "path/to/chrome/profile",
    disableAutomationControlled: true
  }
})

Inject Userscript

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "launch_chrome",
  arguments: {
    url: "https://example.com",
    userscriptPath: "path/to/userscript.js"
  }
})

Evaluate JavaScript

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "evaluate",
  arguments: {
    expression: "document.title"
  }
})

Get Console Logs

use_mcp_tool({
  server_name: "chrome-debug",

  tool_name: "get_console_logs",
  arguments: {
    clear: true
  }
})

Page Interaction Examples

Click an Element

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "click",
  arguments: {
    selector: "#submit-button",
    delay: 500
  }
})

Type into Input

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "type",
  arguments: {
    selector: "#search-input",
    text: "search query",
    delay: 100
  }
})

Select from Dropdown

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "select",
  arguments: {
    selector: "#country-select",
    value: "US"
  }
})

Wait for Element

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "wait_for_selector",
  arguments: {
    selector: ".loading-complete",
    visible: true,
    timeout: 5000
  }
})

Take Screenshot

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "screenshot",
  arguments: {
    path: "screenshot.png",
    fullPage: true
  }
})

Set Viewport Size

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "set_viewport",
  arguments: {
    width: 1920,
    height: 1080,
    deviceScaleFactor: 1
  }
})

Tab Management Examples

List All Tabs

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "list_tabs",
  arguments: {}
})

Open New Tab

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "new_tab",
  arguments: {
    url: "https://example.com"
  }
})

Switch to Tab

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "switch_tab",
  arguments: {
    tabId: "tab-id-from-list-tabs"
  }
})

Close Tab

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "close_tab",
  arguments: {
    tabId: "tab-id-from-list-tabs"
  }
})

Dependencies

This project uses the following open-source packages:

Puppeteer - Chrome automation library
chrome-remote-interface - Chrome DevTools Protocol client
@modelcontextprotocol/sdk - MCP SDK for server implementation

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

See our Contributing Guide for details on making contributions.

chrome-debug-mcp

Categories

Language:

Stars:

Forks:

README