Safariのスクリーンショット

macOS 上の Safari を使用してスクリーンショットをキャプチャするための Node.js MCP サーバー。

特徴

• 特定のサイズでウィンドウのスクリーンショットをキャプチャする

• さまざまなズームレベルのサポート

• ページ読み込みの待機時間を設定可能

• 捕獲後のクリーンアップ

• ネイティブmacOSのスクリーンショット品質

Related MCP server: MCP iOS Simulator Screenshot

使用法

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

オプション

一般的なビューポートサイズ

モジュールは、次の一般的なビューポート サイズでテストされています。

• デスクトップ: 1920×1080 (フルHD)

• ノートパソコン: 1366×768

• タブレット横向き: 1024×768

• タブレット縦向き: 768×1024

• モバイル ラージ: 428×926 (iPhone 12 Pro Max)

• モバイルミディアム: 390×844 (iPhone 12 Pro)

• モバイル小: 375×667 (iPhone SE)

仕組み

1. 指定されたウィンドウサイズでSafariを開きます

2. URLを読み込み、ページの読み込みを待ちます

3. 指定された場合はズームレベルを適用します

4. ネイティブmacOSスクリーンキャプチャを使用してピクセルパーフェクトな結果を実現

5. スクリーンショットが正常にキャプチャされたことを確認します

6. Safariウィンドウをクリーンアップします

権限

このパッケージが動作するにはシステム イベント権限が必要です:

1. システム環境設定 > セキュリティとプライバシー > プライバシー > アクセシビリティを開く

2. 許可されたアプリのリストにターミナル（またはIDE）を追加します

カーソルの使用

カーソルで設定

1. オープンカーソル

2. 設定に移動し、「MCPサーバーを追加」

3. 構成ダイアログで:

   • 名前: 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

応答:zoomLevel:0.5 でキャプチャします

サポートされているパラメータ

MCP サーバーは次の概念を理解します。

• デバイス名（例：「iPhone」、「iPad」、「デスクトップ」）

• サイズ（例：「1024x768」）

• ズームレベル（例：「50% ズーム」、「2 倍ズーム」）

• 待ち時間（例：「5秒お待ちください」）

ワークフローの例

1. レスポンシブテスト

   Take screenshots of apple.com on iPhone, iPad, and desktop

2. ズームテスト

   Capture github.com at 75% zoom and 125% zoom

3. カスタムサイズ

   Screenshot example.com at 1440x900

ヒント

• スクリーンショットはデフォルトでscreenshotsディレクトリに保存されます

• デバイス名は適切な寸法を自動的に設定します

• サーバーはSafariウィンドウのクリーンアップを処理します

• 読み込みが遅いページには「X秒待つ」を使用してください

トラブルシューティング

問題が発生した場合:

1. ターミナルにアクセシビリティ権限があるか確認する

2. Safariがプライベートブラウジングモードになっていないことを確認する

3. 作業ディレクトリが書き込み可能であることを確認する

4. カーソルのコンソールでエラーメッセージを確認してください

ライセンス

マサチューセッツ工科大学

ローカルテスト

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

予想される応答:

1. Discoverは機能を返します

2. 実行すると次のようになります:

   • 進行状況をstderrに記録する

   • 結果のJSONを標準出力に返す

   • スクリーンショットを./screenshots/に保存します