feat: add MCP Chrome extension

[mxschmitt]

Instructions:

1. git clone https://github.com/mxschmitt/playwright-mcp && git checkout extension-drafft
2. npm ci && npm run build
3. chrome://extensions in your normal Chrome, "load unpacked" and select the extension folder.
4. node cli.js --port=4242 --extension - The URL it prints at the end you can put into the extension popup.

Put either this into Claude Desktop (it does not support SSE yet hence wrapping it or just put the URL into Cursor/VSCode)

{
  "mcpServers": {
    "playwright": {
      "command": "bash",
      "args": [
        "-c",
        "source $HOME/.nvm/nvm.sh && nvm use --silent 22 && npx supergateway --streamableHttp http://127.0.0.1:4242/mcp"
      ]
    }
  }
}

Things like Take a snapshot of my browser. should now work in your Prompt Chat.

---

• SSE only for now, since we already have a http server with a port there
• Upstream "page tests" can be executed over this CDP relay via chore: introduce new extension test mode playwright#36286
• Limitations for now are everything what happens outside of the tab its session is shared with -> window.open / target=_blank.

[Skn0tt]

big change!

[pavelfeldman]

Let's structure your code a bit differently:

• As far as Playwright MCP is concerned, it will talk over CDP, no changes other than a little tweak to the config. No mentions of CDPWebSocketRelay in the context
• Empty extension that will pump JSON RPC messages into the chrome.debug associated with the tab
  • A page action that "shares" tab with the running MCP server. Ala chromecast
• A standalone web socket server that Playwright and Extension connect to.
  • This is your bridge.
  • /cdp endpoint is a full CDP, with Browser.* available
  • /extension endpoint that extension forwards chrome.debug. It literally creates chrome.debug instance in the bridge that is indistinguishable from the one in the bg page

[ruifigueira]

If message.sessionId exists, I assume it will just forward the request to chrome.debugger.sendCommand, right? I had some issues in the past with Target.setAutoAttach requests on pages with service workers:

https://github.com/ruifigueira/playwright-crx/blob/eb65d74c6bb0e9f04cc4fdff1570ac9b2c53d0fe/src/server/transport/crxTransport.ts#L89-L101

[ruifigueira]

And there was also issues with oopif that I had to address on Target.setAutoAttach:

ruifigueira/playwright-crx#20 (comment)

[yury-s]

Let's land and iterate further.