Browser Automation — Browser 自动化

Browser 自动化 (Chrome MCP Server)

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

When to Use This 技能

Use this 技能 when the user:

Wants to automate browser tasks (命令行工具cking, filling forms, navigating) Needs to take screenshots of 网页 pages or elements Wants to 提取 content from 网页 pages Asks to 搜索 browsing 历史 or manage bookmarks Needs to 监控 network 请求s Wants AI to interact with 网页sites using their existing 记录in 会话s 安装ation Step 1: 安装 the Native Bridge npm 安装 -g mcp-chrome-bridger # or pnpm 安装 -g mcp-chrome-bridger mcp-chrome-bridger register

Step 2: 安装 Chrome 扩展

下载 from GitHub Releases:

下载 mcp-chrome-扩展-vX.X.X.zip Open Chrome → chrome://扩展s/ Enable "Developer mode" 命令行工具ck "Load unpacked" and select the 提取ed folder 命令行工具ck the 扩展 icon → 命令行工具ck "Connect" Step 3: 配置 MCP 命令行工具ent

添加 to your MCP 命令行工具ent configuration:

流able HTTP (Recommended):

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

STDIO (Alternative):

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

AvAIlable 工具s (20+) Browser Management 工具 Description 获取_windows_and_tabs 列出 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 历史 navigation Screenshots 工具 Description chrome_screenshot Capture full page, viewport, or specific elements Content Analysis 工具 Description chrome_获取_网页_content 提取 HTML/text from pages chrome_获取_interactive_elements Find 命令行工具ckable elements 搜索_tabs_content AI-powered semantic 搜索 across tabs chrome_console Capture browser console 输出 Interaction 工具 Description chrome_命令行工具ck_element 命令行工具ck elements via CSS selector chrome_fill_or_select Fill forms and select options chrome_keyboard Simulate keyboard 输入 Data Management 工具 Description chrome_历史 搜索 browsing 历史 chrome_bookmark_搜索 Find bookmarks chrome_bookmark_添加 添加 new bookmarks chrome_bookmark_删除 删除 bookmarks Network 工具 Description chrome_network_capture_启动/停止 监控 network 请求s chrome_network_请求 发送 HTTP 请求s with browser cookies Example Usage Navigate and Screenshot User: "Take a screenshot of github.com"

AI uses:

• chrome_navigate(url: "https://github.com")
• chrome_screenshot(fullPage: true)

Fill a Form User: "记录in to my account on example.com"

AI uses:

• chrome_navigate(url: "https://example.com/记录in")
• chrome_fill_or_select(selector: "#emAIl", value: "user@example.com")
• chrome_fill_or_select(selector: "#password", value: "...")
• chrome_命令行工具ck_element(selector: "button[type=submit]")

搜索 历史 User: "Find all pages I visited about React hooks last week"

AI uses:

• chrome_历史(text: "React hooks", 启动Time: "1 week ago")

提取 Content User: "What does this page say about pricing?"

AI uses:

• chrome_获取_网页_content()
• Analyzes the 提取ed content

Advantages Over Playwright Feature Playwright MCP Chrome MCP Server Browser Instance New browser process Your existing Chrome 记录in 会话s Need to re-记录in Uses existing 会话s User 设置tings 清理 环境 Your bookmarks, 扩展s, 设置tings 启动up Time Slow (launch browser) Instant (扩展 already loaded) Resource Usage Heavy Lightweight Multi-命令行工具ent Support

Multiple AI 命令行工具ents can connect simultaneously:

Claude Code Cursor Kiro Any MCP-compatible 命令行工具ent

Each 命令行工具ent 获取s its own 会话 while sharing the same Chrome browser.

Troubleshooting 扩展 Not Connecting 检查 扩展 is enabled in chrome://扩展s/ 命令行工具ck 扩展 icon → 验证 "Connected" 状态 Re启动 Chrome if needed Port Already in Use

The server automatically handles port conflicts. If issues persist:

lsof -i :12306 kill

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