chore: mark v0.0.52 (#1256 )

chore: roll 1.58.0-alpha-2025-12-11 (#1255 )
chore: mark v0.0.51 (#1248 )
2026-01-30 06:22:03 +00:00 · 2025-12-11 11:01:20 -08:00 · 2025-12-11 10:25:03 -08:00 · 2025-12-08 08:13:35 -08:00 · 2025-12-05 13:24:54 -08:00 · 2025-12-05 12:52:12 -08:00
26 changed files with 2333 additions and 328 deletions
--- a/.github/workflows/publish-canary.yml
+++ b/.github/workflows/publish-canary.yml
@@ -1,47 +0,0 @@
-name: Publish Canary
-on:
-  schedule:
-    - cron: '0 8 * * *'
-  workflow_dispatch:
-
-jobs:
-  publish-canary:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      id-token: write # Needed for npm provenance
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 18
-          registry-url: https://registry.npmjs.org/
-
-      - name: Get current date
-        id: date
-        run: echo "date=$(date +'%Y-%m-%d')" >> $GITHUB_OUTPUT
-
-      - name: Get current version
-        id: version
-        run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
-
-      - name: Set canary version
-        id: canary-version
-        run: echo "version=${{ steps.version.outputs.version }}-alpha-${{ steps.date.outputs.date }}" >> $GITHUB_OUTPUT
-
-      - name: Update package.json version
-        run: |
-          npm version ${{ steps.canary-version.outputs.version }} --no-git-tag-version
-
-      - run: npm ci
-      - run: npx playwright install --with-deps
-      - run: npm run lint
-      - run: npm run ctest
-
-      - name: Publish to npm with next tag
-        run: npm publish --tag next --provenance
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: Reset package.json version
-        run: git checkout -- package.json
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -1,35 +1,82 @@
 name: Publish
 on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 8 * * *'
  release:
    types: [published]
+
 jobs:
-  publish-npm:
+  publish-canary-npm:
+    if: github.event.schedule || github.event_name == 'workflow_dispatch'
    runs-on: ubuntu-latest
    permissions:
      contents: read
-      id-token: write # Needed for npm provenance
+      id-token: write  # Required for OIDC npm publishing
    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
        with:
-          node-version: 18
+          node-version: 20
          registry-url: https://registry.npmjs.org/
+      # Ensure npm 11.5.1 or later is installed (for OIDC npm publishing)
+      - name: Update npm
+        run: npm install -g npm@latest
+
+      - name: Get current date
+        id: date
+        run: echo "date=$(date +'%Y-%m-%d')" >> $GITHUB_OUTPUT
+
+      - name: Get current version
+        id: version
+        run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT
+
+      - name: Set canary version
+        id: canary-version
+        run: echo "version=${{ steps.version.outputs.version }}-alpha-${{ steps.date.outputs.date }}" >> $GITHUB_OUTPUT
+
+      - name: Update package.json version
+        run: |
+          npm version ${{ steps.canary-version.outputs.version }} --no-git-tag-version
+
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npm run lint
      - run: npm run ctest
-      - run: npm publish --provenance
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

-  publish-docker:
+      - name: Publish to npm with next tag
+        run: npm publish --tag next
+
+  publish-release-npm:
+    if: github.event_name == 'release'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write  # Required for OIDC npm publishing
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+      # Ensure npm 11.5.1 or later is installed (for OIDC npm publishing)
+      - name: Update npm
+        run: npm install -g npm@latest
+      - run: npm ci
+      - run: npx playwright install --with-deps
+      - run: npm run lint
+      - run: npm run ctest
+      - run: npm publish
+
+  publish-release-docker:
+    if: github.event_name == 'release'
    runs-on: ubuntu-latest
    permissions:
      contents: read
      id-token: write # Needed for OIDC login to Azure
    environment: allow-publishing-docker-to-acr
    steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
      - name: Set up QEMU # Needed for multi-platform builds (e.g., arm64 on amd64 runner)
        uses: docker/setup-qemu-action@v3
      - name: Set up Docker Buildx # Needed for multi-platform builds
@@ -68,13 +115,14 @@ jobs:
            attach_eol_manifest $tag
          done

-  package-extension:
+  package-release-extension:
+    if: github.event_name == 'release'
    runs-on: ubuntu-latest
    permissions:
      contents: write # Needed to upload release assets
    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
        with:
          node-version: 20
          cache: 'npm'
@@ -99,3 +147,49 @@ jobs:
           GITHUB_TOKEN: ${{ github.token }}
        run: |
            gh release upload ${{github.event.release.tag_name}} ./extension/playwright-mcp-extension-${{ steps.get-version.outputs.version }}.zip
+
+  publish-release-mcp-registry:
+    if: github.event_name == 'workflow_dispatch'
+    runs-on: ubuntu-latest
+    environment: allow-mcp-registry-publishing
+    permissions:
+      contents: read
+      id-token: write # Needed for GitHub OIDC authentication
+    steps:
+      - uses: actions/checkout@v5
+      - name: Clone MCP Registry and build publisher tool
+        shell: pwsh
+        run: |
+          cd ${{ runner.temp }}
+
+          # Install Microsoft Go
+          go run github.com/microsoft/go-infra/goinstallscript@v1.1.0
+          ./go-install.ps1 -GitHubActionsPath
+
+          # Enable compliant crypto
+          $env:GOEXPERIMENT = "systemcrypto"
+
+          # Clone and build the publisher tool
+          git clone --branch "v1.3.7" https://github.com/modelcontextprotocol/registry
+          cd registry
+          go build -o ${{ runner.temp }}/mcp-publisher ./cmd/publisher
+
+          # show help for the tool to ensure it's working
+          ${{ runner.temp }}/mcp-publisher --help
+      - name: Azure Login via OIDC
+        uses: azure/login@v2
+        with:
+          client-id: ${{ secrets.AZURE_MCP_REGISTRY_CLIENT_ID }}
+          tenant-id: ${{ secrets.AZURE_MCP_REGISTRY_TENANT_ID }}
+          subscription-id: ${{ secrets.AZURE_MCP_REGISTRY_SUBSCRIPTION_ID }}
+      - name: Publish to the MCP Registry
+        shell: pwsh
+        run: |
+          # log in using Key Vault
+          ${{ runner.temp }}/mcp-publisher `
+              login dns azure-key-vault `
+              -vault "${{ secrets.KV_NAME }}" -key "${{ secrets.KV_KEY_NAME }}" `
+              -domain microsoft.com
+
+          # publish the server.json
+          ${{ runner.temp }}/mcp-publisher publish ./.mcp/server.json
--- a/.mcp/server.json
+++ b/.mcp/server.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://static.modelcontextprotocol.io/schemas/2025-10-17/server.schema.json",
+  "name": "com.microsoft/playwright-mcp",
+  "title": "Playwright",
+  "description": "Automate web browsers using accessibility trees for testing and data extraction.",
+  "repository": {
+    "url": "https://github.com/microsoft/playwright-mcp",
+    "source": "github"
+  },
+  "websiteUrl": "https://github.com/microsoft/playwright-mcp",
+  "version": "0.0.52",
+  "packages": [
+    {
+      "registryType": "npm",
+      "identifier": "@playwright/mcp",
+      "version": "0.0.52",
+      "transport": {
+        "type": "stdio"
+      }
+    }
+  ]
+}
--- a/README.md
+++ b/README.md
@@ -38,6 +38,31 @@ First, install the Playwright MCP server with your client.

 [<img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20Server&color=0098FF" alt="Install in VS Code">](https://insiders.vscode.dev/redirect?url=vscode%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540playwright%252Fmcp%2540latest%2522%255D%257D) [<img alt="Install in VS Code Insiders" src="https://img.shields.io/badge/VS_Code_Insiders-VS_Code_Insiders?style=flat-square&label=Install%20Server&color=24bfa5">](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540playwright%252Fmcp%2540latest%2522%255D%257D)

+<details>
+<summary>Amp</summary>
+
+Add via the Amp VS Code extension settings screen or by updating your settings.json file:
+
+```json
+"amp.mcpServers": {
+  "playwright": {
+    "command": "npx",
+    "args": [
+      "@playwright/mcp@latest"
+    ]
+  }
+}
+```
+
+**Amp CLI Setup:**
+
+Add via the `amp mcp add`command below
+
+```bash
+amp mcp add playwright -- npx @playwright/mcp@latest
+```
+
+</details>

 <details>
 <summary>Claude Code</summary>
@@ -59,7 +84,13 @@ Follow the MCP install [guide](https://modelcontextprotocol.io/quickstart/user),
 <details>
 <summary>Codex</summary>

-Create or edit the configuration file `~/.codex/config.toml` and add:
+Use the Codex CLI to add the Playwright MCP server:
+
+```bash
+codex mcp add playwright npx "@playwright/mcp@latest"
+```
+
+Alternatively, create or edit the configuration file `~/.codex/config.toml` and add:

 ```toml
 [mcp_servers.playwright]
@@ -71,12 +102,44 @@ For more information, see the [Codex MCP documentation](https://github.com/opena

 </details>

+<details>
+<summary>Copilot</summary>
+
+Use the Copilot CLI to interactively add the Playwright MCP server:
+
+```bash
+/mcp add
+```
+
+Alternatively, create or edit the configuration file `~/.copilot/mcp-config.json` and add:
+
+```json
+{
+  "mcpServers": {
+    "playwright": {
+      "type": "local",
+      "command": "npx",
+      "tools": [
+        "*"
+      ],
+      "args": [
+        "@playwright/mcp@latest"
+      ]
+    }
+  }
+}
+```
+
+For more information, see the [Copilot CLI documentation](https://docs.github.com/en/copilot/concepts/agents/about-copilot-cli).
+
+</details>
+
 <details>
 <summary>Cursor</summary>

 #### Click the button to install:

-[<img src="https://cursor.com/deeplink/mcp-install-dark.svg" alt="Install in Cursor">](cursor://anysphere.cursor-deeplink/mcp/install?name=Playwright&config=eyJjb21tYW5kIjoibnB4IEBwbGF5d3JpZ2h0L21jcEBsYXRlc3QifQ%3D%3D)
+[<img src="https://cursor.com/deeplink/mcp-install-dark.svg" alt="Install in Cursor">](https://cursor.com/en/install-mcp?name=Playwright&config=eyJjb21tYW5kIjoibnB4IEBwbGF5d3JpZ2h0L21jcEBsYXRlc3QifQ%3D%3D)

 #### Or install manually:

@@ -84,6 +147,21 @@ Go to `Cursor Settings` -> `MCP` -> `Add new MCP Server`. Name to your liking, u

 </details>

+<details>
+<summary>Factory</summary>
+
+Use the Factory CLI to add the Playwright MCP server:
+
+```bash
+droid mcp add playwright "npx @playwright/mcp@latest"
+```
+
+Alternatively, type `/mcp` within Factory droid to open an interactive UI for managing MCP servers.
+
+For more information, see the [Factory MCP documentation](https://docs.factory.ai/cli/configuration/mcp).
+
+</details>
+
 <details>
 <summary>Gemini CLI</summary>

@@ -103,6 +181,25 @@ Follow the MCP install [guide](https://github.com/google-gemini/gemini-cli/blob/
 Go to `Advanced settings` -> `Extensions` -> `Add custom extension`. Name to your liking, use type `STDIO`, and set the `command` to `npx @playwright/mcp`. Click "Add Extension".
 </details>

+<details>
+<summary>Kiro</summary>
+
+Follow the MCP Servers [documentation](https://kiro.dev/docs/mcp/). For example in `.kiro/settings/mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "playwright": {
+      "command": "npx",
+      "args": [
+        "@playwright/mcp@latest"
+      ]
+    }
+  }
+}
+```
+</details>
+
 <details>
 <summary>LM Studio</summary>

@@ -165,6 +262,27 @@ code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@la
 After installation, the Playwright MCP server will be available for use with your GitHub Copilot agent in VS Code.
 </details>

+<details>
+<summary>Warp</summary>
+
+Go to `Settings` -> `AI` -> `Manage MCP Servers` -> `+ Add` to [add an MCP Server](https://docs.warp.dev/knowledge-and-collaboration/mcp#adding-an-mcp-server). Use the standard config above.
+
+Alternatively, use the slash command `/add-mcp` in the Warp prompt and paste the standard config from above:
+```js
+{
+  "mcpServers": {
+    "playwright": {
+      "command": "npx",
+      "args": [
+        "@playwright/mcp@latest"
+      ]
+    }
+  }
+}
+```
+
+</details>
+
 <details>
 <summary>Windsurf</summary>

@@ -180,65 +298,108 @@ Playwright MCP server supports following arguments. They can be provided in the

 ```
 > npx @playwright/mcp@latest --help
-  --allowed-origins <origins>     semicolon-separated list of origins to allow
-                                  the browser to request. Default is to allow
-                                  all.
-  --blocked-origins <origins>     semicolon-separated list of origins to block
-                                  the browser from requesting. Blocklist is
-                                  evaluated before allowlist. If used without
-                                  the allowlist, requests not matching the
-                                  blocklist are still allowed.
-  --block-service-workers         block service workers
-  --browser <browser>             browser or chrome channel to use, possible
-                                  values: chrome, firefox, webkit, msedge.
-  --caps <caps>                   comma-separated list of additional
-                                  capabilities to enable, possible values:
-                                  vision, pdf.
-  --cdp-endpoint <endpoint>       CDP endpoint to connect to.
-  --cdp-header <headers...>       CDP headers to send with the connect request,
-                                  multiple can be specified.
-  --config <path>                 path to the configuration file.
-  --device <device>               device to emulate, for example: "iPhone 15"
-  --executable-path <path>        path to the browser executable.
-  --extension                     Connect to a running browser instance
-                                  (Edge/Chrome only). Requires the "Playwright
-                                  MCP Bridge" browser extension to be installed.
-  --headless                      run browser in headless mode, headed by
-                                  default
-  --host <host>                   host to bind server to. Default is localhost.
-                                  Use 0.0.0.0 to bind to all interfaces.
-  --ignore-https-errors           ignore https errors
-  --isolated                      keep the browser profile in memory, do not
-                                  save it to disk.
-  --image-responses <mode>        whether to send image responses to the client.
-                                  Can be "allow" or "omit", Defaults to "allow".
-  --no-sandbox                    disable the sandbox for all process types that
-                                  are normally sandboxed.
-  --output-dir <path>             path to the directory for output files.
-  --port <port>                   port to listen on for SSE transport.
-  --proxy-bypass <bypass>         comma-separated domains to bypass proxy, for
-                                  example ".com,chromium.org,.domain.com"
-  --proxy-server <proxy>          specify proxy server, for example
-                                  "http://myproxy:3128" or
-                                  "socks5://myproxy:8080"
-  --save-session                  Whether to save the Playwright MCP session
-                                  into the output directory.
-  --save-trace                    Whether to save the Playwright Trace of the
-                                  session into the output directory.
-  --secrets <path>                path to a file containing secrets in the
-                                  dotenv format
-  --storage-state <path>          path to the storage state file for isolated
-                                  sessions.
-  --timeout-action <timeout>      specify action timeout in milliseconds,
-                                  defaults to 5000ms
-  --timeout-navigation <timeout>  specify navigation timeout in milliseconds,
-                                  defaults to 60000ms
-  --user-agent <ua string>        specify user agent string
-  --user-data-dir <path>          path to the user data directory. If not
-                                  specified, a temporary directory will be
-                                  created.
-  --viewport-size <size>          specify browser viewport size in pixels, for
-                                  example "1280, 720"
+  --allowed-hosts <hosts...>            comma-separated list of hosts this
+                                        server is allowed to serve from.
+                                        Defaults to the host the server is bound
+                                        to. Pass '*' to disable the host check.
+  --allowed-origins <origins>           semicolon-separated list of TRUSTED
+                                        origins to allow the browser to request.
+                                        Default is to allow all.
+                                        Important: *does not* serve as a
+                                        security boundary and *does not* affect
+                                        redirects.
+  --blocked-origins <origins>           semicolon-separated list of origins to
+                                        block the browser from requesting.
+                                        Blocklist is evaluated before allowlist.
+                                        If used without the allowlist, requests
+                                        not matching the blocklist are still
+                                        allowed.
+                                        Important: *does not* serve as a
+                                        security boundary and *does not* affect
+                                        redirects.
+  --block-service-workers               block service workers
+  --browser <browser>                   browser or chrome channel to use,
+                                        possible values: chrome, firefox,
+                                        webkit, msedge.
+  --caps <caps>                         comma-separated list of additional
+                                        capabilities to enable, possible values:
+                                        vision, pdf.
+  --cdp-endpoint <endpoint>             CDP endpoint to connect to.
+  --cdp-header <headers...>             CDP headers to send with the connect
+                                        request, multiple can be specified.
+  --config <path>                       path to the configuration file.
+  --console-level <level>               level of console messages to return:
+                                        "error", "warning", "info", "debug".
+                                        Each level includes the messages of more
+                                        severe levels.
+  --device <device>                     device to emulate, for example: "iPhone
+                                        15"
+  --executable-path <path>              path to the browser executable.
+  --extension                           Connect to a running browser instance
+                                        (Edge/Chrome only). Requires the
+                                        "Playwright MCP Bridge" browser
+                                        extension to be installed.
+  --grant-permissions <permissions...>  List of permissions to grant to the
+                                        browser context, for example
+                                        "geolocation", "clipboard-read",
+                                        "clipboard-write".
+  --headless                            run browser in headless mode, headed by
+                                        default
+  --host <host>                         host to bind server to. Default is
+                                        localhost. Use 0.0.0.0 to bind to all
+                                        interfaces.
+  --ignore-https-errors                 ignore https errors
+  --init-page <path...>                 path to TypeScript file to evaluate on
+                                        Playwright page object
+  --init-script <path...>               path to JavaScript file to add as an
+                                        initialization script. The script will
+                                        be evaluated in every page before any of
+                                        the page's scripts. Can be specified
+                                        multiple times.
+  --isolated                            keep the browser profile in memory, do
+                                        not save it to disk.
+  --image-responses <mode>              whether to send image responses to the
+                                        client. Can be "allow" or "omit",
+                                        Defaults to "allow".
+  --no-sandbox                          disable the sandbox for all process
+                                        types that are normally sandboxed.
+  --output-dir <path>                   path to the directory for output files.
+  --port <port>                         port to listen on for SSE transport.
+  --proxy-bypass <bypass>               comma-separated domains to bypass proxy,
+                                        for example
+                                        ".com,chromium.org,.domain.com"
+  --proxy-server <proxy>                specify proxy server, for example
+                                        "http://myproxy:3128" or
+                                        "socks5://myproxy:8080"
+  --save-session                        Whether to save the Playwright MCP
+                                        session into the output directory.
+  --save-trace                          Whether to save the Playwright Trace of
+                                        the session into the output directory.
+  --save-video <size>                   Whether to save the video of the session
+                                        into the output directory. For example
+                                        "--save-video=800x600"
+  --secrets <path>                      path to a file containing secrets in the
+                                        dotenv format
+  --shared-browser-context              reuse the same browser context between
+                                        all connected HTTP clients.
+  --snapshot-mode <mode>                when taking snapshots for responses,
+                                        specifies the mode to use. Can be
+                                        "incremental", "full", or "none".
+                                        Default is incremental.
+  --storage-state <path>                path to the storage state file for
+                                        isolated sessions.
+  --test-id-attribute <attribute>       specify the attribute to use for test
+                                        ids, defaults to "data-testid"
+  --timeout-action <timeout>            specify action timeout in milliseconds,
+                                        defaults to 5000ms
+  --timeout-navigation <timeout>        specify navigation timeout in
+                                        milliseconds, defaults to 60000ms
+  --user-agent <ua string>              specify user agent string
+  --user-data-dir <path>                path to the user data directory. If not
+                                        specified, a temporary directory will be
+                                        created.
+  --viewport-size <size>                specify browser viewport size in pixels,
+                                        for example "1280x720"
 ```

 <!--- End of options generated section -->
@@ -289,6 +450,35 @@ state [here](https://playwright.dev/docs/auth).

 The Playwright MCP Chrome Extension allows you to connect to existing browser tabs and leverage your logged-in sessions and browser state. See [extension/README.md](extension/README.md) for installation and setup instructions.

+### Initial state
+
+There are multiple ways to provide the initial state to the browser context or a page.
+
+For the storage state, you can either:
+- Start with a user data directory using the `--user-data-dir` argument. This will persist all browser data between the sessions.
+- Start with a storage state file using the `--storage-state` argument. This will load cookies and local storage from the file into an isolated browser context.
+
+For the page state, you can use:
+
+- `--init-page` to point to a TypeScript file that will be evaluated on the Playwright page object. This allows you to run arbitrary code to set up the page.
+
+```ts
+// init-page.ts
+export default async ({ page }) => {
+  await page.context().grantPermissions(['geolocation']);
+  await page.context().setGeolocation({ latitude: 37.7749, longitude: -122.4194 });
+  await page.setViewportSize({ width: 1280, height: 720 });
+};
+```
+
+- `--init-script` to point to a JavaScript file that will be added as an initialization script. The script will be evaluated in every page before any of the page's scripts.
+This is useful for overriding browser APIs or setting up the environment.
+
+```js
+// init-script.js
+window.isPlaywrightMCP = true;
+```
+
 ### Configuration file

 The Playwright MCP server can be configured using a JSON configuration file. You can specify the configuration file
@@ -301,75 +491,185 @@ npx @playwright/mcp@latest --config path/to/config.json
 <details>
 <summary>Configuration file schema</summary>

+<!--- Config generated by update-readme.js -->
+
 ```typescript
 {
-  // Browser configuration
+  /**
+   * The browser to use.
+   */
  browser?: {
-    // Browser type to use (chromium, firefox, or webkit)
+    /**
+     * The type of browser to use.
+     */
    browserName?: 'chromium' | 'firefox' | 'webkit';

-    // Keep the browser profile in memory, do not save it to disk.
+    /**
+     * Keep the browser profile in memory, do not save it to disk.
+     */
    isolated?: boolean;

-    // Path to user data directory for browser profile persistence
+    /**
+     * Path to a user data directory for browser profile persistence.
+     * Temporary directory is created by default.
+     */
    userDataDir?: string;

-    // Browser launch options (see Playwright docs)
-    // @see https://playwright.dev/docs/api/class-browsertype#browser-type-launch
-    launchOptions?: {
-      channel?: string;        // Browser channel (e.g. 'chrome')
-      headless?: boolean;      // Run in headless mode
-      executablePath?: string; // Path to browser executable
-      // ... other Playwright launch options
-    };
+    /**
+     * Launch options passed to
+     * @see https://playwright.dev/docs/api/class-browsertype#browser-type-launch-persistent-context
+     *
+     * This is useful for settings options like `channel`, `headless`, `executablePath`, etc.
+     */
+    launchOptions?: playwright.LaunchOptions;

-    // Browser context options
-    // @see https://playwright.dev/docs/api/class-browser#browser-new-context
-    contextOptions?: {
-      viewport?: { width: number, height: number };
-      // ... other Playwright context options
-    };
+    /**
+     * Context options for the browser context.
+     *
+     * This is useful for settings options like `viewport`.
+     */
+    contextOptions?: playwright.BrowserContextOptions;

-    // CDP endpoint for connecting to existing browser
+    /**
+     * Chrome DevTools Protocol endpoint to connect to an existing browser instance in case of Chromium family browsers.
+     */
    cdpEndpoint?: string;

-    // Remote Playwright server endpoint
+    /**
+     * CDP headers to send with the connect request.
+     */
+    cdpHeaders?: Record<string, string>;
+
+    /**
+     * Remote endpoint to connect to an existing Playwright server.
+     */
    remoteEndpoint?: string;
+
+    /**
+     * Paths to TypeScript files to add as initialization scripts for Playwright page.
+     */
+    initPage?: string[];
+
+    /**
+     * Paths to JavaScript files to add as initialization scripts.
+     * The scripts will be evaluated in every page before any of the page's scripts.
+     */
+    initScript?: string[];
  },

-  // Server configuration
  server?: {
-    port?: number;  // Port to listen on
-    host?: string;  // Host to bind to (default: localhost)
+    /**
+     * The port to listen on for SSE or MCP transport.
+     */
+    port?: number;
+
+    /**
+     * The host to bind the server to. Default is localhost. Use 0.0.0.0 to bind to all interfaces.
+     */
+    host?: string;
+
+    /**
+     * The hosts this server is allowed to serve from. Defaults to the host server is bound to.
+     * This is not for CORS, but rather for the DNS rebinding protection.
+     */
+    allowedHosts?: string[];
  },

-  // List of additional capabilities
-  capabilities?: Array<
-    'tabs' |    // Tab management
-    'install' | // Browser installation
-    'pdf' |     // PDF generation
-    'vision' |  // Coordinate-based interactions
-  >;
+  /**
+   * List of enabled tool capabilities. Possible values:
+   *   - 'core': Core browser automation features.
+   *   - 'pdf': PDF generation and manipulation.
+   *   - 'vision': Coordinate-based interactions.
+   */
+  capabilities?: ToolCapability[];

-  // Directory for output files
+  /**
+   * Whether to save the Playwright session into the output directory.
+   */
+  saveSession?: boolean;
+
+  /**
+   * Whether to save the Playwright trace of the session into the output directory.
+   */
+  saveTrace?: boolean;
+
+  /**
+   * If specified, saves the Playwright video of the session into the output directory.
+   */
+  saveVideo?: {
+    width: number;
+    height: number;
+  };
+
+  /**
+   * Reuse the same browser context between all connected HTTP clients.
+   */
+  sharedBrowserContext?: boolean;
+
+  /**
+   * Secrets are used to prevent LLM from getting sensitive data while
+   * automating scenarios such as authentication.
+   * Prefer the browser.contextOptions.storageState over secrets file as a more secure alternative.
+   */
+  secrets?: Record<string, string>;
+
+  /**
+   * The directory to save output files.
+   */
  outputDir?: string;

-  // Network configuration
+  console?: {
+    /**
+     * The level of console messages to return. Each level includes the messages of more severe levels. Defaults to "info".
+     */
+    level?: 'error' | 'warning' | 'info' | 'debug';
+  },
+
  network?: {
-    // List of origins to allow the browser to request. Default is to allow all. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
+    /**
+     * List of origins to allow the browser to request. Default is to allow all. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
+     */
    allowedOrigins?: string[];

-    // List of origins to block the browser to request. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
+    /**
+     * List of origins to block the browser to request. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
+     */
    blockedOrigins?: string[];
  };
- 
+
  /**
-   * Whether to send image responses to the client. Can be "allow" or "omit". 
-   * Defaults to "allow".
+   * Specify the attribute to use for test ids, defaults to "data-testid".
+   */
+  testIdAttribute?: string;
+
+  timeouts?: {
+    /*
+     * Configures default action timeout: https://playwright.dev/docs/api/class-page#page-set-default-timeout. Defaults to 5000ms.
+     */
+    action?: number;
+
+    /*
+     * Configures default navigation timeout: https://playwright.dev/docs/api/class-page#page-set-default-navigation-timeout. Defaults to 60000ms.
+     */
+    navigation?: number;
+  };
+
+  /**
+   * Whether to send image responses to the client. Can be "allow", "omit", or "auto". Defaults to "auto", which sends images if the client can display them.
   */
  imageResponses?: 'allow' | 'omit';
+
+  snapshot?: {
+    /**
+     * When taking snapshots for responses, specifies the mode to use.
+     */
+    mode?: 'incremental' | 'full' | 'none';
+  }
 }
 ```
+
+<!--- End of config generated section -->
+
 </details>

 ### Standalone MCP server
@@ -409,6 +709,19 @@ And then in MCP client config, set the `url` to the HTTP endpoint:
 }
 ```

+Or If you prefer to run the container as a long-lived service instead of letting the MCP client spawn it, use:
+
+```
+docker run -d -i --rm --init --pull=always \
+  --entrypoint node \
+  --name playwright \
+  -p 8931:8931 \
+  mcr.microsoft.com/playwright/mcp \
+  cli.js --headless --browser chromium --no-sandbox --port 8931
+```
+
+The server will listen on host port **8931** and can be reached by any MCP client.  
+
 You can build the Docker image yourself.

 ```
@@ -431,7 +744,7 @@ http.createServer(async (req, res) => {
  // Creates a headless Playwright MCP server with SSE transport
  const connection = await createConnection({ browser: { launchOptions: { headless: true } } });
  const transport = new SSEServerTransport('/messages', res);
-  await connection.sever.connect(transport);
+  await connection.connect(transport);

  // ...
 });
@@ -464,14 +777,15 @@ http.createServer(async (req, res) => {
  - Title: Close browser
  - Description: Close the page
  - Parameters: None
-  - Read-only: **true**
+  - Read-only: **false**

 <!-- NOTE: This has been generated via update-readme.js -->

 - **browser_console_messages**
  - Title: Get console messages
  - Description: Returns all console messages
-  - Parameters: None
+  - Parameters:
+    - `level` (string, optional): Level of the console messages to return. Each level includes the messages of more severe levels. Defaults to "info".
  - Read-only: **true**

 <!-- NOTE: This has been generated via update-readme.js -->
@@ -503,7 +817,7 @@ http.createServer(async (req, res) => {
  - Title: Upload files
  - Description: Upload one or multiple files
  - Parameters:
-    - `paths` (array): The absolute paths to the files to upload. Can be a single file or multiple files.
+    - `paths` (array, optional): The absolute paths to the files to upload. Can be single file or multiple files. If omitted, file chooser is cancelled.
  - Read-only: **false**

 <!-- NOTE: This has been generated via update-readme.js -->
@@ -533,7 +847,7 @@ http.createServer(async (req, res) => {
  - Parameters:
    - `element` (string): Human-readable element description used to obtain permission to interact with the element
    - `ref` (string): Exact target element reference from the page snapshot
-  - Read-only: **true**
+  - Read-only: **false**

 <!-- NOTE: This has been generated via update-readme.js -->

@@ -550,14 +864,15 @@ http.createServer(async (req, res) => {
  - Title: Go back
  - Description: Go back to the previous page
  - Parameters: None
-  - Read-only: **true**
+  - Read-only: **false**

 <!-- NOTE: This has been generated via update-readme.js -->

 - **browser_network_requests**
  - Title: List network requests
  - Description: Returns all network requests since loading the page
-  - Parameters: None
+  - Parameters:
+    - `includeStatic` (boolean, optional): Whether to include successful static resources like images, fonts, scripts, etc. Defaults to false.
  - Read-only: **true**

 <!-- NOTE: This has been generated via update-readme.js -->
@@ -577,7 +892,16 @@ http.createServer(async (req, res) => {
  - Parameters:
    - `width` (number): Width of the browser window
    - `height` (number): Height of the browser window
-  - Read-only: **true**
+  - Read-only: **false**
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_run_code**
+  - Title: Run Playwright code
+  - Description: Run Playwright code snippet
+  - Parameters:
+    - `code` (string): A JavaScript function containing Playwright code to execute. It will be invoked with a single argument, page, which you can use for any page interaction. For example: `async (page) => { await page.getByRole('button', { name: 'Submit' }).click(); return await page.title(); }`
+  - Read-only: **false**

 <!-- NOTE: This has been generated via update-readme.js -->

@@ -595,7 +919,8 @@ http.createServer(async (req, res) => {
 - **browser_snapshot**
  - Title: Page snapshot
  - Description: Capture accessibility snapshot of the current page, this is better than screenshot
-  - Parameters: None
+  - Parameters:
+    - `filename` (string, optional): Save snapshot to markdown file instead of returning it in the response.
  - Read-only: **true**

 <!-- NOTE: This has been generated via update-readme.js -->
@@ -605,7 +930,7 @@ http.createServer(async (req, res) => {
  - Description: Take a screenshot of the current page. You can't perform actions based on the screenshot, use browser_snapshot for actions.
  - Parameters:
    - `type` (string, optional): Image format for the screenshot. Default is png.
-    - `filename` (string, optional): File name to save the screenshot to. Defaults to `page-{timestamp}.{png|jpeg}` if not specified.
+    - `filename` (string, optional): File name to save the screenshot to. Defaults to `page-{timestamp}.{png|jpeg}` if not specified. Prefer relative file names to stay within the output directory.
    - `element` (string, optional): Human-readable element description used to obtain permission to screenshot the element. If not provided, the screenshot will be taken of viewport. If element is provided, ref must be provided too.
    - `ref` (string, optional): Exact target element reference from the page snapshot. If not provided, the screenshot will be taken of viewport. If ref is provided, element must be provided too.
    - `fullPage` (boolean, optional): When true, takes a screenshot of the full scrollable page, instead of the currently visible viewport. Cannot be used with element screenshots.
@@ -633,7 +958,7 @@ http.createServer(async (req, res) => {
    - `time` (number, optional): The time to wait in seconds
    - `text` (string, optional): The text to wait for
    - `textGone` (string, optional): The text to wait for to disappear
-  - Read-only: **true**
+  - Read-only: **false**

 </details>

@@ -701,7 +1026,7 @@ http.createServer(async (req, res) => {
    - `element` (string): Human-readable element description used to obtain permission to interact with the element
    - `x` (number): X coordinate
    - `y` (number): Y coordinate
-  - Read-only: **true**
+  - Read-only: **false**

 </details>

@@ -714,13 +1039,23 @@ http.createServer(async (req, res) => {
  - Title: Save as PDF
  - Description: Save page as PDF
  - Parameters:
-    - `filename` (string, optional): File name to save the pdf to. Defaults to `page-{timestamp}.pdf` if not specified.
+    - `filename` (string, optional): File name to save the pdf to. Defaults to `page-{timestamp}.pdf` if not specified. Prefer relative file names to stay within the output directory.
  - Read-only: **true**

 </details>

 <details>
-<summary><b>Verify (opt-in via --caps=verify)</b></summary>
+<summary><b>Test assertions (opt-in via --caps=testing)</b></summary>
+
+<!-- NOTE: This has been generated via update-readme.js -->
+
+- **browser_generate_locator**
+  - Title: Create locator for element
+  - Description: Generate locator for the given element to use in tests
+  - Parameters:
+    - `element` (string): Human-readable element description used to obtain permission to interact with the element
+    - `ref` (string): Exact target element reference from the page snapshot
+  - Read-only: **true**

 <!-- NOTE: This has been generated via update-readme.js -->

@@ -730,7 +1065,7 @@ http.createServer(async (req, res) => {
  - Parameters:
    - `role` (string): ROLE of the element. Can be found in the snapshot like this: `- {ROLE} "Accessible Name":`
    - `accessibleName` (string): ACCESSIBLE_NAME of the element. Can be found in the snapshot like this: `- role "{ACCESSIBLE_NAME}"`
-  - Read-only: **true**
+  - Read-only: **false**

 <!-- NOTE: This has been generated via update-readme.js -->

@@ -741,7 +1076,7 @@ http.createServer(async (req, res) => {
    - `element` (string): Human-readable list description
    - `ref` (string): Exact target element reference that points to the list
    - `items` (array): Items to verify
-  - Read-only: **true**
+  - Read-only: **false**

 <!-- NOTE: This has been generated via update-readme.js -->

@@ -750,7 +1085,7 @@ http.createServer(async (req, res) => {
  - Description: Verify text is visible on the page. Prefer browser_verify_element_visible if possible.
  - Parameters:
    - `text` (string): TEXT to verify. Can be found in the snapshot like this: `- role "Accessible Name": {TEXT}` or like this: `- text: {TEXT}`
-  - Read-only: **true**
+  - Read-only: **false**

 <!-- NOTE: This has been generated via update-readme.js -->

@@ -762,7 +1097,7 @@ http.createServer(async (req, res) => {
    - `element` (string): Human-readable element description
    - `ref` (string): Exact target element reference that points to the element
    - `value` (string): Value to verify. For checkbox, use "true" or "false".
-  - Read-only: **true**
+  - Read-only: **false**

 </details>

--- a/config.d.ts
+++ b/config.d.ts
@@ -16,7 +16,7 @@

 import type * as playwright from 'playwright';

-export type ToolCapability = 'core' | 'core-tabs' | 'core-install' | 'vision' | 'pdf' | 'verify';
+export type ToolCapability = 'core' | 'core-tabs' | 'core-install' | 'vision' | 'pdf' | 'testing' | 'tracing';

 export type Config = {
  /**
@@ -68,6 +68,17 @@ export type Config = {
     * Remote endpoint to connect to an existing Playwright server.
     */
    remoteEndpoint?: string;
+
+    /**
+     * Paths to TypeScript files to add as initialization scripts for Playwright page.
+     */
+    initPage?: string[];
+
+    /**
+     * Paths to JavaScript files to add as initialization scripts.
+     * The scripts will be evaluated in every page before any of the page's scripts.
+     */
+    initScript?: string[];
  },

  server?: {
@@ -80,6 +91,12 @@ export type Config = {
     * The host to bind the server to. Default is localhost. Use 0.0.0.0 to bind to all interfaces.
     */
    host?: string;
+
+    /**
+     * The hosts this server is allowed to serve from. Defaults to the host server is bound to.
+     * This is not for CORS, but rather for the DNS rebinding protection.
+     */
+    allowedHosts?: string[];
  },

  /**
@@ -100,6 +117,19 @@ export type Config = {
   */
  saveTrace?: boolean;

+  /**
+   * If specified, saves the Playwright video of the session into the output directory.
+   */
+  saveVideo?: {
+    width: number;
+    height: number;
+  };
+
+  /**
+   * Reuse the same browser context between all connected HTTP clients.
+   */
+  sharedBrowserContext?: boolean;
+
  /**
   * Secrets are used to prevent LLM from getting sensitive data while
   * automating scenarios such as authentication.
@@ -112,6 +142,13 @@ export type Config = {
   */
  outputDir?: string;

+  console?: {
+    /**
+     * The level of console messages to return. Each level includes the messages of more severe levels. Defaults to "info".
+     */
+    level?: 'error' | 'warning' | 'info' | 'debug';
+  },
+
  network?: {
    /**
     * List of origins to allow the browser to request. Default is to allow all. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked.
@@ -124,6 +161,11 @@ export type Config = {
    blockedOrigins?: string[];
  };

+  /**
+   * Specify the attribute to use for test ids, defaults to "data-testid".
+   */
+  testIdAttribute?: string;
+
  timeouts?: {
    /*
     * Configures default action timeout: https://playwright.dev/docs/api/class-page#page-set-default-timeout. Defaults to 5000ms.
@@ -140,4 +182,11 @@ export type Config = {
   * Whether to send image responses to the client. Can be "allow", "omit", or "auto". Defaults to "auto", which sends images if the client can display them.
   */
  imageResponses?: 'allow' | 'omit';
+
+  snapshot?: {
+    /**
+     * When taking snapshots for responses, specifies the mode to use.
+     */
+    mode?: 'incremental' | 'full' | 'none';
+  }
 };
--- a/extension/README.md
+++ b/extension/README.md
@@ -45,4 +45,33 @@ Configure Playwright MCP server to connect to the browser using the extension by

 When the LLM interacts with the browser for the first time, it will load a page where you can select which browser tab the LLM will connect to. This allows you to control which specific page the AI assistant will interact with during the session.

+### Bypassing the Connection Approval Dialog
+
+By default, you'll need to approve each connection when the MCP server tries to connect to your browser. To bypass this approval dialog and allow automatic connections, you can use an authentication token.
+
+#### Using Your Unique Authentication Token
+
+1. After installing the extension, click on the extension icon or navigate to the extension's status page
+2. Copy the `PLAYWRIGHT_MCP_EXTENSION_TOKEN` value displayed in the extension UI
+3. Add it to your MCP server configuration:
+
+```json
+{
+  "mcpServers": {
+    "playwright-extension": {
+      "command": "npx",
+      "args": [
+        "@playwright/mcp@latest",
+        "--extension"
+      ],
+      "env": {
+        "PLAYWRIGHT_MCP_EXTENSION_TOKEN": "your-token-here"
+      }
+    }
+  }
+}
+```
+
+This token is unique to your browser profile and provides secure authentication between the MCP server and the extension. Once configured, you won't need to manually approve connections each time.
+

--- a/extension/manifest.json
+++ b/extension/manifest.json
@@ -1,7 +1,7 @@
 {
  "manifest_version": 3,
  "name": "Playwright MCP Bridge",
-  "version": "0.0.37",
+  "version": "0.0.52",
  "description": "Share browser tabs with Playwright MCP server",
  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA9nMS2b0WCohjVHPGb8D9qAdkbIngDqoAjTeSccHJijgcONejge+OJxOQOMLu7b0ovt1c9BiEJa5JcpM+EHFVGL1vluBxK71zmBy1m2f9vZF3HG0LSCp7YRkum9rAIEthDwbkxx6XTvpmAY5rjFa/NON6b9Hlbo+8peUSkoOK7HTwYnnI36asZ9eUTiveIf+DMPLojW2UX33vDWG2UKvMVDewzclb4+uLxAYshY7Mx8we/b44xu+Anb/EBLKjOPk9Yh541xJ5Ozc8EiP/5yxOp9c/lRiYUHaRW+4r0HKZyFt0eZ52ti2iM4Nfk7jRXR7an3JPsUIf5deC/1cVM/+1ZQIDAQAB",
  "permissions": [
--- a/extension/package-lock.json
+++ b/extension/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@playwright/mcp-extension",
-  "version": "0.0.37",
+  "version": "0.0.52",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@playwright/mcp-extension",
-      "version": "0.0.37",
+      "version": "0.0.52",
      "license": "Apache-2.0",
      "devDependencies": {
        "@types/chrome": "^0.0.315",
@@ -16,7 +16,7 @@
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "typescript": "^5.8.2",
-        "vite": "^5.0.0",
+        "vite": "^5.4.21",
        "vite-plugin-static-copy": "^3.1.1"
      },
      "engines": {
@@ -1796,10 +1796,11 @@
      }
    },
    "node_modules/vite": {
-      "version": "5.4.19",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz",
-      "integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==",
+      "version": "5.4.21",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
+      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
      "dev": true,
+      "license": "MIT",
      "dependencies": {
        "esbuild": "^0.21.3",
        "postcss": "^8.4.43",
--- a/extension/package.json
+++ b/extension/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@playwright/mcp-extension",
-  "version": "0.0.37",
+  "version": "0.0.52",
  "description": "Playwright MCP Browser Extension",
  "private": true,
  "repository": {
@@ -29,7 +29,7 @@
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^5.8.2",
-    "vite": "^5.0.0",
+    "vite": "^5.4.21",
    "vite-plugin-static-copy": "^3.1.1"
  }
 }
--- a/extension/src/ui/authToken.css
+++ b/extension/src/ui/authToken.css
@@ -0,0 +1,142 @@
+/*
+  Copyright (c) Microsoft Corporation.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+.auth-token-section {
+  margin: 16px 0;
+  padding: 16px;
+  background-color: #f6f8fa;
+  border-radius: 6px;
+}
+
+.auth-token-description {
+  font-size: 12px;
+  color: #656d76;
+  margin-bottom: 12px;
+}
+
+.auth-token-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background-color: #ffffff;
+  padding: 8px;
+}
+
+.auth-token-code {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 12px;
+  color: #1f2328;
+  border: none;
+  flex: 1;
+  padding: 0;
+  word-break: break-all;
+}
+
+.auth-token-refresh {
+  flex: none;
+  height: 24px;
+  width: 24px;
+  border: none;
+  outline: none;
+  color: var(--color-fg-muted);
+  background: transparent;
+  padding: 4px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+
+.auth-token-refresh svg {
+  margin: 0;
+}
+
+.auth-token-refresh:not(:disabled):hover {
+  background-color: var(--color-btn-selected-bg);
+}
+
+.auth-token-example-section {
+  margin-top: 16px;
+}
+
+.auth-token-example-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  padding: 8px 0;
+  font-size: 12px;
+  color: #656d76;
+  cursor: pointer;
+  outline: none;
+  text-align: left;
+  width: 100%;
+}
+
+.auth-token-example-toggle:hover {
+  color: #1f2328;
+}
+
+.auth-token-chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transform: rotate(-90deg);
+  flex-shrink: 0;
+}
+
+.auth-token-chevron.expanded {
+  transform: rotate(0deg);
+}
+
+.auth-token-chevron svg {
+  width: 12px;
+  height: 12px;
+}
+
+.auth-token-chevron .octicon {
+  margin: 0px;
+}
+
+.auth-token-example-content {
+  margin-top: 12px;
+  padding: 12px 0;
+}
+
+.auth-token-example-description {
+  font-size: 12px;
+  color: #656d76;
+  margin-bottom: 12px;
+}
+
+.auth-token-example-config {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  background-color: #ffffff;
+  padding: 12px;
+}
+
+.auth-token-example-code {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 11px;
+  color: #1f2328;
+  white-space: pre;
+  flex: 1;
+  line-height: 1.4;
+}
--- a/extension/src/ui/authToken.tsx
+++ b/extension/src/ui/authToken.tsx
@@ -0,0 +1,118 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useCallback, useState } from 'react';
+import { CopyToClipboard } from './copyToClipboard';
+import * as icons from './icons';
+import './authToken.css';
+
+export const AuthTokenSection: React.FC<{}> = ({}) => {
+  const [authToken, setAuthToken] = useState<string>(getOrCreateAuthToken);
+  const [isExampleExpanded, setIsExampleExpanded] = useState<boolean>(false);
+
+  const onRegenerateToken = useCallback(() => {
+    const newToken = generateAuthToken();
+    localStorage.setItem('auth-token', newToken);
+    setAuthToken(newToken);
+  }, []);
+
+  const toggleExample = useCallback(() => {
+    setIsExampleExpanded(!isExampleExpanded);
+  }, [isExampleExpanded]);
+
+  return (
+    <div className='auth-token-section'>
+      <div className='auth-token-description'>
+        Set this environment variable to bypass the connection dialog:
+      </div>
+      <div className='auth-token-container'>
+        <code className='auth-token-code'>{authTokenCode(authToken)}</code>
+        <button className='auth-token-refresh' title='Generate new token' aria-label='Generate new token'onClick={onRegenerateToken}>{icons.refresh()}</button>
+        <CopyToClipboard value={authTokenCode(authToken)} />
+      </div>
+
+      <div className='auth-token-example-section'>
+        <button
+          className='auth-token-example-toggle'
+          onClick={toggleExample}
+          aria-expanded={isExampleExpanded}
+          title={isExampleExpanded ? 'Hide example config' : 'Show example config'}
+        >
+          <span className={`auth-token-chevron ${isExampleExpanded ? 'expanded' : ''}`}>
+            {icons.chevronDown()}
+          </span>
+          Example MCP server configuration
+        </button>
+
+        {isExampleExpanded && (
+          <div className='auth-token-example-content'>
+            <div className='auth-token-example-description'>
+              Add this configuration to your MCP client (e.g., VS Code) to connect to the Playwright MCP Bridge:
+            </div>
+            <div className='auth-token-example-config'>
+              <code className='auth-token-example-code'>{exampleConfig(authToken)}</code>
+              <CopyToClipboard value={exampleConfig(authToken)} />
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+function authTokenCode(authToken: string) {
+  return `PLAYWRIGHT_MCP_EXTENSION_TOKEN=${authToken}`;
+}
+
+function exampleConfig(authToken: string) {
+  return `{
+  "mcpServers": {
+    "playwright": {
+      "command": "npx",
+      "args": ["@playwright/mcp@latest", "--extension"],
+      "env": {
+        "PLAYWRIGHT_MCP_EXTENSION_TOKEN":
+          "${authToken}"
+      }
+    }
+  }
+}`;
+}
+
+function generateAuthToken(): string {
+  // Generate a cryptographically secure random token
+  const array = new Uint8Array(32);
+  crypto.getRandomValues(array);
+  // Convert to base64 and make it URL-safe
+  return btoa(String.fromCharCode.apply(null, Array.from(array)))
+      .replace(/[+/=]/g, match => {
+        switch (match) {
+          case '+': return '-';
+          case '/': return '_';
+          case '=': return '';
+          default: return match;
+        }
+      });
+}
+
+export const getOrCreateAuthToken = (): string => {
+  let token = localStorage.getItem('auth-token');
+  if (!token) {
+    token = generateAuthToken();
+    localStorage.setItem('auth-token', token);
+  }
+  return token;
+}
--- a/extension/src/ui/colors.css
+++ b/extension/src/ui/colors.css
@@ -0,0 +1,891 @@
+/* The MIT License (MIT)
+
+Copyright (c) 2021 GitHub Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. */
+
+:root {
+  --color-canvas-default-transparent: rgba(255,255,255,0);
+  --color-marketing-icon-primary: #218bff;
+  --color-marketing-icon-secondary: #54aeff;
+  --color-diff-blob-addition-num-text: #24292f;
+  --color-diff-blob-addition-fg: #24292f;
+  --color-diff-blob-addition-num-bg: #CCFFD8;
+  --color-diff-blob-addition-line-bg: #E6FFEC;
+  --color-diff-blob-addition-word-bg: #ABF2BC;
+  --color-diff-blob-deletion-num-text: #24292f;
+  --color-diff-blob-deletion-fg: #24292f;
+  --color-diff-blob-deletion-num-bg: #FFD7D5;
+  --color-diff-blob-deletion-line-bg: #FFEBE9;
+  --color-diff-blob-deletion-word-bg: rgba(255,129,130,0.4);
+  --color-diff-blob-hunk-num-bg: rgba(84,174,255,0.4);
+  --color-diff-blob-expander-icon: #57606a;
+  --color-diff-blob-selected-line-highlight-mix-blend-mode: multiply;
+  --color-diffstat-deletion-border: rgba(27,31,36,0.15);
+  --color-diffstat-addition-border: rgba(27,31,36,0.15);
+  --color-diffstat-addition-bg: #2da44e;
+  --color-search-keyword-hl: #fff8c5;
+  --color-prettylights-syntax-comment: #6e7781;
+  --color-prettylights-syntax-constant: #0550ae;
+  --color-prettylights-syntax-entity: #8250df;
+  --color-prettylights-syntax-storage-modifier-import: #24292f;
+  --color-prettylights-syntax-entity-tag: #116329;
+  --color-prettylights-syntax-keyword: #cf222e;
+  --color-prettylights-syntax-string: #0a3069;
+  --color-prettylights-syntax-variable: #953800;
+  --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
+  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
+  --color-prettylights-syntax-invalid-illegal-bg: #82071e;
+  --color-prettylights-syntax-carriage-return-text: #f6f8fa;
+  --color-prettylights-syntax-carriage-return-bg: #cf222e;
+  --color-prettylights-syntax-string-regexp: #116329;
+  --color-prettylights-syntax-markup-list: #3b2300;
+  --color-prettylights-syntax-markup-heading: #0550ae;
+  --color-prettylights-syntax-markup-italic: #24292f;
+  --color-prettylights-syntax-markup-bold: #24292f;
+  --color-prettylights-syntax-markup-deleted-text: #82071e;
+  --color-prettylights-syntax-markup-deleted-bg: #FFEBE9;
+  --color-prettylights-syntax-markup-inserted-text: #116329;
+  --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
+  --color-prettylights-syntax-markup-changed-text: #953800;
+  --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
+  --color-prettylights-syntax-markup-ignored-text: #eaeef2;
+  --color-prettylights-syntax-markup-ignored-bg: #0550ae;
+  --color-prettylights-syntax-meta-diff-range: #8250df;
+  --color-prettylights-syntax-brackethighlighter-angle: #57606a;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
+  --color-prettylights-syntax-constant-other-reference-link: #0a3069;
+  --color-codemirror-text: #24292f;
+  --color-codemirror-bg: #ffffff;
+  --color-codemirror-gutters-bg: #ffffff;
+  --color-codemirror-guttermarker-text: #ffffff;
+  --color-codemirror-guttermarker-subtle-text: #6e7781;
+  --color-codemirror-linenumber-text: #57606a;
+  --color-codemirror-cursor: #24292f;
+  --color-codemirror-selection-bg: rgba(84,174,255,0.4);
+  --color-codemirror-activeline-bg: rgba(234,238,242,0.5);
+  --color-codemirror-matchingbracket-text: #24292f;
+  --color-codemirror-lines-bg: #ffffff;
+  --color-codemirror-syntax-comment: #24292f;
+  --color-codemirror-syntax-constant: #0550ae;
+  --color-codemirror-syntax-entity: #8250df;
+  --color-codemirror-syntax-keyword: #cf222e;
+  --color-codemirror-syntax-storage: #cf222e;
+  --color-codemirror-syntax-string: #0a3069;
+  --color-codemirror-syntax-support: #0550ae;
+  --color-codemirror-syntax-variable: #953800;
+  --color-checks-bg: #24292f;
+  --color-checks-run-border-width: 0px;
+  --color-checks-container-border-width: 0px;
+  --color-checks-text-primary: #f6f8fa;
+  --color-checks-text-secondary: #8c959f;
+  --color-checks-text-link: #54aeff;
+  --color-checks-btn-icon: #afb8c1;
+  --color-checks-btn-hover-icon: #f6f8fa;
+  --color-checks-btn-hover-bg: rgba(255,255,255,0.125);
+  --color-checks-input-text: #eaeef2;
+  --color-checks-input-placeholder-text: #8c959f;
+  --color-checks-input-focus-text: #8c959f;
+  --color-checks-input-bg: #32383f;
+  --color-checks-input-shadow: none;
+  --color-checks-donut-error: #fa4549;
+  --color-checks-donut-pending: #bf8700;
+  --color-checks-donut-success: #2da44e;
+  --color-checks-donut-neutral: #afb8c1;
+  --color-checks-dropdown-text: #afb8c1;
+  --color-checks-dropdown-bg: #32383f;
+  --color-checks-dropdown-border: #424a53;
+  --color-checks-dropdown-shadow: rgba(27,31,36,0.3);
+  --color-checks-dropdown-hover-text: #f6f8fa;
+  --color-checks-dropdown-hover-bg: #424a53;
+  --color-checks-dropdown-btn-hover-text: #f6f8fa;
+  --color-checks-dropdown-btn-hover-bg: #32383f;
+  --color-checks-scrollbar-thumb-bg: #57606a;
+  --color-checks-header-label-text: #d0d7de;
+  --color-checks-header-label-open-text: #f6f8fa;
+  --color-checks-header-border: #32383f;
+  --color-checks-header-icon: #8c959f;
+  --color-checks-line-text: #d0d7de;
+  --color-checks-line-num-text: rgba(140,149,159,0.75);
+  --color-checks-line-timestamp-text: #8c959f;
+  --color-checks-line-hover-bg: #32383f;
+  --color-checks-line-selected-bg: rgba(33,139,255,0.15);
+  --color-checks-line-selected-num-text: #54aeff;
+  --color-checks-line-dt-fm-text: #24292f;
+  --color-checks-line-dt-fm-bg: #9a6700;
+  --color-checks-gate-bg: rgba(125,78,0,0.15);
+  --color-checks-gate-text: #d0d7de;
+  --color-checks-gate-waiting-text: #afb8c1;
+  --color-checks-step-header-open-bg: #32383f;
+  --color-checks-step-error-text: #ff8182;
+  --color-checks-step-warning-text: #d4a72c;
+  --color-checks-logline-text: #8c959f;
+  --color-checks-logline-num-text: rgba(140,149,159,0.75);
+  --color-checks-logline-debug-text: #c297ff;
+  --color-checks-logline-error-text: #d0d7de;
+  --color-checks-logline-error-num-text: #ff8182;
+  --color-checks-logline-error-bg: rgba(164,14,38,0.15);
+  --color-checks-logline-warning-text: #d0d7de;
+  --color-checks-logline-warning-num-text: #d4a72c;
+  --color-checks-logline-warning-bg: rgba(125,78,0,0.15);
+  --color-checks-logline-command-text: #54aeff;
+  --color-checks-logline-section-text: #4ac26b;
+  --color-checks-ansi-black: #24292f;
+  --color-checks-ansi-black-bright: #32383f;
+  --color-checks-ansi-white: #d0d7de;
+  --color-checks-ansi-white-bright: #d0d7de;
+  --color-checks-ansi-gray: #8c959f;
+  --color-checks-ansi-red: #ff8182;
+  --color-checks-ansi-red-bright: #ffaba8;
+  --color-checks-ansi-green: #4ac26b;
+  --color-checks-ansi-green-bright: #6fdd8b;
+  --color-checks-ansi-yellow: #d4a72c;
+  --color-checks-ansi-yellow-bright: #eac54f;
+  --color-checks-ansi-blue: #54aeff;
+  --color-checks-ansi-blue-bright: #80ccff;
+  --color-checks-ansi-magenta: #c297ff;
+  --color-checks-ansi-magenta-bright: #d8b9ff;
+  --color-checks-ansi-cyan: #76e3ea;
+  --color-checks-ansi-cyan-bright: #b3f0ff;
+  --color-project-header-bg: #24292f;
+  --color-project-sidebar-bg: #ffffff;
+  --color-project-gradient-in: #ffffff;
+  --color-project-gradient-out: rgba(255,255,255,0);
+  --color-mktg-success: rgba(36,146,67,1);
+  --color-mktg-info: rgba(19,119,234,1);
+  --color-mktg-bg-shade-gradient-top: rgba(27,31,36,0.065);
+  --color-mktg-bg-shade-gradient-bottom: rgba(27,31,36,0);
+  --color-mktg-btn-bg-top: hsla(228,82%,66%,1);
+  --color-mktg-btn-bg-bottom: #4969ed;
+  --color-mktg-btn-bg-overlay-top: hsla(228,74%,59%,1);
+  --color-mktg-btn-bg-overlay-bottom: #3355e0;
+  --color-mktg-btn-text: #ffffff;
+  --color-mktg-btn-primary-bg-top: hsla(137,56%,46%,1);
+  --color-mktg-btn-primary-bg-bottom: #2ea44f;
+  --color-mktg-btn-primary-bg-overlay-top: hsla(134,60%,38%,1);
+  --color-mktg-btn-primary-bg-overlay-bottom: #22863a;
+  --color-mktg-btn-primary-text: #ffffff;
+  --color-mktg-btn-enterprise-bg-top: hsla(249,100%,72%,1);
+  --color-mktg-btn-enterprise-bg-bottom: #6f57ff;
+  --color-mktg-btn-enterprise-bg-overlay-top: hsla(248,65%,63%,1);
+  --color-mktg-btn-enterprise-bg-overlay-bottom: #614eda;
+  --color-mktg-btn-enterprise-text: #ffffff;
+  --color-mktg-btn-outline-text: #4969ed;
+  --color-mktg-btn-outline-border: rgba(73,105,237,0.3);
+  --color-mktg-btn-outline-hover-text: #3355e0;
+  --color-mktg-btn-outline-hover-border: rgba(51,85,224,0.5);
+  --color-mktg-btn-outline-focus-border: #4969ed;
+  --color-mktg-btn-outline-focus-border-inset: rgba(73,105,237,0.5);
+  --color-mktg-btn-dark-text: #ffffff;
+  --color-mktg-btn-dark-border: rgba(255,255,255,0.3);
+  --color-mktg-btn-dark-hover-text: #ffffff;
+  --color-mktg-btn-dark-hover-border: rgba(255,255,255,0.5);
+  --color-mktg-btn-dark-focus-border: #ffffff;
+  --color-mktg-btn-dark-focus-border-inset: rgba(255,255,255,0.5);
+  --color-avatar-bg: #ffffff;
+  --color-avatar-border: rgba(27,31,36,0.15);
+  --color-avatar-stack-fade: #afb8c1;
+  --color-avatar-stack-fade-more: #d0d7de;
+  --color-avatar-child-shadow: -2px -2px 0 rgba(255,255,255,0.8);
+  --color-topic-tag-border: rgba(0,0,0,0);
+  --color-select-menu-backdrop-border: rgba(0,0,0,0);
+  --color-select-menu-tap-highlight: rgba(175,184,193,0.5);
+  --color-select-menu-tap-focus-bg: #b6e3ff;
+  --color-overlay-shadow: 0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12);
+  --color-header-text: rgba(255,255,255,0.7);
+  --color-header-bg: #24292f;
+  --color-header-logo: #ffffff;
+  --color-header-search-bg: #24292f;
+  --color-header-search-border: #57606a;
+  --color-sidenav-selected-bg: #ffffff;
+  --color-menu-bg-active: rgba(0,0,0,0);
+  --color-control-transparent-bg-hover: #818b981a;
+  --color-input-disabled-bg: rgba(175,184,193,0.2);
+  --color-timeline-badge-bg: #eaeef2;
+  --color-ansi-black: #24292f;
+  --color-ansi-black-bright: #57606a;
+  --color-ansi-white: #6e7781;
+  --color-ansi-white-bright: #8c959f;
+  --color-ansi-gray: #6e7781;
+  --color-ansi-red: #cf222e;
+  --color-ansi-red-bright: #a40e26;
+  --color-ansi-green: #116329;
+  --color-ansi-green-bright: #1a7f37;
+  --color-ansi-yellow: #4d2d00;
+  --color-ansi-yellow-bright: #633c01;
+  --color-ansi-blue: #0969da;
+  --color-ansi-blue-bright: #218bff;
+  --color-ansi-magenta: #8250df;
+  --color-ansi-magenta-bright: #a475f9;
+  --color-ansi-cyan: #1b7c83;
+  --color-ansi-cyan-bright: #3192aa;
+  --color-btn-text: #24292f;
+  --color-btn-bg: #f6f8fa;
+  --color-btn-border: rgba(27,31,36,0.15);
+  --color-btn-shadow: 0 1px 0 rgba(27,31,36,0.04);
+  --color-btn-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
+  --color-btn-hover-bg: #f3f4f6;
+  --color-btn-hover-border: rgba(27,31,36,0.15);
+  --color-btn-active-bg: hsla(220,14%,93%,1);
+  --color-btn-active-border: rgba(27,31,36,0.15);
+  --color-btn-selected-bg: hsla(220,14%,94%,1);
+  --color-btn-focus-bg: #f6f8fa;
+  --color-btn-focus-border: rgba(27,31,36,0.15);
+  --color-btn-focus-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+  --color-btn-shadow-active: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
+  --color-btn-shadow-input-focus: 0 0 0 0.2em rgba(9,105,218,0.3);
+  --color-btn-counter-bg: rgba(27,31,36,0.08);
+  --color-btn-primary-text: #ffffff;
+  --color-btn-primary-bg: #2da44e;
+  --color-btn-primary-border: rgba(27,31,36,0.15);
+  --color-btn-primary-shadow: 0 1px 0 rgba(27,31,36,0.1);
+  --color-btn-primary-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
+  --color-btn-primary-hover-bg: #2c974b;
+  --color-btn-primary-hover-border: rgba(27,31,36,0.15);
+  --color-btn-primary-selected-bg: hsla(137,55%,36%,1);
+  --color-btn-primary-selected-shadow: inset 0 1px 0 rgba(0,45,17,0.2);
+  --color-btn-primary-disabled-text: rgba(255,255,255,0.8);
+  --color-btn-primary-disabled-bg: #94d3a2;
+  --color-btn-primary-disabled-border: rgba(27,31,36,0.15);
+  --color-btn-primary-focus-bg: #2da44e;
+  --color-btn-primary-focus-border: rgba(27,31,36,0.15);
+  --color-btn-primary-focus-shadow: 0 0 0 3px rgba(45,164,78,0.4);
+  --color-btn-primary-icon: rgba(255,255,255,0.8);
+  --color-btn-primary-counter-bg: rgba(255,255,255,0.2);
+  --color-btn-outline-text: #0969da;
+  --color-btn-outline-hover-text: #ffffff;
+  --color-btn-outline-hover-bg: #0969da;
+  --color-btn-outline-hover-border: rgba(27,31,36,0.15);
+  --color-btn-outline-hover-shadow: 0 1px 0 rgba(27,31,36,0.1);
+  --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
+  --color-btn-outline-hover-counter-bg: rgba(255,255,255,0.2);
+  --color-btn-outline-selected-text: #ffffff;
+  --color-btn-outline-selected-bg: hsla(212,92%,42%,1);
+  --color-btn-outline-selected-border: rgba(27,31,36,0.15);
+  --color-btn-outline-selected-shadow: inset 0 1px 0 rgba(0,33,85,0.2);
+  --color-btn-outline-disabled-text: rgba(9,105,218,0.5);
+  --color-btn-outline-disabled-bg: #f6f8fa;
+  --color-btn-outline-disabled-counter-bg: rgba(9,105,218,0.05);
+  --color-btn-outline-focus-border: rgba(27,31,36,0.15);
+  --color-btn-outline-focus-shadow: 0 0 0 3px rgba(5,80,174,0.4);
+  --color-btn-outline-counter-bg: rgba(9,105,218,0.1);
+  --color-btn-danger-text: #cf222e;
+  --color-btn-danger-hover-text: #ffffff;
+  --color-btn-danger-hover-bg: #a40e26;
+  --color-btn-danger-hover-border: rgba(27,31,36,0.15);
+  --color-btn-danger-hover-shadow: 0 1px 0 rgba(27,31,36,0.1);
+  --color-btn-danger-hover-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
+  --color-btn-danger-hover-counter-bg: rgba(255,255,255,0.2);
+  --color-btn-danger-selected-text: #ffffff;
+  --color-btn-danger-selected-bg: hsla(356,72%,44%,1);
+  --color-btn-danger-selected-border: rgba(27,31,36,0.15);
+  --color-btn-danger-selected-shadow: inset 0 1px 0 rgba(76,0,20,0.2);
+  --color-btn-danger-disabled-text: rgba(207,34,46,0.5);
+  --color-btn-danger-disabled-bg: #f6f8fa;
+  --color-btn-danger-disabled-counter-bg: rgba(207,34,46,0.05);
+  --color-btn-danger-focus-border: rgba(27,31,36,0.15);
+  --color-btn-danger-focus-shadow: 0 0 0 3px rgba(164,14,38,0.4);
+  --color-btn-danger-counter-bg: rgba(207,34,46,0.1);
+  --color-btn-danger-icon: #cf222e;
+  --color-btn-danger-hover-icon: #ffffff;
+  --color-underlinenav-icon: #6e7781;
+  --color-underlinenav-border-hover: rgba(175,184,193,0.2);
+  --color-fg-default: #24292f;
+  --color-fg-muted: #57606a;
+  --color-fg-subtle: #6e7781;
+  --color-fg-on-emphasis: #ffffff;
+  --color-canvas-default: #ffffff;
+  --color-canvas-overlay: #ffffff;
+  --color-canvas-inset: #f6f8fa;
+  --color-canvas-subtle: #f6f8fa;
+  --color-border-default: #d0d7de;
+  --color-border-muted: hsla(210,18%,87%,1);
+  --color-border-subtle: rgba(27,31,36,0.15);
+  --color-shadow-small: 0 1px 0 rgba(27,31,36,0.04);
+  --color-shadow-medium: 0 3px 6px rgba(140,149,159,0.15);
+  --color-shadow-large: 0 8px 24px rgba(140,149,159,0.2);
+  --color-shadow-extra-large: 0 12px 28px rgba(140,149,159,0.3);
+  --color-neutral-emphasis-plus: #24292f;
+  --color-neutral-emphasis: #6e7781;
+  --color-neutral-muted: rgba(175,184,193,0.2);
+  --color-neutral-subtle: rgba(234,238,242,0.5);
+  --color-accent-fg: #0969da;
+  --color-accent-emphasis: #0969da;
+  --color-accent-muted: rgba(84,174,255,0.4);
+  --color-accent-subtle: #ddf4ff;
+  --color-success-fg: #1a7f37;
+  --color-success-emphasis: #2da44e;
+  --color-success-muted: rgba(74,194,107,0.4);
+  --color-success-subtle: #dafbe1;
+  --color-attention-fg: #9a6700;
+  --color-attention-emphasis: #bf8700;
+  --color-attention-muted: rgba(212,167,44,0.4);
+  --color-attention-subtle: #fff8c5;
+  --color-severe-fg: #bc4c00;
+  --color-severe-emphasis: #bc4c00;
+  --color-severe-muted: rgba(251,143,68,0.4);
+  --color-severe-subtle: #fff1e5;
+  --color-danger-fg: #cf222e;
+  --color-danger-emphasis: #cf222e;
+  --color-danger-muted: rgba(255,129,130,0.4);
+  --color-danger-subtle: #FFEBE9;
+  --color-done-fg: #8250df;
+  --color-done-emphasis: #8250df;
+  --color-done-muted: rgba(194,151,255,0.4);
+  --color-done-subtle: #fbefff;
+  --color-sponsors-fg: #bf3989;
+  --color-sponsors-emphasis: #bf3989;
+  --color-sponsors-muted: rgba(255,128,200,0.4);
+  --color-sponsors-subtle: #ffeff7;
+  --color-primer-canvas-backdrop: rgba(27,31,36,0.5);
+  --color-primer-canvas-sticky: rgba(255,255,255,0.95);
+  --color-primer-border-active: #FD8C73;
+  --color-primer-border-contrast: rgba(27,31,36,0.1);
+  --color-primer-shadow-highlight: inset 0 1px 0 rgba(255,255,255,0.25);
+  --color-primer-shadow-inset: inset 0 1px 0 rgba(208,215,222,0.2);
+  --color-primer-shadow-focus: 0 0 0 3px rgba(9,105,218,0.3);
+  --color-scale-black: #1b1f24;
+  --color-scale-white: #ffffff;
+  --color-scale-gray-0: #f6f8fa;
+  --color-scale-gray-1: #eaeef2;
+  --color-scale-gray-2: #d0d7de;
+  --color-scale-gray-3: #afb8c1;
+  --color-scale-gray-4: #8c959f;
+  --color-scale-gray-5: #6e7781;
+  --color-scale-gray-6: #57606a;
+  --color-scale-gray-7: #424a53;
+  --color-scale-gray-8: #32383f;
+  --color-scale-gray-9: #24292f;
+  --color-scale-blue-0: #ddf4ff;
+  --color-scale-blue-1: #b6e3ff;
+  --color-scale-blue-2: #80ccff;
+  --color-scale-blue-3: #54aeff;
+  --color-scale-blue-4: #218bff;
+  --color-scale-blue-5: #0969da;
+  --color-scale-blue-6: #0550ae;
+  --color-scale-blue-7: #033d8b;
+  --color-scale-blue-8: #0a3069;
+  --color-scale-blue-9: #002155;
+  --color-scale-green-0: #dafbe1;
+  --color-scale-green-1: #aceebb;
+  --color-scale-green-2: #6fdd8b;
+  --color-scale-green-3: #4ac26b;
+  --color-scale-green-4: #2da44e;
+  --color-scale-green-5: #1a7f37;
+  --color-scale-green-6: #116329;
+  --color-scale-green-7: #044f1e;
+  --color-scale-green-8: #003d16;
+  --color-scale-green-9: #002d11;
+  --color-scale-yellow-0: #fff8c5;
+  --color-scale-yellow-1: #fae17d;
+  --color-scale-yellow-2: #eac54f;
+  --color-scale-yellow-3: #d4a72c;
+  --color-scale-yellow-4: #bf8700;
+  --color-scale-yellow-5: #9a6700;
+  --color-scale-yellow-6: #7d4e00;
+  --color-scale-yellow-7: #633c01;
+  --color-scale-yellow-8: #4d2d00;
+  --color-scale-yellow-9: #3b2300;
+  --color-scale-orange-0: #fff1e5;
+  --color-scale-orange-1: #ffd8b5;
+  --color-scale-orange-2: #ffb77c;
+  --color-scale-orange-3: #fb8f44;
+  --color-scale-orange-4: #e16f24;
+  --color-scale-orange-5: #bc4c00;
+  --color-scale-orange-6: #953800;
+  --color-scale-orange-7: #762c00;
+  --color-scale-orange-8: #5c2200;
+  --color-scale-orange-9: #471700;
+  --color-scale-red-0: #FFEBE9;
+  --color-scale-red-1: #ffcecb;
+  --color-scale-red-2: #ffaba8;
+  --color-scale-red-3: #ff8182;
+  --color-scale-red-4: #fa4549;
+  --color-scale-red-5: #cf222e;
+  --color-scale-red-6: #a40e26;
+  --color-scale-red-7: #82071e;
+  --color-scale-red-8: #660018;
+  --color-scale-red-9: #4c0014;
+  --color-scale-purple-0: #fbefff;
+  --color-scale-purple-1: #ecd8ff;
+  --color-scale-purple-2: #d8b9ff;
+  --color-scale-purple-3: #c297ff;
+  --color-scale-purple-4: #a475f9;
+  --color-scale-purple-5: #8250df;
+  --color-scale-purple-6: #6639ba;
+  --color-scale-purple-7: #512a97;
+  --color-scale-purple-8: #3e1f79;
+  --color-scale-purple-9: #2e1461;
+  --color-scale-pink-0: #ffeff7;
+  --color-scale-pink-1: #ffd3eb;
+  --color-scale-pink-2: #ffadda;
+  --color-scale-pink-3: #ff80c8;
+  --color-scale-pink-4: #e85aad;
+  --color-scale-pink-5: #bf3989;
+  --color-scale-pink-6: #99286e;
+  --color-scale-pink-7: #772057;
+  --color-scale-pink-8: #611347;
+  --color-scale-pink-9: #4d0336;
+  --color-scale-coral-0: #FFF0EB;
+  --color-scale-coral-1: #FFD6CC;
+  --color-scale-coral-2: #FFB4A1;
+  --color-scale-coral-3: #FD8C73;
+  --color-scale-coral-4: #EC6547;
+  --color-scale-coral-5: #C4432B;
+  --color-scale-coral-6: #9E2F1C;
+  --color-scale-coral-7: #801F0F;
+  --color-scale-coral-8: #691105;
+  --color-scale-coral-9: #510901
+}
+
+@media(prefers-color-scheme: dark) {
+  :root {
+    --color-canvas-default-transparent: rgba(13,17,23,0);
+    --color-marketing-icon-primary: #79c0ff;
+    --color-marketing-icon-secondary: #1f6feb;
+    --color-diff-blob-addition-num-text: #c9d1d9;
+    --color-diff-blob-addition-fg: #c9d1d9;
+    --color-diff-blob-addition-num-bg: rgba(63,185,80,0.3);
+    --color-diff-blob-addition-line-bg: rgba(46,160,67,0.15);
+    --color-diff-blob-addition-word-bg: rgba(46,160,67,0.4);
+    --color-diff-blob-deletion-num-text: #c9d1d9;
+    --color-diff-blob-deletion-fg: #c9d1d9;
+    --color-diff-blob-deletion-num-bg: rgba(248,81,73,0.3);
+    --color-diff-blob-deletion-line-bg: rgba(248,81,73,0.15);
+    --color-diff-blob-deletion-word-bg: rgba(248,81,73,0.4);
+    --color-diff-blob-hunk-num-bg: rgba(56,139,253,0.4);
+    --color-diff-blob-expander-icon: #8b949e;
+    --color-diff-blob-selected-line-highlight-mix-blend-mode: screen;
+    --color-diffstat-deletion-border: rgba(240,246,252,0.1);
+    --color-diffstat-addition-border: rgba(240,246,252,0.1);
+    --color-diffstat-addition-bg: #3fb950;
+    --color-search-keyword-hl: rgba(210,153,34,0.4);
+    --color-prettylights-syntax-comment: #8b949e;
+    --color-prettylights-syntax-constant: #79c0ff;
+    --color-prettylights-syntax-entity: #d2a8ff;
+    --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
+    --color-prettylights-syntax-entity-tag: #7ee787;
+    --color-prettylights-syntax-keyword: #ff7b72;
+    --color-prettylights-syntax-string: #a5d6ff;
+    --color-prettylights-syntax-variable: #ffa657;
+    --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
+    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
+    --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
+    --color-prettylights-syntax-carriage-return-text: #f0f6fc;
+    --color-prettylights-syntax-carriage-return-bg: #b62324;
+    --color-prettylights-syntax-string-regexp: #7ee787;
+    --color-prettylights-syntax-markup-list: #f2cc60;
+    --color-prettylights-syntax-markup-heading: #1f6feb;
+    --color-prettylights-syntax-markup-italic: #c9d1d9;
+    --color-prettylights-syntax-markup-bold: #c9d1d9;
+    --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
+    --color-prettylights-syntax-markup-deleted-bg: #67060c;
+    --color-prettylights-syntax-markup-inserted-text: #aff5b4;
+    --color-prettylights-syntax-markup-inserted-bg: #033a16;
+    --color-prettylights-syntax-markup-changed-text: #ffdfb6;
+    --color-prettylights-syntax-markup-changed-bg: #5a1e02;
+    --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
+    --color-prettylights-syntax-markup-ignored-bg: #1158c7;
+    --color-prettylights-syntax-meta-diff-range: #d2a8ff;
+    --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
+    --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
+    --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
+    --color-codemirror-text: #c9d1d9;
+    --color-codemirror-bg: #0d1117;
+    --color-codemirror-gutters-bg: #0d1117;
+    --color-codemirror-guttermarker-text: #0d1117;
+    --color-codemirror-guttermarker-subtle-text: #484f58;
+    --color-codemirror-linenumber-text: #8b949e;
+    --color-codemirror-cursor: #c9d1d9;
+    --color-codemirror-selection-bg: rgba(56,139,253,0.4);
+    --color-codemirror-activeline-bg: rgba(110,118,129,0.1);
+    --color-codemirror-matchingbracket-text: #c9d1d9;
+    --color-codemirror-lines-bg: #0d1117;
+    --color-codemirror-syntax-comment: #8b949e;
+    --color-codemirror-syntax-constant: #79c0ff;
+    --color-codemirror-syntax-entity: #d2a8ff;
+    --color-codemirror-syntax-keyword: #ff7b72;
+    --color-codemirror-syntax-storage: #ff7b72;
+    --color-codemirror-syntax-string: #a5d6ff;
+    --color-codemirror-syntax-support: #79c0ff;
+    --color-codemirror-syntax-variable: #ffa657;
+    --color-checks-bg: #010409;
+    --color-checks-run-border-width: 1px;
+    --color-checks-container-border-width: 1px;
+    --color-checks-text-primary: #c9d1d9;
+    --color-checks-text-secondary: #8b949e;
+    --color-checks-text-link: #58a6ff;
+    --color-checks-btn-icon: #8b949e;
+    --color-checks-btn-hover-icon: #c9d1d9;
+    --color-checks-btn-hover-bg: rgba(110,118,129,0.1);
+    --color-checks-input-text: #8b949e;
+    --color-checks-input-placeholder-text: #484f58;
+    --color-checks-input-focus-text: #c9d1d9;
+    --color-checks-input-bg: #161b22;
+    --color-checks-input-shadow: none;
+    --color-checks-donut-error: #f85149;
+    --color-checks-donut-pending: #d29922;
+    --color-checks-donut-success: #2ea043;
+    --color-checks-donut-neutral: #8b949e;
+    --color-checks-dropdown-text: #c9d1d9;
+    --color-checks-dropdown-bg: #161b22;
+    --color-checks-dropdown-border: #30363d;
+    --color-checks-dropdown-shadow: rgba(1,4,9,0.3);
+    --color-checks-dropdown-hover-text: #c9d1d9;
+    --color-checks-dropdown-hover-bg: rgba(110,118,129,0.1);
+    --color-checks-dropdown-btn-hover-text: #c9d1d9;
+    --color-checks-dropdown-btn-hover-bg: rgba(110,118,129,0.1);
+    --color-checks-scrollbar-thumb-bg: rgba(110,118,129,0.4);
+    --color-checks-header-label-text: #8b949e;
+    --color-checks-header-label-open-text: #c9d1d9;
+    --color-checks-header-border: #21262d;
+    --color-checks-header-icon: #8b949e;
+    --color-checks-line-text: #8b949e;
+    --color-checks-line-num-text: #484f58;
+    --color-checks-line-timestamp-text: #484f58;
+    --color-checks-line-hover-bg: rgba(110,118,129,0.1);
+    --color-checks-line-selected-bg: rgba(56,139,253,0.15);
+    --color-checks-line-selected-num-text: #58a6ff;
+    --color-checks-line-dt-fm-text: #f0f6fc;
+    --color-checks-line-dt-fm-bg: #9e6a03;
+    --color-checks-gate-bg: rgba(187,128,9,0.15);
+    --color-checks-gate-text: #8b949e;
+    --color-checks-gate-waiting-text: #d29922;
+    --color-checks-step-header-open-bg: #161b22;
+    --color-checks-step-error-text: #f85149;
+    --color-checks-step-warning-text: #d29922;
+    --color-checks-logline-text: #8b949e;
+    --color-checks-logline-num-text: #484f58;
+    --color-checks-logline-debug-text: #a371f7;
+    --color-checks-logline-error-text: #8b949e;
+    --color-checks-logline-error-num-text: #484f58;
+    --color-checks-logline-error-bg: rgba(248,81,73,0.15);
+    --color-checks-logline-warning-text: #8b949e;
+    --color-checks-logline-warning-num-text: #d29922;
+    --color-checks-logline-warning-bg: rgba(187,128,9,0.15);
+    --color-checks-logline-command-text: #58a6ff;
+    --color-checks-logline-section-text: #3fb950;
+    --color-checks-ansi-black: #0d1117;
+    --color-checks-ansi-black-bright: #161b22;
+    --color-checks-ansi-white: #b1bac4;
+    --color-checks-ansi-white-bright: #b1bac4;
+    --color-checks-ansi-gray: #6e7681;
+    --color-checks-ansi-red: #ff7b72;
+    --color-checks-ansi-red-bright: #ffa198;
+    --color-checks-ansi-green: #3fb950;
+    --color-checks-ansi-green-bright: #56d364;
+    --color-checks-ansi-yellow: #d29922;
+    --color-checks-ansi-yellow-bright: #e3b341;
+    --color-checks-ansi-blue: #58a6ff;
+    --color-checks-ansi-blue-bright: #79c0ff;
+    --color-checks-ansi-magenta: #bc8cff;
+    --color-checks-ansi-magenta-bright: #d2a8ff;
+    --color-checks-ansi-cyan: #76e3ea;
+    --color-checks-ansi-cyan-bright: #b3f0ff;
+    --color-project-header-bg: #0d1117;
+    --color-project-sidebar-bg: #161b22;
+    --color-project-gradient-in: #161b22;
+    --color-project-gradient-out: rgba(22,27,34,0);
+    --color-mktg-success: rgba(41,147,61,1);
+    --color-mktg-info: rgba(42,123,243,1);
+    --color-mktg-bg-shade-gradient-top: rgba(1,4,9,0.065);
+    --color-mktg-bg-shade-gradient-bottom: rgba(1,4,9,0);
+    --color-mktg-btn-bg-top: hsla(228,82%,66%,1);
+    --color-mktg-btn-bg-bottom: #4969ed;
+    --color-mktg-btn-bg-overlay-top: hsla(228,74%,59%,1);
+    --color-mktg-btn-bg-overlay-bottom: #3355e0;
+    --color-mktg-btn-text: #f0f6fc;
+    --color-mktg-btn-primary-bg-top: hsla(137,56%,46%,1);
+    --color-mktg-btn-primary-bg-bottom: #2ea44f;
+    --color-mktg-btn-primary-bg-overlay-top: hsla(134,60%,38%,1);
+    --color-mktg-btn-primary-bg-overlay-bottom: #22863a;
+    --color-mktg-btn-primary-text: #f0f6fc;
+    --color-mktg-btn-enterprise-bg-top: hsla(249,100%,72%,1);
+    --color-mktg-btn-enterprise-bg-bottom: #6f57ff;
+    --color-mktg-btn-enterprise-bg-overlay-top: hsla(248,65%,63%,1);
+    --color-mktg-btn-enterprise-bg-overlay-bottom: #614eda;
+    --color-mktg-btn-enterprise-text: #f0f6fc;
+    --color-mktg-btn-outline-text: #f0f6fc;
+    --color-mktg-btn-outline-border: rgba(240,246,252,0.3);
+    --color-mktg-btn-outline-hover-text: #f0f6fc;
+    --color-mktg-btn-outline-hover-border: rgba(240,246,252,0.5);
+    --color-mktg-btn-outline-focus-border: #f0f6fc;
+    --color-mktg-btn-outline-focus-border-inset: rgba(240,246,252,0.5);
+    --color-mktg-btn-dark-text: #f0f6fc;
+    --color-mktg-btn-dark-border: rgba(240,246,252,0.3);
+    --color-mktg-btn-dark-hover-text: #f0f6fc;
+    --color-mktg-btn-dark-hover-border: rgba(240,246,252,0.5);
+    --color-mktg-btn-dark-focus-border: #f0f6fc;
+    --color-mktg-btn-dark-focus-border-inset: rgba(240,246,252,0.5);
+    --color-avatar-bg: rgba(240,246,252,0.1);
+    --color-avatar-border: rgba(240,246,252,0.1);
+    --color-avatar-stack-fade: #30363d;
+    --color-avatar-stack-fade-more: #21262d;
+    --color-avatar-child-shadow: -2px -2px 0 #0d1117;
+    --color-topic-tag-border: rgba(0,0,0,0);
+    --color-select-menu-backdrop-border: #484f58;
+    --color-select-menu-tap-highlight: rgba(48,54,61,0.5);
+    --color-select-menu-tap-focus-bg: #0c2d6b;
+    --color-overlay-shadow: 0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85);
+    --color-header-text: rgba(240,246,252,0.7);
+    --color-header-bg: #161b22;
+    --color-header-logo: #f0f6fc;
+    --color-header-search-bg: #0d1117;
+    --color-header-search-border: #30363d;
+    --color-sidenav-selected-bg: #21262d;
+    --color-menu-bg-active: #161b22;
+    --color-control-transparent-bg-hover: #656c7633;
+    --color-input-disabled-bg: rgba(110,118,129,0);
+    --color-timeline-badge-bg: #21262d;
+    --color-ansi-black: #484f58;
+    --color-ansi-black-bright: #6e7681;
+    --color-ansi-white: #b1bac4;
+    --color-ansi-white-bright: #f0f6fc;
+    --color-ansi-gray: #6e7681;
+    --color-ansi-red: #ff7b72;
+    --color-ansi-red-bright: #ffa198;
+    --color-ansi-green: #3fb950;
+    --color-ansi-green-bright: #56d364;
+    --color-ansi-yellow: #d29922;
+    --color-ansi-yellow-bright: #e3b341;
+    --color-ansi-blue: #58a6ff;
+    --color-ansi-blue-bright: #79c0ff;
+    --color-ansi-magenta: #bc8cff;
+    --color-ansi-magenta-bright: #d2a8ff;
+    --color-ansi-cyan: #39c5cf;
+    --color-ansi-cyan-bright: #56d4dd;
+    --color-btn-text: #c9d1d9;
+    --color-btn-bg: #21262d;
+    --color-btn-border: rgba(240,246,252,0.1);
+    --color-btn-shadow: 0 0 transparent;
+    --color-btn-inset-shadow: 0 0 transparent;
+    --color-btn-hover-bg: #30363d;
+    --color-btn-hover-border: #8b949e;
+    --color-btn-active-bg: hsla(212,12%,18%,1);
+    --color-btn-active-border: #6e7681;
+    --color-btn-selected-bg: #161b22;
+    --color-btn-focus-bg: #21262d;
+    --color-btn-focus-border: #8b949e;
+    --color-btn-focus-shadow: 0 0 0 3px rgba(139,148,158,0.3);
+    --color-btn-shadow-active: inset 0 0.15em 0.3em rgba(1,4,9,0.15);
+    --color-btn-shadow-input-focus: 0 0 0 0.2em rgba(31,111,235,0.3);
+    --color-btn-counter-bg: #30363d;
+    --color-btn-primary-text: #ffffff;
+    --color-btn-primary-bg: #238636;
+    --color-btn-primary-border: rgba(240,246,252,0.1);
+    --color-btn-primary-shadow: 0 0 transparent;
+    --color-btn-primary-inset-shadow: 0 0 transparent;
+    --color-btn-primary-hover-bg: #2ea043;
+    --color-btn-primary-hover-border: rgba(240,246,252,0.1);
+    --color-btn-primary-selected-bg: #238636;
+    --color-btn-primary-selected-shadow: 0 0 transparent;
+    --color-btn-primary-disabled-text: rgba(240,246,252,0.5);
+    --color-btn-primary-disabled-bg: rgba(35,134,54,0.6);
+    --color-btn-primary-disabled-border: rgba(240,246,252,0.1);
+    --color-btn-primary-focus-bg: #238636;
+    --color-btn-primary-focus-border: rgba(240,246,252,0.1);
+    --color-btn-primary-focus-shadow: 0 0 0 3px rgba(46,164,79,0.4);
+    --color-btn-primary-icon: #f0f6fc;
+    --color-btn-primary-counter-bg: rgba(240,246,252,0.2);
+    --color-btn-outline-text: #58a6ff;
+    --color-btn-outline-hover-text: #58a6ff;
+    --color-btn-outline-hover-bg: #30363d;
+    --color-btn-outline-hover-border: rgba(240,246,252,0.1);
+    --color-btn-outline-hover-shadow: 0 1px 0 rgba(1,4,9,0.1);
+    --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(240,246,252,0.03);
+    --color-btn-outline-hover-counter-bg: rgba(240,246,252,0.2);
+    --color-btn-outline-selected-text: #f0f6fc;
+    --color-btn-outline-selected-bg: #0d419d;
+    --color-btn-outline-selected-border: rgba(240,246,252,0.1);
+    --color-btn-outline-selected-shadow: 0 0 transparent;
+    --color-btn-outline-disabled-text: rgba(88,166,255,0.5);
+    --color-btn-outline-disabled-bg: #0d1117;
+    --color-btn-outline-disabled-counter-bg: rgba(31,111,235,0.05);
+    --color-btn-outline-focus-border: rgba(240,246,252,0.1);
+    --color-btn-outline-focus-shadow: 0 0 0 3px rgba(17,88,199,0.4);
+    --color-btn-outline-counter-bg: rgba(31,111,235,0.1);
+    --color-btn-danger-text: #f85149;
+    --color-btn-danger-hover-text: #f0f6fc;
+    --color-btn-danger-hover-bg: #da3633;
+    --color-btn-danger-hover-border: #f85149;
+    --color-btn-danger-hover-shadow: 0 0 transparent;
+    --color-btn-danger-hover-inset-shadow: 0 0 transparent;
+    --color-btn-danger-hover-icon: #f0f6fc;
+    --color-btn-danger-hover-counter-bg: rgba(255,255,255,0.2);
+    --color-btn-danger-selected-text: #ffffff;
+    --color-btn-danger-selected-bg: #b62324;
+    --color-btn-danger-selected-border: #ff7b72;
+    --color-btn-danger-selected-shadow: 0 0 transparent;
+    --color-btn-danger-disabled-text: rgba(248,81,73,0.5);
+    --color-btn-danger-disabled-bg: #0d1117;
+    --color-btn-danger-disabled-counter-bg: rgba(218,54,51,0.05);
+    --color-btn-danger-focus-border: #f85149;
+    --color-btn-danger-focus-shadow: 0 0 0 3px rgba(248,81,73,0.4);
+    --color-btn-danger-counter-bg: rgba(218,54,51,0.1);
+    --color-btn-danger-icon: #f85149;
+    --color-underlinenav-icon: #484f58;
+    --color-underlinenav-border-hover: rgba(110,118,129,0.4);
+    --color-fg-default: #c9d1d9;
+    --color-fg-muted: #8b949e;
+    --color-fg-subtle: #484f58;
+    --color-fg-on-emphasis: #f0f6fc;
+    --color-canvas-default: #0d1117;
+    --color-canvas-overlay: #161b22;
+    --color-canvas-inset: #010409;
+    --color-canvas-subtle: #161b22;
+    --color-border-default: #30363d;
+    --color-border-muted: #21262d;
+    --color-border-subtle: rgba(240,246,252,0.1);
+    --color-shadow-small: 0 0 transparent;
+    --color-shadow-medium: 0 3px 6px #010409;
+    --color-shadow-large: 0 8px 24px #010409;
+    --color-shadow-extra-large: 0 12px 48px #010409;
+    --color-neutral-emphasis-plus: #6e7681;
+    --color-neutral-emphasis: #6e7681;
+    --color-neutral-muted: rgba(110,118,129,0.4);
+    --color-neutral-subtle: rgba(110,118,129,0.1);
+    --color-accent-fg: #58a6ff;
+    --color-accent-emphasis: #1f6feb;
+    --color-accent-muted: rgba(56,139,253,0.4);
+    --color-accent-subtle: rgba(56,139,253,0.15);
+    --color-success-fg: #3fb950;
+    --color-success-emphasis: #238636;
+    --color-success-muted: rgba(46,160,67,0.4);
+    --color-success-subtle: rgba(46,160,67,0.15);
+    --color-attention-fg: #d29922;
+    --color-attention-emphasis: #9e6a03;
+    --color-attention-muted: rgba(187,128,9,0.4);
+    --color-attention-subtle: rgba(187,128,9,0.15);
+    --color-severe-fg: #db6d28;
+    --color-severe-emphasis: #bd561d;
+    --color-severe-muted: rgba(219,109,40,0.4);
+    --color-severe-subtle: rgba(219,109,40,0.15);
+    --color-danger-fg: #f85149;
+    --color-danger-emphasis: #da3633;
+    --color-danger-muted: rgba(248,81,73,0.4);
+    --color-danger-subtle: rgba(248,81,73,0.15);
+    --color-done-fg: #a371f7;
+    --color-done-emphasis: #8957e5;
+    --color-done-muted: rgba(163,113,247,0.4);
+    --color-done-subtle: rgba(163,113,247,0.15);
+    --color-sponsors-fg: #db61a2;
+    --color-sponsors-emphasis: #bf4b8a;
+    --color-sponsors-muted: rgba(219,97,162,0.4);
+    --color-sponsors-subtle: rgba(219,97,162,0.15);
+    --color-primer-canvas-backdrop: rgba(1,4,9,0.8);
+    --color-primer-canvas-sticky: rgba(13,17,23,0.95);
+    --color-primer-border-active: #F78166;
+    --color-primer-border-contrast: rgba(240,246,252,0.2);
+    --color-primer-shadow-highlight: 0 0 transparent;
+    --color-primer-shadow-inset: 0 0 transparent;
+    --color-primer-shadow-focus: 0 0 0 3px #0c2d6b;
+    --color-scale-black: #010409;
+    --color-scale-white: #f0f6fc;
+    --color-scale-gray-0: #f0f6fc;
+    --color-scale-gray-1: #c9d1d9;
+    --color-scale-gray-2: #b1bac4;
+    --color-scale-gray-3: #8b949e;
+    --color-scale-gray-4: #6e7681;
+    --color-scale-gray-5: #484f58;
+    --color-scale-gray-6: #30363d;
+    --color-scale-gray-7: #21262d;
+    --color-scale-gray-8: #161b22;
+    --color-scale-gray-9: #0d1117;
+    --color-scale-blue-0: #cae8ff;
+    --color-scale-blue-1: #a5d6ff;
+    --color-scale-blue-2: #79c0ff;
+    --color-scale-blue-3: #58a6ff;
+    --color-scale-blue-4: #388bfd;
+    --color-scale-blue-5: #1f6feb;
+    --color-scale-blue-6: #1158c7;
+    --color-scale-blue-7: #0d419d;
+    --color-scale-blue-8: #0c2d6b;
+    --color-scale-blue-9: #051d4d;
+    --color-scale-green-0: #aff5b4;
+    --color-scale-green-1: #7ee787;
+    --color-scale-green-2: #56d364;
+    --color-scale-green-3: #3fb950;
+    --color-scale-green-4: #2ea043;
+    --color-scale-green-5: #238636;
+    --color-scale-green-6: #196c2e;
+    --color-scale-green-7: #0f5323;
+    --color-scale-green-8: #033a16;
+    --color-scale-green-9: #04260f;
+    --color-scale-yellow-0: #f8e3a1;
+    --color-scale-yellow-1: #f2cc60;
+    --color-scale-yellow-2: #e3b341;
+    --color-scale-yellow-3: #d29922;
+    --color-scale-yellow-4: #bb8009;
+    --color-scale-yellow-5: #9e6a03;
+    --color-scale-yellow-6: #845306;
+    --color-scale-yellow-7: #693e00;
+    --color-scale-yellow-8: #4b2900;
+    --color-scale-yellow-9: #341a00;
+    --color-scale-orange-0: #ffdfb6;
+    --color-scale-orange-1: #ffc680;
+    --color-scale-orange-2: #ffa657;
+    --color-scale-orange-3: #f0883e;
+    --color-scale-orange-4: #db6d28;
+    --color-scale-orange-5: #bd561d;
+    --color-scale-orange-6: #9b4215;
+    --color-scale-orange-7: #762d0a;
+    --color-scale-orange-8: #5a1e02;
+    --color-scale-orange-9: #3d1300;
+    --color-scale-red-0: #ffdcd7;
+    --color-scale-red-1: #ffc1ba;
+    --color-scale-red-2: #ffa198;
+    --color-scale-red-3: #ff7b72;
+    --color-scale-red-4: #f85149;
+    --color-scale-red-5: #da3633;
+    --color-scale-red-6: #b62324;
+    --color-scale-red-7: #8e1519;
+    --color-scale-red-8: #67060c;
+    --color-scale-red-9: #490202;
+    --color-scale-purple-0: #eddeff;
+    --color-scale-purple-1: #e2c5ff;
+    --color-scale-purple-2: #d2a8ff;
+    --color-scale-purple-3: #bc8cff;
+    --color-scale-purple-4: #a371f7;
+    --color-scale-purple-5: #8957e5;
+    --color-scale-purple-6: #6e40c9;
+    --color-scale-purple-7: #553098;
+    --color-scale-purple-8: #3c1e70;
+    --color-scale-purple-9: #271052;
+    --color-scale-pink-0: #ffdaec;
+    --color-scale-pink-1: #ffbedd;
+    --color-scale-pink-2: #ff9bce;
+    --color-scale-pink-3: #f778ba;
+    --color-scale-pink-4: #db61a2;
+    --color-scale-pink-5: #bf4b8a;
+    --color-scale-pink-6: #9e3670;
+    --color-scale-pink-7: #7d2457;
+    --color-scale-pink-8: #5e103e;
+    --color-scale-pink-9: #42062a;
+    --color-scale-coral-0: #FFDDD2;
+    --color-scale-coral-1: #FFC2B2;
+    --color-scale-coral-2: #FFA28B;
+    --color-scale-coral-3: #F78166;
+    --color-scale-coral-4: #EA6045;
+    --color-scale-coral-5: #CF462D;
+    --color-scale-coral-6: #AC3220;
+    --color-scale-coral-7: #872012;
+    --color-scale-coral-8: #640D04;
+    --color-scale-coral-9: #460701
+  }
+}
--- a/extension/src/ui/connect.css
+++ b/extension/src/ui/connect.css
@@ -203,4 +203,60 @@ body {
  cursor: pointer;
  padding: 0;
  font: inherit;
-}
+}
+
+/* Auth token section */
+.auth-token-section {
+  margin: 16px 0;
+  padding: 16px;
+  background-color: #f6f8fa;
+  border-radius: 6px;
+}
+
+.auth-token-description {
+  font-size: 12px;
+  color: #656d76;
+  margin-bottom: 12px;
+}
+
+.auth-token-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background-color: #ffffff;
+  padding: 8px;
+}
+
+.auth-token-code {
+  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 12px;
+  color: #1f2328;
+  border: none;
+  flex: 1;
+  padding: 0;
+  word-break: break-all;
+}
+
+.auth-token-refresh {
+  flex: none;
+  height: 24px;
+  width: 24px;
+  border: none;
+  outline: none;
+  color: var(--color-fg-muted);
+  background: transparent;
+  padding: 4px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+
+.auth-token-refresh svg {
+  margin: 0;
+}
+
+.auth-token-refresh:not(:disabled):hover {
+  background-color: var(--color-btn-selected-bg);
+}
--- a/extension/src/ui/connect.tsx
+++ b/extension/src/ui/connect.tsx
@@ -14,9 +14,11 @@
 * limitations under the License.
 */

-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import { Button, TabItem  } from './tabItem';
+import { Button, TabItem } from './tabItem';
+import { AuthTokenSection, getOrCreateAuthToken } from './authToken';
+
 import type { TabInfo } from './tabItem';

 type Status =
@@ -37,54 +39,69 @@ const ConnectApp: React.FC = () => {
  const [newTab, setNewTab] = useState<boolean>(false);

  useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-    const relayUrl = params.get('mcpRelayUrl');
+    const runAsync = async () => {
+      const params = new URLSearchParams(window.location.search);
+      const relayUrl = params.get('mcpRelayUrl');

-    if (!relayUrl) {
-      setShowButtons(false);
-      setStatus({ type: 'error', message: 'Missing mcpRelayUrl parameter in URL.' });
-      return;
-    }
+      if (!relayUrl) {
+        setShowButtons(false);
+        setStatus({ type: 'error', message: 'Missing mcpRelayUrl parameter in URL.' });
+        return;
+      }

-    setMcpRelayUrl(relayUrl);
+      setMcpRelayUrl(relayUrl);

-    try {
-      const client = JSON.parse(params.get('client') || '{}');
-      const info = `${client.name}/${client.version}`;
-      setClientInfo(info);
-      setStatus({
-        type: 'connecting',
-        message: `🎭 Playwright MCP started from  "${info}" is trying to connect. Do you want to continue?`
-      });
-    } catch (e) {
-      setStatus({ type: 'error', message: 'Failed to parse client version.' });
-      return;
-    }
+      try {
+        const client = JSON.parse(params.get('client') || '{}');
+        const info = `${client.name}/${client.version}`;
+        setClientInfo(info);
+        setStatus({
+          type: 'connecting',
+          message: `🎭 Playwright MCP started from  "${info}" is trying to connect. Do you want to continue?`
+        });
+      } catch (e) {
+        setStatus({ type: 'error', message: 'Failed to parse client version.' });
+        return;
+      }

-    const parsedVersion = parseInt(params.get('protocolVersion') ?? '', 10);
-    const requiredVersion = isNaN(parsedVersion) ? 1 : parsedVersion;
-    if (requiredVersion > SUPPORTED_PROTOCOL_VERSION) {
-      const extensionVersion = chrome.runtime.getManifest().version;
-      setShowButtons(false);
-      setShowTabList(false);
-      setStatus({
-        type: 'error',
-        versionMismatch: {
-          extensionVersion,
-        }
-      });
-      return;
-    }
+      const parsedVersion = parseInt(params.get('protocolVersion') ?? '', 10);
+      const requiredVersion = isNaN(parsedVersion) ? 1 : parsedVersion;
+      if (requiredVersion > SUPPORTED_PROTOCOL_VERSION) {
+        const extensionVersion = chrome.runtime.getManifest().version;
+        setShowButtons(false);
+        setShowTabList(false);
+        setStatus({
+          type: 'error',
+          versionMismatch: {
+            extensionVersion,
+          }
+        });
+        return;
+      }

-    void connectToMCPRelay(relayUrl);
+      const expectedToken = getOrCreateAuthToken();
+      const token = params.get('token');
+      if (token === expectedToken) {
+        await connectToMCPRelay(relayUrl);
+        await handleConnectToTab();
+        return;
+      }
+      if (token) {
+        handleReject('Invalid token provided.');
+        return;
+      }

-    // If this is a browser_navigate command, hide the tab list and show simple allow/reject
-    if (params.get('newTab') === 'true') {
-      setNewTab(true);
-      setShowTabList(false);
-    } else {
-      void loadTabs();
-    }
+      await connectToMCPRelay(relayUrl);
+
+      // If this is a browser_navigate command, hide the tab list and show simple allow/reject
+      if (params.get('newTab') === 'true') {
+        setNewTab(true);
+        setShowTabList(false);
+      } else {
+        await loadTabs();
+      }
+    };
+    void runAsync();
  }, []);

  const handleReject = useCallback((message: string) => {
@@ -94,7 +111,6 @@ const ConnectApp: React.FC = () => {
  }, []);

  const connectToMCPRelay = useCallback(async (mcpRelayUrl: string) => {
-
    const response = await chrome.runtime.sendMessage({ type: 'connectToMCPRelay', mcpRelayUrl  });
    if (!response.success)
      handleReject(response.error);
@@ -174,6 +190,10 @@ const ConnectApp: React.FC = () => {
          </div>
        )}

+        {status?.type === 'connecting' && (
+          <AuthTokenSection />
+        )}
+
        {showTabList && (
          <div>
            <div className='tab-section-title'>
--- a/extension/src/ui/copyToClipboard.css
+++ b/extension/src/ui/copyToClipboard.css
@@ -0,0 +1,39 @@
+/*
+  Copyright (c) Microsoft Corporation.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+.copy-icon {
+  flex: none;
+  height: 24px;
+  width: 24px;
+  border: none;
+  outline: none;
+  color: var(--color-fg-muted);
+  background: transparent;
+  padding: 4px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+
+.copy-icon svg {
+  margin: 0;
+}
+
+.copy-icon:not(:disabled):hover {
+  background-color: var(--color-btn-selected-bg);
+}
--- a/extension/src/ui/copyToClipboard.tsx
+++ b/extension/src/ui/copyToClipboard.tsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+import * as icons from './icons';
+import './copyToClipboard.css';
+
+type CopyToClipboardProps = {
+  value: string;
+};
+
+/**
+ * A copy to clipboard button.
+ */
+export const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({ value }) => {
+  type IconType = 'copy' | 'check' | 'cross';
+  const [icon, setIcon] = React.useState<IconType>('copy');
+
+  React.useEffect(() => {
+    setIcon('copy');
+  }, [value]);
+
+  React.useEffect(() => {
+    if (icon === 'check') {
+      const timeout = setTimeout(() => {
+        setIcon('copy');
+      }, 3000);
+      return () => clearTimeout(timeout);
+    }
+  }, [icon]);
+
+  const handleCopy = React.useCallback(() => {
+    navigator.clipboard.writeText(value).then(() => {
+      setIcon('check');
+    }, () => {
+      setIcon('cross');
+    });
+  }, [value]);
+  const iconElement = icon === 'check' ? icons.check() : icon === 'cross' ? icons.cross() : icons.copy();
+  return <button className='copy-icon' title='Copy to clipboard' aria-label='Copy to clipboard' onClick={handleCopy}>{iconElement}</button>;
+};
--- a/extension/src/ui/icons.css
+++ b/extension/src/ui/icons.css
@@ -0,0 +1,32 @@
+/*
+  Copyright (c) Microsoft Corporation.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+.octicon {
+  display: inline-block;
+  overflow: visible !important;
+  vertical-align: text-bottom;
+  fill: currentColor;
+  margin-right: 7px;
+  flex: none;
+}
+
+.color-icon-success {
+  color: var(--color-success-fg) !important;
+}
+
+.color-text-danger {
+  color: var(--color-danger-fg) !important;
+}
--- a/extension/src/ui/icons.tsx
+++ b/extension/src/ui/icons.tsx
@@ -0,0 +1,49 @@
+/*
+  Copyright (c) Microsoft Corporation.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import './icons.css';
+import './colors.css';
+
+export const cross = () => {
+  return <svg className='octicon color-text-danger' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'>
+    <path fillRule='evenodd' d='M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z'></path>
+  </svg>;
+};
+
+export const check = () => {
+  return <svg aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16' data-view-component='true' className='octicon color-icon-success'>
+    <path fillRule='evenodd' d='M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z'></path>
+  </svg>;
+};
+
+export const copy = () => {
+  return <svg className='octicon' viewBox='0 0 16 16' width='16' height='16' aria-hidden='true'>
+    <path d='M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z'></path>
+    <path d='M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z'></path>
+  </svg>;
+};
+
+export const refresh = () => {
+  return <svg className='octicon' viewBox="0 0 16 16" width="16" height="16" aria-hidden='true'>
+    <path d="M1.705 8.005a.75.75 0 0 1 .834.656 5.5 5.5 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.002 7.002 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834ZM8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.002 7.002 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.5 5.5 0 0 0 8 2.5Z"></path>
+  </svg>;
+};
+
+export const chevronDown = () => {
+  return <svg className='octicon' viewBox="0 0 16 16" width="16" height="16" aria-hidden='true'>
+    <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path>
+  </svg>;
+};
--- a/extension/src/ui/status.tsx
+++ b/extension/src/ui/status.tsx
@@ -19,6 +19,7 @@ import { createRoot } from 'react-dom/client';
 import { Button, TabItem  } from './tabItem';

 import type { TabInfo } from './tabItem';
+import { AuthTokenSection } from './authToken';

 interface ConnectionStatus {
  isConnected: boolean;
@@ -97,6 +98,7 @@ const StatusApp: React.FC = () => {
            No MCP clients are currently connected.
          </div>
        )}
+        <AuthTokenSection />
      </div>
    </div>
  );
--- a/extension/tests/extension.spec.ts
+++ b/extension/tests/extension.spec.ts
@@ -304,3 +304,33 @@ test(`custom executablePath`, async ({ startClient, server, useShortConnectionTi
  });
  expect(await fs.promises.readFile(test.info().outputPath('output.txt'), 'utf8')).toContain('Custom exec args: chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/connect.html?');
 });
+
+test(`bypass connection dialog with token`, async ({ browserWithExtension, startClient, server }) => {
+  const browserContext = await browserWithExtension.launch();
+
+  const page = await browserContext.newPage();
+  await page.goto('chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/status.html');
+  const token = await page.locator('.auth-token-code').textContent();
+  const [name, value] = token?.split('=') || [];
+
+  const { client } = await startClient({
+    args: [`--extension`],
+    extensionToken: value,
+    config: {
+      browser: {
+        userDataDir: browserWithExtension.userDataDir,
+      }
+    },
+  });
+
+  const navigateResponse = await client.callTool({
+    name: 'browser_navigate',
+    arguments: { url: server.HELLO_WORLD },
+  });
+
+  expect(await navigateResponse).toHaveResponse({
+    pageState: expect.stringContaining(`- generic [active] [ref=e1]: Hello, world!`),
+  });
+
+
+});
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,38 +1,38 @@
 {
  "name": "@playwright/mcp",
-  "version": "0.0.37",
+  "version": "0.0.52",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@playwright/mcp",
-      "version": "0.0.37",
+      "version": "0.0.52",
      "license": "Apache-2.0",
      "dependencies": {
-        "playwright": "1.56.0-alpha-2025-09-06",
-        "playwright-core": "1.56.0-alpha-2025-09-06"
+        "playwright": "1.58.0-alpha-2025-12-11",
+        "playwright-core": "1.58.0-alpha-2025-12-11"
      },
      "bin": {
        "mcp-server-playwright": "cli.js"
      },
      "devDependencies": {
-        "@modelcontextprotocol/sdk": "^1.17.5",
-        "@playwright/test": "1.56.0-alpha-2025-09-06",
-        "@types/node": "^24.3.0",
-        "zod-to-json-schema": "^3.24.6"
+        "@modelcontextprotocol/sdk": "^1.24.0",
+        "@playwright/test": "1.58.0-alpha-2025-12-11",
+        "@types/node": "^24.3.0"
      },
      "engines": {
        "node": ">=18"
      }
    },
    "node_modules/@modelcontextprotocol/sdk": {
-      "version": "1.17.5",
-      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.17.5.tgz",
-      "integrity": "sha512-QakrKIGniGuRVfWBdMsDea/dx1PNE739QJ7gCM41s9q+qaCYTHCdsIBXQVVXry3mfWAiaM9kT22Hyz53Uw8mfg==",
+      "version": "1.24.3",
+      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.24.3.tgz",
+      "integrity": "sha512-YgSHW29fuzKKAHTGe9zjNoo+yF8KaQPzDC2W9Pv41E7/57IfY+AMGJ/aDFlgTLcVVELoggKE4syABCE75u3NCw==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "ajv": "^6.12.6",
+        "ajv": "^8.17.1",
+        "ajv-formats": "^3.0.1",
        "content-type": "^1.0.5",
        "cors": "^2.8.5",
        "cross-spawn": "^7.0.5",
@@ -40,23 +40,36 @@
        "eventsource-parser": "^3.0.0",
        "express": "^5.0.1",
        "express-rate-limit": "^7.5.0",
+        "jose": "^6.1.1",
        "pkce-challenge": "^5.0.0",
        "raw-body": "^3.0.0",
-        "zod": "^3.23.8",
-        "zod-to-json-schema": "^3.24.1"
+        "zod": "^3.25 || ^4.0",
+        "zod-to-json-schema": "^3.25.0"
      },
      "engines": {
        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@cfworker/json-schema": "^4.1.1",
+        "zod": "^3.25 || ^4.0"
+      },
+      "peerDependenciesMeta": {
+        "@cfworker/json-schema": {
+          "optional": true
+        },
+        "zod": {
+          "optional": false
+        }
      }
    },
    "node_modules/@playwright/test": {
-      "version": "1.56.0-alpha-2025-09-06",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.56.0-alpha-2025-09-06.tgz",
-      "integrity": "sha512-BhjZwYn26kGwWVoF9et+4RnSb/HuJ2cbzDPACWdkBApEb+2fBb060cOQZ63hZ+IIeQUd2Q4TCZbH5U9tvXD23A==",
+      "version": "1.58.0-alpha-2025-12-11",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.58.0-alpha-2025-12-11.tgz",
+      "integrity": "sha512-Lo3wdh1iFDzq6s5sW5Lqj9CI9612yUjVIW0s+DQ+lA6Nqz7C9ittrSkMYBcrLNat/IVp1HnUBG1ZmGJIG0dHbA==",
      "dev": true,
      "license": "Apache-2.0",
      "dependencies": {
-        "playwright": "1.56.0-alpha-2025-09-06"
+        "playwright": "1.58.0-alpha-2025-12-11"
      },
      "bin": {
        "playwright": "cli.js"
@@ -90,41 +103,63 @@
      }
    },
    "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
      },
      "funding": {
        "type": "github",
        "url": "https://github.com/sponsors/epoberezkin"
      }
    },
+    "node_modules/ajv-formats": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
+      "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/body-parser": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.0.tgz",
-      "integrity": "sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.1.tgz",
+      "integrity": "sha512-nfDwkulwiZYQIGwxdy0RUmowMhKcFVcYXUU7m4QlKYim1rUtg83xm2yjZ40QjDuc291AJjjeSc9b++AWHSgSHw==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "bytes": "^3.1.2",
        "content-type": "^1.0.5",
-        "debug": "^4.4.0",
+        "debug": "^4.4.3",
        "http-errors": "^2.0.0",
-        "iconv-lite": "^0.6.3",
+        "iconv-lite": "^0.7.0",
        "on-finished": "^2.4.1",
        "qs": "^6.14.0",
-        "raw-body": "^3.0.0",
-        "type-is": "^2.0.0"
+        "raw-body": "^3.0.1",
+        "type-is": "^2.0.1"
      },
      "engines": {
        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
      }
    },
    "node_modules/bytes": {
@@ -241,9 +276,9 @@
      }
    },
    "node_modules/debug": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -439,12 +474,22 @@
      "dev": true,
      "license": "MIT"
    },
-    "node_modules/fast-json-stable-stringify": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+    "node_modules/fast-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
+      "integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
      "dev": true,
-      "license": "MIT"
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
    },
    "node_modules/finalhandler": {
      "version": "2.1.0",
@@ -614,9 +659,9 @@
      }
    },
    "node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.1.tgz",
+      "integrity": "sha512-2Tth85cXwGFHfvRgZWszZSvdo+0Xsqmw8k8ZwxScfcBneNUraK+dxRxRm24nszx80Y0TVio8kKLt5sLE7ZCLlw==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -624,6 +669,10 @@
      },
      "engines": {
        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
      }
    },
    "node_modules/inherits": {
@@ -657,10 +706,20 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/jose": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.1.3.tgz",
+      "integrity": "sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
    "node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
      "dev": true,
      "license": "MIT"
    },
@@ -825,12 +884,12 @@
      }
    },
    "node_modules/playwright": {
-      "version": "1.56.0-alpha-2025-09-06",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.56.0-alpha-2025-09-06.tgz",
-      "integrity": "sha512-suVjiF5eeUtIqFq5E/5LGgkV0/bRSik87N+M7uLsjPQrKln9QHbZt3cy7Zybicj3ZqTBWWHvpN9b4cnpg6hS0g==",
+      "version": "1.58.0-alpha-2025-12-11",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.0-alpha-2025-12-11.tgz",
+      "integrity": "sha512-wNAnyMpt4VZCy9wryVXphHfHgpoD2LRO/h4Bl8GDuvzIpvx6uU/TkRmC5/91feROZ1ng1tTjY6oTVdqIKt7uGQ==",
      "license": "Apache-2.0",
      "dependencies": {
-        "playwright-core": "1.56.0-alpha-2025-09-06"
+        "playwright-core": "1.58.0-alpha-2025-12-11"
      },
      "bin": {
        "playwright": "cli.js"
@@ -843,9 +902,9 @@
      }
    },
    "node_modules/playwright-core": {
-      "version": "1.56.0-alpha-2025-09-06",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.56.0-alpha-2025-09-06.tgz",
-      "integrity": "sha512-B2s/cuqYuu+mT4hIHG8gIOXjCSKh0Np1gJNCp0CrDk/UTLB74gThwXiyPAJU0fADIQH6Dv1glv8ZvKTDVT8Fng==",
+      "version": "1.58.0-alpha-2025-12-11",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.0-alpha-2025-12-11.tgz",
+      "integrity": "sha512-8c8vO4BMIGmEac13g4hxzWNCP/pGdRLhysUvcANU0uxH5UcN/DeFQ5RP+6NIK732u/KpLjCqI27TWdr1xgKb3A==",
      "license": "Apache-2.0",
      "bin": {
        "playwright-core": "cli.js"
@@ -868,16 +927,6 @@
        "node": ">= 0.10"
      }
    },
-    "node_modules/punycode": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
-      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
    "node_modules/qs": {
      "version": "6.14.0",
      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
@@ -937,6 +986,16 @@
        "url": "https://opencollective.com/express"
      }
    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/router": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
@@ -1179,16 +1238,6 @@
        "node": ">= 0.8"
      }
    },
-    "node_modules/uri-js": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
-      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "punycode": "^2.1.0"
-      }
-    },
    "node_modules/vary": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -1223,9 +1272,9 @@
      "license": "ISC"
    },
    "node_modules/zod": {
-      "version": "3.25.76",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
-      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.13.tgz",
+      "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
      "dev": true,
      "license": "MIT",
      "funding": {
@@ -1233,13 +1282,13 @@
      }
    },
    "node_modules/zod-to-json-schema": {
-      "version": "3.24.6",
-      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.24.6.tgz",
-      "integrity": "sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg==",
+      "version": "3.25.0",
+      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.25.0.tgz",
+      "integrity": "sha512-HvWtU2UG41LALjajJrML6uQejQhNJx+JBO9IflpSja4R03iNWfKXrj6W2h7ljuLyc1nKS+9yDyL/9tD1U/yBnQ==",
      "dev": true,
      "license": "ISC",
      "peerDependencies": {
-        "zod": "^3.24.1"
+        "zod": "^3.25 || ^4"
      }
    }
  }
--- a/package.json
+++ b/package.json
@@ -1,7 +1,8 @@
 {
  "name": "@playwright/mcp",
-  "version": "0.0.37",
+  "version": "0.0.52",
  "description": "Playwright Tools for MCP",
+  "mcpName": "com.microsoft/playwright-mcp",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/microsoft/playwright-mcp.git"
@@ -18,12 +19,16 @@
    "lint": "npm run update-readme",
    "update-readme": "node update-readme.js",
    "docker-build": "docker build --no-cache -t playwright-mcp-dev:latest .",
+    "docker-rm": "docker rm playwright-mcp-dev",
+    "docker-run": "docker run -it -p 8080:8080 --name playwright-mcp-dev playwright-mcp-dev:latest",
    "test": "playwright test",
    "ctest": "playwright test --project=chrome",
    "ftest": "playwright test --project=firefox",
    "wtest": "playwright test --project=webkit",
    "dtest": "MCP_IN_DOCKER=1 playwright test --project=chromium-docker",
-    "npm-publish": "npm run clean && npm run test && npm publish"
+    "npm-publish": "npm run clean && npm run test && npm publish",
+    "copy-config": "cp ../playwright/packages/playwright/src/mcp/config.d.ts . && perl -pi -e \"s|import type \\* as playwright from 'playwright-core';|import type * as playwright from 'playwright';|\" ./config.d.ts",
+    "roll": "npm run copy-config && npm run lint"
  },
  "exports": {
    "./package.json": "./package.json",
@@ -33,16 +38,15 @@
    }
  },
  "dependencies": {
-    "playwright": "1.56.0-alpha-2025-09-06",
-    "playwright-core": "1.56.0-alpha-2025-09-06"
+    "playwright": "1.58.0-alpha-2025-12-11",
+    "playwright-core": "1.58.0-alpha-2025-12-11"
  },
  "bin": {
    "mcp-server-playwright": "cli.js"
  },
  "devDependencies": {
-    "@modelcontextprotocol/sdk": "^1.17.5",
-    "@playwright/test": "1.56.0-alpha-2025-09-06",
-    "@types/node": "^24.3.0",
-    "zod-to-json-schema": "^3.24.6"
+    "@modelcontextprotocol/sdk": "^1.24.0",
+    "@playwright/test": "1.58.0-alpha-2025-12-11",
+    "@types/node": "^24.3.0"
  }
 }
--- a/tests/capabilities.spec.ts
+++ b/tests/capabilities.spec.ts
@@ -36,6 +36,7 @@ test('test snapshot tool list', async ({ client }) => {
    'browser_network_requests',
    'browser_press_key',
    'browser_resize',
+    'browser_run_code',
    'browser_snapshot',
    'browser_tabs',
    'browser_take_screenshot',
@@ -67,6 +68,7 @@ test('test tool list proxy mode', async ({ startClient }) => {
    'browser_network_requests',
    'browser_press_key',
    'browser_resize',
+    'browser_run_code',
    'browser_snapshot',
    'browser_tabs',
    'browser_take_screenshot',
--- a/tests/click.spec.ts
+++ b/tests/click.spec.ts
@@ -16,10 +16,16 @@

 import { test, expect } from './fixtures';

-test('browser_click', async ({ client, server, mcpBrowser }) => {
+test('browser_click', async ({ client, server }) => {
  server.setContent('/', `
    <title>Title</title>
    <button>Submit</button>
+    <script>
+      const button = document.querySelector('button');
+      button.addEventListener('click', () => {
+        button.focus(); // without manual focus, webkit focuses body
+      });
+    </script>
  `, 'text/html');

  expect(await client.callTool({
@@ -38,6 +44,6 @@ test('browser_click', async ({ client, server, mcpBrowser }) => {
    },
  })).toHaveResponse({
    code: `await page.getByRole('button', { name: 'Submit' }).click();`,
-    pageState: expect.stringContaining(`- button "Submit" ${mcpBrowser !== 'webkit' || process.platform === 'linux' ? '[active] ' : ''}[ref=e2]`),
+    pageState: expect.stringContaining(`button "Submit" [active] [ref=e2]`),
  });
 });
--- a/tests/fixtures.ts
+++ b/tests/fixtures.ts
@@ -46,6 +46,7 @@ export type StartClient = (options?: {
  config?: Config,
  roots?: { name: string, uri: string }[],
  rootsResponseDelay?: number,
+  extensionToken?: string,
 }) => Promise<{ client: Client, stderr: () => string }>;


@@ -102,7 +103,7 @@ export const test = baseTest.extend<TestFixtures & TestOptions, WorkerFixtures>(
          };
        });
      }
-      const { transport, stderr } = await createTransport(args, mcpMode, testInfo.outputPath('ms-playwright'));
+      const { transport, stderr } = await createTransport(args, mcpMode, testInfo.outputPath('ms-playwright'), options?.extensionToken);
      let stderrBuffer = '';
      stderr?.on('data', data => {
        if (process.env.PWMCP_DEBUG)
@@ -181,7 +182,7 @@ export const test = baseTest.extend<TestFixtures & TestOptions, WorkerFixtures>(
  },
 });

-async function createTransport(args: string[], mcpMode: TestOptions['mcpMode'], profilesDir: string): Promise<{
+async function createTransport(args: string[], mcpMode: TestOptions['mcpMode'], profilesDir: string, extensionToken?: string): Promise<{
  transport: Transport,
  stderr: Stream | null,
 }> {
@@ -208,6 +209,7 @@ async function createTransport(args: string[], mcpMode: TestOptions['mcpMode'],
      DEBUG_COLORS: '0',
      DEBUG_HIDE_DATE: '1',
      PWMCP_PROFILES_DIR_FOR_TEST: profilesDir,
+      ...(extensionToken ? { PLAYWRIGHT_MCP_EXTENSION_TOKEN: extensionToken } : {}),
    },
  });
  return {
--- a/update-readme.js
+++ b/update-readme.js
@@ -21,7 +21,7 @@ const path = require('path')
 const { zodToJsonSchema } = require('zod-to-json-schema')
 const { execSync } = require('child_process');

-const { allTools } = require('playwright/lib/mcp/browser/tools');
+const { browserTools } = require('playwright/lib/mcp/browser/tools');

 const capabilities = {
  'core': 'Core automation',
@@ -29,11 +29,11 @@ const capabilities = {
  'core-install': 'Browser installation',
  'vision': 'Coordinate-based (opt-in via --caps=vision)',
  'pdf': 'PDF generation (opt-in via --caps=pdf)',
-  'verify': 'Verify (opt-in via --caps=verify)',
+  'testing': 'Test assertions (opt-in via --caps=testing)',
  'tracing': 'Tracing (opt-in via --caps=tracing)',
 };

-const toolsByCapability = Object.fromEntries(Object.entries(capabilities).map(([capability, title]) => [title, allTools.filter(tool => tool.capability === capability).sort((a, b) => a.schema.name.localeCompare(b.schema.name))]));
+const toolsByCapability = Object.fromEntries(Object.entries(capabilities).map(([capability, title]) => [title, browserTools.filter(tool => tool.capability === capability).sort((a, b) => a.schema.name.localeCompare(b.schema.name))]));

 /**
 * @param {any} tool
@@ -135,12 +135,38 @@ async function updateOptions(content) {
  ]);
 }

+/**
+ * @param {string} content
+ * @returns {Promise<string>}
+ */
+async function updateConfig(content) {
+  console.log('Updating config schema from config.d.ts...');
+  const configPath = path.join(__dirname, 'config.d.ts');
+  const configContent = await fs.promises.readFile(configPath, 'utf-8');
+  
+  // Extract the Config type definition
+  const configTypeMatch = configContent.match(/export type Config = (\{[\s\S]*?\n\});/);
+  if (!configTypeMatch)
+    throw new Error('Config type not found in config.d.ts');
+  
+  const configType = configTypeMatch[1]; // Use capture group to get just the object definition
+  
+  const startMarker = `<!--- Config generated by ${path.basename(__filename)} -->`;
+  const endMarker = `<!--- End of config generated section -->`;
+  return updateSection(content, startMarker, endMarker, [
+    '```typescript',
+    configType,
+    '```',
+  ]);
+}
+
 async function updateReadme() {
  const readmePath = path.join(__dirname, 'README.md');
  const readmeContent = await fs.promises.readFile(readmePath, 'utf-8');
  const withTools = await updateTools(readmeContent);
  const withOptions = await updateOptions(withTools);
-  await fs.promises.writeFile(readmePath, withOptions, 'utf-8');
+  const withConfig = await updateConfig(withOptions);
+  await fs.promises.writeFile(readmePath, withConfig, 'utf-8');
  console.log('README updated successfully');
 }
Author	SHA1	Message	Date
Yury Semikhatsky	10c340c0b3	chore: mark v0.0.52 (#1256 )	2025-12-11 11:01:20 -08:00
Yury Semikhatsky	850520321b	chore: roll 1.58.0-alpha-2025-12-11 (#1255 )	2025-12-11 10:25:03 -08:00
Pavel Feldman	b717a2a8ed	chore: mark v0.0.51 (#1248 )	2025-12-08 08:13:35 -08:00
Pavel Feldman	ff9544db83	chore: mark v0.0.50 (#1244 )	2025-12-05 13:24:54 -08:00
Devraj Mehta	c85ee1a6ec	docs: update README with Copilot CLI usage instructions (#1243 )	2025-12-05 12:52:12 -08:00
Pavel Feldman	0fcb25d118	chore: mark v0.0.49 (#1232 )	2025-11-30 11:28:12 -08:00
Simon Knott	f4df37ca71	chore: generate config section from config.d.ts (#1224 )	2025-11-28 15:38:42 -08:00
Pavel Feldman	64f65ccd10	chore: mark v0.0.48 (#1218 )	2025-11-21 14:34:32 -08:00
AJ (@techfren)	3f7e2d1b45	docs: add authentication token instructions to extension README (#1207 )	2025-11-21 11:28:37 -08:00
Simon Knott	e0cb424dea	docs: update config file section (#1209 ) Copy-paste of `7671e2b7f0/packages/playwright/src/mcp/config.d.ts (L21)`.	2025-11-19 17:06:43 +01:00
Joel Verhagen	86e0020b4a	Update version to 0.0.47 in server.json (#1204 )	2025-11-18 08:47:32 -08:00
Joel Verhagen	009aa9275b	Add step for publishing to MCP Registry (#1197 ) This adds a new step for the `release` event to publish to the Official MCP Registry. Summary of changes: - Add `server.json` which is the MCP Server manifest - Used metadata from the GH MCP Registry - Used the name `com.microsoft/playwright-mcp` - Add `publish-release-mcp-registry` job that runs manually - Install Microsoft Go for compliant Go crypto - Log in to Azure for Key Vault access - Publish to the MCP Registry in the `microsoft.com` namespace. - Add `mcpName` to the `package.json` which the MCP Registry validates. The publishing requires some secret variables: - `AZURE_MCP_REGISTRY_CLIENT_ID` - service principal client ID (app ID) with Get Key and Sign access to a Key Vault - `AZURE_MCP_REGISTRY_TENANT_ID` - tenant ID for the service principal (should be a production tenant) - `AZURE_MCP_REGISTRY_SUBSCRIPTION_ID` - Azure subscription ID holding the Key Vault - `KV_NAME` - the Key Vault name, e.g. `mykeyvault` - `KV_KEY_NAME` - the name of a Key in the Key Vault, needs to be ECDSA P-384. I can provide internal documentation for how to set up the service principal (managed identity is easiest), vault, and key as well as registering the key so it can be used for the `microsoft.com` namespace. Note: after the new job is proven to work as expected, we can switch it to automatically running after the `publish-release-npm` job on the `release` event.	2025-11-17 13:43:07 -08:00
Pavel Feldman	c016643bf9	chore: mark v0.0.47 (#1198 )	2025-11-14 12:23:56 -08:00
Pavel Feldman	8cc557d677	chore: mark v0.0.46 (#1188 )	2025-11-07 13:41:19 -08:00
Ben Tossell	15d382b940	docs: add Factory installation instructions (#1184 )	2025-11-04 08:30:14 -08:00
Pavel Feldman	e72701b21c	chore: mark v0.0.45 (#1179 )	2025-10-31 14:05:32 -07:00
Dmitry Gozman	8ee8445342	chore: roll to 1.57.0-alpha-1761929702000 (#1178 )	2025-10-31 20:16:50 +00:00
Raduan A.	ac6e678135	docs: add codex CLI command to README (#1168 )	2025-10-29 17:46:42 -07:00
Yury Semikhatsky	b945ace746	chore: mark v0.0.44 (#1165 )	2025-10-24 12:33:27 -07:00
Yury Semikhatsky	b3dce4097e	chore: roll 1.57.0-alpha-2025-10-24 (#1164 )	2025-10-24 11:29:05 -07:00
Doan Bac Tam	67ed859c2a	docs: update with Kiro IDE MCP Servers details (#1143 ) Added Kiro IDE MCP Servers documentation with example configuration.	2025-10-21 18:40:09 -07:00
Pavel Feldman	7da5e7273c	chore: add docker run for testing purposes (#1153 )	2025-10-21 18:39:27 -07:00
dependabot[bot]	fe59d4b35f	chore(deps-dev): bump vite from 5.4.20 to 5.4.21 in /extension (#1156 )	2025-10-21 08:06:41 -07:00
Pavel Feldman	a03ec7ad56	chore: mark v0.0.43 (#1151 )	2025-10-16 13:08:38 -07:00
Yury Semikhatsky	ad14743235	chore: roll 1.57.0-alpha-2025-10-16 (#1150 )	2025-10-16 12:55:34 -07:00
Pavel Feldman	a9ffccd40f	docs: fix the testing capability docs (#1149 )	2025-10-16 11:59:45 -07:00
Yury Semikhatsky	b4e016a0b8	chore: mark v0.0.42 (#1125 )	2025-10-09 14:57:41 -07:00
Yury Semikhatsky	e17bf17dff	chore: roll 1.57.0-alpha-2025-10-09 (#1123 )	2025-10-09 13:32:16 -07:00
Isuru-F	7ee5c87a4b	docs: add Amp setup instructions to README (#1105 )	2025-10-03 14:00:36 -07:00
TheLazyIndianTechie	2817952d0d	docs: updated Warp MCP documentation (#1104 )	2025-10-03 13:59:34 -07:00
Kim Hallberg	fb900a8827	docs: add instructions for Warp (#1103 )	2025-10-02 13:05:41 -07:00
Yury Semikhatsky	29e532687c	chore: mark v0.0.41 (#1099 )	2025-10-01 15:54:05 -07:00
Yury Semikhatsky	d149b89889	chore: roll to 1.56.0-alpha-2025-10-01 (#1098 )	2025-10-01 14:55:17 -07:00
Pavel Feldman	1caecd00c7	Revert "chore: include cwd in a vscode config" (#1095 ) Reverts microsoft/playwright-mcp#1085	2025-09-30 13:30:06 -07:00
Pavel Feldman	9657b58e17	chore: include cwd in a vscode config (#1085 )	2025-09-26 17:35:03 -07:00
zhu733756	8dfea1c67f	docs: running the Playwright-MCP server in docker (#1074 )	2025-09-25 08:23:28 -07:00
Pavel Feldman	a86b580797	chore: mark v0.0.40 (#1079 )	2025-09-24 17:08:20 -07:00
Pavel Feldman	927e570c18	chore: roll Playwright to latest (#1078 )	2025-09-24 17:07:37 -07:00
Yury Semikhatsky	24e68fa41d	devops: do not use npm token (#1076 ) https://github.com/microsoft/playwright/issues/37495	2025-09-24 15:22:10 -07:00
Yury Semikhatsky	e50322731b	devops: merge canary publishing workflow into publish.yml (#1075 ) Reference https://github.com/microsoft/playwright/issues/37495	2025-09-24 14:54:43 -07:00
Yury Semikhatsky	711089d261	chore: add auth token example (#1070 ) Fixes https://github.com/microsoft/playwright-mcp/issues/1069	2025-09-22 16:47:13 -07:00
Max Schmitt	4a7be8de75	devops: migrate to OIDC NPM publishing (#1068 ) https://github.com/microsoft/playwright/issues/37495	2025-09-22 16:19:16 +02:00
wagner-psouza	1523338246	feat(config): add sharedBrowserContext option to reuse browser context across HTTP client (#1058 )	2025-09-19 19:30:59 -07:00
Pavel Feldman	08bd91d119	chore: mark v0.0.39 (#1059 )	2025-09-19 07:55:26 -07:00
Pavel Feldman	ef83729796	chore: roll Playwright to latest (#1060 )	2025-09-19 07:55:12 -07:00
Pavel Feldman	a70854c02f	chore: roll Playwright to latest (#1056 )	2025-09-18 16:39:32 -07:00
Pavel Feldman	d42e0e12fc	chore: mark v0.0.38 (#1049 )	2025-09-17 09:42:45 -07:00
Pavel Feldman	335315f158	chore: roll Playwright to latest (#1050 )	2025-09-17 09:38:19 -07:00
Tejas Kumar	c49dedb83f	docs: fix programmatic usage (#1047 )	2025-09-17 07:22:12 -07:00
Zeke	0bfcb05422	docs: fix cursor mcp link redirect error (#1037 )	2025-09-15 11:21:12 -07:00
dependabot[bot]	ca0820c55e	chore(deps-dev): bump vite from 5.4.19 to 5.4.20 in /extension (#1029 )	2025-09-10 15:38:22 -07:00
Yury Semikhatsky	45fee738bc	feat(extension): bypass connection dialog when token is provided (#1024 ) <img width="698" height="551" alt="image" src="https://github.com/user-attachments/assets/feee2375-7654-42cb-b9fa-f48aee5dd045" /> Reference: https://github.com/microsoft/playwright-mcp/issues/965	2025-09-10 15:33:31 -07:00
Yury Semikhatsky	dc3419023f	chore: roll playwright to 1.56.0-alpha-2025-09-10 (#1027 )	2025-09-10 10:16:40 -07:00