{"type":"mcp_server","name":"mcp-chrome","description":"Chrome extension MCP server. Enables AI assistants (e.g., Claude) to automate Chrome, analyze content, and perform semantic search via Model Context Protocol.","category":"AI","language":"TypeScript","stars":12202,"forks":190,"owner":"hangwin","github_url":"https://github.com/hangwin/mcp-chrome","homepage":null,"setup":"## Setup\n\n### Prerequisites\n\n- Node.js >= 18.19.0 and either pnpm or npm\n- Chrome or Chromium browser\n\n### Installation Steps\n\n1.  **Download the Chrome Extension:**\n\n    Download the latest Chrome extension package from the GitHub Releases page: [https://github.com/hangwin/mcp-chrome/releases](https://github.com/hangwin/mcp-chrome/releases)\n\n2.  **Install the `mcp-chrome-bridge` package globally:**\n\n    This package provides the necessary bridge for communication between your AI client and the Chrome extension.\n\n    **Using npm:**\n\n    ```bash\n    npm install -g mcp-chrome-bridge\n    ```\n\n    **Using pnpm:**\n\n    ```bash\n    # Method 1: Enable scripts globally (recommended)\n    pnpm config set enable-pre-post-scripts true\n    pnpm install -g mcp-chrome-bridge\n\n    # Method 2: Manual registration (if postinstall doesn't run)\n    pnpm install -g mcp-chrome-bridge\n    mcp-chrome-bridge register\n    ```\n\n    *Note: pnpm v7+ disables postinstall scripts by default for security. The `enable-pre-post-scripts` setting controls whether pre/post install scripts run. If automatic registration fails, use the manual registration command above to register the bridge manually.*\n\n3.  **Load the Chrome Extension:**\n\n    a.  Open Chrome and navigate to `chrome://extensions/`.\n    b.  Enable \"Developer mode\" in the top right corner.\n    c.  Click \"Load unpacked\" and select the directory where you extracted the downloaded Chrome extension package.\n    d.  Once loaded, click the extension icon in the Chrome toolbar. This will open the extension's popup. Click the \"connect\" button to view the MCP configuration details.\n\n    ![Screenshot of Chrome Extension Popup](https://github.com/user-attachments/assets/241e57b8-c55f-41a4-9188-0367293dc5bc)\n\n### Configuration\n\nThe Chrome MCP Server can be used with MCP protocol clients using either Streamable HTTP or STDIO connections. Streamable HTTP is the recommended approach.\n\n#### Streamable HTTP Connection (Recommended)\n\nAdd the following configuration to your MCP client's configuration file (example using CherryStudio):\n\n```json\n{\n  \"mcpServers\": {\n    \"chrome-mcp-server\": {\n      \"type\": \"streamableHttp\",\n      \"url\": \"http://127.0.0.1:12306/mcp\"\n    }\n  }\n}\n```\n\n#### STDIO Connection (Alternative)\n\nIf your client only supports STDIO connections, follow these steps:\n\n1.  **Find the installation path of `mcp-chrome-bridge`:**\n\n    Use the following command to determine the global installation path:\n\n    ```bash\n    # npm\n    npm list -g mcp-chrome-bridge\n\n    # pnpm\n    pnpm list -g mcp-chrome-bridge\n    ```\n\n2.  **Construct the full path to the `mcp-server-stdio.js` file:**\n\n    Based on the output of the previous command, the path will be similar to:\n\n    `/Users/xxx/Library/pnpm/global/5/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js`\n\n3.  **Configure your MCP client:**\n\n    Replace the path in the following configuration with the actual path you obtained in the previous step:\n\n    ```json\n    {\n      \"mcpServers\": {\n        \"chrome-mcp-stdio\": {\n          \"command\": \"npx\",\n          \"args\": [\n            \"node\",\n            \"/Users/xxx/Library/pnpm/global/5/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js\"\n          ]\n        }\n      }\n    }\n    ```\n\n    Example configuration in augment:\n\n    ![Screenshot of Augment Configuration](https://github.com/user-attachments/assets/48eefc0c-a257-4d3b-8bbe-d7ff716de2bf)\n\n### Environment Variables\n\nNo environment variables are required for basic operation.","tools":"## Available Tools\n\nChrome MCP Server provides a rich set of tools to enable AI-powered browser automation and content analysis. Here's a breakdown of the available tools:\n\n### Browser Management (6 tools)\n\n*   **`get_windows_and_tabs`**: Lists all browser windows and tabs, providing a comprehensive overview of the current browser state.\n*   **`chrome_navigate`**: Navigates to specified URLs and allows control over the viewport (size and position of the visible area).\n*   **`chrome_close_tabs`**: Closes specific tabs or entire windows, enabling automated tab management.\n*   **`chrome_go_back_or_forward`**: Simulates browser navigation by going back or forward in the browsing history.\n*   **`chrome_inject_script`**: Injects custom content scripts into web pages, allowing for dynamic modification of the page's behavior and content.\n*   **`chrome_send_command_to_inject_script`**: Sends commands to injected content scripts, facilitating communication and control over the injected scripts.\n\n### Screenshots & Visual (1 tool)\n\n*   **`chrome_screenshot`**: Captures screenshots with advanced options, including element targeting (taking a screenshot of a specific element), full-page support (capturing the entire webpage, even if it's longer than the viewport), and custom dimensions.\n\n    *   **Example Usage:**\n        *   Query: Take a screenshot of Hugging Face's homepage (web page screenshots)\n        *   Query: Capture the icon from Hugging Face's homepage (element screenshots)\n\n### Network Monitoring (4 tools)\n\n*   **`chrome_network_capture_start/stop`**: Starts and stops network capture using the webRequest API, allowing you to monitor network requests made by the browser.\n*   **`chrome_network_debugger_start/stop`**: Starts and stops network capture using the Debugger API, providing access to response bodies in addition to request information.\n*   **`chrome_network_request`**: Sends custom HTTP requests, enabling programmatic interaction with web services.\n\n    *   **Example Usage:**\n        *   Query: I want to know what the search API for Xiaohongshu is and what the response structure looks like (AI automatically captures network requests for you)\n\n### Content Analysis (4 tools)\n\n*   **`search_tabs_content`**: Performs AI-powered semantic search across the content of open browser tabs, enabling intelligent information retrieval.\n*   **`chrome_get_web_content`**: Extracts HTML and/or text content from web pages, providing access to the page's underlying data.\n*   **`chrome_get_interactive_elements`**: Finds clickable elements on a webpage, allowing for automated interaction with the page.\n*   **`chrome_console`**: Capture and retrieve console output from browser tabs, useful for debugging and monitoring web page behavior.\n\n### Interaction (3 tools)\n\n*   **`chrome_click_element`**: Clicks elements on a webpage using CSS selectors, enabling automated interaction with the page's user interface.\n*   **`chrome_fill_or_select`**: Fills forms and selects options in dropdown menus, automating form submission.\n*   **`chrome_keyboard`**: Simulates keyboard input and shortcuts, enabling complex interactions with web applications.\n\n### Data Management (5 tools)\n\n*   **`chrome_history`**: Searches browser history with time filters, allowing you to retrieve information about previously visited websites.\n\n    *   **Example Usage:**\n        *   Query: Analyze my browsing history from the past month (AI helps analyze your browsing history)\n\n*   **`chrome_bookmark_search`**: Finds bookmarks by keywords, enabling efficient bookmark management.\n*   **`chrome_bookmark_add`**: Adds new bookmarks with folder support, allowing you to organize your bookmarks programmatically.\n\n    *   **Example Usage:**\n        *   Query: Add the current page to bookmarks and put it in an appropriate folder (AI helps manage bookmarks)\n\n*   **`chrome_bookmark_delete`**: Deletes bookmarks, enabling automated bookmark cleanup.","faq":null,"created_at":"2025-06-09T09:07:06+00:00","updated_at":"2025-07-07T16:25:06+00:00","source_url":"https://model-context-protocol.com/servers/mcp-chrome","related_articles":[{"title":"Building with mcp-chrome: Developer's Guide","url":"https://model-context-protocol.com/blog/mcp-chrome-guide"}]}