hangwin/mcp-chromeView GitHub Homepage for Latest Official Releases

Chrome拡張機能ベースのMCPサーバー。AIアシスタントがブラウザを制御し、自動化操作、コンテンツ分析、セマンティック検索を可能にします。

MITTypeScriptmcp-chromehangwin 8.1k Last Updated: August 09, 2025

Chrome MCP Server プロジェクト詳細

プロジェクト概要

Chrome MCP Server は、Chrome 拡張機能に基づいたモデルコンテキストプロトコル（MCP）サーバーであり、Chrome ブラウザの機能を AI アシスタント（Claude など）に公開し、複雑なブラウザ自動化、コンテンツ分析、セマンティック検索機能を実現します。

プロジェクトアドレス: https://github.com/hangwin/mcp-chrome

主要な特徴

🌟 主なハイライト

  • Chrome ブラウザをスマートアシスタントに変える - AI にブラウザを制御させ、強力な AI 制御自動化ツールに変えます。
  • 日常使用しているブラウザを直接使用 - 従来のブラウザ自動化ツール（Playwright など）とは異なり、Chrome MCP Server は日常使用している Chrome ブラウザを直接使用します。
  • 既存のユーザー習慣と構成を維持 - 既存のユーザー構成、ログイン状態などを利用し、各種大規模モデルやチャットボットを真に日常のアシスタントにします。

🚀 コア機能の特徴

  • 😁 チャットボット/モデル非依存性: お好みの LLM またはチャットボットクライアントやエージェントでブラウザを自動化できます。
  • ⭐️ オリジナルのブラウザを使用: 既存のブラウザ環境（構成、ログイン状態など）とシームレスに統合します。
  • 💻 完全ローカライズ: 純粋なローカル MCP サーバーで、ユーザーのプライバシーを確保します。
  • 🚄 ストリーミング可能な HTTP: ストリーミング可能な HTTP 接続方式。
  • 🏎 クロスタブ: クロスタブコンテキストをサポート。
  • 🧠 セマンティック検索: インテリジェントなブラウザタブコンテンツ発見のためのベクトルデータベースを内蔵。
  • 🔍 スマートコンテンツ分析: AI 駆動のテキスト抽出と類似性マッチング。
  • 🌐 20+ ツール: スクリーンショット、ネットワーク監視、インタラクション操作、ブックマーク管理、閲覧履歴など、20 種類以上のツールをサポート。
  • 🚀 SIMD 加速 AI: カスタム WebAssembly SIMD 最適化により、ベクトル演算速度が 4 ～ 8 倍向上。

技術比較

比較項目 Playwright ベースの MCP サーバー Chrome 拡張機能ベースの MCP サーバー
リソース使用 ❌ 独立したブラウザプロセスを起動し、Playwright 依存関係をインストールし、ブラウザバイナリファイルなどをダウンロードする必要があります。 ✅ 独立したブラウザプロセスを起動する必要がなく、ユーザーが既に開いている Chrome ブラウザを直接利用します。
ユーザーセッションの再利用 ❌ 再ログインが必要です。 ✅ 既存のログイン状態を自動的に使用します。
ブラウザ環境 ❌ クリーンな環境にはユーザー設定がありません。 ✅ ユーザー環境を完全に保持します。
API アクセス ✅ Chrome ネイティブ API への完全なアクセス。 ✅ Chrome ネイティブ API への完全なアクセス。
起動速度 ❌ ブラウザプロセスを起動する必要があります。 ✅ 拡張機能をアクティブにするだけです。
応答速度 50-200ms プロセス間通信 ✅ より高速。

システム要件

  • Node.js 18+ および pnpm
  • Chrome/Chromium ブラウザ

インストールと設定

1. Chrome 拡張機能をダウンロード

GitHub から最新の Chrome 拡張機能をダウンロードします。

ダウンロードリンク: https://github.com/hangwin/mcp-chrome/releases

2. mcp-chrome-bridge をグローバルにインストール

npm を使用:

npm install -g mcp-chrome-bridge

pnpm を使用:

pnpm install -g mcp-chrome-bridge

3. Chrome 拡張機能をロード

ダウンロードした拡張機能ファイルを Chrome ブラウザにロードします。

4. Claude Desktop を設定

以下の設定を Claude Desktop の MCP 設定に追加します。

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

ツール分類詳細

📊 ブラウザ管理（4 つのツール）

  • get_windows_and_tabs: すべてのブラウザウィンドウとタブをリスト表示します。
  • chrome_navigate: URL にナビゲートし、ビューポートを制御します。
  • chrome_close_tabs: 特定のタブまたはウィンドウを閉じます。
  • chrome_go_back_or_forward: ブラウザのナビゲーションを制御します。

📸 スクリーンショットとビジュアル（1 つのツール）

  • chrome_screenshot: 高度なスクリーンショットキャプチャ、要素の配置、全ページサポート、カスタムサイズをサポートします。

🌐 ネットワーク監視（4 つのツール）

  • chrome_network_capture_start/stop: webRequest API ネットワークキャプチャ。
  • chrome_network_debugger_start/stop: レスポンスボディ付きのデバッガー API。
  • chrome_network_request: カスタム HTTP リクエストを送信します。

🔍 コンテンツ分析（3 つのツール）

  • search_tabs_content: AI 駆動のクロスブラウザタブセマンティック検索。
  • chrome_get_web_content: ページから HTML/テキストコンテンツを抽出します。
  • chrome_get_interactive_elements: クリック可能な要素を検索します。

🎯 インタラクション（3 つのツール）

  • chrome_click_element: CSS セレクターを使用して要素をクリックします。
  • chrome_fill_or_select: フォームに入力し、オプションを選択します。
  • chrome_keyboard: キーボード入力とショートカットをシミュレートします。

📚 データ管理（5 つのツール）

  • chrome_history: 時間フィルターを使用してブラウザ履歴を検索します。
  • chrome_bookmark_search: キーワードでブックマークを検索します。
  • chrome_bookmark_add: フォルダサポート付きの新しいブックマークを追加します。
  • chrome_bookmark_delete: ブックマークを削除します。

使用例

クエリ例

以下は、実際の使用シナリオのデモです。

  1. API 分析クエリ: "小紅書の検索 API は何ですか？レスポンス構造はどうなっていますか？"
  2. 履歴分析: "過去 1 か月の閲覧履歴を分析してください。"
  3. コンテンツ処理: "現在の Web ページを翻訳して要約してください。"
  4. スクリーンショット機能: "Hugging Face のホームページのスクリーンショットを撮ってください。"
  5. 要素キャプチャ: "Hugging Face のホームページからアイコンをキャプチャしてください。"
  6. ブックマーク管理: "現在のページをブックマークに追加し、適切なフォルダに入れてください。"
  7. タブ管理: "shadcn に関連するすべての Web ページを閉じてください。"

関連ドキュメント

  • アーキテクチャ設計ドキュメント: 詳細な技術アーキテクチャドキュメント。
  • ツール API ドキュメント: 完全なツール API ドキュメント。
  • トラブルシューティングガイド: よくある問題の解決策。

まとめ

Chrome MCP Server は革新的なプロジェクトであり、従来のブラウザ自動化ツールの制限を打ち破り、ユーザーの日常的なブラウザ環境を直接利用して、AI アシスタントに強力なブラウザ制御機能を提供します。豊富なツールセットとローカライズされた安全な設計により、ユーザーは AI を真に日常のブラウジングアシスタントとして活用し、作業効率とユーザーエクスペリエンスを大幅に向上させることができます。

Star History Chart