browser-automation

ブラウザー自動化（Chrome MCP Server）

Chrome ブラウザーをインテリジェントなアシスタントに変えましょう。AI がブラウザーを操作できるようになります。

このスキルを使う場面

ユーザーが次のことを求めている場合に、このスキルを使います。

• クリック、フォームへの入力、ページ移動など、ブラウザー操作を自動化したい
• ウェブページや要素のスクリーンショットを撮りたい
• ウェブページからコンテンツを抽出したい
• 閲覧履歴を検索したり、ブックマークを管理したりしたい
• ネットワークリクエストを監視したい
• 既存のログインセッションを使って、AI にウェブサイトを操作させたい

インストール

ステップ 1：ネイティブブリッジをインストールする

npm install -g mcp-chrome-bridger
# or
pnpm install -g mcp-chrome-bridger
mcp-chrome-bridger register

ステップ 2：Chrome 拡張機能をインストールする

GitHub Releases からダウンロードします。

1. mcp-chrome-extension-vX.X.X.zip をダウンロードします
2. Chrome を開きます → chrome://extensions/
3. 「デベロッパーモード」を有効にします
4. 「パッケージ化されていない拡張機能を読み込む」をクリックし、展開したフォルダーを選択します
5. 拡張機能のアイコンをクリックします → 「Connect」をクリックします

ステップ 3：MCP クライアントを設定する

MCP クライアントの設定に追加します。

ストリーミング可能な HTTP（推奨）：

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

STDIO（代替）：

{
  "mcpServers": {
    "chrome-mcp-server": {
      "command": "npx",
      "args": ["mcp-chrome-bridger", "stdio"]
    }
  }
}

利用可能なツール（20 以上）

ブラウザー管理

ツール	説明
get_windows_and_tabs	すべてのブラウザーウィンドウとタブを一覧表示します
chrome_navigate	URL に移動し、ビューポートを制御します
chrome_switch_tab	アクティブなタブを切り替えます
chrome_close_tabs	指定したタブを閉じます
chrome_go_back_or_forward	ブラウザーの履歴を移動します

スクリーンショット

ツール	説明
chrome_screenshot	ページ全体、ビューポート、または指定した要素をキャプチャします

コンテンツ分析

ツール	説明
chrome_get_web_content	ページから HTML／テキストを抽出します
chrome_get_interactive_elements	クリック可能な要素を探します
search_tabs_content	タブ間を AI で意味検索します
chrome_console	ブラウザーのコンソール出力を取得します

操作

ツール	説明
chrome_click_element	CSS セレクターで要素をクリックします
chrome_fill_or_select	フォームに入力し、オプションを選択します
chrome_keyboard	キーボード入力をシミュレートします

データ管理

ツール	説明
chrome_history	閲覧履歴を検索します
chrome_bookmark_search	ブックマークを探します
chrome_bookmark_add	ブックマークを追加します
chrome_bookmark_delete	ブックマークを削除します

ネットワーク

ツール	説明
chrome_network_capture_start/stop	ネットワークリクエストを監視します
chrome_network_request	ブラウザーの Cookie を使って HTTP リクエストを送信します

使用例

ページに移動してスクリーンショットを撮る

User: "Take a screenshot of github.com"

AI uses:
1. chrome_navigate(url: "https://github.com")
2. chrome_screenshot(fullPage: true)

フォームに入力する

User: "Login to my account on example.com"

AI uses:
1. chrome_navigate(url: "https://example.com/login")
2. chrome_fill_or_select(selector: "#email", value: "[email protected]")
3. chrome_fill_or_select(selector: "#password", value: "...")
4. chrome_click_element(selector: "button[type=submit]")

履歴を検索する

User: "Find all pages I visited about React hooks last week"

AI uses:
1. chrome_history(text: "React hooks", startTime: "1 week ago")

コンテンツを抽出する

User: "What does this page say about pricing?"

AI uses:
1. chrome_get_web_content()
2. Analyzes the extracted content

Playwright と比べた利点

機能	Playwright MCP	Chrome MCP Server
ブラウザーのインスタンス	新しいブラウザープロセス	既存の Chrome
ログインセッション	再ログインが必要	既存のセッションを使用
ユーザー設定	クリーンな環境	ブックマーク、拡張機能、設定をそのまま使用
起動時間	遅い（ブラウザーを起動）	即時（拡張機能は読み込み済み）
リソース使用量	多い	軽量

複数クライアントのサポート

複数の AI クライアントが同時に接続できます。

• Claude Code
• Cursor
• Kiro
• MCP 互換の任意のクライアント

各クライアントは、同じ Chrome ブラウザーを共有しながら、それぞれ独自のセッションを使用します。

トラブルシューティング

拡張機能が接続されない

1. chrome://extensions/ で拡張機能が有効になっていることを確認します
2. 拡張機能のアイコンをクリックし、「Connected」と表示されていることを確認します
3. 必要に応じて Chrome を再起動します

ポートがすでに使用されている

サーバーはポートの競合を自動的に処理します。問題が解決しない場合：

lsof -i :12306
kill <PID>

リソース

• GitHub：https://github.com/femto/mcp-chrome
• npm：https://www.npmjs.com/package/mcp-chrome-bridger
• リリース：https://github.com/femto/mcp-chrome/releases