chore: mark 0.0.33 (#851 )

chore: roll Playwright to recent (#850 )
chore: do not return fullPage screenshots to the LLM (#849 )
2025-08-08 17:22:18 -07:00 · 2025-08-08 09:37:07 -07:00 · 2025-08-08 09:36:51 -07:00 · 2025-08-07 18:39:50 -07:00 · 2025-08-07 17:24:48 -07:00 · 2025-08-07 14:45:52 -07:00
24 changed files with 802 additions and 194 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -11,10 +11,10 @@ jobs:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
-    - name: Use Node.js 18
+    - name: Use Node.js 20
      uses: actions/setup-node@v4
      with:
-        node-version: '18'
+        node-version: '20'
        cache: 'npm'
    - name: Install dependencies
      run: npm ci
@@ -32,11 +32,10 @@ jobs:
    runs-on: ${{ matrix.os }}
    steps:
    - uses: actions/checkout@v4
-    - name: Use Node.js 18
+    - name: Use Node.js 20
      uses: actions/setup-node@v4
      with:
-        # https://github.com/microsoft/playwright-mcp/issues/344
-        node-version: '18.19'
+        node-version: '20'
        cache: 'npm'
    - name: Install dependencies
      run: npm ci
@@ -55,10 +54,10 @@ jobs:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
-    - name: Use Node.js 18
+    - name: Use Node.js 20
      uses: actions/setup-node@v4
      with:
-        node-version: '18'
+        node-version: '20'
        cache: 'npm'
    - name: Install dependencies
      run: npm ci
@@ -83,3 +82,42 @@ jobs:
        npm run test -- --project=chromium-docker
      env:
        MCP_IN_DOCKER: 1
+
+  test_extension:
+    strategy:
+      fail-fast: false
+    runs-on: macos-latest
+    defaults:
+      run:
+        working-directory: ./extension
+    steps:
+    - uses: actions/checkout@v4
+    - name: Use Node.js 20
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20' # crypto.randomUUID(); stalls in v18.20.8
+        cache: 'npm'
+    - name: Install dependencies
+      run: npm ci
+    - name: Build extension
+      run: npm run build
+    - name: Upload artifact
+      uses: actions/upload-artifact@v4
+      with:
+        name: extension
+        path: ./extension/dist
+        retention-days: 7
+    - name: Install and build MCP server
+      run: |
+        cd ..
+        npm ci
+        npm run build
+        npx playwright install chromium
+    - name: Run tests
+      run: |
+        if [[ "$(uname)" == "Linux" ]]; then
+          xvfb-run --auto-servernum --server-args="-screen 0 1280x960x24" -- npm run test
+        else
+          npm run test
+        fi
+      shell: bash
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 lib/
+dist/
 node_modules/
 test-results/
 playwright-report/
--- a/README.md
+++ b/README.md
@@ -61,7 +61,7 @@ Follow the MCP install [guide](https://modelcontextprotocol.io/quickstart/user),

 #### Click the button to install:

-[![Install MCP Server](https://cursor.com/deeplink/mcp-install-dark.svg)](https://cursor.com/install-mcp?name=playwright&config=eyJjb21tYW5kIjoibnB4IEBwbGF5d3JpZ2h0L21jcEBsYXRlc3QifQ%3D%3D)
+[![Install MCP Server](https://cursor.com/deeplink/mcp-install-dark.svg)](cursor://anysphere.cursor-deeplink/mcp/install?name=Playwright&config=eyJjb21tYW5kIjoibnB4IEBwbGF5d3JpZ2h0L21jcEBsYXRlc3QifQ%3D%3D)

 #### Or install manually:

--- a/extension/package-lock.json
+++ b/extension/package-lock.json
@@ -16,7 +16,8 @@
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "typescript": "^5.8.2",
-        "vite": "^5.0.0"
+        "vite": "^5.0.0",
+        "vite-plugin-static-copy": "^3.1.1"
      },
      "engines": {
        "node": ">=18"
@@ -1090,6 +1091,46 @@
        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
      }
    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/browserslist": {
      "version": "4.25.1",
      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.1.tgz",
@@ -1142,6 +1183,31 @@
        }
      ]
    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
    "node_modules/convert-source-map": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1224,6 +1290,34 @@
        "node": ">=6"
      }
    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz",
+      "integrity": "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
    "node_modules/fsevents": {
      "version": "2.3.3",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1247,6 +1341,72 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -1277,6 +1437,19 @@
        "node": ">=6"
      }
    },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
    "node_modules/loose-envify": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -1328,12 +1501,48 @@
      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
      "dev": true
    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/p-map": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.3.tgz",
+      "integrity": "sha512-VkndIv2fIB99swvQoA65bm+fsmt6UNdGeIB0oxBs+WhAhdh08QA04JXpI7rbB9r08/nkbysKoya9rtDERYOYMA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/picocolors": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
      "dev": true
    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
    "node_modules/postcss": {
      "version": "8.5.6",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -1396,6 +1605,19 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
    "node_modules/rollup": {
      "version": "4.46.1",
      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.46.1.tgz",
@@ -1462,6 +1684,64 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
+      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.4.6",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
+      "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
    "node_modules/typescript": {
      "version": "5.8.3",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
@@ -1475,6 +1755,16 @@
        "node": ">=14.17"
      }
    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
    "node_modules/update-browserslist-db": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
@@ -1564,6 +1854,26 @@
        }
      }
    },
+    "node_modules/vite-plugin-static-copy": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-3.1.1.tgz",
+      "integrity": "sha512-oR53SkL5cX4KT1t18E/xU50vJDo0N8oaHza4EMk0Fm+2/u6nQivxavOfrDk3udWj+dizRizB/QnBvJOOQrTTAQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^3.6.0",
+        "fs-extra": "^11.3.0",
+        "p-map": "^7.0.3",
+        "picocolors": "^1.1.1",
+        "tinyglobby": "^0.2.14"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
    "node_modules/yallist": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
--- a/extension/package.json
+++ b/extension/package.json
@@ -19,7 +19,8 @@
  "scripts": {
    "build": "tsc --project . && tsc --project tsconfig.ui.json && vite build",
    "watch": "tsc --watch --project . & tsc --watch --project tsconfig.ui.json & vite build --watch",
-    "clean": "rm -rf lib"
+    "test": "playwright test",
+    "clean": "rm -rf dist"
  },
  "devDependencies": {
    "@types/chrome": "^0.0.315",
@@ -29,6 +30,7 @@
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^5.8.2",
-    "vite": "^5.0.0"
+    "vite": "^5.0.0",
+    "vite-plugin-static-copy": "^3.1.1"
  }
 }
--- a/extension/playwright.config.ts
+++ b/extension/playwright.config.ts
@@ -0,0 +1,31 @@
+/**
+ * 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 { defineConfig } from '@playwright/test';
+
+import type { TestOptions } from '../tests/fixtures.js';
+
+export default defineConfig<TestOptions>({
+  testDir: './tests',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'list',
+  projects: [
+    { name: 'chromium', use: { mcpBrowser: 'chromium' } },
+  ],
+});
--- a/extension/src/background.ts
+++ b/extension/src/background.ts
@@ -19,19 +19,24 @@ import { RelayConnection, debugLog } from './relayConnection.js';
 type PageMessage = {
  type: 'connectToMCPRelay';
  mcpRelayUrl: string;
-  tabId: number;
-  windowId: number;
 } | {
  type: 'getTabs';
+} | {
+  type: 'connectToTab';
+  tabId: number;
+  windowId: number;
+  mcpRelayUrl: string;
 };

 class TabShareExtension {
  private _activeConnection: RelayConnection | undefined;
  private _connectedTabId: number | null = null;
+  private _pendingTabSelection = new Map<number, { connection: RelayConnection, timerId?: number }>();

  constructor() {
    chrome.tabs.onRemoved.addListener(this._onTabRemoved.bind(this));
    chrome.tabs.onUpdated.addListener(this._onTabUpdated.bind(this));
+    chrome.tabs.onActivated.addListener(this._onTabActivated.bind(this));
    chrome.runtime.onMessage.addListener(this._onMessage.bind(this));
  }

@@ -39,22 +44,27 @@ class TabShareExtension {
  private _onMessage(message: PageMessage, sender: chrome.runtime.MessageSender, sendResponse: (response: any) => void) {
    switch (message.type) {
      case 'connectToMCPRelay':
-        this._connectTab(message.tabId, message.windowId, message.mcpRelayUrl!).then(
+        this._connectToRelay(sender.tab!.id!, message.mcpRelayUrl!).then(
            () => sendResponse({ success: true }),
            (error: any) => sendResponse({ success: false, error: error.message }));
-        return true; // Return true to indicate that the response will be sent asynchronously
+        return true;
      case 'getTabs':
        this._getTabs().then(
            tabs => sendResponse({ success: true, tabs, currentTabId: sender.tab?.id }),
            (error: any) => sendResponse({ success: false, error: error.message }));
        return true;
+      case 'connectToTab':
+        this._connectTab(sender.tab!.id!, message.tabId, message.windowId, message.mcpRelayUrl!).then(
+            () => sendResponse({ success: true }),
+            (error: any) => sendResponse({ success: false, error: error.message }));
+        return true; // Return true to indicate that the response will be sent asynchronously
    }
    return false;
  }

-  private async _connectTab(tabId: number, windowId: number, mcpRelayUrl: string): Promise<void> {
+  private async _connectToRelay(selectorTabId: number, mcpRelayUrl: string): Promise<void> {
    try {
-      debugLog(`Connecting tab ${tabId} to bridge at ${mcpRelayUrl}`);
+      debugLog(`Connecting to relay at ${mcpRelayUrl}`);
      const socket = new WebSocket(mcpRelayUrl);
      await new Promise<void>((resolve, reject) => {
        socket.onopen = () => resolve();
@@ -62,17 +72,41 @@ class TabShareExtension {
        setTimeout(() => reject(new Error('Connection timeout')), 5000);
      });

-      const connection = new RelayConnection(socket, tabId);
-      const connectionClosed = (m: string) => {
-        debugLog(m);
-        if (this._activeConnection === connection) {
-          this._activeConnection = undefined;
-          void this._setConnectedTabId(null);
-        }
+      const connection = new RelayConnection(socket);
+      connection.onclose = () => {
+        debugLog('Connection closed');
+        this._pendingTabSelection.delete(selectorTabId);
+        // TODO: show error in the selector tab?
+      };
+      this._pendingTabSelection.set(selectorTabId, { connection });
+      debugLog(`Connected to MCP relay`);
+    } catch (error: any) {
+      debugLog(`Failed to connect to MCP relay:`, error.message);
+      throw error;
+    }
+  }
+
+  private async _connectTab(selectorTabId: number, tabId: number, windowId: number, mcpRelayUrl: string): Promise<void> {
+    try {
+      debugLog(`Connecting tab ${tabId} to relay at ${mcpRelayUrl}`);
+      try {
+        this._activeConnection?.close('Another connection is requested');
+      } catch (error: any) {
+        debugLog(`Error closing active connection:`, error);
+      }
+      await this._setConnectedTabId(null);
+
+      this._activeConnection = this._pendingTabSelection.get(selectorTabId)?.connection;
+      if (!this._activeConnection)
+        throw new Error('No active MCP relay connection');
+      this._pendingTabSelection.delete(selectorTabId);
+
+      this._activeConnection.setTabId(tabId);
+      this._activeConnection.onclose = () => {
+        debugLog('MCP connection closed');
+        this._activeConnection = undefined;
+        void this._setConnectedTabId(null);
      };
-      socket.onclose = () => connectionClosed('WebSocket closed');
-      socket.onerror = error => connectionClosed(`WebSocket error: ${error}`);
-      this._activeConnection = connection;

      await Promise.all([
        this._setConnectedTabId(tabId),
@@ -97,12 +131,22 @@ class TabShareExtension {
  }

  private async _updateBadge(tabId: number, { text, color }: { text: string; color: string | null }): Promise<void> {
-    await chrome.action.setBadgeText({ tabId, text });
-    if (color)
-      await chrome.action.setBadgeBackgroundColor({ tabId, color });
+    try {
+      await chrome.action.setBadgeText({ tabId, text });
+      if (color)
+        await chrome.action.setBadgeBackgroundColor({ tabId, color });
+    } catch (error: any) {
+      // Ignore errors as the tab may be closed already.
+    }
  }

  private async _onTabRemoved(tabId: number): Promise<void> {
+    const pendingConnection = this._pendingTabSelection.get(tabId)?.connection;
+    if (pendingConnection) {
+      this._pendingTabSelection.delete(tabId);
+      pendingConnection.close('Browser tab closed');
+      return;
+    }
    if (this._connectedTabId !== tabId)
      return;
    this._activeConnection?.close('Browser tab closed');
@@ -110,9 +154,31 @@ class TabShareExtension {
    this._connectedTabId = null;
  }

-  private async _onTabUpdated(tabId: number, changeInfo: chrome.tabs.TabChangeInfo, tab: chrome.tabs.Tab): Promise<void> {
+  private _onTabActivated(activeInfo: chrome.tabs.TabActiveInfo) {
+    for (const [tabId, pending] of this._pendingTabSelection) {
+      if (tabId === activeInfo.tabId) {
+        if (pending.timerId) {
+          clearTimeout(pending.timerId);
+          pending.timerId = undefined;
+        }
+        continue;
+      }
+      if (!pending.timerId) {
+        pending.timerId = setTimeout(() => {
+          const existed = this._pendingTabSelection.delete(tabId);
+          if (existed) {
+            pending.connection.close('Tab has been inactive for 5 seconds');
+            chrome.tabs.sendMessage(tabId, { type: 'connectionTimeout' });
+          }
+        }, 5000);
+        return;
+      }
+    }
+  }
+
+  private _onTabUpdated(tabId: number, changeInfo: chrome.tabs.TabChangeInfo, tab: chrome.tabs.Tab) {
    if (changeInfo.status === 'complete' && this._connectedTabId === tabId)
-      await this._setConnectedTabId(tabId);
+      void this._setConnectedTabId(tabId);
  }

  private async _getTabs(): Promise<chrome.tabs.Tab[]> {
--- a/extension/src/relayConnection.ts
+++ b/extension/src/relayConnection.ts
@@ -41,11 +41,18 @@ export class RelayConnection {
  private _ws: WebSocket;
  private _eventListener: (source: chrome.debugger.DebuggerSession, method: string, params: any) => void;
  private _detachListener: (source: chrome.debugger.Debuggee, reason: string) => void;
+  private _tabPromise: Promise<void>;
+  private _tabPromiseResolve!: () => void;
+  private _closed = false;

-  constructor(ws: WebSocket, tabId: number) {
-    this._debuggee = { tabId };
+  onclose?: () => void;
+
+  constructor(ws: WebSocket) {
+    this._debuggee = { };
+    this._tabPromise = new Promise(resolve => this._tabPromiseResolve = resolve);
    this._ws = ws;
    this._ws.onmessage = this._onMessage.bind(this);
+    this._ws.onclose = () => this._onClose();
    // Store listeners for cleanup
    this._eventListener = this._onDebuggerEvent.bind(this);
    this._detachListener = this._onDebuggerDetach.bind(this);
@@ -53,10 +60,27 @@ export class RelayConnection {
    chrome.debugger.onDetach.addListener(this._detachListener);
  }

+  // Either setTabId or close is called after creating the connection.
+  setTabId(tabId: number): void {
+    this._debuggee = { tabId };
+    this._tabPromiseResolve();
+  }
+
  close(message: string): void {
+    this._ws.close(1000, message);
+    // ws.onclose is called asynchronously, so we call it here to avoid forwarding
+    // CDP events to the closed connection.
+    this._onClose();
+  }
+
+  private _onClose() {
+    if (this._closed)
+      return;
+    this._closed = true;
    chrome.debugger.onEvent.removeListener(this._eventListener);
    chrome.debugger.onDetach.removeListener(this._detachListener);
-    this._ws.close(1000, message);
+    chrome.debugger.detach(this._debuggee).catch(() => {});
+    this.onclose?.();
  }

  private _onDebuggerEvent(source: chrome.debugger.DebuggerSession, method: string, params: any): void {
@@ -111,9 +135,8 @@ export class RelayConnection {
  }

  private async _handleCommand(message: ProtocolCommand): Promise<any> {
-    if (!this._debuggee.tabId)
-      throw new Error('No tab is connected. Please go to the Playwright MCP extension and select the tab you want to connect to.');
    if (message.method === 'attachToTab') {
+      await this._tabPromise;
      debugLog('Attaching debugger to tab:', this._debuggee);
      await chrome.debugger.attach(this._debuggee, '1.3');
      const result: any = await chrome.debugger.sendCommand(this._debuggee, 'Target.getTargetInfo');
@@ -121,6 +144,8 @@ export class RelayConnection {
        targetInfo: result?.targetInfo,
      };
    }
+    if (!this._debuggee.tabId)
+      throw new Error('No tab is connected. Please go to the Playwright MCP extension and select the tab you want to connect to.');
    if (message.method === 'forwardCDPCommand') {
      const { sessionId, method, params } = message.params;
      debugLog('CDP command:', method, params);
@@ -147,6 +172,7 @@ export class RelayConnection {
  }

  private _sendMessage(message: any): void {
-    this._ws.send(JSON.stringify(message));
+    if (this._ws.readyState === WebSocket.OPEN)
+      this._ws.send(JSON.stringify(message));
  }
 }
--- a/extension/src/ui/connect.css
+++ b/extension/src/ui/connect.css
@@ -25,10 +25,9 @@ body {
  background-color: #ffffff;
  color: #1f2328;
  margin: 0;
-  padding: 24px;
+  padding: 16px;
  min-height: 100vh;
  font-size: 14px;
-  line-height: 1.5;
 }

 .content-wrapper {
@@ -36,50 +35,55 @@ body {
  margin: 0 auto;
 }

-.main-title {
-  font-size: 32px;
-  font-weight: 600;
-  margin-bottom: 8px;
-  color: #1f2328;
+/* Status Banner */
+.status-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  padding-right: 12px;
 }

-/* Status Banner */
 .status-banner {
-  padding: 16px;
-  margin-bottom: 24px;
-  border-radius: 6px;
-  border: 1px solid;
+  padding: 12px;
  font-size: 14px;
  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
 }

 .status-banner.connected {
-  background-color: #dafbe1;
-  border-color: #1a7f37;
-  color: #0d5a23;
+  color: #1f2328;
+}
+
+.status-banner.connected::before {
+  content: "\2705";
+  margin-right: 8px;
 }

 .status-banner.error {
-  background-color: #ffebe9;
-  border-color: #da3633;
-  color: #a40e26;
+  color: #1f2328;
 }

-.status-banner.connecting {
-  background-color: #fff8c5;
-  border-color: #d1b500;
-  color: #7a5c00;
+.status-banner.error::before {
+  content: "\274C";
+  margin-right: 8px;
 }

 /* Buttons */
 .button-container {
-  margin-bottom: 24px;
+  margin-bottom: 16px;
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 12px;
 }

 .button {
  padding: 8px 16px;
  border-radius: 6px;
-  border: 1px solid;
+  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
@@ -88,46 +92,63 @@ body {
  justify-content: center;
  text-decoration: none;
  margin-right: 8px;
+  min-width: 90px;
 }

 .button.primary {
-  background-color: #2da44e;
-  border-color: #2da44e;
-  color: #ffffff;
+  background-color: #f8f9fa;
+  color: #3c4043;
+  border: 1px solid #dadce0;
 }

 .button.primary:hover {
-  background-color: #2c974b;
+  background-color: #f1f3f4;
+  border-color: #dadce0;
+  box-shadow: 0 1px 2px 0 rgba(60,64,67,.1);
 }

 .button.default {
  background-color: #f6f8fa;
-  border-color: #d1d9e0;
  color: #24292f;
 }

 .button.default:hover {
  background-color: #f3f4f6;
-  border-color: #c7d2da;
+}
+
+.button.reject {
+  background-color: #da3633;
+  color: #ffffff;
+  border: 1px solid #da3633;
+}
+
+.button.reject:hover {
+  background-color: #c73836;
+  border-color: #c73836;
 }

 /* Tab selection */
 .tab-section-title {
-  font-size: 20px;
-  font-weight: 600;
-  margin-bottom: 16px;
-  color: #1f2328;
+  padding-left: 12px;
+  font-size: 12px;
+  font-weight: 400;
+  margin-bottom: 12px;
+  color: #656d76;
 }

 .tab-item {
  display: flex;
  align-items: center;
  padding: 12px;
-  border: 1px solid #d1d9e0;
-  border-radius: 6px;
  margin-bottom: 8px;
  background-color: #ffffff;
  cursor: pointer;
+  border-radius: 6px;
+  transition: background-color 0.2s ease;
+}
+
+.tab-item:hover {
+  background-color: #f8f9fa;
 }

 .tab-item.selected {
--- a/extension/src/ui/connect.html
+++ b/extension/src/ui/connect.html
@@ -18,10 +18,10 @@
 <head>
  <title>Playwright MCP extension</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="src/ui/connect.css">
+  <link rel="stylesheet" href="connect.css">
 </head>
 <body>
  <div id="root"></div>
-  <script type="module" src="src/ui/connect.tsx"></script>
+  <script type="module" src="connect.tsx"></script>
 </body>
 </html> 
--- a/extension/src/ui/connect.tsx
+++ b/extension/src/ui/connect.tsx
@@ -29,7 +29,6 @@ type StatusType = 'connected' | 'error' | 'connecting';

 const ConnectApp: React.FC = () => {
  const [tabs, setTabs] = useState<TabInfo[]>([]);
-  const [selectedTab, setSelectedTab] = useState<TabInfo | undefined>();
  const [status, setStatus] = useState<{ type: StatusType; message: string } | null>(null);
  const [showButtons, setShowButtons] = useState(true);
  const [showTabList, setShowTabList] = useState(true);
@@ -54,42 +53,41 @@ const ConnectApp: React.FC = () => {
      setClientInfo(info);
      setStatus({
        type: 'connecting',
-        message: `MCP client "${info}" is trying to connect. Do you want to continue?`
+        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;
    }

+    void connectToMCPRelay(relayUrl);
    void loadTabs();
  }, []);

+  const connectToMCPRelay = useCallback(async (mcpRelayUrl: string) => {
+    const response = await chrome.runtime.sendMessage({ type: 'connectToMCPRelay', mcpRelayUrl });
+    if (!response.success)
+      setStatus({ type: 'error', message: 'Failed to connect to MCP relay: ' + response.error });
+  }, []);
+
  const loadTabs = useCallback(async () => {
    const response = await chrome.runtime.sendMessage({ type: 'getTabs' });
-    if (response.success) {
+    if (response.success)
      setTabs(response.tabs);
-      const currentTab = response.tabs.find((tab: TabInfo) => tab.id === response.currentTabId);
-      setSelectedTab(currentTab);
-    } else {
+    else
      setStatus({ type: 'error', message: 'Failed to load tabs: ' + response.error });
-    }
  }, []);

-  const handleContinue = useCallback(async () => {
+  const handleConnectToTab = useCallback(async (tab: TabInfo) => {
    setShowButtons(false);
    setShowTabList(false);

-    if (!selectedTab) {
-      setStatus({ type: 'error', message: 'Tab not selected.' });
-      return;
-    }
-
    try {
      const response = await chrome.runtime.sendMessage({
-        type: 'connectToMCPRelay',
+        type: 'connectToTab',
        mcpRelayUrl,
-        tabId: selectedTab.id,
-        windowId: selectedTab.windowId,
+        tabId: tab.id,
+        windowId: tab.windowId,
      });

      if (response?.success) {
@@ -106,7 +104,7 @@ const ConnectApp: React.FC = () => {
        message: `MCP client "${clientInfo}" failed to connect: ${e}`
      });
    }
-  }, [selectedTab, clientInfo, mcpRelayUrl]);
+  }, [clientInfo, mcpRelayUrl]);

  const handleReject = useCallback(() => {
    setShowButtons(false);
@@ -114,39 +112,42 @@ const ConnectApp: React.FC = () => {
    setStatus({ type: 'error', message: 'Connection rejected. This tab can be closed.' });
  }, []);

+  useEffect(() => {
+    const listener = (message: any) => {
+      if (message.type === 'connectionTimeout')
+        handleReject();
+    };
+    chrome.runtime.onMessage.addListener(listener);
+    return () => {
+      chrome.runtime.onMessage.removeListener(listener);
+    };
+  }, []);
+
  return (
    <div className='app-container'>
      <div className='content-wrapper'>
-        <h1 className='main-title'>
-          Playwright MCP Extension
-        </h1>
-
-        {status && <StatusBanner type={status.type} message={status.message} />}
-
-        {showButtons && (
-          <div className='button-container'>
-            <Button variant='primary' onClick={handleContinue}>
-              Continue
-            </Button>
-            <Button variant='default' onClick={handleReject}>
-              Reject
-            </Button>
+        {status && (
+          <div className='status-container'>
+            <StatusBanner type={status.type} message={status.message} />
+            {showButtons && (
+              <Button variant='reject' onClick={handleReject}>
+                Reject
+              </Button>
+            )}
          </div>
        )}

-
        {showTabList && (
          <div>
-            <h2 className='tab-section-title'>
+            <div className='tab-section-title'>
              Select page to expose to MCP server:
-            </h2>
+            </div>
            <div>
              {tabs.map(tab => (
                <TabItem
                  key={tab.id}
                  tab={tab}
-                  isSelected={selectedTab?.id === tab.id}
-                  onSelect={() => setSelectedTab(tab)}
+                  onConnect={() => handleConnectToTab(tab)}
                />
              ))}
            </div>
@@ -161,7 +162,7 @@ const StatusBanner: React.FC<{ type: StatusType; message: string }> = ({ type, m
  return <div className={`status-banner ${type}`}>{message}</div>;
 };

-const Button: React.FC<{ variant: 'primary' | 'default'; onClick: () => void; children: React.ReactNode }> = ({
+const Button: React.FC<{ variant: 'primary' | 'default' | 'reject'; onClick: () => void; children: React.ReactNode }> = ({
  variant,
  onClick,
  children
@@ -173,20 +174,12 @@ const Button: React.FC<{ variant: 'primary' | 'default'; onClick: () => void; ch
  );
 };

-const TabItem: React.FC<{ tab: TabInfo; isSelected: boolean; onSelect: () => void }> = ({
+const TabItem: React.FC<{ tab: TabInfo; onConnect: () => void }> = ({
  tab,
-  isSelected,
-  onSelect
+  onConnect
 }) => {
-  const className = `tab-item ${isSelected ? 'selected' : ''}`.trim();
-
  return (
-    <div className={className} onClick={onSelect}>
-      <input
-        type='radio'
-        className='tab-radio'
-        checked={isSelected}
-      />
+    <div className='tab-item'>
      <img
        src={tab.favIconUrl || 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect width="16" height="16" fill="%23f6f8fa"/></svg>'}
        alt=''
@@ -196,6 +189,9 @@ const TabItem: React.FC<{ tab: TabInfo; isSelected: boolean; onSelect: () => voi
        <div className='tab-title'>{tab.title || 'Untitled'}</div>
        <div className='tab-url'>{tab.url}</div>
      </div>
+      <Button variant='primary' onClick={onConnect}>
+        Connect
+      </Button>
    </div>
  );
 };
--- a/extension/tests/extension.spec.ts
+++ b/extension/tests/extension.spec.ts
@@ -0,0 +1,102 @@
+/**
+ * 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 { fileURLToPath } from 'url';
+import { chromium } from 'playwright';
+import { test as base, expect } from '../../tests/fixtures.js';
+
+import type { BrowserContext } from 'playwright';
+
+type BrowserWithExtension = {
+  userDataDir: string;
+  launch: () => Promise<BrowserContext>;
+};
+
+const test = base.extend<{ browserWithExtension: BrowserWithExtension }>({
+  browserWithExtension: async ({ mcpBrowser }, use, testInfo) => {
+    // The flags no longer work in Chrome since
+    // https://chromium.googlesource.com/chromium/src/+/290ed8046692651ce76088914750cb659b65fb17%5E%21/chrome/browser/extensions/extension_service.cc?pli=1#
+    test.skip('chromium' !== mcpBrowser, '--load-extension is not supported for official builds of Chromium');
+
+    const pathToExtension = fileURLToPath(new URL('../dist', import.meta.url));
+
+    let browserContext: BrowserContext | undefined;
+    const userDataDir = testInfo.outputPath('extension-user-data-dir');
+    await use({
+      userDataDir,
+      launch: async () => {
+        browserContext = await chromium.launchPersistentContext(userDataDir, {
+          channel: mcpBrowser,
+          // Opening the browser singleton only works in headed.
+          headless: false,
+          // Automation disables singleton browser process behavior, which is necessary for the extension.
+          ignoreDefaultArgs: ['--enable-automation'],
+          args: [
+            `--disable-extensions-except=${pathToExtension}`,
+            `--load-extension=${pathToExtension}`,
+          ],
+        });
+
+        // for manifest v3:
+        let [serviceWorker] = browserContext.serviceWorkers();
+        if (!serviceWorker)
+          serviceWorker = await browserContext.waitForEvent('serviceworker');
+
+        return browserContext;
+      }
+    });
+
+    await browserContext?.close();
+  },
+});
+
+test('navigate with extension', async ({ browserWithExtension, startClient, server }) => {
+  const browserContext = await browserWithExtension.launch();
+
+  const { client } = await startClient({
+    args: [`--connect-tool`],
+    config: {
+      browser: {
+        userDataDir: browserWithExtension.userDataDir,
+      }
+    },
+  });
+
+  expect(await client.callTool({
+    name: 'browser_connect',
+    arguments: {
+      method: 'extension'
+    }
+  })).toHaveResponse({
+    result: 'Successfully changed connection method.',
+  });
+
+  const confirmationPagePromise = browserContext.waitForEvent('page', page => {
+    return page.url().startsWith('chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/connect.html');
+  });
+
+  const navigateResponse = client.callTool({
+    name: 'browser_navigate',
+    arguments: { url: server.HELLO_WORLD },
+  });
+
+  const selectorPage = await confirmationPagePromise;
+  await selectorPage.locator('.tab-item', { hasText: 'Playwright MCP Extension' }).getByRole('button', { name: 'Connect' }).click();
+
+  expect(await navigateResponse).toHaveResponse({
+    pageState: expect.stringContaining(`- generic [active] [ref=e1]: Hello, world!`),
+  });
+});
--- a/extension/tsconfig.json
+++ b/extension/tsconfig.json
@@ -6,8 +6,9 @@
    "strict": true,
    "module": "ESNext",
    "rootDir": "src",
-    "outDir": "./lib",
+    "outDir": "./dist/lib",
    "resolveJsonModule": true,
+    "types": ["chrome"],
    "jsx": "react-jsx",
    "jsxImportSource": "react"
  },
--- a/extension/vite.config.ts
+++ b/extension/vite.config.ts
@@ -17,23 +17,38 @@
 import { resolve } from 'path';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { viteStaticCopy } from 'vite-plugin-static-copy';

 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-  base: '/lib/ui/',
+  plugins: [
+    react(),
+    viteStaticCopy({
+      targets: [
+        {
+          src: '../../icons/*',
+          dest: 'icons'
+        },
+        {
+          src: '../../manifest.json',
+          dest: '.'
+        }
+      ]
+    })
+  ],
+  root: resolve(__dirname, 'src/ui'),
  build: {
-    outDir: resolve(__dirname, 'lib/ui'),
-    emptyOutDir: true,
+    outDir: resolve(__dirname, 'dist/'),
+    emptyOutDir: false,
    minify: false,
    rollupOptions: {
-      input: resolve(__dirname, 'connect.html'),
+      input: 'src/ui/connect.html',
      output: {
        manualChunks: undefined,
        inlineDynamicImports: true,
-        entryFileNames: '[name].js',
-        chunkFileNames: '[name].js',
-        assetFileNames: '[name].[ext]'
+        entryFileNames: 'lib/ui/[name].js',
+        chunkFileNames: 'lib/ui/[name].js',
+        assetFileNames: 'lib/ui/[name].[ext]'
      }
    }
  }
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@playwright/mcp",
-  "version": "0.0.32",
+  "version": "0.0.33",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@playwright/mcp",
-      "version": "0.0.32",
+      "version": "0.0.33",
      "license": "Apache-2.0",
      "dependencies": {
        "@modelcontextprotocol/sdk": "^1.16.0",
@@ -14,8 +14,8 @@
        "debug": "^4.4.1",
        "dotenv": "^17.2.0",
        "mime": "^4.0.7",
-        "playwright": "1.55.0-alpha-1753913825000",
-        "playwright-core": "1.55.0-alpha-1753913825000",
+        "playwright": "1.55.0-alpha-2025-08-07",
+        "playwright-core": "1.55.0-alpha-2025-08-07",
        "ws": "^8.18.1",
        "zod": "^3.24.1",
        "zod-to-json-schema": "^3.24.4"
@@ -27,7 +27,7 @@
        "@anthropic-ai/sdk": "^0.57.0",
        "@eslint/eslintrc": "^3.2.0",
        "@eslint/js": "^9.19.0",
-        "@playwright/test": "1.55.0-alpha-1753913825000",
+        "@playwright/test": "1.55.0-alpha-2025-08-07",
        "@stylistic/eslint-plugin": "^3.0.1",
        "@types/debug": "^4.1.12",
        "@types/node": "^22.13.10",
@@ -703,13 +703,13 @@
      }
    },
    "node_modules/@playwright/test": {
-      "version": "1.55.0-alpha-1753913825000",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.55.0-alpha-1753913825000.tgz",
-      "integrity": "sha512-YM5YHU6nTYNVzXlKvQvtEdXzpubLvdfEiTxwWvbqGHL/iDK2kBJd3L0psIG6yClU1wy01O756TkOOQSEpzOu7g==",
+      "version": "1.55.0-alpha-2025-08-07",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.55.0-alpha-2025-08-07.tgz",
+      "integrity": "sha512-N83L8JSSJ+E690HCbgzmXIcbRfM/rlh0uWZhbHbMp9q4qDPABSgvhm0HGiG345PV1ozoqcCI/mXLZPircsmPIA==",
      "dev": true,
      "license": "Apache-2.0",
      "dependencies": {
-        "playwright": "1.55.0-alpha-1753913825000"
+        "playwright": "1.55.0-alpha-2025-08-07"
      },
      "bin": {
        "playwright": "cli.js"
@@ -3745,12 +3745,12 @@
      }
    },
    "node_modules/playwright": {
-      "version": "1.55.0-alpha-1753913825000",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.55.0-alpha-1753913825000.tgz",
-      "integrity": "sha512-IDyZzTu3tRNIjcx7/6ZmU7VmZPFGaW4jNsizwqbjSoeLFZPTLx2y693qeVVF/8KwEjuiSU3hVTQEzWvnx7cf2Q==",
+      "version": "1.55.0-alpha-2025-08-07",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.55.0-alpha-2025-08-07.tgz",
+      "integrity": "sha512-rH8kdQOZzhjxC6FOL9zSEDwPl88ZqQq9QEvRDONWhzKwRQ/jOXlEZRxm8QRCBdrLqBMTGHx/YOaP7MIV//rtIA==",
      "license": "Apache-2.0",
      "dependencies": {
-        "playwright-core": "1.55.0-alpha-1753913825000"
+        "playwright-core": "1.55.0-alpha-2025-08-07"
      },
      "bin": {
        "playwright": "cli.js"
@@ -3763,9 +3763,9 @@
      }
    },
    "node_modules/playwright-core": {
-      "version": "1.55.0-alpha-1753913825000",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.55.0-alpha-1753913825000.tgz",
-      "integrity": "sha512-FH5pHzLseQxD8+d2wGlRa/I32AzJ+ZzcdDNM1aiSw5+gmq+aOo3PBqXHvhsh7tj0h4l2Qf6z9qf4mMiwijVthw==",
+      "version": "1.55.0-alpha-2025-08-07",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.55.0-alpha-2025-08-07.tgz",
+      "integrity": "sha512-NUuC6R0/dLk1QKiYoJL8NUsQAC6Je0C2BpuIg5h4wcvBwJ5TFldslmik17Txg3TXBSqwgG76DAl4Q6UdHGn54Q==",
      "license": "Apache-2.0",
      "bin": {
        "playwright-core": "cli.js"
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@playwright/mcp",
-  "version": "0.0.32",
+  "version": "0.0.33",
  "description": "Playwright Tools for MCP",
  "type": "module",
  "repository": {
@@ -42,8 +42,8 @@
    "debug": "^4.4.1",
    "dotenv": "^17.2.0",
    "mime": "^4.0.7",
-    "playwright": "1.55.0-alpha-1753913825000",
-    "playwright-core": "1.55.0-alpha-1753913825000",
+    "playwright": "1.55.0-alpha-2025-08-07",
+    "playwright-core": "1.55.0-alpha-2025-08-07",
    "ws": "^8.18.1",
    "zod": "^3.24.1",
    "zod-to-json-schema": "^3.24.4"
@@ -52,7 +52,7 @@
    "@anthropic-ai/sdk": "^0.57.0",
    "@eslint/eslintrc": "^3.2.0",
    "@eslint/js": "^9.19.0",
-    "@playwright/test": "1.55.0-alpha-1753913825000",
+    "@playwright/test": "1.55.0-alpha-2025-08-07",
    "@stylistic/eslint-plugin": "^3.0.1",
    "@types/debug": "^4.1.12",
    "@types/node": "^22.13.10",
--- a/src/browserServerBackend.ts
+++ b/src/browserServerBackend.ts
@@ -55,7 +55,9 @@ export class BrowserServerBackend implements ServerBackend {
  async initialize(server: mcpServer.Server): Promise<void> {
    const capabilities = server.getClientCapabilities() as mcpServer.ClientCapabilities;
    let rootPath: string | undefined;
-    if (capabilities.roots) {
+    if (capabilities.roots && (
+      server.getClientVersion()?.name === 'Visual Studio Code' ||
+      server.getClientVersion()?.name === 'Visual Studio Code - Insiders')) {
      const { roots } = await server.listRoots();
      const firstRootUri = roots[0]?.uri;
      const url = firstRootUri ? new URL(firstRootUri) : undefined;
--- a/src/extension/cdpRelay.ts
+++ b/src/extension/cdpRelay.ts
@@ -56,6 +56,7 @@ type CDPResponse = {
 export class CDPRelayServer {
  private _wsHost: string;
  private _browserChannel: string;
+  private _userDataDir?: string;
  private _cdpPath: string;
  private _extensionPath: string;
  private _wss: WebSocketServer;
@@ -69,9 +70,10 @@ export class CDPRelayServer {
  private _nextSessionId: number = 1;
  private _extensionConnectionPromise!: ManualPromise<void>;

-  constructor(server: http.Server, browserChannel: string) {
+  constructor(server: http.Server, browserChannel: string, userDataDir?: string) {
    this._wsHost = httpAddressToString(server.address()).replace(/^http/, 'ws');
    this._browserChannel = browserChannel;
+    this._userDataDir = userDataDir;

    const uuid = crypto.randomUUID();
    this._cdpPath = `/cdp/${uuid}`;
@@ -106,7 +108,7 @@ export class CDPRelayServer {
  private _connectBrowser(clientInfo: ClientInfo) {
    const mcpRelayEndpoint = `${this._wsHost}${this._extensionPath}`;
    // Need to specify "key" in the manifest.json to make the id stable when loading from file.
-    const url = new URL('chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/lib/ui/connect.html');
+    const url = new URL('chrome-extension://jakfalbnbhgkpmoaakfflhflbfpkailf/connect.html');
    url.searchParams.set('mcpRelayUrl', mcpRelayEndpoint);
    url.searchParams.set('client', JSON.stringify(clientInfo));
    const href = url.toString();
@@ -117,7 +119,12 @@ export class CDPRelayServer {
    if (!executablePath)
      throw new Error(`"${this._browserChannel}" executable not found. Make sure it is installed at a standard location.`);

-    spawn(executablePath, [href], {
+    const args: string[] = [];
+    if (this._userDataDir)
+      args.push(`--user-data-dir=${this._userDataDir}`);
+    args.push(href);
+
+    spawn(executablePath, args, {
      windowsHide: true,
      detached: true,
      shell: false,
--- a/src/extension/extensionContextFactory.ts
+++ b/src/extension/extensionContextFactory.ts
@@ -28,51 +28,39 @@ export class ExtensionContextFactory implements BrowserContextFactory {
  description = 'Connect to a browser using the Playwright MCP extension';

  private _browserChannel: string;
-  private _relayPromise: Promise<CDPRelayServer> | undefined;
-  private _browserPromise: Promise<playwright.Browser> | undefined;
+  private _userDataDir?: string;

-  constructor(browserChannel: string) {
+  constructor(browserChannel: string, userDataDir: string | undefined) {
    this._browserChannel = browserChannel;
+    this._userDataDir = userDataDir;
  }

  async createContext(clientInfo: ClientInfo, abortSignal: AbortSignal): Promise<{ browserContext: playwright.BrowserContext, close: () => Promise<void> }> {
-    // First call will establish the connection to the extension.
-    if (!this._browserPromise)
-      this._browserPromise = this._obtainBrowser(clientInfo, abortSignal);
-    const browser = await this._browserPromise;
+    const browser = await this._obtainBrowser(clientInfo, abortSignal);
    return {
      browserContext: browser.contexts()[0],
      close: async () => {
        debugLogger('close() called for browser context');
        await browser.close();
-        this._browserPromise = undefined;
      }
    };
  }

  private async _obtainBrowser(clientInfo: ClientInfo, abortSignal: AbortSignal): Promise<playwright.Browser> {
-    if (!this._relayPromise)
-      this._relayPromise = this._startRelay(abortSignal);
-    const relay = await this._relayPromise;
-
-    abortSignal.throwIfAborted();
+    const relay = await this._startRelay(abortSignal);
    await relay.ensureExtensionConnectionForMCPContext(clientInfo, abortSignal);
-    const browser = await playwright.chromium.connectOverCDP(relay.cdpEndpoint());
-    browser.on('disconnected', () => {
-      this._browserPromise = undefined;
-      debugLogger('Browser disconnected');
-    });
-    return browser;
+    return await playwright.chromium.connectOverCDP(relay.cdpEndpoint());
  }

  private async _startRelay(abortSignal: AbortSignal) {
    const httpServer = await startHttpServer({});
-    const cdpRelayServer = new CDPRelayServer(httpServer, this._browserChannel);
+    if (abortSignal.aborted) {
+      httpServer.close();
+      throw new Error(abortSignal.reason);
+    }
+    const cdpRelayServer = new CDPRelayServer(httpServer, this._browserChannel, this._userDataDir);
+    abortSignal.addEventListener('abort', () => cdpRelayServer.stop());
    debugLogger(`CDP relay server started, extension endpoint: ${cdpRelayServer.extensionEndpoint()}.`);
-    if (abortSignal.aborted)
-      cdpRelayServer.stop();
-    else
-      abortSignal.addEventListener('abort', () => cdpRelayServer.stop());
    return cdpRelayServer;
  }
 }
--- a/src/extension/main.ts
+++ b/src/extension/main.ts
@@ -21,11 +21,11 @@ import * as mcpTransport from '../mcp/transport.js';
 import type { FullConfig } from '../config.js';

 export async function runWithExtension(config: FullConfig) {
-  const contextFactory = new ExtensionContextFactory(config.browser.launchOptions.channel || 'chrome');
+  const contextFactory = new ExtensionContextFactory(config.browser.launchOptions.channel || 'chrome', config.browser.userDataDir);
  const serverBackendFactory = () => new BrowserServerBackend(config, [contextFactory]);
  await mcpTransport.start(serverBackendFactory, config.server);
 }

 export function createExtensionContextFactory(config: FullConfig) {
-  return new ExtensionContextFactory(config.browser.launchOptions.channel || 'chrome');
+  return new ExtensionContextFactory(config.browser.launchOptions.channel || 'chrome', config.browser.userDataDir);
 }
--- a/src/tools/screenshot.ts
+++ b/src/tools/screenshot.ts
@@ -75,10 +75,15 @@ const screenshot = defineTabTool({

    const buffer = locator ? await locator.screenshot(options) : await tab.page.screenshot(options);
    response.addResult(`Took the ${screenshotTarget} screenshot and saved it as ${fileName}`);
-    response.addImage({
-      contentType: fileType === 'png' ? 'image/png' : 'image/jpeg',
-      data: buffer
-    });
+
+    // https://github.com/microsoft/playwright-mcp/issues/817
+    // Never return large images to LLM, saving them to the file system is enough.
+    if (!params.fullPage) {
+      response.addImage({
+        contentType: fileType === 'png' ? 'image/png' : 'image/jpeg',
+        data: buffer
+      });
+    }
  }
 });

--- a/tests/fixtures.ts
+++ b/tests/fixtures.ts
@@ -191,7 +191,7 @@ async function createTransport(args: string[], mcpMode: TestOptions['mcpMode'],
  const transport = new StdioClientTransport({
    command: 'node',
    args: [path.join(path.dirname(__filename), '../cli.js'), ...args],
-    cwd: path.join(path.dirname(__filename), '..'),
+    cwd: path.dirname(test.info().config.configFile!),
    stderr: 'pipe',
    env: {
      ...process.env,
--- a/tests/roots.spec.ts
+++ b/tests/roots.spec.ts
@@ -25,6 +25,7 @@ const p = process.platform === 'win32' ? 'c:\\non\\existent\\folder' : '/non/exi

 test('should use separate user data by root path', async ({ startClient, server }, testInfo) => {
  const { client } = await startClient({
+    clientName: 'Visual Studio Code', // Simulate VS Code client, roots only work with it
    roots: [
      {
        name: 'test',
@@ -48,6 +49,7 @@ test('check that trace is saved in workspace', async ({ startClient, server, mcp
  const rootPath = testInfo.outputPath('workspace');
  const { client } = await startClient({
    args: ['--save-trace'],
+    clientName: 'Visual Studio Code - Insiders', // Simulate VS Code client, roots only work with it
    roots: [
      {
        name: 'workspace',
--- a/tests/screenshot.spec.ts
+++ b/tests/screenshot.spec.ts
@@ -264,12 +264,7 @@ test('browser_take_screenshot (fullPage: true)', async ({ startClient, server },
      {
        text: expect.stringContaining('fullPage: true'),
        type: 'text',
-      },
-      {
-        data: expect.any(String),
-        mimeType: 'image/png',
-        type: 'image',
-      },
+      }
    ],
  });
 });
Author	SHA1	Message	Date
Pavel Feldman	d3bf2eefc6	chore: mark 0.0.33 (#851 )	2025-08-08 17:22:18 -07:00
Pavel Feldman	2ca899316d	chore: roll Playwright to recent (#850 )	2025-08-08 09:37:07 -07:00
Pavel Feldman	16f3523317	chore: do not return fullPage screenshots to the LLM (#849 )	2025-08-08 09:36:51 -07:00
Omar Bahareth	6c2dda31ad	fix(docs): Invalid MCP Install Link (#846 )	2025-08-07 18:39:50 -07:00
Yury Semikhatsky	3b6ecf0a43	chore(extension): connect button for each page, style tweaks (#848 ) <img width="643" height="709" alt="image" src="https://github.com/user-attachments/assets/850f2455-b853-4c0f-8047-a7f2ced16b7b" />	2025-08-07 17:24:48 -07:00
Yury Semikhatsky	636f1956cc	chore(extension): explicitly detach from debugger when connection closes (#847 )	2025-08-07 14:45:52 -07:00
Yury Semikhatsky	5aef2aafcb	devops: switch to node 20 on CI (#844 ) Node 18 maintanence period ended in April 2025. Running on 18 already caused a problem in https://github.com/microsoft/playwright-mcp/pull/842	2025-08-07 10:04:43 -07:00
Yury Semikhatsky	8ecc46c905	chore(extension): add test (#842 ) * On Linux headed mode under xvfb-run fails to properly launch the process. It works fine without xvfb-run, we don't have environment for that on CI, so run on macOS instead. * Node v18.20.8 stalls on `const uuid = crypto.randomUUID();`, so use v20 for the extension tests.	2025-08-06 16:27:39 -07:00
Yury Semikhatsky	5dbb1504ba	chore(extension): show error when connection is rejected due to inact… (#836 ) …ivity	2025-08-05 15:08:57 -07:00
Yury Semikhatsky	20e1144c3b	chore(extension): proper watchdog for inactive page selector (#835 )	2025-08-05 14:18:04 -07:00
Yury Semikhatsky	eab20aa69e	chore(extension): do not send if socket is already closed (#834 ) * Remove debugger listeners if closed() is called as `ws.onclosed` is dispatched asynchronously * Tabs can be closed while update badge command is in flight * Inflight CDP commands fail if the tab closes, do not try to send their response to a closed socket	2025-08-05 13:47:08 -07:00
Yury Semikhatsky	46ce86f97e	chore(extension): terminate connection if nothing has been selected (#827 )	2025-08-05 09:47:39 -07:00
Yury Semikhatsky	4890b9d509	chore(extension): create relay per context (#828 )	2025-08-05 08:32:54 -07:00
Yury Semikhatsky	3f6837baa9	fix: cursor does not respond to listRoots (#826 )	2025-08-04 20:52:55 -07:00
Yury Semikhatsky	6d62c173c8	chore(extension): build into dist directory (#825 )	2025-08-04 11:47:25 -07:00