Chrome DevTools截图优化插件

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 size

Image 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：手动安装

1. 克隆此存储库
2. 复制 plugin 文件夹内容到您的Claude插件目录：
   • macOS： ~/.claude/plugins/local/claude-chrome-mcp-screenshot-fixer/
3. 重新启动Claude代码

运作原理

PreToolUse挂钩

该插件注册了一个 PreToolUse 在任何之前触发的钩子 mcp__chrome-devtools__take_screenshot 电话。这促使克劳德：

1. 第一个电话 mcp__chrome-devtools__resize_page 和 width: 1280, height: 800
2. 然后继续截图

技能参考

该插件还包括Chrome屏幕截图的最佳实践技能，包括：

• 针对不同用例的推荐视口大小
• 全屏截图指南
• 元素截图提示

推荐的视口尺寸

需求

• 克劳德代码CLI
• Chrome DevTools MCP服务器 配置

许可证

麻省理工学院

贡献

欢迎投稿！请打开问题或PR。

关键词

克劳德代码，克劳德代码插件，chrome开发工具，mcp，截图，retina，hidpi