Chrome Debug MCP Playwright

A Model Context Protocol (MCP) implementation for browser automation using Playwright, with full Greasemonkey API support. <a href="https://glama.ai/mcp/servers/nguhnsghor">

<img width="380" height="200" src="https://glama.ai/mcp/servers/nguhnsghor/badge" alt="Chrome Debug Server MCP server" /> </a>

Features

Core Browser Features

• Browser launch and management
• Multi-tab support with create/switch/close capabilities
• Page navigation and interaction
• Screenshot capture

Greasemonkey API Support

• GM_addStyle for CSS injection
• GM_getValue/GM_setValue for data storage
• GM_deleteValue for storage cleanup
• GM_notification for desktop notifications
• GM_setClipboard for clipboard operations
• GM_xmlhttpRequest for cross-origin requests

Resource Management

• Network request interception
• Request blocking, modification, and logging
• Resource type filtering

Debug Features

• Detailed logging system
• Log file organization
• Clean interface output

Installation

npm install chrome-debug-mcp-playwright

Quick Start

// Launch browser
tool browser launch_browser --url "https://example.com" --browserType "chromium"

// Use GM functions
tool browser gm_setValue --key "setting" --value "test"
tool browser gm_getValue --key "setting"

// Intercept requests
tool browser intercept_requests --patterns ["*.jpg", "*.css"] --action "block"

Documentation

• Commands - Detailed command documentation with examples
• Full command list with usage examples available in COMMANDS.md

Core Features

Browser Management

// Launch browser
tool browser launch_browser --url "https://example.com"

// Create new tab
tool browser create_tab --url "https://example.com"

// Switch between tabs
tool browser switch_tab --index 1

Greasemonkey API

// Add custom styles
tool browser gm_addStyle --css "body { background: #f0f0f0; }"

// Store data
tool browser gm_setValue --key "setting" --value "test"

// Make cross-origin requests
tool browser gm_xmlhttpRequest --url "https://api.example.com/data" --method "GET"

Resource Interception

// Block image loading
tool browser intercept_requests --patterns ["*.jpg", "*.png"] --action "block"

// Log all CSS requests
tool browser intercept_requests --patterns ["*.css"] --action "log"

Implementation Details

Logging System

• All debug output redirected to log files
• Timestamped entries
• Organized in logs directory
• Clean interface output

Error Handling

• Detailed error logging
• Proper cleanup on errors
• Resource management

Dependencies

• Playwright: Browser automation
• @modelcontextprotocol/sdk: MCP implementation

Development

Prerequisites

• Node.js 16 or higher
• npm 7 or higher

Setup

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

License

MIT License - See LICENSE file for details.

Contributing

We welcome contributions! Please see our Contributing Guide for details.

Acknowledgments

Based on the original chrome-debug-mcp by Robert Headley.

=======

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

Chrome Debug MCP Server

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

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

=======

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

<a href="https://glama.ai/mcp/servers/nguhnsghor">

<img width="380" height="200" src="https://glama.ai/mcp/servers/nguhnsghor/badge" alt="Chrome Debug Server MCP server" /> </a>

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

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

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

=======

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

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

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

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

1. Open Visual Studio Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "Roo Code"
4. Click Install

Setting up Chrome Debug MCP Server

1. Clone this repository:

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

2. Install dependencies:

   npm install
   

3. Build the project:

   npm run build
   

4. 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

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

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

parent of 64acbb3 (Add files via upload) ======= For a complete reference of all available commands, tools, and functions, see COMMANDS.md.

parent of 64acbb3 (Add files via upload) ======= For a complete reference of all available commands, tools, and functions, see COMMANDS.md.

parent of 64acbb3 (Add files via upload) ======= For a complete reference of all available commands, tools, and functions, see COMMANDS.md.

parent of 64acbb3 (Add files via upload) ======= For a complete reference of all available commands, tools, and functions, see COMMANDS.md.

parent of 64acbb3 (Add files via upload) ======= For a complete reference of all available commands, tools, and functions, see COMMANDS.md.

parent of 64acbb3 (Add files via upload) ======= For a complete reference of all available commands, tools, and functions, see COMMANDS.md.

parent of 64acbb3 (Add files via upload)

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
  }
})

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

=======

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

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",