Puppeteer MCP Server

🚀 Puppeteer MCP サーバードキュメント

Puppeteer は Google によって開発されたツールキットで、WebDriver プロトコルを通じて Chrome ブラウザを制御します。Puppeteer は、ナビゲーション、スクリーンショット、要素操作など、ブラウザを操作するための豊富な API を提供します。

🚀 クイックスタート

Puppeteer MCP サーバーを使用することで、Chrome ブラウザをプログラムで制御できます。以下のセクションでは、インストール方法、使用方法、その他の詳細を説明します。

✨ 主な機能

• Puppeteer を使用した Chrome ブラウザの制御
• 新しいブラウザインスタンスの起動または既存の Chrome ウィンドウへの接続
• ナビゲーション、スクリーンショット、要素操作などの機能

📦 インストール

標準インストール

以下のコマンドを実行して、リポジトリをクローンし、依存関係をインストールします。

git clone https://github.com/your-repository.git
cd puppeteer-mcp-server
npm install

開発環境の設定

1. Node.js (バージョン 14 以上) と npm がインストールされていることを確認します。
2. プロジェクトの依存関係をインストールします。

   npm install
   

3. 開発サーバーを起動します。

   npm run dev
   

本番環境のデプロイ

1. プロジェクトの依存関係をインストールします。

   npm install --production
   

2. 本番サーバーを起動します。

   npm start
   

💻 使用例

基本的な使用法

標準モード

デフォルトでは、サーバーは新しいブラウザインスタンスを起動します。

アクティブタブモード

既存の Chrome ウィンドウに接続するには、以下の手順を実行します。

1. すべての既存の Chrome インスタンスを完全に閉じます。
2. リモートデバッグを有効にして Chrome を起動します。

   # Windows
   "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222
   
   # macOS
   /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
   
   # Linux
   google-chrome --remote-debugging-port=9222
   

3. Chrome で目的の Web ページに移動します。
4. puppeteer_connect_active_tab ツールを使用して接続します。

   {
     "targetUrl": "https://example.com", // オプション: 接続するタブの URL を指定
     "debugPort": 9222 // オプション: デフォルトは 9222
   }
   

サーバーは以下のことを行います。

• リモートデバッグ機能を持つ実行中の Chrome インスタンスを検出して接続します。
• あなたの Chrome インスタンスを維持します（閉じません）。
• 拡張機能ではないタブを検索して接続します。
• 接続に失敗した場合、明確なエラーメッセージを提供します。

高度な使用法

利用可能なツール

📚 ドキュメント

セキュリティに関する注意事項

1. 本番環境では、サーバーが安全なネットワーク上で実行され、適切なセキュリティポリシーが設定されていることを確認してください。
2. コード内に機密情報を平文で保存しないでください。環境変数の使用をおすすめします。
3. 既知のセキュリティホールを防ぐために、定期的に依存関係を更新してください。

ログ記録

ログレベル

• debug：デバッグモード、詳細なログ情報を出力します。
• info：デフォルトモード、一般的な情報ログを出力します。
• warn：警告モード、潜在的な問題のログを出力します。
• error：エラーモード、重大なエラーのログを出力します。

ログ形式

{
  "timestamp": "2023-10-26T15:36:40.123Z",
  "level": "info",
  "message": "Server started on port 8080"
}

エラー処理

一般的なエラー

ブラウザインスタンスに接続できない

Error: Cannot connect to browser instance

解決策

• Chrome ブラウザが実行中であることを確認してください。
• リモートデバッグポートが正しく構成されていることを確認してください。

ページが読み込まれていない

Error: Page not loaded

解決策

• ターゲット URL が利用可能であることを確認してください。
• 待機時間を増やすか、適切なページ読み込みイベントリスナーを使用してください。

高度な機能

カスタムブラウザ設定

起動時にブラウザオプションをカスタマイズできます。

{
  "executablePath": "/path/to/chrome",
  "args": ["--incognito"],
  "userDataDir": "/path/to/user/data"
}

拡張機能のサポート

拡張機能を読み込むことで、ブラウザ機能を強化できます。

"extensions": ["/path/to/extension.crx"]

開発ガイド

コードの貢献

1. 変更用のブランチを作成します。
2. 変更をコミットしてプッシュします。
3. レビュー用のプルリクエストを作成します。

問題の報告

1. Issues ページを開きます。
2. 問題の詳細と再現手順を記述します。

📄 ライセンス

このプロジェクトは MIT ライセンスに準拠しています。詳細については、LICENSE ファイルを参照してください。

貢献者

このプロジェクトに貢献してくれた以下の貢献者に感謝します。

• 张三
• 李四
• 王五

付録

コマンドラインオプション

# サーバーを起動する
npm start -- --port 8081

# テストを実行する
npm test

# プロジェクトをパッケージ化する
npm run build

FAQ

Q：CORS 問題はどう処理すればいいですか？ A：設定でクロスオリジンリソース共有を有効にします。

"cors": {
  "enabled": true,
  "origin": "*"
}

Q：ブラウザのスクリーンショットを取得するにはどうすればいいですか？ A：page.screenshot() メソッドを使用し、出力パスと形式を指定します。

連絡先

詳細情報が必要な場合は、プロジェクトのホームページ を訪問するか、メンテナ に連絡してください。