https://github.com/robertheadley/chrome-debug-mcp

An MCP server to allow you to debug webpages using LLMs
https://github.com/robertheadley/chrome-debug-mcp

chrome cline debugger debugging dom llm mcp mcp-server roo-code roocode

Last synced: 3 months ago
JSON representation

An MCP server to allow you to debug webpages using LLMs

Host: GitHub
URL: https://github.com/robertheadley/chrome-debug-mcp
Owner: robertheadley
License: mit
Created: 2025-03-05T19:25:33.000Z (4 months ago)
Default Branch: main
Last Pushed: 2025-03-05T19:52:41.000Z (4 months ago)
Last Synced: 2025-03-05T20:43:27.205Z (4 months ago)
Topics: chrome, cline, debugger, debugging, dom, llm, mcp, mcp-server, roo-code, roocode
Language: JavaScript
Homepage:
Size: 23.4 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

mcp-index - Chrome Debug Server - Control Chrome with advanced debugging capabilities, automate page interactions, and manage userscripts seamlessly. Integrate powerful automation tools directly into web development workflows using Playwright with comprehensive Greasemonkey API support. (Developer Tools)

README

# 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

### 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](https://nodejs.org/) (v14 or higher)
- [Chrome](https://www.google.com/chrome/) browser installed
- [Visual Studio Code](https://code.visualstudio.com/)
- [Roo Code Extension](https://marketplace.visualstudio.com/items?itemName=RooVeterinaryInc.roo-cline)

### 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:
```bash
git clone https://github.com/yourusername/chrome-debug-mcp.git
cd chrome-debug-mcp
```

2. Install dependencies:
```bash
npm install
```

3. Build the project:
```bash
npm run build
```

4. Configure in Roo Code:
Add to `cline_mcp_settings.json`:
```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](docs/COMMANDS.md).

### Basic Chrome Launch
```javascript
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
```javascript
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
```javascript
use_mcp_tool({
server_name: "chrome-debug",
tool_name: "launch_chrome",
arguments: {
url: "https://example.com",
userscriptPath: "path/to/userscript.js"
}
})
```

### Evaluate JavaScript
```javascript
use_mcp_tool({
server_name: "chrome-debug",
tool_name: "evaluate",
arguments: {
expression: "document.title"
}
})
```

### Get Console Logs
```javascript
use_mcp_tool({
server_name: "chrome-debug",
tool_name: "get_console_logs",
arguments: {
clear: true
}
})
```

### Page Interaction Examples

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

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

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

#### Wait for Element
```javascript
use_mcp_tool({
server_name: "chrome-debug",
tool_name: "wait_for_selector",
arguments: {
selector: ".loading-complete",
visible: true,
timeout: 5000
}
})
```

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

#### Set Viewport Size
```javascript
use_mcp_tool({
server_name: "chrome-debug",
tool_name: "set_viewport",
arguments: {
width: 1920,
height: 1080,
deviceScaleFactor: 1
}
})
```

## Dependencies

This project uses the following open-source packages:

- [Puppeteer](https://pptr.dev/) - Chrome automation library
- [chrome-remote-interface](https://github.com/cyrus-and/chrome-remote-interface) - Chrome DevTools Protocol client
- [@modelcontextprotocol/sdk](https://github.com/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](CONTRIBUTING.md) for details on making contributions.

## Acknowledgments

- [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/)
- [Greasemonkey API](https://wiki.greasespot.net/Greasemonkey_Manual:API)
- [Model Context Protocol](https://modelcontextprotocol.ai)

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/robertheadley/chrome-debug-mcp

Awesome Lists containing this project

README