Chrome MCP Server：AIがブラウザを制御して操作を自動化するChrome拡張機能

クローム エムシーピー ServerはChromeベースの拡張機能です。モデルコンテキストプロトコル（MCP）プロトコルを介して、AIアシスタント（Claudeなど）がユーザーのChromeブラウザを直接制御し、複雑な自動操作、コンテンツ分析、セマンティック検索を可能にします。従来のブラウザ自動化ツール（例：Playwright）と比較して、別個のブラウザプロセスを開始する必要がなく、ユーザーのログイン状態、設定、習慣を保持したまま、ユーザーの開いているChromeブラウザを直接利用します。完全にネイティブに動作し、ユーザーのプライバシーを保護し、ストリーミングHTTP接続とクロスタブコンテキストをサポートし、20以上のユーティリティを提供します。ユーザーはChrome拡張機能をインストールしmcp-chrome-bridgeソフトウェアパッケージ。hangwinによって開発され、MITライセンスに従い、AIを使用してブラウザの効率を改善したいユーザーに適しています。

機能一覧

• ブラウザの自動化：AIアシスタントがブラウザを制御し、クリック、入力、ナビゲートなどのアクションを実行する。
• セマンティック検索：ブラウザのタブコンテンツをインテリジェントに検索するための内蔵ベクトルデータベース。
• コンテンツ分析：ウェブ情報の高速解析のためのAI駆動型テキスト抽出と類似性マッチング。
• スクリーンショットツール：ウェブページのスクリーンショットをサポートし、リソースを節約するために最適化されたbase64画像圧縮。
• ネットワークモニタリング：ネットワークリクエストをリアルタイムでモニタリングし、ウェブページの読み込みパフォーマンスを分析します。
• インタラクティブ要素の検出: div要素を含むインタラクティブ要素を識別するツールが強化されました。
• コンソール出力のキャプチャ: viachrome_consoleツールを使ってブラウザのコンソールログを取得する。
• ブックマークと履歴の管理：ユーザーのブックマークと閲覧履歴を操作するAIをサポート。
• クロスタブコンテキスト：複数のタブにまたがるデータの共有と操作が可能。
• ローカルオペレーション：データのプライバシーを確保するため、すべてのオペレーションはローカルで行われる。
• ストリーミングHTTP接続：高速レスポンスタイムで効率的な通信を提供します。
• SIMDアクセラレーション：WebAssemblyはベクトル演算を最適化し、4-8倍のスピードアップを実現します。
• スクリプトインジェクション：機能を拡張するためのJavaScriptスクリプトの動的インジェクションをサポートしています。

ヘルプの使用

設置プロセス

Chrome MCPサーバーを使用するには、以下のインストール手順を完了する必要があります。プロセス全体は簡単ですが、環境が適切に設定されていることを確認する必要があります。

1. 環境要件の検査
   • Node.jsがインストールされていることを確認してください（バージョン18.19.0以上）。
   • パッケージ・マネージャーとしてpnpmまたはnpmをインストールする。
   • ChromeまたはChromiumブラウザ（最新版推奨）をご利用ください。
2. クローム拡張機能をインストールする
   • GitHubのリリースページhttps://github.com/hangwin/mcp-chrome/releases。
   • Chrome拡張機能の最新バージョンをダウンロードする (.crx(ドキュメンテーション）。
   • クロームを開きchrome://extensions/.
   • 開発者モード」を有効にする（右上のスイッチ）。
   • ドラッグアンドドロップ.crx拡張機能ページに移動し、「拡張機能を追加」をクリックしてインストールを完了します。
3. 取り付けmcp-chrome-bridge
   • ターミナルを開き、以下のコマンドを実行してグローバルにインストールする。mcp-chrome-bridge::

     npm install -g mcp-chrome-bridge
     

     あるいはpnpmを使う：

     pnpm install -g mcp-chrome-bridge
     

   • pnpm v7+ を使用している場合、ポストインストールスクリプトはデフォルトで無効になっているので、有効にする必要があります：

     pnpm config set enable-pre-post-scripts true
     

   • 自動登録に失敗した場合は、手動で登録してください：

     mcp-chrome-bridge register
     

4. MCPクライアントの設定
   • CherryStudioを例にして、MCPクライアント設定ファイルに以下を追加するように修正します：

     {
     "mcpServers": {
     "chrome-mcp-server": {
     "type": "streamableHttp",
     "url": "http://127.0.0.1:12306/mcp"
     }
     }
     }
     

   • クライアントがstdio接続しかサポートしていない場合はmcp-chrome-bridgeインストールパスとstdio接続方法の設定（公式ドキュメント参照）CONTRIBUTING.md).
5. サービス開始
   • インストールが完了すると、Chrome拡張機能が自動的に有効になります。
   • うごきだすmcp-chrome-bridgeでサービスがリッスンするようにする。http://127.0.0.1:12306/mcp.
   • AIアシスタント（例えばクロード）は、MCPプロトコルを介してブラウザに接続することができる。

主な機能

ここでは、Chrome MCP Serverの特徴と詳しい手順をご紹介します。

ブラウザ・オートメーション

• 機能説明AIアシスタントは、MCPプロトコルを介してブラウザを制御し、クリック、入力、ナビゲートなどのアクションを実行することができます。例えば、フォームの自動入力やウェブページの一括オープンなど。
• 手続き::
  1. MCPサービスが起動しており、AIアシスタントが接続されていることを確認する。
  2. AIアシスタントのインターフェースに、「Googleを開き、キーワード『AI』を検索してください」などとコマンドを入力する。
  3. クロームは自動的にアクションを実行し、AIはページの内容を解析して結果を返す。
  4. eコマースサイトで商品を検索し、ショッピングカートに追加する」といった複雑なタスクは、コマンドで指定することができる。

セマンティックサーチ

• 機能説明内蔵のベクトルデータベースを使用して、AIはブラウザのタブの内容をインテリジェントに検索し、関連する情報をすばやく見つけることができます。
• 手続き::
  1. 検索したいコンテンツを含む複数のタブを開く。
  2. AIアシスタントで、「"AIテクノロジー "に言及しているすべてのタブを検索する」といったコマンドを入力する。
  3. AIはタブの内容を分析し、タイトルや要約を含む一致する結果を返す。
  4. AIはさらに、特定の箇所を抜き出したり、関連するタブにジャンプしたりするよう指示することができる。

内容分析

• 機能説明AIはウェブページのテキストを抽出して、類似性のマッチングや要約を行うことができる。例えば、ニュース記事の要点を分析する。
• 手続き::
  1. ニュース記事など、対象のウェブページを開く。
  2. AIアシスタントに「現在のウェブページの主な内容を要約する」などのコマンドを入力する。
  3. AIはテキストを抽出し、簡潔な要約やキーワードのリストを生成する。
  4. AIは複数のウェブページの内容を比較し、共通点や相違点を特定するよう求められることもある。

スクリーンショットツール

• 機能説明ウェブページのスクリーンショットをサポートし、リソースの使用量を減らすために最適化されたbase64画像圧縮。
• 手続き::
  1. スクリーンショットを撮りたいウェブページを開きます。
  2. AIアシスタントに「現在のウェブページの全画面画像をキャプチャする」などのコマンドを入力する。
  3. AIはスクリーンショットを生成し、base64エンコードされた画像を返す。
  4. 画像は保存することもできるし、AIに画像の内容を分析させることもできる（テキストの抽出など）。

ネットワークモニタリング

• 機能説明リアルタイムでページへのウェブリクエストを監視し、読み込みパフォーマンスの分析や問題のトラブルシューティングを行います。
• 手続き::
  1. 対象のページを開く。
  2. AIアシスタントに「現在のウェブページのウェブリクエストを監視する」などのコマンドを入力する。
  3. AIは、URL、ステータスコード、応答時間を含むリクエストのリストを返す。
  4. 読み込みの遅いリソースや異常なリクエストをさらに分析することができる。

ほら

• Chromeの拡張機能とmcp-chrome-bridge互換性の問題を避けるためのバージョンの一貫性。
• ローカルで実行する場合、メモリを消費する可能性があるため、不要なタブを閉じることをお勧めします。
• GitHubのCONTRIBUTING.mdより詳細なコンフィギュレーションを入手するか、コードを投稿してください。

アプリケーションシナリオ

1. 自動化されたオフィスワーク
   従業員はAIアシスタントを使って、レポートの自動入力、データの抽出、ウェブサイトの更新監視などのウェブタスクを一括処理できる。Chrome MCP Serverは既存のブラウザ環境を活用し、再ログインの必要性をなくすことで時間を節約できる。
2. コンテンツ・リサーチ
   研究者は、セマンティック検索とコンテンツ分析機能を使って、複数のウェブページから情報を素早く照合することができます。例えば、業界レポートや学術論文を分析し、重要なポイントを抽出して要約を作成することができます。
3. ウェブ開発とテスト
   開発者は、ネットワーク監視やコンソール出力キャプチャを使用して、ウェブパフォーマンスのデバッグやテストインタラクションの自動化を行うことができます。スクリプトインジェクションツールは、ウェブページの動的な変更をサポートし、プロトタイピングを容易にします。
4. 個人の効率向上
   ユーザーは、AIにブックマークや閲覧履歴を管理させたり、メールボックスの定期的なチェックやファイルの一括ダウンロードなどの繰り返し操作を実行させたりして、日々の作業効率を高めることができる。

品質保証

1. Chrome MCPサーバーはインターネットに接続する必要がありますか？
   完全にローカルで動作し、AIアシスタントとブラウザ間の通信は、インターネット接続を必要とせずにローカルで行われる。ただし、AIアシスタント自体は、使用するAIモデルによってはネットワーク接続を必要とする場合がある。
2. 対応するAIアシスタントは？
   現在、クロードのようなMCPプロトコルと互換性のあるAIアシスタントをサポートしている。今後、さらに多くのモデルが拡張される可能性があるので、GitHubで最新情報を確認してほしい。
3. プライバシーとセキュリティをどのように確保するのか？
   すべての操作はローカルで行われ、データはクラウドにアップロードされない。サードパーティのソースを避けるために、公式のGitHubから拡張機能をダウンロードすることをお勧めします。
4. インストールに失敗したら？
   Node.jsとpnpmのバージョンが準拠していることを確認し、Chromeの開発者モードが有効になっていることを確認する。以下を参照のこと。CONTRIBUTING.mdまたは、Issueを送信してください。