Safari屏幕截图
一个Node.js MCP服务器，用于在macOS上使用Safari捕获屏幕截图。
特性
- 以特定大小捕获窗口截图
- 支持不同的缩放级别
- 页面加载的可配置等待时间
- 抓获后清理
- 原生macOS屏幕截图质量
用法
import { takeScreenshot } from './screenshot.js';
// Basic window screenshot
await takeScreenshot({
url: 'https://www.apple.com',
outputPath: './screenshot.png',
width: 1024, // Optional: window width (default: 1024)
height: 768, // Optional: window height (default: 768)
waitTime: 3, // Optional: seconds to wait for load (default: 3)
zoomLevel: 1, // Optional: page zoom level (default: 1)
});
// Responsive design testing
await takeScreenshot({
url: 'https://www.apple.com',
outputPath: './mobile.png',
width: 375, // iPhone SE width
height: 667, // iPhone SE height
zoomLevel: 1,
});
// High-resolution capture
await takeScreenshot({
url: 'https://www.apple.com',
outputPath: './desktop-hd.png',
width: 1920, // Full HD width
height: 1080, // Full HD height
waitTime: 5, // Wait longer for HD content
zoomLevel: 0.8, // Zoom out slightly
});需求
- macOS
- 游猎
- Node.js>=14.0.0
- 终端需要辅助功能权限（系统首选项→ 安全与隐私→ 隐私→ 可访问性）
安装
npm install safari-screenshot选项
| 选项 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| url | string | 必填 | 要捕获的url |
| outputPath | string | auto | 保存屏幕截图的位置（默认值：./shotscreens/\[主机名\]-\[时间戳\].png） |
| width | number | 1024 | 窗口宽度（像素） |
| height | number | 768 | 窗口高度（像素） |
| waitTime | number | 3 | 等待页面加载的秒数 |
| zoomLevel | 数字 | 1 | 页面缩放级别（1=100%） |
常见视口尺寸
该模块使用以下常见视口大小进行测试：
- 桌面：1920×1080（全高清）
- 笔记本电脑：1366×768
- 平板电脑横向尺寸：1024×768
- 平板电脑人像：768×1024
- 手机大号：428×926（iPhone 12 Pro Max）
- 移动媒体：390×844（iPhone 12 Pro）
- 手机小尺寸：375×667（iPhone SE）
运作原理
- 以指定的窗口大小打开Safari浏览器
- 加载URL并等待页面加载
- 如果指定，则应用缩放级别
- 使用原生macOS屏幕截图获得像素完美的结果
- 验证屏幕截图是否已成功捕获
- 清理Safari窗口
权限
此程序包需要系统事件权限才能工作：
- 打开系统首选项>安全与隐私>隐私>辅助功能
- 将终端（或IDE）添加到允许的应用程序列表中
与光标一起使用
在游标中设置
- 打开的游标
- 转到设置，“添加MCP服务器”
- 在配置对话框中：
- 姓名： safari-screenshot - 类型： command - 命令： npx -y @rogerheykoop/mcp-safari-screenshot
或者为了当地发展：
- 命令： npx -y /path/to/mcp-safari-screenshot/server.js
示例命令
在Cursor中连接到服务器后，您可以使用以下命令：
Take a screenshot of https://apple.com at desktop size回复：将以1920×1080的分辨率拍摄
Capture https://apple.com on iPhone 12 Pro回复：将以390×844的分辨率捕获
Screenshot github.com at 50% zoom响应：将使用缩放功能进行拍摄级别：0.5
支持的参数
MCP服务器理解这些概念：
- 设备名称（例如，“iPhone”、“iPad”、“台式机”）
- 尺寸（例如，“1024x768”）
- 缩放级别（例如，“50%缩放”、“2倍缩放”）
- 等待时间（例如，“等待5秒”）
示例工作流
- 响应式测试
Take screenshots of apple.com on iPhone, iPad, and desktop- 缩放测试
Capture github.com at 75% zoom and 125% zoom- 自定义大小
Screenshot example.com at 1440x900提示
- 屏幕截图保存到
screenshots默认目录 - 设备名称会自动设置适当的尺寸
- 服务器处理Safari窗口的清理
- 对于加载速度较慢的页面，请使用“等待X秒”
故障排除
如果您遇到问题：
- 检查终端是否具有辅助功能权限
- 验证Safari未处于私人浏览模式
- 确保工作目录可写
- 检查Cursor的控制台是否有错误消息
许可证
麻省理工学院
本地测试
您可以直接测试MCP实现：
# Test discovery
echo '{"type":"discover"}' | npx -y ./server.js
# Test screenshot
echo '{"type":"execute","tool":"take_screenshot","input":"Take a screenshot of https://apple.com","requestId":"123"}' | npx -y ./server.js预期答复：
- Discover将返回功能
- 执行将：
- 将进度记录到stderr - 将结果JSON返回到stdout - 将屏幕截图保存到。/屏幕截图/