😊

Claude CodeとClaude DesktopにChrome MCPサーバーを追加

2025/07/27に公開

Chrome

Model Context Protocol

Claude

tech

Claude Codeを使って、ウェブアプリの画面の操作で、自分でテストファイルを作っている様子を見ていて、思い切ってChromeのMCPを導入しようと思いました。

私は、Windows11とWSLでClaude Codeを使っています。
今回は、WSLが使えないKiroでプロジェクトを作った関係もあり、Windows11で設定を行いました。

1.mcp-chrome-bridge のインストール

私は、こちらのコマンドを使って、mcp-chrome-bridgeをインストールしました。
powershellで、行いました。

npm install -g mcp-chrome-bridge
mcp-chrome-bridge register

インストールが成功した証拠

allowed_origins: [ 'chrome-extension://********/' ]

********の部分が、Extension ID です。

2.GitHubから最新のChrome拡張機能をダウンロードする

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

私は、外部のDドライブに、ダウンロードしたZipファイルを展開しました。

D:\chrome-mcp-server-0.0.6

3.Chromeの拡張機能に設定します。

Chromeの拡張機能の管理画面（chrome://extensions/）で、「デベロッパーモード」をオンにすると、以下のようなボタンが表示されます：

「パッケージ化されていない拡張機能を読み込む」（＝ Load unpacked）

「パッケージ化」（＝ Pack extension）

「更新」（＝ Update）

”パッケージ化されていない拡張機能を読み込む”を選択します。
今回読みこむフォルダは、展開したフォルダです。

D:\chrome-mcp-server-0.0.6

Chrome を完全に再起動
（バックグラウンドでも動いている場合があるため、タスクマネージャーで完全終了でもOK）
拡張機能のアイコンを Chrome ツールバーにピン留め

私は、ピン止めした拡張機能を開いたら、この画面になっていました。

接続ボタンをクリックして、接続できた状態
中国語なので、接続ボタンが分かりづらいですが、ポート番号の下のボタンをクリックしてください。

4.Claude Codeに登録

こちらのコマンドで、登録できます。

claude mcp add chrome-mcp --transport http http://127.0.0.1:12306/mcp

登録結果

PS C:> claude mcp add chrome-mcp --transport http http://127.0.0.1:12306/mcp
>>
Added HTTP MCP server chrome-mcp with URL: http://127.0.0.1:12306/mcp to local config
一部省略
PS C:> claude mcp list
>> 
Checking MCP server health...

chrome-mcp: http://127.0.0.1:12306/mcp (HTTP) - ✓ Connected

🇨🇳 拡張機能が中国語になっている理由

この MCP 拡張は主に中国の開発者（Hangwin氏など）によって作られたもので、内部の manifest.json で default_locale が zh（中国語）に設定されているため、ブラウザ上のUIが中国語になります。

方法：拡張機能の manifest.json を書き換える

chrome://extensions/ を開いて「拡張機能のフォルダ」を確認

該当フォルダの中にある manifest.json を開く

次の行を見つけて

"default_locale": "zh"

を

"default_locale": "en"

で変更できます。

フォルダを保存し、Chrome 拡張画面で「再読み込み 🔁」をクリック

👉 これで、表示が英語に変わります！

この手順は、GPT-4oが教えてくれました。

Claude Desktopにも登録しました。

久しぶりに、開発者のタグからJSONファイルで登録しました。

設定を編集のボタンをクリックすると、

"C:\Users\***\AppData\Roaming\Claude\claude_desktop_config.json"

を開くようにフォルダが開きます。
このようにmcpserverの中に、追加します。

"chrome-mcp": {
  "command": "node",
  "args": [
    "C:\\Users\\***\\AppData\\Roaming\\npm\\node_modules\\mcp-chrome-bridge\\dist\\mcp\\mcp-server-stdio.js"
  ],
  "env": {
    "APPDATA": "C:\\Users\\***\\AppData\\Roaming"
  }
}

1 MCP server failed to connect (see /mcp for info)

1 MCP server failed to connect (see /mcp for info) というエラーがclaude Codeのチャット入力の下に出ているときは、Chromeの拡張機能のconnectがクリックされていないです。
Chromeの拡張機能のconnectをクリックしてから、Claude Codeを起動してみてください。