Zenn
Open4

Playwright MCPサーバーのChrome拡張機能を試す（いま開いているChromeをClaude Desktopで操作）

Playwright
Microsoft
Model Context Protocol
Claude
hosaka313hosaka313

What

最近mainブランチにマージされたChrome拡張機能を試してみる。

https://github.com/microsoft/playwright-mcp/pull/325

これまで、Playwright MCPツールは新しいtestモードのChromeタブを新規で開いて操作していた。 --user-data-dir=でprofileを指定することはできたが、いま開いているタブを操作できなかった。

Chrome拡張機能を使うとそれができそう。

環境

  • MacBook Air M3
  • MacOS: 15.5
  • Claude Desktop
hosaka313hosaka313

手順

$git clone https://github.com/mxschmitt/playwright-mcp && git checkout extension-drafft
$npm ci && npm run build
$node cli.js --port=4242 --extension

Chromeでchrome://extensions/を開き、「パッケージ化されていない拡張機能を読み込む」。

拡張機能のタブを閉じ、https://のページを開いてあるChromeタブで拡張機能を起動。

Bridge Server URL:にws://localhost:4242/extensionを入力。

最後にclaude_desktop_config.jsonに以下を追加。

    "playwright-extension": {
      "command": "npx", // またはフルパス
      "args": [
        "supergateway",
        "--streamableHttp",
        "http://127.0.0.1:4242/mcp"
      ]
    }

supergatewayはtransportの変換アダプタ。

https://github.com/supercorp-ai/supergateway

hosaka313hosaka313

試す

タブの確認

クリック

Gmailを開く

既存のブラウザにattachできるので認証も問題ない。ただし、新しいタブを開いてしまって一度エラーになっていた。

hosaka313hosaka313

まとめ

  • Chrome拡張機能を起動することで、ブラウザコンテキスト（今開いているタブ／セッション情報など）を維持したまま操作することができる
  • Claude Desktopで使う場合、MCPサーバーのtransportをsseから変換する必要がある