feat: add MCP Chrome extension (#325)

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.
5. 
Put either this into Claude Desktop (it does not support SSE yet hence
wrapping it or just put the URL into Cursor/VSCode)

```json
{
  "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
https://github.com/microsoft/playwright/pull/36286
- Limitations for now are everything what happens outside of the tab its
session is shared with -> `window.open` / `target=_blank`.

---------

Co-authored-by: Yury Semikhatsky <yurys@chromium.org>

src/program.ts

@@ -14,14 +14,16 @@
  * limitations under the License.
  */
 
-import { program } from 'commander';
+import type http from 'http';
+import { Option, program } from 'commander';
 // @ts-ignore
 import { startTraceViewerServer } from 'playwright-core/lib/server';
 
-import { startHttpTransport, startStdioTransport } from './transport.js';
+import { httpAddressToString, startHttpTransport, startStdioTransport } from './transport.js';
 import { resolveCLIConfig } from './config.js';
 import { Server } from './server.js';
 import { packageJSON } from './package.js';
+import { CDPBridgeServer } from './cdp-relay.js';
 
 program
     .version('Version ' + packageJSON.version)
@@ -52,13 +54,15 @@ program
     .option('--user-data-dir <path>', 'path to the user data directory. If not specified, a temporary directory will be created.')
     .option('--viewport-size <size>', 'specify browser viewport size in pixels, for example "1280, 720"')
     .option('--vision', 'Run server that uses screenshots (Aria snapshots are used by default)')
+    .addOption(new Option('--extension', 'Allow connecting to a running browser instance (Edge/Chrome only). Requires the \'Playwright MCP\' browser extension to be installed.').hideHelp())
     .action(async options => {
       const config = await resolveCLIConfig(options);
-      const server = new Server(config);
+      const server = new Server(config, { forceCdp: !!config.extension });
       server.setupExitWatchdog();
 
+      let httpServer: http.Server | undefined = undefined;
       if (config.server.port !== undefined)
-        startHttpTransport(server);
+        httpServer = await startHttpTransport(server);
       else
         await startStdioTransport(server);
 
@@ -69,6 +73,14 @@ program
         // eslint-disable-next-line no-console
         console.error('\nTrace viewer listening on ' + url);
       }
+      if (config.extension && httpServer) {
+        const wsAddress = httpAddressToString(httpServer.address()).replace(/^http/, 'ws');
+        config.browser.cdpEndpoint = `${wsAddress}${CDPBridgeServer.CDP_PATH}`;
+        const cdpRelayServer = new CDPBridgeServer(httpServer);
+        process.on('exit', () => cdpRelayServer.stop());
+        // eslint-disable-next-line no-console
+        console.error(`CDP relay server started on ${wsAddress}${CDPBridgeServer.EXTENSION_PATH} - Connect to it using the browser extension.`);
+      }
     });
 
 function semicolonSeparatedList(value: string): string[] {