AI导哈

浏览器控制服务

通过Chrome DevTools协议（CDP）管理和控制Chrome浏览器的服务，提供页面导航、交互和访问功能。

  • by dumitrubogdanmihai
  • TypeScript
  • 本地部署
  • 4 星标
  • 更新于
在 GitHub 查看 dumitrubogdanmihai/browser-mcp-over-cdp

使用说明

CDP上的浏览器MCP

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

此项目公开了用于导航、交互和访问浏览器选项卡的工具。浏览器是使用CDP的控制器，因此：

  1. 页面导出为全高屏幕截图、可访问性树和丰富的深度DOM
    1. 屏幕截图捕捉了整个页面，而不仅仅是可见的滚动部分
    2. 可访问性树包含大多数相关部分
    3. 丰富的深度DOM包含
      1. 嵌套iframe、影子DOM、伪元素等。
      2. 每个元素附加的监听器（例如onClick、onKeyDown等），包括回调函数代码（无论好坏）
      3. 每个元素相关的解析样式
  2. 该页面可通过点击、按键和输入值更新功能进行交互
  3. 该页面可通过基本的打开URL、后退、前进和重新加载功能进行导航

Prereq

  1. NodeJS 的

使用本地Chrome

  1. npm安装
  2. 将config-example.json配置放在Cloude、VS Code、Cursor中的任何位置。
    1. 关于Cloude，请参见https://modelcontextprotocol.io/quickstart/user
    2. 有关游标，请参见https://docs.cursor.com/context/model-context-protocol#configuring-mcp服务器

与远程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-exampl.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/检查器npx-tsx/Users/bogdan/devel/browser-mcp over cdp/src/mcp.ts

相关 MCP