Chrome Mcp Server

Name: Chrome Mcp Server
Author: hangwin

リモート

github.com/hangwinブラウザ自動化12.5k42 週間前に更新

リポジトリ

Chrome Mcp Server について

Chrome MCP Server は、Chrome 拡張機能として提供される MCP サーバーで、普段使っている Chrome ブラウザを AI アシスタントから操作できるようにします。Playwright ベースの方式と異なり、開いているブラウザの設定やログイン状態をそのまま利用し、完全にローカルで動作します。

主な機能

01既存の Chrome 環境とログイン状態を利用
02Streamable HTTP と STDIO の接続に対応
0320 種類以上のブラウザツールを提供
04タブ内容の検索に使うベクトルデータベースを内蔵
05スクリーンショット、ネットワーク監視、ブックマーク管理

活用シーン

01AI アシスタントによる現在のページの要約と図の作成
02ネットワークリクエストの取得による API レスポンスの確認
03閲覧履歴の分析とブックマークの管理

MCP 対応

本プロジェクトは MCP サーバーであり、拡張機能と mcp-chrome-bridge を通じて、Claude などの MCP クライアントにブラウザツールを公開します。

設定

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

エンドポイントhttp://172.19.176.1:12306/mcp

インストールコマンドをコピー

Claude CodeTerminalclaude mcp add --transport http chrome http://172.19.176.1:12306/mcp

Cursor.cursor/mcp.json{"mcpServers":{"chrome":{"type":"http","url":"http://172.19.176.1:12306/mcp"}}}Cursor で開く

VS Code.vscode/mcp.json{"servers":{"chrome":{"type":"http","url":"http://172.19.176.1:12306/mcp"}}}VS Code で開く

Claude Desktopclaude_desktop_config.json{"mcpServers":{"chrome":{"type":"http","url":"http://172.19.176.1:12306/mcp"}}}

Windsurf~/.codeium/windsurf/mcp_config.json{"mcpServers":{"chrome":{"serverUrl":"http://172.19.176.1:12306/mcp"}}}

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

ツール

詳細

Chrome MCP サーバー 🚀

🌟 Chrome ブラウザーをインテリジェントなアシスタントに変えましょう — AI にブラウザーを操作させ、強力な AI 制御の自動化ツールへと変身させます。

📖 ドキュメント: 英語 | 中国語

このプロジェクトはまだ初期段階にあり、集中的に開発が進められています。今後、さらに多くの機能、安定性の向上、その他の改善が予定されています。

🎯 Chrome MCP サーバーとは？

Chrome MCP サーバーは、Chrome ブラウザーの機能を Claude などの AI アシスタントに公開し、複雑なブラウザー自動化、コンテンツ分析、セマンティック検索を可能にする、Chrome 拡張機能ベースの Model Context Protocol（MCP）サーバーです。Playwright などの従来のブラウザー自動化ツールとは異なり、Chrome MCP サーバーは普段お使いの Chrome ブラウザーを直接利用します。既存のユーザー習慣、設定、ログイン状態を活用することで、さまざまな大規模モデルやチャットボットがブラウザーを操作できるようになり、日常的に使えるアシスタントを実現します。

✨ 新機能（2025/12/30）

Claude Code と Codex 向けの新しいビジュアルエディター。詳細はこちらをご覧ください：VisualEditor

✨ 主な機能

😁 チャットボット／モデルを問わず利用可能: お好みの LLM、チャットボットクライアント、またはエージェントにブラウザーを自動化させられます
⭐️ 普段お使いのブラウザーを利用: 既存のブラウザー環境（設定、ログイン状態など）とシームレスに連携します
💻 完全ローカル: ユーザーのプライバシーを守る、純粋なローカル MCP サーバーです
🚄 ストリーミング可能な HTTP: ストリーミング可能な HTTP 接続方式
🏎 複数タブ対応: タブ間でコンテキストを利用できます
🧠 セマンティック検索: インテリジェントにブラウザータブのコンテンツを見つける、内蔵ベクトルデータベース
🔍 スマートなコンテンツ分析: AI を活用したテキスト抽出と類似度マッチング
🌐 20 種類以上のツール: スクリーンショット、ネットワーク監視、インタラクティブな操作、ブックマーク管理、閲覧履歴など、20 種類以上のツールに対応
🚀 SIMD で高速化された AI: カスタム WebAssembly SIMD 最適化により、ベクトル演算を 4～8 倍高速化します

🆚 類似プロジェクトとの比較

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

🚀 クイックスタート

前提条件

Node.js >= 20.0.0 および pnpm/npm
Chrome/Chromium ブラウザー

インストール手順

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

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

mcp-chrome-bridge をグローバルにインストールします

npm

npm install -g mcp-chrome-bridge

pnpm

# Method 1: Enable scripts globally (recommended)
pnpm config set enable-pre-post-scripts true
pnpm install -g mcp-chrome-bridge

# Method 2: Manual registration (if postinstall doesn't run)
pnpm install -g mcp-chrome-bridge
mcp-chrome-bridge register

注：pnpm v7+ では、セキュリティ上の理由から postinstall スクリプトがデフォルトで無効になっています。enable-pre-post-scripts 設定によって、pre/post install スクリプトを実行するかどうかが制御されます。自動登録に失敗した場合は、上記の手動登録コマンドを使用してください。

Chrome 拡張機能を読み込みます
- Chrome を開き、chrome://extensions/ に移動します
- 「デベロッパーモード」を有効にします
- 「パッケージ化されていない拡張機能を読み込む」をクリックし、your/dowloaded/extension/folder を選択します
- 拡張機能アイコンをクリックしてプラグインを開き、接続をクリックすると MCP の設定が表示されます

MCP プロトコルクライアントでの使用方法

Streamable HTTP 接続を使用する（👍🏻 推奨）

MCP クライアントの設定に以下の設定を追加します（CherryStudio を例にします）。

Streamable HTTP 接続方式を推奨します

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

STDIO 接続を使用する（代替方法）

クライアントが stdio 接続方式のみをサポートしている場合は、次の手順を使用してください。

まず、インストールした npm パッケージの場所を確認します

# npm check method
npm list -g mcp-chrome-bridge
# pnpm check method
pnpm list -g mcp-chrome-bridge

上記のコマンドの出力が次のパスだとします：/Users/xxx/Library/pnpm/global/5 すると、最終的なパスは次のようになります：/Users/xxx/Library/pnpm/global/5/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js

以下の設定を、先ほど取得した最終的なパスに置き換えます

{
  "mcpServers": {
    "chrome-mcp-stdio": {
      "command": "npx",
      "args": [
        "node",
        "/Users/xxx/Library/pnpm/global/5/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js"
      ]
    }
  }
}

例：augment の設定：

## 🛠️ 利用可能なツール

ツール一覧：ツール一覧

📊 ブラウザー管理（6 個のツール）

get_windows_and_tabs - すべてのブラウザーウィンドウとタブを一覧表示します
chrome_navigate - URL に移動し、ビューポートを制御します
chrome_switch_tab - 現在のアクティブなタブを切り替えます
chrome_close_tabs - 特定のタブまたはウィンドウを閉じます
chrome_go_back_or_forward - ブラウザーの移動を制御します
chrome_inject_script - コンテンツスクリプトをウェブページに挿入します
chrome_send_command_to_inject_script - 挿入済みのコンテンツスクリプトにコマンドを送信します

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

chrome_screenshot - 要素の指定、ページ全体のキャプチャ、カスタムサイズに対応した高度なスクリーンショットの撮影

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

chrome_network_capture_start/stop - webRequest API によるネットワークキャプチャ
chrome_network_debugger_start/stop - レスポンスボディに対応した Debugger API
chrome_network_request - カスタム HTTP リクエストを送信します

🔍 コンテンツ分析（4 個のツール）

search_tabs_content - AI を活用した、ブラウザータブを横断するセマンティック検索
chrome_get_web_content - ページから HTML／テキストコンテンツを抽出します
chrome_get_interactive_elements - クリック可能な要素を見つけます
chrome_console - ブラウザータブのコンソール出力を取得します

🎯 操作（3 個のツール）

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

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

chrome_history - 期間で絞り込んでブラウザーの履歴を検索します
chrome_bookmark_search - キーワードでブックマークを検索します
chrome_bookmark_add - フォルダーを指定して新しいブックマークを追加します
chrome_bookmark_delete - ブックマークを削除します

🧪 使用例

AI がウェブページのコンテンツの要約を支援し、Excalidraw を自動操作して図を描画します

プロンプト：excalidraw-prompt 指示：現在のページのコンテンツを要約し、理解を助ける図を描いてください。 https://www.youtube.com/watch?v=3fBPdUBWVz0

https://github.com/user-attachments/assets/fd17209b-303d-48db-9e5e-3717141df183

画像のコンテンツを分析した後、LLM が Excalidraw を自動操作して画像を再現します

プロンプト：excalidraw-prompt|content-analize 指示：まず画像のコンテンツを分析し、その分析と画像のコンテンツを組み合わせて画像を再現してください。 https://www.youtube.com/watch?v=tEPdHZBzbZk

https://github.com/user-attachments/assets/60d12b1a-9b74-40f4-994c-95e8fa1fc8d3

AI がスクリプトを自動挿入し、ウェブページのスタイルを変更します

プロンプト：modify-web-prompt 指示：現在のページのスタイルを変更し、広告を削除してください。 https://youtu.be/twI6apRKHsk

https://github.com/user-attachments/assets/69cb561c-2e1e-4665-9411-4a3185f9643e

AI がネットワークリクエストを自動でキャプチャします

クエリ：小紅書の検索 API とレスポンスの構造を知りたいです

https://youtu.be/1hHKr7XKqnQ

https://github.com/user-attachments/assets/dc7e5cab-b9af-4b9a-97ce-18e4837318d9

AI が閲覧履歴の分析を支援します

クエリ：過去 1 か月間の閲覧履歴を分析してください

https://youtu.be/jf2UZfrR2Vk

https://github.com/user-attachments/assets/31b2e064-88c6-4adb-96d7-50748b826eae

ウェブページとの会話

クエリ：現在のウェブページを翻訳して要約してください https://youtu.be/FlJKS9UQyC8

https://github.com/user-attachments/assets/aa8ef2a1-2310-47e6-897a-769d85489396

AI がスクリーンショットを自動で撮影します（ウェブページのスクリーンショット）

query: Hugging Face のホームページのスクリーンショットを撮って https://youtu.be/7ycK6iksWi4

https://github.com/user-attachments/assets/65c6eee2-6366-493d-a3bd-2b27529ff5b3

AI がスクリーンショットを自動で撮影します（要素のスクリーンショット）

query: Hugging Face のホームページからアイコンをキャプチャして https://youtu.be/ev8VivANIrk

https://github.com/user-attachments/assets/d0cf9785-c2fe-4729-a3c5-7f2b8b96fe0c

AI がブックマークの管理を支援します

query: 現在のページをブックマークに追加して、適切なフォルダに入れて https://youtu.be/R_83arKmFTo

https://github.com/user-attachments/assets/15a7d04c-0196-4b40-84c2-bafb5c26dfe0

ウェブページを自動で閉じます

query: shadcn 関連のウェブページをすべて閉じて https://youtu.be/2wzUT6eNVg4

https://github.com/user-attachments/assets/83de4008-bb7e-494d-9b0f-98325cfea592

🤝 コントリビューション

コントリビューションを歓迎します！詳細なガイドラインについては CONTRIBUTING.md をご覧ください。

🚧 今後のロードマップ

Chrome MCP Server の今後の開発には、わくわくする計画があります。

認証
記録と再生
ワークフローの自動化
ブラウザーサポートの強化（Firefox 拡張機能）

これらの機能のいずれかにコントリビュートしたいですか？ コントリビューションガイドをチェックして、開発コミュニティに参加しましょう！

📄 ライセンス

このプロジェクトは MIT ライセンスの下でライセンスされています - 詳細は LICENSE ファイルをご覧ください。

📚 その他のドキュメント

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

Markdown 対応

ログインしてコメント

基本情報

ライセンス: MIT license
作者: hangwin
言語: node
トランスポート: stdio
掲載日: 2025年4月26日
最終更新: 42 週間前

問題を報告

MCP は初めてですか？

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

入門ガイドを読む

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