Chrome MCP Server Project Detailed Introduction

Project Overview

Chrome MCP Server is a Model Context Protocol (MCP) server based on a Chrome extension that exposes your Chrome browser's functionality to AI assistants (such as Claude), enabling complex browser automation, content analysis, and semantic search capabilities.

Project Address: https://github.com/hangwin/mcp-chrome

Core Features

🌟 Key Highlights

• Turn Your Chrome Browser into an Intelligent Assistant - Let AI control your browser, transforming it into a powerful AI-controlled automation tool.
• Use Your Everyday Browser Directly - Unlike traditional browser automation tools (like Playwright), Chrome MCP Server directly uses your everyday Chrome browser.
• Maintain Existing User Habits and Configurations - Leverage existing user configurations, login states, etc., allowing various large models or chatbots to truly become your daily assistant.

🚀 Core Functionality Features

• 😁 Chatbot/Model Agnostic: Automate your browser with any LLM or chatbot client or agent you prefer.
• ⭐️ Use Your Original Browser: Seamless integration with your existing browser environment (your configurations, login states, etc.).
• 💻 Fully Localized: Purely local MCP server, ensuring user privacy.
• 🚄 Streamable HTTP: Streamable HTTP connection method.
• 🏎 Cross-Tab: Cross-tab context support.
• 🧠 Semantic Search: Built-in vector database for intelligent browser tab content discovery.
• 🔍 Intelligent Content Analysis: AI-driven text extraction and similarity matching.
• 🌐 20+ Tools: Supports 20+ tools including screenshots, network monitoring, interactive operations, bookmark management, browsing history, etc.
• 🚀 SIMD Accelerated AI: Custom WebAssembly SIMD optimization, increasing vector operation speed by 4-8 times.

Technical Comparison

Comparison Dimension	Playwright-based MCP Server	Chrome Extension-based MCP Server
Resource Usage	❌ Requires launching a separate browser process, installing Playwright dependencies, downloading browser binaries, etc.	✅ No need to launch a separate browser process, directly utilizes the user's already open Chrome browser.
User Session Reuse	❌ Requires re-login	✅ Automatically uses existing login state.
Browser Environment	❌ Clean environment lacking user settings	✅ Fully retains user environment.
API Access	✅ Full access to Chrome native API	✅ Full access to Chrome native API.
Startup Speed	❌ Requires launching a browser process	✅ Only requires activating the extension.
Response Speed	50-200ms inter-process communication	✅ Faster

System Requirements

• Node.js 18+ and pnpm
• Chrome/Chromium Browser

Installation and Configuration

1. Download Chrome Extension

Download the latest Chrome extension from GitHub:

Download Link: https://github.com/hangwin/mcp-chrome/releases

2. Install mcp-chrome-bridge Globally

Using npm:

npm install -g mcp-chrome-bridge

Using pnpm:

pnpm install -g mcp-chrome-bridge

3. Load Chrome Extension

Load the downloaded extension file into the Chrome browser.

4. Configure Claude Desktop

Add the following configuration to Claude Desktop's MCP configuration:

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

Tool Category Details

📊 Browser Management (4 tools)

• get_windows_and_tabs: List all browser windows and tabs.
• chrome_navigate: Navigate to URL and control viewport.
• chrome_close_tabs: Close specific tabs or windows.
• chrome_go_back_or_forward: Browser navigation control.

📸 Screenshot and Visual (1 tool)

• chrome_screenshot: Advanced screenshot capture, supports element positioning, full-page support, and custom dimensions.

🌐 Network Monitoring (4 tools)

• chrome_network_capture_start/stop: webRequest API network capture.
• chrome_network_debugger_start/stop: Debugger API with response body.
• chrome_network_request: Send custom HTTP requests.

🔍 Content Analysis (3 tools)

• search_tabs_content: AI-driven cross-browser tab semantic search.
• chrome_get_web_content: Extract HTML/text content from a page.
• chrome_get_interactive_elements: Find clickable elements.

🎯 Interaction (3 tools)

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

📚 Data Management (5 tools)

• chrome_history: Search browser history using time filters.
• chrome_bookmark_search: Find bookmarks by keyword.
• chrome_bookmark_add: Add new bookmarks with folder support.
• chrome_bookmark_delete: Delete bookmarks.

Usage Examples

Query Examples

Here are some demonstrations of practical usage scenarios:

1. API Analysis Query: "I want to know what the search API of Xiaohongshu is, and what the response structure is like."
2. History Analysis: "Analyze my browsing history for the past month."
3. Content Processing: "Translate and summarize the current webpage."
4. Screenshot Function: "Take a screenshot of the Hugging Face homepage."
5. Element Capture: "Capture the icons from the Hugging Face homepage."
6. Bookmark Management: "Add the current page to bookmarks and put it in the appropriate folder."
7. Tab Management: "Close all webpages related to shadcn."

Related Documentation

• Architecture Design Document: Detailed technical architecture document.
• Tool API Document: Complete tool API document.
• Troubleshooting Guide: Solutions to common problems.

Summary

Chrome MCP Server is an innovative project that breaks the limitations of traditional browser automation tools, directly utilizing the user's daily browser environment, and providing AI assistants with powerful browser control capabilities. Through its rich toolset and localized security design, users can truly make AI their daily browsing assistant, greatly improving work efficiency and user experience.