Chrome Browser Automation MCP server

Chrome MCP Server is a powerful Chrome extension that transforms your browser into an AI-controlled automation tool. It allows AI assistants like Claude to take control of your existing Chrome browser, leveraging your configurations, login states, and habits to automate tasks, analyze content, and perform semantic searches across your tabs.

What is Chrome MCP Server?

Chrome MCP Server implements the Model Context Protocol (MCP) to expose Chrome browser functionality to AI assistants. Unlike traditional browser automation tools that require separate browser instances, Chrome MCP Server works directly with your everyday Chrome browser, preserving all your existing settings and login states.

Installation

Prerequisites

• Node.js >= 18.19.0 and pnpm/npm
• Chrome/Chromium browser

Step-by-Step Installation

1. Download the Chrome extension

   Download the latest release from GitHub Releases

2. Install mcp-chrome-bridge globally

   Using npm:

   npm install -g mcp-chrome-bridge
   

   Using pnpm:

   # Method 1: Enable scripts globally (recommended)
   pnpm config set enable-pre-post-scripts true
   pnpm install -g mcp-chrome-bridge
   
   # Method 2: Manual registration (if postinstall doesn't run)
   pnpm install -g mcp-chrome-bridge
   mcp-chrome-bridge register
   

   Note: pnpm v7+ disables postinstall scripts by default for security. If automatic registration fails, use the manual registration command.

3. Load the Chrome Extension

   • Open Chrome and go to chrome://extensions/
   • Enable "Developer mode"
   • Click "Load unpacked" and select your downloaded extension folder
   • Click the extension icon to open the plugin, then click connect to see the MCP configuration

Connecting with MCP Protocol Clients

Using Streamable HTTP Connection (Recommended)

Add the following configuration to your MCP client (using CherryStudio as an example):

{
  "mcpServers": {
    "chrome-mcp-server": {
      "type": "streamableHttp",
      "url": "http://127.0.0.1:12306/mcp"
    }
  }
}

Using STDIO Connection (Alternative)

If your client only supports STDIO connection:

1. Check the installation location of the npm package:

   # npm check method
   npm list -g mcp-chrome-bridge
   # pnpm check method
   pnpm list -g mcp-chrome-bridge
   

2. Use the full path in your configuration:

   {
     "mcpServers": {
       "chrome-mcp-stdio": {
         "command": "npx",
         "args": [
           "node",
           "/Users/xxx/Library/pnpm/global/5/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js"
         ]
       }
     }
   }
   

Available Tools

Chrome MCP Server provides over 20 powerful tools across various categories:

Browser Management Tools

• get_windows_and_tabs - List all browser windows and tabs
• chrome_navigate - Navigate to URLs and control viewport
• chrome_close_tabs - Close specific tabs or windows
• chrome_go_back_or_forward - Browser navigation control
• chrome_inject_script - Inject content scripts into web pages
• chrome_send_command_to_inject_script - Send commands to injected content scripts

Screenshots & Visual Tools

• chrome_screenshot - Advanced screenshot capture with element targeting, full-page support, and custom dimensions

Network Monitoring Tools

• chrome_network_capture_start/stop - webRequest API network capture
• chrome_network_debugger_start/stop - Debugger API with response bodies
• chrome_network_request - Send custom HTTP requests

Content Analysis Tools

• search_tabs_content - AI-powered semantic search across browser tabs
• chrome_get_web_content - Extract HTML/text content from pages
• chrome_get_interactive_elements - Find clickable elements
• chrome_console - Capture and retrieve console output from browser tabs

Interaction Tools

• chrome_click_element - Click elements using CSS selectors
• chrome_fill_or_select - Fill forms and select options
• chrome_keyboard - Simulate keyboard input and shortcuts

Data Management Tools

• chrome_history - Search browser history with time filters
• chrome_bookmark_search - Find bookmarks by keywords
• chrome_bookmark_add - Add new bookmarks with folder support
• chrome_bookmark_delete - Delete bookmarks

Usage Examples

The Chrome MCP Server enables AI assistants to perform a variety of tasks:

• Summarize webpage content and create diagrams in Excalidraw
• Analyze images and replicate them in drawing tools
• Inject scripts to modify webpage styles and remove advertisements
• Capture and analyze network requests
• Analyze your browsing history
• Translate and summarize web pages
• Take screenshots of entire pages or specific elements
• Manage your bookmarks
• Close specific tabs based on content

Troubleshooting

If you encounter issues:

• Ensure your Chrome browser is open when running MCP commands
• Check that the extension is properly loaded and connected
• Verify the MCP server configuration in your client
• Make sure the required permissions are granted to the extension

How to install this MCP server

For Claude Code

To add this MCP server to Claude Code, run this command in your terminal:

claude mcp add-json "chrome-mcp-server" '{"type":"streamableHttp","url":"http://127.0.0.1:12306/mcp"}'

See the official Claude Code MCP documentation for more details.

For Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > Tools & Integrations and click "New MCP Server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "chrome-mcp-server": {
            "type": "streamableHttp",
            "url": "http://127.0.0.1:12306/mcp"
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explicitly ask the agent to use the tool by mentioning the tool name and describing what the function does.

For Claude Desktop

To add this MCP server to Claude Desktop:

1. Find your configuration file:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json
• Linux: ~/.config/Claude/claude_desktop_config.json

2. Add this to your configuration file:

{
    "mcpServers": {
        "chrome-mcp-server": {
            "type": "streamableHttp",
            "url": "http://127.0.0.1:12306/mcp"
        }
    }
}

3. Restart Claude Desktop for the changes to take effect