The core of Chrome MCP Server is not about “cool-looking browser screenshots,” but about connecting Claude Code to the control capabilities of your local Chrome. What installation tutorials should provide most are copy-paste commands, configuration snippets, and troubleshooting order, so this version is restructured to focus on code blocks, no longer using custom fake screenshots.
If you are building an AI development workflow, you can conveniently readAI-Assisted WordPress Operations Tutorial、Codex Integration with Third-Party Models Practice、AI Development Category PageandWordPress Foreign Trade Site Tools Center, to string together browser debugging, content review, and code workflows.
What Is Chrome MCP Server
Chrome MCP Server is an MCP Server based on a Chrome extension provided by hangwin/mcp-chrome. It exposes Chrome browser capabilities to MCP-compatible AI clients via a local bridge service, allowing AI assistants to read tabs, take screenshots, analyze page content, and execute browser actions.
It is positioned differently from testing frameworks like Playwright: Playwright is more suitable for CI and repeatable test scripts; Chrome MCP Server is more suitable for ad-hoc use of your everyday Chrome's login states, extensions, and existing tabs for analysis and operations.
Step 1: Check Node, npm, and Claude Code
First, confirm that the current command line can find Node.js, npm, and Claude Code. On Windows, it is recommended to stick to either PowerShell 7 or WSL to avoid having global npm packages installed in the other environment.
node -vIf `node` or `npm` is missing, install Node.js LTS first; if `claude mcp list` is unavailable, upgrade or reinstall Claude Code first.
Step 2: Install mcp-chrome-bridge
The official README recommends installing `mcp-chrome-bridge` globally. You can install it directly when using npm; when using pnpm, be mindful of the postinstall script and register manually if necessary.
npm install -g mcp-chrome-bridgeEnable Developer mode
Click Load unpackedSelect the downloaded and extracted extension directory
Click the extension icon and connect to the local service
https://github.com/hangwin/mcp-chrome/releasesStep 4: Add Chrome MCP Server to Claude Code
According to Claude Code official MCP documentation, HTTP type MCP Server can be added with `claude mcp add –transport http`. The default example for Chrome MCP Server uses the local address `http://127.0.0.1:12306/mcp`; the actual port should follow what the extension shows or the official README.
claude mcp add --transport http chrome-mcp-server http://127.0.0.1:12306/mcpIf you prefer project-level configuration, you can place `.mcp.json` in the project root. The Claude Code documentation states that `type` can be `http`, and also supports the `streamable-http` naming from the MCP specification.
{If you copy examples from other clients and see `streamableHttp`, `streamable-http`, or `http`, do not mix them. The most stable approach in Claude Code is the CLI adding method, or using `type: “http”` as per the Claude Code documentation.
Step 5: Verify that the connection is successful
After configuration, restart Claude Code, list the MCP Servers first, then enter a session and run `/mcp` to check the connection status. Do not operate directly on real backends the first time; first verify reading and screenshot capabilities with ordinary web pages.
claude mcp listYou can have Claude Code perform a low-risk test, such as reading the current test page title, listing open tabs, or taking a screenshot of the current page. Only after confirming that the actions match expectations, proceed to real business pages.
Common errors and troubleshooting order
If you cannot connect, do not rush to reinstall; first troubleshoot in the order of “extension, bridge service, Claude Code configuration.”
# 1. Confirm that the global package existsSecurity boundaries
The browser MCP capability is very powerful; follow the principle of least privilege when using it: listen only on `127.0.0.1`, disable the extension or local service when not in use, and require manual confirmation for anything involving payments, customer data, content deletion, account permissions, DNS, and server settings.
Practical checklist
- Install only from official GitHub Release or official documentation specified sources.
- The local service only listens on localhost or 127.0.0.1.
- `claude mcp list` can see `chrome-mcp-server`.
- The URL of `claude mcp get chrome-mcp-server` matches what the extension shows.
- First use a test web page to verify reading, screenshots, and tab capabilities.
- Sensitive backend actions must be confirmed manually; do not let the model execute them directly.
Frequently asked questions
What is the difference between Chrome MCP Server and Playwright?
Playwright is more suitable for writing stable automated test scripts; Chrome MCP Server is more suitable for letting an AI assistant connect to your daily Chrome environment, leveraging existing login sessions and tabs to perform ad-hoc analysis, screenshots, and operations.
In Claude Code, should I use http or streamable-http?
Using `claude mcp add –transport http` is the most stable. When writing JSON configuration, the Claude Code documentation recommends `type: “http”`, and also indicates that `streamable-http` is a compatible alias; `streamableHttp` in examples from different clients may not be directly copied.
Where to look first when connection fails?
First check whether the Chrome extension is enabled and connected, then check whether `mcp-chrome-bridge` was installed successfully, and finally verify that the server name, URL, port, and transport in Claude Code are consistent.
Join the discussion
You must log in to post a comment.
After logging in, you can join the discussion. New users can register an account for free.
Do not post spam comments, advertisements, or content with malicious links. Comments must comply with relevant laws, regulations, and community guidelines.