Chrome Tools MCP Server

🚀 Chrome Tools MCP Server

A MCP server that provides tools to remotely control Chrome tabs via the Chrome DevTools protocol. This server supports functions such as executing JavaScript in tabs, capturing screenshots, and monitoring network traffic.

🚀 Quick Start

This MCP server is a powerful tool that offers remote control over Chrome tabs through the Chrome DevTools protocol. It enables a variety of operations, including executing JavaScript, taking screenshots, and monitoring network traffic within tabs.

✨ Features

• List Chrome tabs
• Execute JavaScript in tabs
• Capture screenshots
• Monitor network traffic
• Navigate tabs to URLs
• Query DOM elements
• Click elements and capture console output

📦 Installation

npm install @nicholmikey/chrome-tools

📚 Documentation

Configuration

Configure through environment variables in the MCP settings:

{
  "chrome-tools": {
    "command": "node",
    "args": ["path/to/chrome-tools/dist/index.js"],
    "env": {
      "CHROME_DEBUG_URL": "http://localhost:9222",
      "CHROME_CONNECTION_TYPE": "direct",
      "CHROME_PROXY_ENABLED": true
    }
  }
}

Setup Guide

1. Install Node.js and npm

Ensure Node.js and npm are installed:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
nvm install --lts

2. Install chrome-tools

Run in the project directory:

npm install @nicholmikey/chrome-tools

3. Start the MCP server

Create and run the following configuration file:

const { MCP } = require('@nicholmikey/mcp');
const server = new MCP.Server({
  port: 3000,
  workers: 2
});

server.start();

Tool Explanation

list_tabs

List all Chrome tabs.

Return Value

• An array containing detailed information for each tab:
  • id: Unique identifier for the tab
  • title: Title
  • url: Current URL
  • status: Status (loading, stopped, etc.)

execute_script

Execute JavaScript code in a specified tab.

Parameters

• tabId: Unique identifier for the tab
• script: JavaScript code to execute

Return Value

• Execution result:
  • success: Boolean indicating success
  • result: Result returned by the execution

captureScreenshot

Capture a screenshot of a specified tab.

Parameters

• tabId: Unique identifier for the tab
• path: Path to save the screenshot

Return Value

• File path of the image or an error message

captureNetworkEvents

Monitor and capture network events in a specified tab.

Parameters

• tabId: Unique identifier for the tab
• duration: Duration of capture in seconds
• filters: Optional filters for types and URL patterns

Return Value

• An array of network event logs, containing detailed information for each event:
  • type: Event type
  • url: URL of the request or response
  • timeStamp: Timestamp
  • size: Data size

load_url

Navigate a specified tab to a new URL.

Parameters

• tabId: Unique identifier for the tab
• url: Target URL to load

query_dom_elements

Query and retrieve detailed information about DOM elements using CSS selectors.

Parameters

• tabId: Unique identifier for the tab
• selector: CSS selector string

Return Value

• An array of elements, each containing:
  • nodeId: Unique identifier for the node
  • tagName: HTML tag name
  • textContent: Text content
  • attributes: Attribute object
  • boundingBox: Layout position and dimensions
  • isVisible: Visibility status
  • ariaAttributes: ARIA attributes

click_element

Locate an element using a CSS selector, perform a click operation, and capture console output.

Parameters

• tabId: Unique identifier for the tab
• selector: CSS selector string

Return Value

• Operation result:
  • message: Success or failure message
  • consoleOutput: Array of console outputs triggered by the click

📄 License

MIT