Glama
Sign In

Chrome Debug MCP Server

by robertheadley
GitHub
JavaScript
MIT License
8
  • Linux
  • Apple
RedditDiscord
OverviewInspectSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

local-only server

The server can only run on the client’s local machine because it depends on local resources.

Integrations

  • Uses Puppeteer for Chrome automation, allowing page interaction, tab management, and browser control

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

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

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:

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.

Acknowledgments

You must be authenticated.

A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

Controls Chrome browser with debugging capabilities, allowing page automation, extension management, and userscript injection through the Model Context Protocol.

  1. Features
    1. Chrome Control
      1. Page Automation
        1. Tab Management
          1. Debugging Capabilities
            1. Userscript Support
              1. Extension Integration
              2. Installation
                1. Prerequisites
                  1. Installing Roo Code Extension
                    1. Setting up Chrome Debug MCP Server
                    2. Usage
                      1. Basic Chrome Launch
                        1. Launch with Custom Profile
                          1. Inject Userscript
                            1. Evaluate JavaScript
                              1. Get Console Logs
                                1. Page Interaction Examples
                                  1. Click an Element
                                    1. Type into Input
                                      1. Select from Dropdown
                                        1. Wait for Element
                                          1. Take Screenshot
                                            1. Set Viewport Size
                                            2. Tab Management Examples
                                              1. List All Tabs
                                                1. Open New Tab
                                                  1. Switch to Tab
                                                    1. Close Tab
                                                  2. Dependencies
                                                    1. License
                                                      1. Contributing
                                                        1. Acknowledgments

                                                          Related Resources