fix(extension): support multiple tabs opened by Playwright

[snomiao]

Fixes #1317

Problem

When using --extension mode, Playwright can only control the single tab that was manually selected in the extension popup. Any tab Playwright opens via tab-new (i.e. Target.createTarget) is created but immediately uncontrollable.

Root cause: _onDebuggerEvent in RelayConnection only forwards CDP events where source.tabId === this._debuggee.tabId. New tabs never have a debugger attached and their events are never forwarded — so Playwright sees them in tab-list but cannot interact with them.

Fix

relayConnection.ts

• Add createTab command: creates a Chrome tab via chrome.tabs.create(), attaches the debugger, and returns { tabId, targetInfo } to the relay
• Track Playwright-opened tabs in _playwrightTabIds: Set<number>
• Forward CDP events from all Playwright-opened tabs (tagged with tabId for relay routing)
• Route forwardCDPCommand to the correct debuggee by tabId
• attachToTab now returns tabId so the relay can build its session→tab mapping
• Add onPlaywrightTabCreated / onPlaywrightTabRemoved callbacks for the background script
• Detach debugger from all Playwright tabs on close

background.ts

• Track Playwright tab IDs; clear badges and the set when the connection closes
• Show a blue ✓ badge on Playwright-managed tabs (distinct from the green ✓ on the initial connected tab)
• Expose playwrightTabIds via getConnectionStatus
• Clean up Playwright tab IDs in _onTabRemoved

status.tsx

• Add a "Playwright managed tabs" section listing all tabs Playwright opened, clickable to focus

Demo: multi-tab control (playwright-cli)

Open two independent sessions in different workspaces simultaneously, each managing their own tabs:

# Workspace A — session ws-a
playwright-cli -s=ws-a tab-new
playwright-cli -s=ws-a goto https://example.com
playwright-cli -s=ws-a tab-new
playwright-cli -s=ws-a goto https://github.com
playwright-cli -s=ws-a tab-list

=== Session A ===
- 0: [Playwright MCP extension]
- 1: [Example Domain](https://example.com/)
- 2: (current) [GitHub](https://github.com/)

# Workspace B — session ws-b (runs concurrently, fully isolated)
playwright-cli -s=ws-b tab-new
playwright-cli -s=ws-b goto https://wikipedia.org
playwright-cli -s=ws-b tab-new
playwright-cli -s=ws-b goto https://news.ycombinator.com
playwright-cli -s=ws-b tab-list

=== Session B ===
- 0: [Playwright MCP extension]
- 1: [Wikipedia](https://www.wikipedia.org/)
- 2: (current) [Hacker News](https://news.ycombinator.com/)

Each session sees only its own tabs. Tab 1 in each was navigated externally by the user mid-test — and both sessions continued working independently without interfering.

Demo: MCP server (playwright-mcp)

Start the MCP server from a project directory, connect via HTTP, and call tools:

# Start server
PLAYWRIGHT_MCP_EXTENSION_ID=<your-extension-id> \
PLAYWRIGHT_MCP_EXTENSION_TOKEN=<your-token> \
playwright-mcp --extension --port 4321

Initialize and list available tools:

# Initialize session
curl -si -X POST http://localhost:4321/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json, text/event-stream" \
  -d '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2025-03-26","capabilities":{},"clientInfo":{"name":"test","version":"1.0"}}}'

# List tools (with session ID from above response)
curl -s -X POST http://localhost:4321/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json, text/event-stream" \
  -H "Mcp-Session-Id: <session-id>" \
  -d '{"jsonrpc":"2.0","id":2,"method":"tools/list","params":{}}'

Returns 21 registered tools:

- browser_close
- browser_resize
- browser_console_messages
- browser_handle_dialog
- browser_evaluate
- browser_file_upload
- browser_fill_form
- browser_press_key
- browser_type
- browser_navigate
- browser_navigate_back
- browser_network_requests
- browser_run_code
- browser_take_screenshot
- browser_snapshot
- browser_click
- browser_drag
- browser_hover
- browser_select_option
- browser_tabs
- browser_wait_for

For use with Claude Code or Cursor, add to your MCP config:

{
  "mcpServers": {
    "playwright": {
      "command": "playwright-mcp",
      "args": ["--extension"],
      "env": {
        "PLAYWRIGHT_MCP_EXTENSION_ID": "<your-extension-id>",
        "PLAYWRIGHT_MCP_EXTENSION_TOKEN": "<your-token>"
      }
    }
  }
}

When started from a project directory containing a .playwright/ marker (created by playwright-cli install), browser profiles and output are automatically stored in .playwright/mcp-profile/ and .playwright/mcp-output/ — no manual path config needed.

[snomiao]

@microsoft-github-policy-service agree