Chrome Tools

🚀 Chrome Tools MCP Server

An MCP server that provides tools for interacting via Chrome's DevTools protocol. This server allows remote control of Chrome tabs, including executing JavaScript, taking screenshots, monitoring network traffic, etc.

🚀 Quick Start

An MCP server offering tools for interaction through Chrome's DevTools protocol. It enables remote control of Chrome tabs, including JavaScript execution, screenshot capture, and network traffic monitoring.

💡 Why Use Such an MCP Server?

This type of MCP server is highly useful when you need to manually set the browser to a specific state before letting an AI tool (such as Cline) operate on it. You can also use this tool to capture and obtain network events in its context.

✨ 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

🛠️ 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_ERROR_HELP": "custom error message"
    }
  }
}

Environment Variables

• CHROME_DEBUG_URL: The URL of the Chrome remote debugging interface (Default: http://localhost:9222)
• CHROME_CONNECTION_TYPE: The connection type identifier in the logs (e.g., "direct", "ssh-tunnel", "docker")
• CHROME_ERROR_HELP: The error message displayed when the connection fails

📄 Installation Instructions

Local Environment

1. Open the terminal and run the following command:

   npm install @nicholmikey/chrome-tools
   

2. Create a configuration file config.json in the project directory and add the following content:

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

3. Start the server:

   node index.js
   

WSL Environment

1. Install Node.js and npm in WSL.
2. Install the chrome-tools package:

   npm install @nicholmikey/chrome-tools
   

3. Create a configuration file and start the server, same as in the local environment.

Docker Environment

1. Create a Dockerfile with the following content:

   FROM node:latest
   WORKDIR /app
   COPY package.json .
   RUN npm install
   COPY . .
   CMD ["node", "index.js"]
   

2. Build the Docker image:

   docker build -t chrome-tools .
   

3. Run the container:

   docker run --name chrome-tools-container -p 9222:9222 chrome-tools
   

💻 Usage Examples

List Tabs

listTabs()

Execute Script

executeScript(tabId, script)

Capture Screenshot

captureScreenshot(tabId)

Monitor Network Traffic

monitorNetworkTraffic(tabId, duration, filters)

Navigate to URL

navigateToUrl(tabId, url)

Query DOM Elements

querySelectorElements(tabId, selector)

Click Element

clickElement(tabId, selector)

📄 License

MIT