Merajmehrabi Puppeteer MCP Server

PuppeteerをベースにしたMCPサーバーで、ブラウザ自動化機能を提供します。新しいブラウザインスタンスまたは既存のChromeウィンドウに接続でき、ナビゲーション、スクリーンショット、フォーム入力などの一般的な機能が含まれています。

ブラウザ自動化開発者ツール #ブラウザ自動化 #Puppeteer #MCPサービス #リモートデバッグ .TypeScript

rating : 2 points

downloads : 22

update time : 2025-04-28

Puppeteer MCPサーバーとは？

これはPuppeteerを通じてブラウザ自動化機能を提供するサーバーで、ブラウザを制御してウェブページのナビゲーション、要素のクリック、フォームの入力などの様々な操作を実行できます。新しいブラウザインスタンスを作成するか、既に開いているChromeウィンドウに接続する、2つの動作モードをサポートしています。

Puppeteer MCPサーバーをどのように使用するか？

JSON形式の命令を送信することでブラウザを制御でき、ナビゲーション、スクリーンショットの取得、フォームの入力などの様々な操作をサポートしています。新しいブラウザインスタンスを作成するか、既に開いているChromeウィンドウに接続することができます。

適用シーン

ウェブページの自動テスト、データ収集、フォームの自動入力、ウェブページの監視など、ブラウザ自動化が必要なシーンに適しています。特に既存のブラウザとのインタラクションが必要なワークフローに適しています。

主な機能

ブラウザ制御新しいブラウザインスタンスを起動するか、既存のChromeウィンドウに接続できます。

ページナビゲーションブラウザを指定されたURLにアクセスさせます。

スクリーンショット機能ページ全体または特定の要素のスクリーンショットを取得します。

要素インタラクションクリック、ホバー、フォームの入力などのページ要素の操作を行います。

JavaScript実行ページコンテキストでカスタムJavaScriptコードを実行します。

スマートタブ管理既存のChromeタブを自動的に接続して再利用します。

利点と制限

利点

手動でブラウザを操作することなく自動化タスクを完了できます。

既存のブラウザウィンドウに接続できるため、作業フローを中断しません。

豊富なブラウザ操作機能を提供します。

詳細なエラーログとデバッグ情報が提供されます。

スマートなタブ管理メカニズムがあります。

制限

Chromeブラウザのサポートが必要です。

既存のウィンドウに接続する場合は、特殊な起動パラメータが必要です。

一部のウェブサイトには自動化防止メカニズムがある場合があります。

ネットワーク接続が必要です。

使い方

動作モードを選択する

新しいブラウザインスタンスを使用するか、既存のChromeウィンドウに接続するかを決定します。

Chromeを準備する(既存のウィンドウを使用する場合)

Chromeブラウザをデバッグモードで起動します。

命令を送信する

MCPプロトコルを通じてJSON形式の命令を送信してブラウザを制御します。

結果を確認する

操作結果またはエラー情報を受け取ります。

使用例

ウェブページのスクリーンショット自動的にウェブページにアクセスし、トップページのスクリーンショットを取得します。

フォームの自動入力ログインフォームを自動的に入力して送信します。

データ収集JavaScriptコードを実行してページのデータを収集します。

よくある質問

既存のChromeウィンドウに接続できないのはなぜですか？

スクリーンショット機能はどの形式をサポートしていますか？

操作ログをどのように確認できますか？

複数のタブ操作をサポートしていますか？

接続の安全性をどのように保証できますか？

🚀 uppeteer MCP サーバー

このMCPサーバーは、Puppeteerを通じてブラウザの自動化機能を提供し、新しいブラウザインスタンスや既存のChromeウィンドウとの相互作用をサポートします。

✨ 主な機能

ウェブページの閲覧
スクリーンショットの撮影
要素のクリック
フォームの入力
オプションの選択
要素上でのマウスホバー
JavaScriptの実行
スマートChromeタブ管理：
- アクティブなChromeタブへの接続
- 既存のChromeインスタンスの保持
- スマート接続処理

📚 ドキュメント

プロジェクト構造

/
├── src/
│   ├── config/        # 設定モジュール
│   ├── tools/         # ツールの定義と処理プログラム
│   ├── browser/       # ブラウザ接続管理
│   ├── types/         # TypeScriptの型定義
│   ├── resources/     # リソース処理プログラム
│   └── server.ts      # サーバーの初期化
├── index.ts           # エントリーポイント
└── README.md         # ドキュメント

使用方法

標準モード

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

アクティブタブモード

既存のChromeウィンドウに接続するには：

すべての既存のChromeインスタンスを完全に閉じます。
Chromeを起動し、リモートデバッグを有効にします：
- Windows または Linux：chrome.exe --remote-debugging-port=9222
- Mac：open -a /Applications/Google\ Chrome.app --args --remote-debugging-port=9222
devtoolsFrontendUrl を含む新しいタブを開きます。