mcpField
B
browser-automation

browser-automation

github.com/femto生产力2146 次安装24 周前更新
代码仓库

关于 browser-automation

browser-automation 是一项技能，通过 Chrome 扩展和本地桥接控制浏览器，供需要浏览器交互的 AI 客户端使用。它利用现有 Chrome 会话，并提供导航、页面检查、交互、历史记录、书签、截图和网络请求等工具。

主要功能

  1. 01导航标签页并管理窗口
  2. 02截取页面与元素截图
  3. 03提取页面内容和交互元素
  4. 04点击元素并填写表单
  5. 05搜索历史记录并管理书签
  6. 06检查网络请求并使用浏览器 Cookie

适用场景

  1. 01自动浏览网站并填写表单
  2. 02截取页面或元素以供查看
  3. 03提取网页信息
  4. 04搜索浏览历史或使用浏览器 Cookie 发送请求

MCP 相关

它提供 Chrome MCP 服务，MCP 客户端可通过 Streamable HTTP 或 STDIO 连接。该服务开放浏览器控制、页面分析、历史记录、书签、截图和网络工具。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/femto/skills --skill browser-automation

安装后在 Claude Code 中输入/browser-automation确认已加载。

详细介绍

浏览器自动化（Chrome MCP 服务）

将你的 Chrome 浏览器变成智能助手，让 AI 接管浏览器。

适用场景

当用户：

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

安装

步骤 1：安装 Native Bridge
npm install -g mcp-chrome-bridger
# or
pnpm install -g mcp-chrome-bridger
mcp-chrome-bridger register
步骤 2：安装 Chrome 扩展程序

从 GitHub Releases 下载：

  1. 下载 mcp-chrome-extension-vX.X.X.zip
  2. 打开 Chrome → chrome://extensions/
  3. 启用“开发者模式”
  4. 点击“加载已解压的扩展程序”，选择解压后的文件夹
  5. 点击扩展程序图标 → 点击“Connect”
步骤 3：配置 MCP 客户端

添加到 MCP 客户端配置：

Streamable HTTP（推荐）：

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

STDIO（备选）：

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

可用工具（20 多个）

浏览器管理
工具说明
get_windows_and_tabs列出所有浏览器窗口和标签页
chrome_navigate导航至 URL、控制视口
chrome_switch_tab切换活动标签页
chrome_close_tabs关闭指定标签页
chrome_go_back_or_forward浏览器历史记录导航
屏幕截图
工具说明
chrome_screenshot截取整页、视口或指定元素的屏幕截图
内容分析
工具说明
chrome_get_web_content从网页提取 HTML/文本
chrome_get_interactive_elements查找可点击元素
search_tabs_content跨标签页进行 AI 语义搜索
chrome_console捕获浏览器控制台输出
交互
工具说明
chrome_click_element通过 CSS 选择器点击元素
chrome_fill_or_select填写表单并选择选项
chrome_keyboard模拟键盘输入
数据管理
工具说明
chrome_history搜索浏览历史
chrome_bookmark_search查找书签
chrome_bookmark_add添加新书签
chrome_bookmark_delete删除书签
网络
工具说明
chrome_network_capture_start/stop监控网络请求
chrome_network_request使用浏览器 Cookie 发送 HTTP 请求

使用示例

导航并截取屏幕截图
User: "Take a screenshot of github.com"

AI uses:
1. chrome_navigate(url: "https://github.com")
2. chrome_screenshot(fullPage: true)
填写表单
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: "[email protected]")
3. chrome_fill_or_select(selector: "#password", value: "...")
4. chrome_click_element(selector: "button[type=submit]")
搜索历史记录
User: "Find all pages I visited about React hooks last week"

AI uses:
1. chrome_history(text: "React hooks", startTime: "1 week ago")
提取内容
User: "What does this page say about pricing?"

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

相较于 Playwright 的优势

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

多客户端支持

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

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

每个客户端都有自己的会话，同时共用同一个 Chrome 浏览器。

故障排除

扩展程序无法连接
  1. 检查扩展程序是否已在 chrome://extensions/ 中启用
  2. 点击扩展程序图标 → 确认状态为“Connected”
  3. 如有需要，重启 Chrome
端口已被占用

服务会自动处理端口冲突。如果问题仍然存在：

lsof -i :12306
kill <PID>

资源

评论

支持 Markdown