获取ui dom：MCP浏览器桥
fetch-ui-dom 是一个强大的桥梁，将LLM（如Claude）连接到您的实时浏览器实例。它通过以下方式将浏览器的DOM作为一组工具公开 模型上下文协议（MCP），允许AI代理“看到”和“推理”您当前正在开发或使用的UI。
🚀 为什么要用这个？
- 零复制粘贴：停止手动检查HTML并将其复制到提示中。
- 令牌高效：用途 DOM树修剪编程（DTPP） 通过以下方式减小DOM大小 25倍+ 同时保持其与AI的完全交互。
- 弹性选择器：自动识别最佳、最稳定的选择器（如
data-cy或aria-label)因此，AI建议使用可靠的自动化代码。 - 自愈：如果选择器损坏，该工具可以诊断故障并建议最可能的更换。
🛠 工作原理
- CDP连接：该工具通过以下方式连接到Chrome Chrome DevTools协议（CDP） 在港口
9222. - DOM捕获：它标识活动选项卡并捕获完整的DOM，包括其中的内容 影子根 和 内嵌框架.
- 修剪：它递归遍历DOM，剥离非必要的标签(`
,`等等）和非功能属性以最小化令牌使用。 - MCP接口：它作为本地服务器运行，您的AI客户端（Claude Desktop等）可以与之通信。
📋 先决条件
- Node.js：v20.x或更高版本。
- 铬：必须在启用远程调试的情况下启动。
⚙️ 实施和设置
1.在Chrome中启用远程调试（可靠方法）
Chrome只允许在 最初的 进程已针对给定的配置文件启动。如果“后台应用程序”正在运行或存在重影进程，则该标志将被默默忽略。
1.1“干净启动”方法（命令行）
- 关闭所有Chrome窗口。
- 在您的终端（Windows PowerShell）中运行此命令：
# Kill ghost processes and start a fresh instance with a dedicated profile
Get-Process chrome -ErrorAction SilentlyContinue | Stop-Process -Force; `
start chrome "--remote-debugging-port=9222 --user-data-dir=$env:TEMP\chrome-debug"1.2创建专用的“开发快捷方式”
不要使用主配置文件（其中包含所有扩展和历史记录），而是创建一个专门用于调试的快捷方式。
- 右键单击“桌面”>“新建”>“快捷方式”。
- 在“位置”框中，粘贴以下内容（如果Chrome安装在其他位置，则调整路径）：
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="C:\chrome-dev-profile"
- 将其命名为“Chrome调试”。
- 使用专用
--user-data-dir确保此实例始终以新的方式启动，并且永远不会与您的主浏览器窗口冲突。
1.3创建“重置”脚本
如果事情还是卡住了，把这条线放在手边作为备用 .ps1 您桌面上的（PowerShell）文件（或使用提供的 scripts/kill-chrome.ps1 在此回购中）：
# kill-chrome.ps1
Get-Process chrome -ErrorAction SilentlyContinue | Stop-Process -Force
Write-Host "All Chrome instances killed. You can now start with the debug flag." -ForegroundColor Green流程概述： 远程调试端口是一个安全敏感功能。Chrome只允许在为给定用户数据目录启动的第一个进程上启用它。通过使用专用的配置文件文件夹，您可以保证您的调试实例始终是“第一个”进程，使连接100%可靠。
验证： 运行此命令以确保Chrome确实在端口上侦听：
Get-NetTCPConnection -LocalPort 9222 -ErrorAction SilentlyContinue*如果你看到一行有状态 Listen，连接处于活动状态。*
2.安装桥架
克隆此存储库并安装依赖项：
npm install
npm run build3.连接到您的AI客户端（例如，Claude Desktop）
将以下内容添加到您的 claude_desktop_config.json. 注： 使用绝对路径 dist 文件夹。
{
"mcpServers": {
"browser-bridge": {
"command": "node",
"args": ["C:/Users/91897/Desktop/AI/AI Projects/fetch-ui-dom/dist/server/index.js"],
"env": {
"CYPRESS_DEBUG_PORT": "9222"
}
}
}
}⚠️ 可靠性和故障排除
为什么我的连接被拒绝了？
Chrome是一个“单实例”应用程序。如果任何隐藏的后台进程（如扩展、更新或“僵尸”选项卡）正在运行 --remote-debugging-port 标志被忽略，因为现有实例“劫持”了请求。
如何永久修复它：
- 禁用后台应用程序：转到Chrome
Settings > System然后转身 关闭 *“关闭Google Chrome后继续运行后台应用程序”*这确保了关闭窗口实际上会终止进程。 - 使用专用配置文件：始终使用
--user-data-dir调试时标记，将“Dev”浏览器与主浏览器配置文件分开。这避免了冲突，使连接100%可靠。
🧰 提供的工具
| 工具 | 说明 |
|---|---|
fetch_dom | 捕获活动选项卡的修剪、令牌优化的DOM |
find_element | 使用弹性选择器层次结构定位特定元素。 |
diagnose_failure | 分析损坏的选择器，并根据相似性建议正确的选择器。 |
🧪 使用CLI进行测试
在将其与AI客户端一起使用之前，您可以直接测试逻辑：
- 获取活动DOM:
npx tsx src/cli/fetch-cli.ts - 修剪本地文件:
npx tsx src/cli/prune-cli.ts input.html - 分析选择器:
npx tsx src/cli/select-cli.ts input.html ".my-button"
📄 许可证
ISC