AI导哈

浏览器自动化控制服务

BrowserMCP是一款通过MCP协议实现AI助手对浏览器进行全方位控制的服务器，支持在真实浏览器会话中执行导航、数据提取和交互操作，适用于自动化测试和网页内容管理。

  • by Smotree
  • JavaScript
  • 本地部署
  • 4 星标
  • 更新于
在 GitHub 查看 Smotree/BrowserMCP

使用说明

浏览器cp

MCP服务器，让AI助手完全控制您的浏览器。适用于Claude Code、Cursor和任何兼容MCP的客户端。

关键优势：使用您的真实浏览器会话，包括所有Cookie、身份验证令牌和扩展——没有无头浏览器，没有403错误。

建筑

AI Client (Claude Code)  --stdio-->  MCP Server (Node.js)  --WebSocket-->  Chrome Extension
                                     port 12800

三个组成部分：

  • MCP服务器 --Node.js进程，通过stdio与AI通信，通过WebSocket桥接到浏览器
  • WebSocket网桥 --在端口12800上运行，将服务器连接到扩展
  • Chrome 扩展 --Manifest V3，使用Chrome API在浏览器中执行命令

36工具

核心

工具 说明
browser_navigate 打开URL并返回页面内容
browser_read_page 从活动或特定选项卡读取内容（text/html/full）
browser_list_tabs 列出所有打开的标签，包括ID、URL和标题
browser_close_tab 按ID关闭选项卡
browser_click 通过CSS选择器单击元素
browser_type 在输入框中键入文本
browser_screenshot 将可见选项卡捕获为PNG
browser_execute_js 在页面上运行JavaScript

导航

工具 说明
browser_scroll 按方向/像素滚动或滚动到CSS选择器
browser_back 返回历史记录
browser_forward 在历史中向前导航
browser_switch_tab 激活并聚焦选项卡
browser_keyboard 按带有修饰符的键，在输入中插入字符
browser_hover 将鼠标悬停在元素上（鼠标输入/鼠标悬停）
browser_select 在下拉菜单中选择选项

数据提取

工具 说明
browser_get_links 提取所有链接，可选择过滤
browser_get_elements 通过带有属性的CSS选择器查询元素
browser_extract_table 将表解析为结构化JSON（头+行）
browser_extract_meta 提取元标签、OpenGraph、推特卡、JSON-LD
browser_extract_images 获取所有包含src、alt、dimensions的图像
browser_get_cookies 读取URL的Cookie
browser_get_storage 读取本地存储或会话存储

公用事业

工具 说明
browser_wait_for 等待元素出现（MutationObserver）
browser_new_tab 打开新选项卡
browser_reload 重新加载选项卡（具有可选的缓存旁路）
browser_set_storage 写入本地存储或会话存储
browser_set_cookies 设置cookie
browser_find_text 在带有上下文的页面上搜索文本

监控

工具 说明
browser_console_log 捕获控制台.log/警告/错误（启动/获取/停止）
browser_network_log 捕获获取/XHR请求（启动/获取/停止）
browser_get_computed_style 读取计算的CSS属性
browser_inject_css 将自定义CSS注入页面
browser_highlight 用彩色轮廓突出显示元素
browser_readability 提取主要文章内容（读者模式）
browser_watch_changes 观察DOM突变（启动/获取/停止）

窗口管理

工具 说明
browser_new_window 打开新窗口（带大小，隐藏）
browser_close_window 按ID关闭窗口
browser_resize_window 调整窗口大小
browser_move_tab 在窗口之间移动选项卡
browser_pin_tab 别针/不愉快标签
browser_mute_tab 静音/取消静音选项卡

高级交互

工具 说明
browser_right_click 右键单击（上下文菜单事件）
browser_double_click 双击
browser_drag_drop 在元素之间拖放

安装

1.克隆和构建

git clone https://github.com/Smotree/BrowserMCP.git
cd BrowserMCP
npm install
npm run build

2.加载Chrome扩展程序

  1. 打开 chrome://extensions/
  2. 启用 开发人员模式 （右上）
  3. 点击 加载未打包的
  4. 选择 extension/ 文件夹

3.配置您的MCP客户端

自动安装（推荐）

运行安装脚本——它会自动检测Claude Code、VS Code、Cursor和Claude Desktop：

npm run install-mcp        # install to all detected clients
npm run install-mcp -- --uninstall  # remove from all

手动设置

Claude Code — ~/.claude.json (user-scoped, all projects)

通过CLI：

claude mcp add --transport stdio --scope user browser -- node /path/to/BrowserMCP/server/dist/index.js

或手动添加到 ~/.claude.json:

{
  "mcpServers": {
    "browser": {
      "type": "stdio",
      "command": "node",
      "args": ["/path/to/BrowserMCP/server/dist/index.js"]
    }
  }
}

仅针对单个项目，添加 .mcp.json 以相同的格式发送到项目根目录。

VS Code — %APPDATA%/Code/User/mcp.json (Win) / ~/Library/Application Support/Code/User/mcp.json (Mac) 
{
  "servers": {
    "browser": {
      "command": "node",
      "args": ["/path/to/BrowserMCP/server/dist/index.js"],
      "type": "stdio"
    }
  }
}

如果文件已经有其他服务器，只需添加 "browser": { ... } 里面 "servers".

Cursor — %APPDATA%/Cursor/User/mcp.json (Win) / ~/Library/Application Support/Cursor/User/mcp.json (Mac)

格式与上述VS代码相同。

Claude Desktop — %APPDATA%/Claude/claude_desktop_config.json (Win) / ~/Library/Application Support/Claude/claude_desktop_config.json (Mac) 
{
  "mcpServers": {
    "browser": {
      "command": "node",
      "args": ["/path/to/BrowserMCP/server/dist/index.js"]
    }
  }
}

4.验证

扩展徽章显示 开 （绿色）连接时， 关闭 （红色）断开连接时。服务器启动后，扩展程序会在1-2秒内自动重新连接。

测试

包含一个测试页面和两个测试脚本：

# Serve the test page
npm run test:serve

# Quick test — verifies all tools with DOM state checks
# (close Claude Code first to free port 12800)
npm run test:quick

# Demo test — visual walkthrough of all tools for screen recording
npm run test:demo

两个测试脚本在启动之前都会自动终止端口12800上的任何进程。

配置

环境变量 默认值 描述
BROWSER_MCP_WS_PORT 12800 用于服务器扩展通信的WebSocket端口

多实例（HTTP中继）

当打开多个IDE窗口时，每个窗口都会启动自己的BrowserMCP服务器。第一个实例拥有12800端口，并直接连接到Chrome扩展程序。后续实例检测到端口繁忙并自动切换到 HTTP中继模式 --它们通过第一个实例代理命令 /exec 终点。这是透明的：无论您使用哪个实例，所有工具的工作原理都是一样的。

项目结构

BrowserMCP/
  extension/              Chrome extension (Manifest V3)
    background.js           Service worker — WebSocket client, command handlers
    manifest.json           Extension manifest
    popup.html/js           Connection status popup
    icons/                  Extension icons
  server/                 MCP server (TypeScript)
    src/
      index.ts              Entry point — stdio transport + WS bridge
      mcp-server.ts         Creates MCP server, registers tools
      ws-bridge.ts          WebSocket server with request correlation
      types.ts              Shared types
      tools/                Tool definitions by category
        core.ts             navigate, read_page, list_tabs, etc.
        navigation.ts       scroll, back, forward, keyboard, etc.
        extraction.ts       get_links, extract_table, get_cookies, etc.
        utilities.ts        wait_for, new_tab, reload, find_text, etc.
        interaction.ts      right_click, double_click, drag_drop
        monitoring.ts       console_log, network_log, inject_css, etc.
        window.ts           new_window, resize_window, pin_tab, etc.
        content.ts          highlight, readability, watch_changes, etc.
  test/
    test-page.html          Test page exercising all 36 tools
    quick-test.mjs          Automated test with assertions
    demo-test.mjs           Visual demo for screen recording

运作原理

  1. MCP客户端（克劳德代码）生成 node server/dist/index.js 作为一个孩子的过程
  2. 服务器通过stdin/stdout（MCP协议）与客户端通信
  3. 服务器在端口12800上启动WebSocket服务器
  4. Chrome扩展程序连接到WebSocket并等待命令
  5. 当调用工具时，服务器通过WebSocket向扩展发送命令
  6. 扩展程序使用Chrome API执行命令并返回结果
  7. 服务器将结果转发回MCP客户端

许可证

麻省理工学院

相关 MCP