🎭

Claude Code(WSL)からWindows側のChromeにplaywright-mcpで繋ぐ

に公開

WSL2の networkingModemirrored にすることで、WSLから localhost でCDPのデバッグポートに接続できます。これにより、Claude CodeからWindows上のChromeをplaywright-mcpで簡単に操作できます。

networkingModeをmirroredにする

Windowsのホームディレクトリの.wslconfig[wsl2]セクションに設定を書き、wslを再起動(shutdown -> 起動)すればOKです。

[wsl2]
networkingMode=mirrored

デバッグポートが空いたChromeを起動する

Powershell等で起動してもよいのですが、以下のようなスクリプトを使ってWSLからWindows側のChromeを起動しています。remote-debugging-port を有効にして起動し、空っぽのChromeが立ち上がりコンソールにjsonが出力されます。

#!/bin/bash

CHROME_PATH="/mnt/c/Program Files/Google/Chrome/Application/chrome.exe"

"$CHROME_PATH" \
  --remote-debugging-port=9222 \
  --no-first-run \
  --no-default-browser-check \
  --disable-gpu \
  --user-data-dir=C:\\temp\\chrome-debug > /dev/null 2>&1 &

sleep 3

curl http://localhost:9222/json/version 2>/dev/null

Chrome 136より、remote-debugging-portをあけるときはデフォルトではないプロファイルにスイッチすることが必須になったので、--user-data-dirが必要になりました。今回はtempを指定していますが、専用のプロファイルがある場合はそのパスを指定します。

セキュリティを強化するためのリモート デバッグ スイッチの変更 | Blog | Chrome for Developers

Claude Codeにplaywright-mcpを登録する

--cdp-endpoint にデバッグポートのURLを指定することで、Windows側のChromeに接続させます。プロジェクトに関係なくユーザスコープで登録したいので、-s userを指定しています。

claude mcp add playwright -s user -- npx -y @playwright/mcp@latest --cdp-endpoint http://localhost:9222

実際に使ってみる

Claude Codeを起動し、 /mcp 等でmcpサーバーへの接続を確認します。「playwrightでgoogleにアクセスして」のような指示をだすと、最初に起動していた空のブラウザが操作され、Google.comが表示されます。

networkingMode=mirroredの注意点

networkingMode=mirroredを指定すると、localhostでWindowsホストとWSL内の両方のプロセスにアクセスできます。しかし、WSL内で開発用のサーバーを立てている場合は、0.0.0.0にバインドしなければWindows側からアクセスできない場合があります。

たとえば、Railsを立ち上げる場合であれば、--bind=0.0.0.0といったオプションが必要になります。ただ、dockerがマッピングしたポートはデフォルトで0.0.0.0にバインドされるようなのであまり困ることはありませんでした。WindowsからWSL内へのアクセスができないときは、この点を確認してください。

うまくいかなかったら

以下の方法でどこに問題があるかを特定できます。

  1. chromeが動いているかを確認: curl http://localhost:9222/json をWindows、WSLで実行
  2. claude --debugでデバッグログを出力する
  3. 適当なplaywrightのテストスクリプトをつくってmcpを経由せずに使ってみる

WSLのバージョン等

2025/07/09時点でほぼ最新のものを利用しています。

WSL バージョン: 2.5.9.0
カーネル バージョン: 6.6.87.2-1
WSLg バージョン: 1.0.66
MSRDC バージョン: 1.2.6074
Direct3D バージョン: 1.611.1-81528511
DXCore バージョン: 10.0.26100.1-240331-1435.ge-release
Windows バージョン: 10.0.26100.4484
GitHubで編集を提案
GMOペパボ株式会社

Discussion