ScreenshotOne.com - MCP Server
2025.05.06
1
TypeScript网页截图自动化测试浏览器自动化
screenshotone-mcp-server 是一个基于 Model Context Protocol (MCP) 的服务，用于连接 AI 助手与 ScreenshotOne.com API，实现网页截图功能。该服务支持多种截图方式，包括自定义视口大小、设备模拟、全页截图、元素选择等，并支持多种输出格式。
View on GitHub
Overview
基本能力
产品定位
screenshotone-mcp-server 是一个基于 Model Context Protocol (MCP) 的服务，用于连接 AI 助手与 ScreenshotOne.com API，实现网页截图功能。
核心功能
- 支持对任何 URL 进行截图
- 渲染 HTML 内容并截图
- 自定义视口大小和设备模拟
- 支持全页截图
- 使用 CSS 选择器选择特定元素
- 多种输出格式（PNG、JPEG、WebP、PDF）
- 屏蔽广告、跟踪器和 Cookie 横幅
- 注入自定义 CSS 和 JavaScript
- 控制等待行为和计时
适用场景
- 自动化测试中的网页截图
- 网页内容存档
- 网页设计审查
- 网页性能监控
工具列表
take-screenshot: 用于截取网页截图，支持多种参数配置。
常见问题解答
- 如何获取 API 密钥？ 访问 ScreenshotOne.com 创建 API 密钥。
- 如何调试截图问题？ 使用
--upload-debug参数启用调试模式。
使用教程
使用依赖
- Node.js (>=18.x): 下载
- Git: 用于版本控制
安装教程
# 克隆仓库
git clone https://github.com/mrgoonie/screenshotone-mcp-server.git
cd screenshotone-mcp-server
# 安装依赖
npm install
调试方式
# 启动开发服务器（stdio 传输）
npm run dev:server
# 启动开发服务器（HTTP 传输）
npm run dev:server:http
# 测试截图功能
npm run dev:cli -- take-screenshot --url "https://example.com" --access-key "your-access-key"
架构
项目结构
src/
├── cli/ # 命令行接口
├── controllers/ # 业务逻辑
├── resources/ # MCP 资源
├── services/ # 外部 API 交互
├── tools/ # MCP 工具定义
├── types/ # 类型定义
├── utils/ # 共享工具
└── index.ts # 入口文件
开发脚本
# 启动开发服务器
npm run dev:server
# 运行 CLI
npm run dev:cli -- [command] [args]
# 构建项目
npm run build
# 启动生产服务器
npm run start:server
测试
# 运行所有测试
npm test
# 生成测试覆盖率报告
npm run test:coverage