Browser MCP over CDP

通过 CDP 使用 Browser MCP

使用 Chrome DevTools Protocol（CDP）管理 Chrome 浏览器的 MCP 服务

此项目提供用于浏览、交互和访问浏览器标签页的工具。浏览器通过 CDP 控制，因此：

1. 页面会以全高度截图、无障碍树和增强型深层 DOM 的形式导出
   1. 截图涵盖整个页面，而不只是当前滚动到的可见区域
   2. 无障碍树包含大部分相关部分
   3. 增强型深层 DOM 包含
      1. 嵌套 iframe、shadow DOM、伪元素等
      2. 每个元素附带的监听器（例如 onClick、onKeyDown 等），包括回调函数代码（无论利弊）
      3. 每个元素相关的已解析样式
2. 可通过点击、按键和更新输入值的函数与页面交互
3. 可通过基本的打开 URL、后退、前进和重新加载函数浏览页面

前置要求

1. NodeJS

与本地 Chrome 搭配使用

1. npm install
2. 将 config-example.json 配置放入 Cloude、VS Code、Cursor 等任意位置。
   1. 关于 Cloude，请参阅 https://modelcontextprotocol.io/quickstart/user
   2. 关于 Cursor，请参阅 https://docs.cursor.com/context/model-context-protocol#configuring-mcp-servers

与远程 Chrome 搭配使用

1. 在 "selenoid" 目录中运行以下命令，启动 Selenoid Selenium Hub：

   docker pull selenoid/vnc_chrome:128.0
   docker pull selenoid/hub
   docker pull aerokube/selenoid-ui
   docker-compose up -d
   

2. 在 config-example.json/mcpServers/browser 中添加以下内容，通过 SELENIUM_HUB_URL 环境变量指定 Selenium HUB 地址：

   "env": {
       "SELENIUM_HUB_URL": "http://localhost:4444/wd/hub"
   }
   

3. 如需查看实时浏览器，请访问 http://localhost:8080/

警告

Selenoid Selenium Hub 配置使用主机的 docker.sock，因此可完全控制 Docker。

故障排除

npx @modelcontextprotocol/inspector npx tsx /Users/bogdan/devel/browser-mcp-over-cdp/src/MCP.ts