DOM元素截图工具

一个通过MCP服务器获取浏览器DOM元素截图的服务,适用于网页开发和调试。

  • by adtac
  • JavaScript
  • 本地部署
  • 6 星标
  • 更新于
在 GitHub 查看 adtac/domshot

使用说明

domshot

MCP服务器获取DOM元素的浏览器截图。

https://github.com/user-attachments/assets/1ab36d65-32be-42f5-b3fc-97618c2e96a7

安装

$ git clone https://github.com/adtac/domshot.git
$ claude mcp add domshot -- $PWD/domshot/mcp.sh

重启克劳德。

用法

将此粘贴到 控制台 选项卡 Chrome工具 在您要授予Claude访问权限的页面上:

const el = document.createElement("script"); el.src = "http://localhost:8000/embed.js"; document.head.appendChild(el);

然后让克劳德打电话来 get_browser_screenshot 并描述结果。

See example
$ claude
╭───────────────────────────────────────────────────╮
│ ✻ Welcome to Claude Code!                         │
│                                                   │
│   /help for help, /status for your current setup  │
│                                                   │
│   cwd: /Users/user/src/tmp/domshot                │
╰───────────────────────────────────────────────────╯


> call get_browser_screenshot tool and describe the result

⏺ I'll call the browser screenshot tool and describe what I see.

⏺ domshot:get_browser_screenshot (MCP)
  ⎿  
  ⎿  [Image]

⏺ The screenshot shows a simple red webpage with the text "RED" displayed in white text, centered on a solid
  red background.

许可证

麻省理工学院