Chrome MCP — インストール & ライブデモ

なぜ使うのか

主な機能

ログインした Chrome を使用します。OAuth ダンスやボット検出はありません
開いているすべてのタブにわたるセマンティック検索
完全な DOM 抽出 + スクリーンショットツール
Playwright/Puppeteer をブロックするサイトで動作します
ローカル — クラウドミドルウェアなし

ライブデモ

実際の動作

mcp-chrome.replay ▶ 準備完了

0/0

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "mcp-chrome": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "mcp-chrome": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "mcp-chrome": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mcp-chrome": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "mcp-chrome",
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json

{
  "context_servers": {
    "mcp-chrome": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "mcp-chrome-bridge"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add mcp-chrome -- npx -y mcp-chrome-bridge

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方： Chrome MCP

クロードにパスワードを渡さずに、ログインが必要なサイトを調査する

👤 サブスクリプションコンテンツを使用する研究者、アナリスト ⏱ ~20 min beginner

使うタイミング： あなたはペイウォールで保護されたサイトまたはゲート付きダッシュボードにログインしており、クロードにそれを読んでもらいたいと考えています。

前提条件

Chrome拡張機能がインストールされています — Chrome ウェブストアからインストールします。ブリッジ MCP は自動接続します
ターゲットサイトはすでに Chrome で開かれ、認証されています — まず通常のタブで手動でログインします

フロー

タブの確認

List my open Chrome tabs.✓ コピーしました

→ Tab titles + URLs for every active tab
抽出する

From the Bloomberg tab, extract the article body and the sidebar data table.✓ コピーしました

→ Structured content pulled; no "cannot access" error
クロス集計合成

Across the 3 research-provider tabs I have open, what's the consensus view on X?✓ コピーしました

→ Synthesis with per-tab citations

結果： 回答は実際の認証されたコンテンツに裏付けられており、ログインページのスクレイピングはありません。

注意点

Session expires mid-task — Extension surfaces a refresh prompt; reauth in that tab and retry

組み合わせ： メモリ

開発ビルドのフローをスクリーンショットして UI の回帰を検出する

👤 フロントエンドエンジニア ⏱ ~30 min intermediate

使うタイミング： CSS リファクタリングを出荷したばかりで、10 個のコアページの視覚的な差分が必要です。

フロー

オープンベースライン

Open my dev site pages listed in /qa/flows.json and screenshot each into /screenshots/before/.✓ コピーしました

→ Screenshots captured with filenames matching URLs
比較する

After I deploy, take fresh screenshots and diff against /screenshots/before/. Summarize visual changes per page.✓ コピーしました

→ Per-page diff report with concrete observations

結果： 実際のブラウザ環境を使用した、5 分での視覚的な回帰レポート。

注意点

Screenshots differ due to font loading — Add a sleep or wait_for_selector step before capturing

組み合わせ： ファイルシステム

組み合わせ

他のMCPと組み合わせて10倍の力を

mcp-chrome + filesystem

Save extracted pages to disk for later indexing

このタブを抽出して、/research/ai-paper-notes.md に書き込みます。✓ コピーしました

mcp-chrome + memory

Remember key findings across browsing sessions

今日読んだ内容を要約して記憶に保存します。✓ コピーしました

ツール

このMCPが提供する機能

ツール	入力	呼び出すタイミング	コスト
list_tabs	none	セッションを開始して利用可能なものを確認する	free
read_tab	tab_id: int	特定のタブからコンテンツを取得する	free
click	tab_id, selector: str	ページ要素を操作する	free
screenshot	tab_id, full_page?: bool	差分またはレビュー用のビジュアルキャプチャ	free
search_tabs	query: str	X について説明しているタブを見つける	free

コストと制限

運用コスト

APIクォータ: ローカル — 無制限
呼び出しあたりのトークン: DOM 抽出はサイズが大きくなる場合があります。 5,000～50,000 トークン
金額: Free
ヒント: 完全な DOM をプルする代わりに、セレクターで read_tab を使用してスコープ抽出を行う

セキュリティ

権限、シークレット、影響範囲

最小スコープ： chrome.tabs chrome.scripting

認証情報の保管： なし - Chrome がセッションを保持します

データ送信先： タブのコンテンツは MCP クライアントを介して LLM プロバイダーに流れます

絶対に付与しない： access to incognito without reason

拡張機能は設計により広範囲にアクセスできます。Chrome ウェブストアの公式リストからのみインストールしてください。

トラブルシューティング

よくあるエラーと対処法

拡張子が検出されませんでした

拡張機能を固定します。ブリッジバイナリには拡張ポーリングが必要です

確認： chrome://extensions shows it enabled

タブの内容が空白です

ページはシャドウ DOM を使用している可能性があります — include_shadow=true を指定して read_tab を試してください

クリックが記録されない

サイトは自動化対策 (Cloudflare など) を使用しています。最初にスクロールして遅延読み込みをトリガーしてみてください。

代替案

Chrome MCP 他との比較

代替案	代わりに使う場面	トレードオフ
chrome-devtools MCP	ユーザー自動化ではなく、devtools プロトコル (コンソール、ネットワーク、パフォーマンス) が必要な場合	DevTools MCP は UI を操作するのではなく、UI を検査します
playwright MCP	CI でヘッドレス自動化が必要な場合	認証状態なし。ボット検出されやすい

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る