Chrome MCP Server

🚀 Chrome ブラウザ MCP プロトコル開発ガイド

Chrome ブラウザの MCP プロトコルを用いた開発に関するガイドです。このガイドを通じて、MCP プロトコルの機能を利用した開発を行うことができます。

🚀 クイックスタート

まずは、環境のセットアップと開発の準備を行いましょう。

インストール手順

1. 最新バージョンの Node.js（バージョン 14+）をインストールしてください。
2. このコードリポジトリをローカルにクローンします。
3. 依存関係をインストールするために、コマンド npm install を実行します。
4. サーバーを起動します。npm start を使用するか、直接 node src/index.js を実行します。

✨ 主な機能

この開発環境で利用できる主な機能を紹介します。

核心機能

• ログ収集：ブラウザのコンソールからリアルタイムのログ出力を取得します。
• ネットワークデータ監視：ページのネットワークリクエストとレスポンス情報をキャプチャします。
• 要素操作：現在選択されている要素の情報とそのコンテキストを取得します。
• スクリーンショット機能：全画面または指定領域のスクリーンショットを撮影できます。

利用可能なツール

• getConsoleLogs：コンソールログを取得します。
• getConsoleErrors：コンソールのエラー情報を取得します。
• getNetworkErrorLogs：ネットワークリクエストが失敗したログを取得します。
• getNetworkSuccessLogs：ネットワークリクエストが成功したログを取得します。
• takeScreenshot：ページのスクリーンショットを撮影します。
• getSelectedElement：現在選択されている要素の情報を取得します。
• wipeLogs：保存されているすべてのログデータを削除します。

💻 使用例

この開発環境の使用手順を説明します。

基本的な使用法

1. Chrome ブラウザに MCP プロトコルをサポートする開発ツール拡張をインストールします。
2. ローカルサーバーを起動します。デフォルトでは 3000 ポートを監視します。
3. 開発ツールは HTTP リクエストを通じてサーバーと通信します。
4. Claude AI プラグインは MCP インターフェースを通じて必要なデータを取得します。

📚 ドキュメント

ここでは、よくある問題とその解決策、および安全上の注意事項について説明します。

よくある質問と回答

問題：サーバーを起動すると「ポートが使用中」と表示される

• 解決策：
  • 3000 ポートを使用している他のプロセスがないか確認してください。
  • 環境変数 PORT=カスタムポート を設定することで、新しいポートを指定できます。

  # Windows
  set PORT=3001 && node src/index.js
  
  # Mac/Linux
  PORT=3001 node src/index.js
  

問題：サーバーを起動しても応答がない

• トラブルシューティング手順：
  1. ネットワーク設定を確認し、ファイアウォールがそのポートをブロックしていないことを確認します。
  2. コンソール出力を確認し、詳細なエラー情報を取得します。
  3. Node.js のバージョンが要件を満たしていることを確認します（14+）。

安全上の注意事項

• このサーバーは信頼できるローカルネットワーク内でのみ使用してください。
• このサービスをインターネットに公開しないでください。
• セキュリティ設定と依存関係を定期的に更新してください。

追加説明

• CORS 設定をサポートしており、指定されたドメインからの API アクセスを許可します。
• 詳細なログ記録機能を提供し、デバッグと分析を容易にします。
• 拡張可能なプラグインアーキテクチャを備えており、より多くのカスタム機能をサポートします。