Claude Chrome MCP屏幕截图修复程序
一个Claude Code插件，在拍摄Chrome DevTools MCP屏幕截图之前自动确保最佳的视口大小，防止Retina/HiDPI显示器上出现超大图像。
问题
在Retina/HiDPI显示器上，Chrome DevTools MCP以设备像素比（通常为2倍）捕获屏幕截图。2560x1664的典型MacBook显示屏可产生 5120x3328像素屏幕截图 -太大了，无法在Claude的上下文窗口中有效使用。
此插件修复的错误消息
如果你看到这些错误，这个插件适合你：
API Error: 400 {"type":"error","error":{"type":"invalid_request_error","message":"messages.15.content.2.image.source.base64.data: At least one of the image dimensions exceed max allowed size: 8000 pixels"}}Image too large: screenshot dimensions exceed maximum allowed sizeImage was too large. Double press esc to go back and try again with a smaller image.解决方案
此插件拦截 mcp__chrome-devtools__take_screenshot 调用并提醒Claude首先将视口调整为标准大小（1280x800），生成可管理的2560x1600屏幕截图。
安装
选项1：从GitHub安装（推荐）
claude plugins install github:jrlprost/claude-chrome-mcp-screenshot-fixer选项2：从本地目录安装
claude plugins install /path/to/claude-chrome-mcp-screenshot-fixer/plugin选项3：手动安装
- 克隆此存储库
- 复制
plugin文件夹内容到您的Claude插件目录：
- macOS： ~/.claude/plugins/local/claude-chrome-mcp-screenshot-fixer/
- 重新启动Claude代码
运作原理
PreToolUse挂钩
该插件注册了一个 PreToolUse 在任何之前触发的钩子 mcp__chrome-devtools__take_screenshot 电话。这促使克劳德：
- 第一个电话
mcp__chrome-devtools__resize_page和width: 1280, height: 800 - 然后继续截图
技能参考
该插件还包括Chrome屏幕截图的最佳实践技能，包括：
- 针对不同用例的推荐视口大小
- 全屏截图指南
- 元素截图提示
推荐的视口尺寸
| 用例 | 宽度 | 高度 | 结果（2x视网膜） |
|---|---|---|---|
| 标准台式机 | 1280 | 800 | 2560x1600 |
| 较小的桌面 | 1024 | 768 | 2048x1536 |
| 手机（肖像） | 375 | 812 | 750x1624 |
| 平板电脑 | 768 | 1024 | 1536x2048 |
需求
许可证
麻省理工学院
贡献
欢迎投稿！请打开问题或PR。
关键词
克劳德代码，克劳德代码插件，chrome开发工具，mcp，截图，retina，hidpi