内容
# Browser MCP over CDP
MCP Server 通过 Chrome DevTools Protocol (CDP) 管理 Chrome 浏览器
该项目提供了工具来导航、交互和访问浏览器标签页。浏览器通过 CDP 进行控制，因此：
1. 页面导出为全高截图、可访问性树和丰富的深层 DOM
1. 截图捕获整个页面，而不仅仅是可见的滚动区域
2. 可访问性树包含大多数相关部分
3. 丰富的深层 DOM 包含
1. 嵌套的 iframes、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](https://modelcontextprotocol.io/docs/tools/inspector#npm-package)
MCP 市场