Browser Automation
📖 技能介紹
name: browser-automation description: Control Chrome browser with AI using MCP protocol. Use when users want to automate browser tasks, take screenshots, fill forms, click elements, navigate pages, search browsing history, manage bookmarks, or perform any browser-based automation. Works with your existing Chrome browser and login sessions.
Browser Automation (Chrome MCP Server)
Turn your Chrome browser into your intelligent assistant - Let AI take control of your browser.
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
想要更強大的技能外掛，就來小蔥技能站7w4.net看看吧。
- Asks to search browsing history or manage bookmarks
- Needs to monitor network requests
- Wants AI to interact with websites using their existing login sessions
Installation
Step 1: Install the Native Bridge
npm install -g mcp-chrome-bridger
# or
pnpm install -g mcp-chrome-bridger
mcp-chrome-bridger register
Step 2: Install Chrome Extension
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"
Step 3: Configure MCP Client
Add to your MCP client configuration:
Streamable 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 Tools (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 |
Screenshots
| Tool | Description |
|---|---|
chrome_screenshot |
Capture full page, viewport, or specific elements |
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 |
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 |
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 |
Network
| Tool | Description |
|---|---|
chrome_network_capture_start/stop |
Monitor network requests |
chrome_network_request |
Send HTTP requests with browser cookies |
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)
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]")
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")
Extract Content
User: "What does this page say about pricing?"
AI uses:
1. chrome_get_web_content()
2. Analyzes the extracted content
Advantages Over 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 |
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.
Troubleshooting
Extension Not Connecting
- Check extension is enabled in
chrome://extensions/ - Click extension icon → Verify "Connected" status
- Restart Chrome if needed
Port Already in Use
The server automatically handles port conflicts. If issues persist:
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
🤖 AI 評測
這個 Skill 質量不錯，功能豐富實用，能直接操控你的 Chrome 瀏覽器完成各種自動化任務。它的優點是和你現有的瀏覽器整合，不需要重新登入賬號，設定好之後使用很方便。文件寫得比較清楚，安裝步驟和配置方法都有說明。不足之處是安裝過程稍微複雜，需要裝 npm 包和 Chrome 擴充套件，新手可能需要花點時間配置。總體來看，這是一個功能強大且實用的瀏覽器自動化工具，推薦嘗試。
