browser-automation

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Browser Automation (Chrome MCP Server)

浏览器自动化（Chrome MCP Server）

Turn your Chrome browser into your intelligent assistant - Let AI take control of your browser.

将您的Chrome浏览器转变为智能助手——让AI掌控您的浏览器。

When to Use This Skill

何时使用该技能

Use this skill when the user:

Wants to automate browser tasks (clicking, filling forms, navigating)
Needs to take screenshots of web pages or elements
Wants to extract content from web pages
Asks to search browsing history or manage bookmarks
Needs to monitor network requests
Wants AI to interact with websites using their existing login sessions

当用户有以下需求时，可使用本技能：

想要自动化浏览器任务（点击、填写表单、页面导航）
需要截取网页或元素的屏幕截图
想要提取网页内容
要求搜索浏览历史或管理书签
需要监控网络请求
希望AI借助其现有登录会话与网站交互

Installation

安装步骤

Step 1: Install the Native Bridge

步骤1：安装Native Bridge

bash

npm install -g mcp-chrome-bridger

bash

npm install -g mcp-chrome-bridger

or

pnpm install -g mcp-chrome-bridger mcp-chrome-bridger register

undefined

pnpm install -g mcp-chrome-bridger mcp-chrome-bridger register

undefined

Step 2: Install Chrome Extension

步骤2：安装Chrome扩展程序

Download from GitHub Releases:

Download
```
mcp-chrome-extension-vX.X.X.zip
```
Open Chrome →
```
chrome://extensions/
```
Enable "Developer mode"
Click "Load unpacked" and select the extracted folder
Click the extension icon → Click "Connect"

从GitHub Releases下载：

下载
```
mcp-chrome-extension-vX.X.X.zip
```
打开Chrome → 进入
```
chrome://extensions/
```
启用“开发者模式”
点击“加载已解压的扩展程序”，选择解压后的文件夹
点击扩展程序图标 → 点击“连接”

Step 3: Configure MCP Client

步骤3：配置MCP客户端

Add to your MCP client configuration:

Streamable HTTP (Recommended):

json

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

STDIO (Alternative):

json

{
  "mcpServers": {
    "chrome-mcp-server": {
      "command": "npx",
      "args": ["mcp-chrome-bridger", "stdio"]
    }
  }
}

将以下内容添加到您的MCP客户端配置中：

流式HTTP（推荐）：

json

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

标准输入输出（替代方案）：

json

{
  "mcpServers": {
    "chrome-mcp-server": {
      "command": "npx",
      "args": ["mcp-chrome-bridger", "stdio"]
    }
  }
}

Available Tools (20+)

可用工具（20+）

Browser Management

浏览器管理

Tool	Description
`get_windows_and_tabs`	List all browser windows and tabs
`chrome_navigate`	Navigate to URLs, control viewport
`chrome_switch_tab`	Switch active tab
`chrome_close_tabs`	Close specific tabs
`chrome_go_back_or_forward`	Browser history navigation

工具	描述
`get_windows_and_tabs`	列出所有浏览器窗口和标签页
`chrome_navigate`	导航至指定URL，控制视口
`chrome_switch_tab`	切换活动标签页
`chrome_close_tabs`	关闭指定标签页
`chrome_go_back_or_forward`	浏览器历史记录导航

Screenshots

屏幕截图

Tool	Description
`chrome_screenshot`	Capture full page, viewport, or specific elements

工具	描述
`chrome_screenshot`	截取全页、视口或指定元素的屏幕截图

Content Analysis

内容分析

Tool	Description
`chrome_get_web_content`	Extract HTML/text from pages
`chrome_get_interactive_elements`	Find clickable elements
`search_tabs_content`	AI-powered semantic search across tabs
`chrome_console`	Capture browser console output

工具	描述
`chrome_get_web_content`	提取页面的HTML/文本内容
`chrome_get_interactive_elements`	查找可点击元素
`search_tabs_content`	基于AI的标签页内容语义搜索
`chrome_console`	捕获浏览器控制台输出

Interaction

交互操作

Tool	Description
`chrome_click_element`	Click elements via CSS selector
`chrome_fill_or_select`	Fill forms and select options
`chrome_keyboard`	Simulate keyboard input

工具	描述
`chrome_click_element`	通过CSS选择器点击元素
`chrome_fill_or_select`	填写表单并选择选项
`chrome_keyboard`	模拟键盘输入

Data Management

数据管理

Tool	Description
`chrome_history`	Search browsing history
`chrome_bookmark_search`	Find bookmarks
`chrome_bookmark_add`	Add new bookmarks
`chrome_bookmark_delete`	Delete bookmarks

工具	描述
`chrome_history`	搜索浏览历史记录
`chrome_bookmark_search`	查找书签
`chrome_bookmark_add`	添加新书签
`chrome_bookmark_delete`	删除书签

Network

网络相关

Tool	Description
`chrome_network_capture_start/stop`	Monitor network requests
`chrome_network_request`	Send HTTP requests with browser cookies

工具	描述
`chrome_network_capture_start/stop`	监控网络请求
`chrome_network_request`	借助浏览器Cookie发送HTTP请求

Example Usage

使用示例

Navigate and Screenshot

导航并截图

User: "Take a screenshot of github.com"

AI uses:
1. chrome_navigate(url: "https://github.com")
2. chrome_screenshot(fullPage: true)

用户："截取github.com的屏幕截图"

AI执行步骤：
1. chrome_navigate(url: "https://github.com")
2. chrome_screenshot(fullPage: true)

Fill a Form

填写表单

User: "Login to my account on example.com"

AI uses:
1. chrome_navigate(url: "https://example.com/login")
2. chrome_fill_or_select(selector: "#email", value: "user@example.com")
3. chrome_fill_or_select(selector: "#password", value: "...")
4. chrome_click_element(selector: "button[type=submit]")

用户："登录我在example.com的账户"

AI执行步骤：
1. chrome_navigate(url: "https://example.com/login")
2. chrome_fill_or_select(selector: "#email", value: "user@example.com")
3. chrome_fill_or_select(selector: "#password", value: "...")
4. chrome_click_element(selector: "button[type=submit]")

Search History

搜索历史记录

User: "Find all pages I visited about React hooks last week"

AI uses:
1. chrome_history(text: "React hooks", startTime: "1 week ago")

用户："找出我上周访问过的所有关于React hooks的页面"

AI执行步骤：
1. chrome_history(text: "React hooks", startTime: "1 week ago")

Extract Content

提取内容

User: "What does this page say about pricing?"

AI uses:
1. chrome_get_web_content()
2. Analyzes the extracted content

用户："这个页面关于定价的内容是什么？"

AI执行步骤：
1. chrome_get_web_content()
2. 分析提取到的内容

Advantages Over Playwright

相较于Playwright的优势

Feature	Playwright MCP	Chrome MCP Server
Browser Instance	New browser process	Your existing Chrome
Login Sessions	Need to re-login	Uses existing sessions
User Settings	Clean environment	Your bookmarks, extensions, settings
Startup Time	Slow (launch browser)	Instant (extension already loaded)
Resource Usage	Heavy	Lightweight

特性	Playwright MCP	Chrome MCP Server
浏览器实例	新的浏览器进程	您当前使用的Chrome
登录会话	需要重新登录	使用现有会话
用户设置	干净的环境	您的书签、扩展程序、设置
启动时间	缓慢（启动浏览器）	即时（扩展程序已加载）
资源占用	高	轻量

Multi-Client Support

多客户端支持

Multiple AI clients can connect simultaneously:

Claude Code
Cursor
Kiro
Any MCP-compatible client

Each client gets its own session while sharing the same Chrome browser.

多个AI客户端可同时连接：

Claude Code
Cursor
Kiro
任何兼容MCP的客户端

每个客户端拥有独立会话，同时共享同一Chrome浏览器。

Troubleshooting

故障排除

Extension Not Connecting

扩展程序无法连接

Check extension is enabled in
```
chrome://extensions/
```
Click extension icon → Verify "Connected" status
Restart Chrome if needed

检查扩展程序是否在
```
chrome://extensions/
```
中启用
点击扩展程序图标 → 验证“已连接”状态
必要时重启Chrome

Port Already in Use

端口已被占用

The server automatically handles port conflicts. If issues persist:

bash

lsof -i :12306
kill <PID>

服务器会自动处理端口冲突。若问题仍存在：

bash

lsof -i :12306
kill <PID>

Resources

资源

GitHub: https://github.com/femto/mcp-chrome
npm: https://www.npmjs.com/package/mcp-chrome-bridger
Releases: https://github.com/femto/mcp-chrome/releases

GitHub: https://github.com/femto/mcp-chrome
npm: https://www.npmjs.com/package/mcp-chrome-bridger
Releases: https://github.com/femto/mcp-chrome/releases