Screenshotmcp

Screenshot MCP

一个用于捕获网站截图的模型上下文协议（MCP）服务，支持整页、元素和设备尺寸等功能。

功能

• 整页截图捕获，支持自动滚动
• 针对特定元素的截图，使用 CSS 选择器
• 多种设备预设（移动设备、平板电脑、桌面设备）
• 自定义视口配置
• 高级等待条件（CSS 选择器、网络空闲、自定义延迟）
• 错误处理和验证，确保安全运行
• 速率限制，防止资源耗尽

安装

1. 克隆或下载此项目
2. 切换到目录：cd /path/to/ScreenshotMCP
3. 将 .env.example 重命名为 .env
4. 安装依赖项：npm install
5. 启动服务：npm start

在 Claude Code 中使用

你可以直接在 Claude Code CLI 或 Claude Desktop 中使用 Screenshot MCP，将截图捕获集成到开发工作流中。

用于 Claude Code CLI： 添加到你的 ~/.config/claude/mcp_servers.json：

{
  "screenshot-full-page-mcp": {
    "command": "node",
    "args": ["/path/to/screenshot-full-page-mcp/index.js"]
  }
}

或

claude mcp add screenshot-full-page-mcp node ./index.js

用于 Claude Desktop： 添加到你的 claude_desktop_config.json：

{
  "mcpServers": {
    "screenshot-full-page-mcp": {
      "command": "node",
      "args": ["/path/to/screenshot-full-page-mcp/index.js"]
    }
  }
}

在 Cursor 中使用

你可以直接在 Cursor IDE 中使用 Screenshot MCP，将截图捕获集成到开发工作流中。

1. 打开 Cursor。

2. 前往 Settings > MCP Servers。

3. 为 Screenshot MCP 添加一个新的 MCP 服务条目：

   {
     "mcpServers": {
       "screenshot-full-page-mcp": {
         "command": "node",
         "args": ["/path/to/screenshot-full-page-mcp/index.js"]
       }
     }
   }
   

4. 保存设置。

用法

配置完成后，你可以使用自然语言命令与 Claude Code 交互：

基本截图

"Take a screenshot of https://example.com"

移动设备截图

"Capture a mobile screenshot of https://myapp.com"

自定义视口

"Screenshot https://myapp.com at 1024x768 resolution"

等待元素

"Take a screenshot of https://example.com after the loading spinner disappears"

元素截图

"Capture just the navigation bar from https://example.com"

可用工具

capture_screenshot

使用高级配置选项捕获整页截图。

参数：

• url（必需）：要截图的网页 URL
• viewport：视口配置
  • preset：设备预设（mobile、tablet、desktop）
  • width：自定义宽度，单位为像素（100-5000）
  • height：自定义高度，单位为像素（100-5000）
  • deviceScaleFactor：缩放系数（0.1-3）
  • isMobile：移动设备模拟
  • hasTouch：触控支持模拟
• waitFor：等待条件
  • type：selector、function、timeout 或 networkidle
  • value：CSS 选择器、函数或超时值
  • timeout：等待超时时间，单位为毫秒
• delay：截图前的额外延迟
• waitUntil：导航完成条件

capture_element

捕获页面中特定元素的截图。

参数：

• url（必需）：网页 URL
• selector（必需）：目标元素的 CSS 选择器
• viewport：视口配置（同上）

list_device_presets

列出所有可用的设备预设及其配置。

设备预设

预设	宽度	高度	缩放	移动设备	触控
mobile	375px	667px	2x	是	是
tablet	768px	1024px	2x	是	是
desktop	1920px	1080px	1x	否	否

配置

可以在 .env 文件中设置环境变量：

# Browser Configuration
BROWSER_HEADLESS=true
BROWSER_TIMEOUT=30000
MAX_CONCURRENT_SCREENSHOTS=5

# Screenshot Defaults
DEFAULT_VIEWPORT_WIDTH=1920
DEFAULT_VIEWPORT_HEIGHT=1080
DEFAULT_WAIT_TIMEOUT=10000

# Security
RATE_LIMIT_REQUESTS=100
RATE_LIMIT_WINDOW=60000

# Debug
DEBUG=false
LOG_LEVEL=info

安全功能

• URL 验证（仅限 HTTP/HTTPS）
• CSS 选择器清理
• 并发请求速率限制
• 沙盒化浏览器执行
• 输入验证和错误处理

系统要求

• Node.js 18+
• Chrome/Chromium 浏览器（随 Puppeteer 自动安装）
• 至少 2GB RAM
• 500MB 磁盘空间

故障排除

常见问题

1. 浏览器启动失败：

   • 确保系统资源充足
   • 检查是否已正确安装 Chrome/Chromium
   • 尝试设置 BROWSER_HEADLESS=false 进行调试

2. 截图超时：

   • 增大 .env 中的 BROWSER_TIMEOUT
   • 检查目标网站是否正常加载
   • 使用合适的 waitUntil 条件

3. 内存问题：

   • 减少 MAX_CONCURRENT_SCREENSHOTS
   • 定期重启 MCP 服务
   • 监控系统内存使用情况

调试模式

在 .env 文件中设置 DEBUG=true，即可启用调试模式并记录详细日志。

贡献

1. Fork 此仓库
2. 创建功能分支
3. 进行更改
4. 如适用，添加测试
5. 提交 pull request

许可证

MIT 许可证——详情请参阅 LICENSE 文件。

支持

如有问题或疑问：

• 在 GitHub 上提出 issue
• 查看故障排除部分
• 查阅 MCP 文档