🫣
Google ChromeのMCPサーバをClaude Codeで使用する方法
はじめに
- Google Chrome MCPを導入したので、その手順を共有します
- Google ChromeのMCPをClaude Codeに導入する記事は他にもありましたが、その記事で挫折しました
- 別の方法を試したら、比較的簡単にできたので記事にしています
Google Chromeの設定
最新のzipをダウンロード
- 下記からzipをダウンロードしてください。お願いします。
ダウンロードしたzipを展開
- ダウンロードされたzipをダブルクリック
- 新たにディレクトリが展開されるのを確認
拡張機能の読み込みと起動
- Google Chromeの拡張機能を開きましょう
- 右上の デベロッパー モード をONにする
- パッケージ化されていない拡張機能を読み込む を押下
-
先ほどを展開したディレクトリを指定する
-
すべての拡張機能 に追加されることを確認してください
- 最初はエラーというボタンは表示されません
- 拡張機能画面の 詳細 を押下して ツールバーに固定する をONにする
- ツールバーからMCPを 连接 する
- 「连接」を押下しましょう
- これは中国語で「接続する」という意味らしいです
- いい感じに起動されているのを確認します
bridgeの導入
- Claude と Chrome拡張をつなぐ橋渡しです
npm install -g mcp-chrome-bridge
Claude Codeとの接続
- お好きなスコープに追加しましょう
# プロジェクト単位で追加（お好みで -s user や -s local も可）
claude mcp add chrome-mcp -s project -- npx -y mcp-remote@latest http://127.0.0.1:12306/mcp
- 追加後は確認したらいいですね〜
claude mcp list
# 下記が出力されたらOK
# Checking MCP server health...
# chrome-mcp: npx -y mcp-remote@latest http://127.0.0.1:12306/mcp - ✓ Connected
Discussion