mcpField
A
A simple MCP Server for controlling Chrome via Puppeteer

A simple MCP Server for controlling Chrome via Puppeteer

リモート
github.com/ratiofuブラウザ自動化361 週間前に更新
リポジトリ

A simple MCP Server for controlling Chrome via Puppeteer について

Puppeteer MCP Serverは、Puppeteerを通じてChromiumを操作し、AIアシスタントによるブラウザー自動化を可能にします。リモートデバッグを有効にしたブラウザーに接続し、ページの生のDOMとコンソール出力も取得できます。

主な機能

  1. 01URLへの移動
  2. 02開いているタブURLの一覧表示
  3. 03CSSセレクターによる要素のクリック
  4. 04ページのスクリーンショット取得
  5. 05HTMLとコンソール出力の取得

活用シーン

  1. 01ウェブページの移動とクリックの自動化
  2. 02ページHTMLの確認
  3. 03ブラウザーコンソールエラーの調査

MCP 対応

stdin/stdoutのパイプ通信で、ブラウザー操作ツールをMCPクライアントに公開します。Chromiumとはリモートデバッグプロトコルで接続します。

設定

リモートサーバーはインストール不要です。クライアントを選んで設定をコピーするか、ワンクリックで導入できます。

エンドポイントhttp://localhost:7742/sse
インストールコマンドをコピー
Claude CodeTerminal
Cursor.cursor/mcp.json
VS Code.vscode/mcp.json
Claude Desktopclaude_desktop_config.json
Windsurf~/.codeium/windsurf/mcp_config.json

コマンドはターミナルで実行し、JSON は各クライアントの MCP 設定に貼り付けて再起動します。認可が必要なサーバーは初回接続時にログインを求めます。

ツール

詳細

Puppeteer MCP サーバー

インテリジェントなブラウザー管理機能を備えた Puppeteer によるブラウザー自動化機能を提供する Model Context Protocol（MCP）サーバーです。このサーバーを使うと、AI アシスタントが Chromium ブラウザーを操作し、スクリーンショットを撮影し、コンテンツを抽出して、ウェブページを操作できます。

✨ この実装がほかの実装と大きく異なる点は、ページの生の DOM コンテンツとコンソールにアクセスできることです！

MCP クライアントの設定

MCP クライアントの設定に以下を追加してください。

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": [
        "-y",
        "@ratiofu/mcp-puppeteer"
      ]
    }
  }
}

注意：

  • MCP クライアントによっては、サーバーの追加設定オプションに対応しています。高度な設定については、MCP クライアントのドキュメントを参照してください。
  • ほかの Puppeteer ベースの MCP サーバーを使用している場合は、競合を避けるために "puppeteer-ratiofu" のような固有の名前を使用してください。一度に実行する Puppeteer MCP サーバーは 1 つだけにし、サーバー名を変更した場合は、ローカルのエージェント向けガイダンスも適宜更新してください。

利用可能なツール

  • navigate：URL に移動します
  • list_tab_urls：開いているすべてのタブの URL を一覧表示します
  • click：CSS セレクターで要素をクリックします
  • take_screenshot：ページのスクリーンショットを撮影します
  • get_html：ページの HTML コンテンツを抽出します
  • get_console：ブラウザーのコンソール出力を取得します

前提条件

リモートデバッグを有効にした状態で Chromium を実行する必要があります。

macOS
open -a "Chromium" --args --remote-debugging-port=9222
Linux
chromium --remote-debugging-port=9222
Windows
chromium --remote-debugging-port=9222

動作の仕組み

MCP クライアントが必要とすると、サーバーは npx を使って自動的にダウンロードされ、実行されます。手動でインストールする必要はありません！Chromium のリモートデバッグプロトコルを使用してブラウザーを操作します。

トラブルシューティング

Chromium の接続に関する問題

エラー：「Could not connect to Chromium」

Chromium が実際に起動していることを確認してください（上記を参照）。

ブラウザーで http://localhost:9222/json を開くと、Chromium の準備ができているか確認できます。

MCP クライアントに関する問題

サーバーが応答しない場合：

  1. Chromium がデバッグポートを有効にして実行されていることを確認してください（「前提条件」セクションを参照）
  2. MCP クライアントの設定が例と一致していることを確認してください
  3. Node.js 22+ がインストールされていることを確認してください（node --version）

手動でテストする必要がある場合：

echo '{}' | npx @ratiofu/mcp-puppeteer

開発

ローカル開発の場合：

git clone https://github.com/ratiofu/mcp-puppeteer
cd mcp-puppeteer
pnpm install
pnpm run build
pnpm start
開発用スクリプト
pnpm run dev            # Auto-rebuild and restart
pnpm run test           # Run unit tests
pnpm run test:coverage  # Run tests with coverage
pnpm run quality        # Full quality pipeline (typecheck + lint + test coverage)
pnpm run lint           # Check code with Biome linter
pnpm run lint:fix       # Auto-fix linting and formatting issues
pnpm run inspector      # Test with MCP Inspector

アーキテクチャ

  • パイプトランスポート：MCP クライアントと stdin/stdout で直接通信します
  • Puppeteer Core：ブラウザーをバンドルせずにブラウザー自動化を行います
  • 自動クリーンアップ：プロセスの終了時にブラウザーリソースをクリーンアップします

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。