rechrome 1.11.2 → 1.12.1

package/extension/lib/ui/connect.js

@@ -0,0 +1,181 @@
+import { c as clientExports, j as jsxRuntimeExports, r as reactExports, B as Button, A as AuthTokenSection, T as TabItem, g as getOrCreateAuthToken } from "./authToken.js";
+const SUPPORTED_PROTOCOL_VERSION = 2;
+const ConnectApp = () => {
+  const [tabs, setTabs] = reactExports.useState([]);
+  const [status, setStatus] = reactExports.useState(null);
+  const [showButtons, setShowButtons] = reactExports.useState(true);
+  const [showTabList, setShowTabList] = reactExports.useState(true);
+  const [clientInfo, setClientInfo] = reactExports.useState("unknown");
+  const [mcpRelayUrl, setMcpRelayUrl] = reactExports.useState("");
+  const [newTab, setNewTab] = reactExports.useState(false);
+  reactExports.useEffect(() => {
+    const runAsync = async () => {
+      const params = new URLSearchParams(window.location.search);
+      const relayUrl = params.get("mcpRelayUrl");
+      if (!relayUrl) {
+        handleReject("Missing mcpRelayUrl parameter in URL.");
+        return;
+      }
+      try {
+        const host = new URL(relayUrl).hostname;
+        if (host !== "127.0.0.1" && host !== "[::1]") {
+          handleReject(`MCP extension only allows loopback connections (127.0.0.1 or [::1]). Received host: ${host}`);
+          return;
+        }
+      } catch (e) {
+        handleReject(`Invalid mcpRelayUrl parameter in URL: ${relayUrl}. ${e}`);
+        return;
+      }
+      setMcpRelayUrl(relayUrl);
+      let info = "unknown";
+      try {
+        const client = JSON.parse(params.get("client") || "{}");
+        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 expectedToken = getOrCreateAuthToken();
+      const token = params.get("token");
+      if (token === expectedToken) {
+        await connectToMCPRelay(relayUrl);
+        await handleConnectToTab(void 0, info);
+        return;
+      }
+      if (token) {
+        handleReject("Invalid token provided.");
+        return;
+      }
+      await connectToMCPRelay(relayUrl);
+      if (params.get("newTab") === "true") {
+        setNewTab(true);
+        setShowTabList(false);
+      } else {
+        await loadTabs();
+      }
+    };
+    void runAsync();
+  }, []);
+  const handleReject = reactExports.useCallback((message) => {
+    setShowButtons(false);
+    setShowTabList(false);
+    setStatus({ type: "error", message });
+  }, []);
+  const connectToMCPRelay = reactExports.useCallback(async (mcpRelayUrl2) => {
+    const response = await chrome.runtime.sendMessage({ type: "connectToMCPRelay", mcpRelayUrl: mcpRelayUrl2 });
+    if (!response.success)
+      handleReject(response.error);
+  }, [handleReject]);
+  const loadTabs = reactExports.useCallback(async () => {
+    const response = await chrome.runtime.sendMessage({ type: "getTabs" });
+    if (response.success)
+      setTabs(response.tabs);
+    else
+      setStatus({ type: "error", message: "Failed to load tabs: " + response.error });
+  }, []);
+  const handleConnectToTab = reactExports.useCallback(async (tab, clientInfoOverride) => {
+    const displayName = clientInfoOverride || clientInfo;
+    setShowButtons(false);
+    setShowTabList(false);
+    try {
+      const response = await chrome.runtime.sendMessage({
+        type: "connectToTab",
+        mcpRelayUrl,
+        tabId: tab?.id,
+        windowId: tab?.windowId
+      });
+      if (response?.success) {
+        setStatus({ type: "connected", message: `MCP client "${displayName}" connected. Do not close this tab — it maintains the connection to the browser. Closing it will disconnect the session.` });
+      } else {
+        setStatus({
+          type: "error",
+          message: response?.error || `MCP client "${displayName}" failed to connect.`
+        });
+      }
+    } catch (e) {
+      setStatus({
+        type: "error",
+        message: `MCP client "${displayName}" failed to connect: ${e}`
+      });
+    }
+  }, [clientInfo, mcpRelayUrl]);
+  reactExports.useEffect(() => {
+    const listener = (message) => {
+      if (message.type === "connectionTimeout")
+        handleReject("Connection timed out.");
+    };
+    chrome.runtime.onMessage.addListener(listener);
+    return () => {
+      chrome.runtime.onMessage.removeListener(listener);
+    };
+  }, [handleReject]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "app-container", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "content-wrapper", children: [
+    status && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "status-container", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(StatusBanner, { status }),
+      showButtons && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "button-container", children: newTab ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "primary", onClick: () => handleConnectToTab(), children: "Allow" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "reject", onClick: () => handleReject("Connection rejected. This tab can be closed."), children: "Reject" })
+      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "reject", onClick: () => handleReject("Connection rejected. This tab can be closed."), children: "Reject" }) })
+    ] }),
+    status?.type === "connecting" && /* @__PURE__ */ jsxRuntimeExports.jsx(AuthTokenSection, {}),
+    showTabList && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "tab-section-title", children: "Select page to expose to MCP server:" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: tabs.map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        TabItem,
+        {
+          tab,
+          button: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "primary", onClick: () => handleConnectToTab(tab), children: "Connect" })
+        },
+        tab.id
+      )) })
+    ] })
+  ] }) });
+};
+const VersionMismatchError = ({ extensionVersion }) => {
+  const readmeUrl = "https://github.com/microsoft/playwright-mcp/blob/main/extension/README.md";
+  const latestReleaseUrl = "https://github.com/microsoft/playwright-mcp/releases/latest";
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+    "Playwright MCP version trying to connect requires newer extension version (current version: ",
+    extensionVersion,
+    ").",
+    " ",
+    /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: latestReleaseUrl, children: "Click here" }),
+    " to download latest version of the extension, then drag and drop it into the Chrome Extensions page.",
+    " ",
+    "See ",
+    /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: readmeUrl, target: "_blank", rel: "noopener noreferrer", children: "installation instructions" }),
+    " for more details."
+  ] });
+};
+const StatusBanner = ({ status }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `status-banner ${status.type}`, children: "versionMismatch" in status ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    VersionMismatchError,
+    {
+      extensionVersion: status.versionMismatch.extensionVersion
+    }
+  ) : status.message });
+};
+const container = document.getElementById("root");
+if (container) {
+  const root = clientExports.createRoot(container);
+  root.render(/* @__PURE__ */ jsxRuntimeExports.jsx(ConnectApp, {}));
+}

package/extension/lib/ui/status.js

@@ -0,0 +1,71 @@
+import { c as clientExports, j as jsxRuntimeExports, r as reactExports, T as TabItem, B as Button, A as AuthTokenSection } from "./authToken.js";
+const StatusApp = () => {
+  const [connections, setConnections] = reactExports.useState([]);
+  reactExports.useEffect(() => {
+    void loadStatus();
+  }, []);
+  const loadStatus = async () => {
+    const { connections: rawConnections = [] } = await chrome.runtime.sendMessage({ type: "getConnectionStatus" });
+    const fetchTab = async (id) => {
+      try {
+        const tab = await chrome.tabs.get(id);
+        return { id: tab.id, windowId: tab.windowId, title: tab.title, url: tab.url, favIconUrl: tab.favIconUrl };
+      } catch {
+        return null;
+      }
+    };
+    const resolved = await Promise.all(
+      rawConnections.map(async (c) => {
+        const connectedTab = await fetchTab(c.connectedTabId) ?? void 0;
+        const playwrightTabs = (await Promise.all(c.playwrightTabIds.map(fetchTab))).filter((t) => t !== null);
+        return { ...c, connectedTab, playwrightTabs };
+      })
+    );
+    setConnections(resolved);
+  };
+  const openTab = async (tabId) => {
+    await chrome.tabs.update(tabId, { active: true });
+    window.close();
+  };
+  const disconnect = async (mcpRelayUrl) => {
+    await chrome.runtime.sendMessage({ type: "disconnect", mcpRelayUrl });
+    void loadStatus();
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "app-container", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "content-wrapper", children: [
+    connections.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "status-banner", children: "No MCP clients are currently connected." }) : connections.map((c, i) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+      connections.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "tab-section-title", children: [
+        "Instance ",
+        i + 1,
+        ":"
+      ] }),
+      c.connectedTab && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "tab-section-title", children: "Page with connected MCP client:" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          TabItem,
+          {
+            tab: c.connectedTab,
+            button: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "primary", onClick: () => disconnect(c.mcpRelayUrl), children: "Disconnect" }),
+            onClick: () => openTab(c.connectedTabId)
+          }
+        )
+      ] }),
+      c.playwrightTabs.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "tab-section-title", children: "Playwright managed tabs:" }),
+        c.playwrightTabs.map((tab) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          TabItem,
+          {
+            tab,
+            onClick: () => openTab(tab.id)
+          },
+          tab.id
+        ))
+      ] })
+    ] }, c.mcpRelayUrl)),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(AuthTokenSection, {})
+  ] }) });
+};
+const container = document.getElementById("root");
+if (container) {
+  const root = clientExports.createRoot(container);
+  root.render(/* @__PURE__ */ jsxRuntimeExports.jsx(StatusApp, {}));
+}

package/extension/manifest.json

@@ -0,0 +1,34 @@
+{
+  "manifest_version": 3,
+  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAyr3kV2bBGDawVu1+vxLx2epYDN18tw/MSHbBunj5XLXho2gYcU2IYjBFZBt65A48IDJJ94D7LEnoFuaJScjEbxmPaPqvE1UrvplkwWiUPoN/3d4bshwx+wybln1oM4jnO/qGcOkyWZ28RrEhewgRznPYisJhVkBZWi+YoSYaQTkURLxi3CZ68xmWVQLyec3v3sxnOYu+ibOBtBgOFI+WYEBQAvI38y4jUdOTyoHyWw32Plr+y/4fnOzxEXVs7emCdQpVeZuNbru4x1UltrhwtXgl37mIGoOQmf6PzafCO9MaQ+mmRSY5e8Ht/Z5/eWY30mwjbc7H3HAtYOUaPZbp8wIDAQAB",
+  "name": "Playwright MCP Bridge (multi-tab)",
+  "version": "0.0.68.3",
+  "description": "Share browser tabs with Playwright MCP server (multi-tab fork: Playwright can open and control multiple tabs)",
+  "permissions": [
+    "debugger",
+    "activeTab",
+    "tabs"
+  ],
+  "host_permissions": [
+    "<all_urls>"
+  ],
+  "background": {
+    "service_worker": "lib/background.mjs",
+    "type": "module"
+  },
+  "action": {
+    "default_title": "Playwright MCP Bridge",
+    "default_icon": {
+      "16": "icons/icon-16.png",
+      "32": "icons/icon-32.png",
+      "48": "icons/icon-48.png",
+      "128": "icons/icon-128.png"
+    }
+  },
+  "icons": {
+    "16": "icons/icon-16.png",
+    "32": "icons/icon-32.png",
+    "48": "icons/icon-48.png",
+    "128": "icons/icon-128.png"
+  }
+}

package/extension/status.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Playwright MCP Bridge Status</title>
+  <script type="module" crossorigin src="/lib/ui/status.js"></script>
+  <link rel="modulepreload" crossorigin href="/lib/ui/authToken.js">
+  <link rel="stylesheet" crossorigin href="/lib/ui/authToken.css">
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rechrome",
-  "version": "1.11.2",
+  "version": "1.12.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/snomiao/rechrome.git"
@@ -13,6 +13,7 @@
     ".env.example",
     "LICENSE",
     "README.md",
+    "extension",
     "rech.js",
     "rech.ts",
     "serve.js",

package/rech.js

@@ -2,7 +2,7 @@
 
 import { file } from "bun";
 import { randomBytes } from "crypto";
-import { mkdirSync, appendFileSync, existsSync, realpathSync, accessSync, constants as fsConstants } from "fs";
+import { mkdirSync, appendFileSync, existsSync, realpathSync, accessSync, cpSync, constants as fsConstants } from "fs";
 import { hostname } from "os";
 import { join, basename, dirname } from "path";
 
@@ -242,15 +242,35 @@ async function findChromeUserDataDir(): Promise<string | null> {
   return null;
 }
 
-export const EXTENSION_DIST_DIR = join(
-  import.meta.dir,
-  "lib/playwright-multi-tab/lib/playwright-mcp/packages/extension/dist",
-);
+// Bundled extension dist (shipped via package.json `files`). `import.meta.dir` resolves to the install
+// location at runtime — under local dev that's the repo root, under bunx/npm it's the package dir.
+const BUNDLED_EXTENSION_DIST_DIR = join(import.meta.dir, "extension");
+// The legacy submodule path (pre-1.12). Kept for backwards-compat with users who installed from there.
+const LEGACY_EXTENSION_DIST_DIR = join(import.meta.dir, "lib/playwright-multi-tab/lib/playwright-mcp/packages/extension/dist");
+
+// Stable per-user location: we copy the bundled dist here so Chrome's recorded install path survives
+// the ephemeral bunx temp dir being cleaned up between invocations.
+export const EXTENSION_DIST_DIR = join(process.env.HOME!, ".rechrome", "extension");
+
+// With the manifest `key` field set, Chrome derives this ID deterministically from the key (not the path),
+// so we can locate the extension by ID even when the on-disk path differs from what Chrome stored.
+export const EXTENSION_ID = "fokngfbogklgiffokdnekajodmhgfnhk";
+
+async function ensureExtensionDistInstalled(): Promise<string> {
+  const source = existsSync(BUNDLED_EXTENSION_DIST_DIR)
+    ? BUNDLED_EXTENSION_DIST_DIR
+    : existsSync(LEGACY_EXTENSION_DIST_DIR)
+      ? LEGACY_EXTENSION_DIST_DIR
+      : null;
+  if (!source) return EXTENSION_DIST_DIR;
+  const sourceManifest = await file(join(source, "manifest.json")).text().catch(() => "");
+  const destManifest = await file(join(EXTENSION_DIST_DIR, "manifest.json")).text().catch(() => "");
+  if (sourceManifest && sourceManifest === destManifest) return EXTENSION_DIST_DIR;
+  mkdirSync(EXTENSION_DIST_DIR, { recursive: true });
+  cpSync(source, EXTENSION_DIST_DIR, { recursive: true, force: true });
+  return EXTENSION_DIST_DIR;
+}
 
-// Walk all Chrome profiles' Secure Preferences and find an extension
-// whose loaded `path` matches our dist directory. The extension ID Chrome
-// generates for an unpacked extension is path-dependent, so we cannot rely
-// on a hardcoded ID across machines.
 async function findInstalledExtension(
   profileDir?: string,
 ): Promise<{ id: string; profile: string } | null> {
@@ -258,6 +278,11 @@ async function findInstalledExtension(
   if (!userDataDir) return null;
   const cache = await readChromeProfileCache();
   const profiles = profileDir ? [profileDir] : (cache ? Object.keys(cache) : []);
+  // Resolve our known-good install paths up front for path-based fallback matching.
+  const knownPaths = new Set<string>();
+  for (const p of [EXTENSION_DIST_DIR, BUNDLED_EXTENSION_DIST_DIR, LEGACY_EXTENSION_DIST_DIR]) {
+    try { knownPaths.add(realpathSync(p)); } catch {}
+  }
   for (const prof of profiles) {
     const prefsPath = join(userDataDir, prof, "Secure Preferences");
     const f = file(prefsPath);
@@ -267,11 +292,12 @@ async function findInstalledExtension(
       const settings = data?.extensions?.settings ?? {};
       for (const [extId, info] of Object.entries(settings as Record<string, any>)) {
         if (!info?.path || info.state === 0) continue; // state 0 = explicitly disabled
+        // Primary: stable ID match (works when manifest `key` is set, regardless of path).
+        if (extId === EXTENSION_ID) return { id: extId, profile: prof };
+        // Fallback: path equality for legacy installs without a stable key.
         let storedPath = info.path as string;
         try { storedPath = realpathSync(storedPath); } catch {}
-        let distPath = EXTENSION_DIST_DIR;
-        try { distPath = realpathSync(distPath); } catch {}
-        if (storedPath === distPath) return { id: extId, profile: prof };
+        if (knownPaths.has(storedPath)) return { id: extId, profile: prof };
       }
     } catch {}
   }
@@ -501,13 +527,18 @@ async function daemonInstall(serveUrl: string): Promise<void> {
   const bunBin = Bun.which("bun") ?? process.execPath;
   const rechScript = import.meta.filename;
 
+  // Resolve PLAYWRIGHT_CLI: env override > bundled fork (development checkout) > "playwright-cli-multi-tab"
+  const bundledForkCli = join(import.meta.dir, "lib/playwright-cli/playwright-cli.js");
+  const resolvedPlaywrightCli = process.env.PLAYWRIGHT_CLI
+    || (existsSync(bundledForkCli) ? bundledForkCli : "playwright-cli-multi-tab");
+
   const envArgs: string[] = [
     "--env", `HOME=${home}`,
     "--env", `PATH=${process.env.PATH || "/usr/local/bin:/usr/bin:/bin"}`,
     "--env", `${ENV_KEY}=${serveUrl}`,
     "--env", `PWMCP_TEST_CONNECTION_TIMEOUT=${process.env.PWMCP_TEST_CONNECTION_TIMEOUT || "30000"}`,
+    "--env", `PLAYWRIGHT_CLI=${resolvedPlaywrightCli}`,
   ];
-  if (process.env.PLAYWRIGHT_CLI) envArgs.push("--env", `PLAYWRIGHT_CLI=${process.env.PLAYWRIGHT_CLI}`);
   if (process.env.RECH_HOST) envArgs.push("--env", `RECH_HOST=${process.env.RECH_HOST}`);
   if (isReadable(process.env.RECH_TLS_CERT)) envArgs.push("--env", `RECH_TLS_CERT=${process.env.RECH_TLS_CERT}`);
   if (isReadable(process.env.RECH_TLS_KEY)) envArgs.push("--env", `RECH_TLS_KEY=${process.env.RECH_TLS_KEY}`);
@@ -675,6 +706,8 @@ async function setup(opts: { profile?: string } = {}): Promise<void> {
   async function getExtAndToken(profileDir: string, profileDisplay: string, profileKey: string): Promise<{ extId: string; token: string } | null> {
     // Extension check
     let extId: string | undefined;
+    // Copy bundled dist to a stable per-user location so the install path survives bunx temp-dir cleanup.
+    await ensureExtensionDistInstalled();
     while (true) {
       const found = await findInstalledExtension(profileDir);
       if (found) { extId = found.id; break; }

package/rech.ts

@@ -2,7 +2,7 @@
 
 import { file } from "bun";
 import { randomBytes } from "crypto";
-import { mkdirSync, appendFileSync, existsSync, realpathSync, accessSync, constants as fsConstants } from "fs";
+import { mkdirSync, appendFileSync, existsSync, realpathSync, accessSync, cpSync, constants as fsConstants } from "fs";
 import { hostname } from "os";
 import { join, basename, dirname } from "path";
 
@@ -242,15 +242,35 @@ async function findChromeUserDataDir(): Promise<string | null> {
   return null;
 }
 
-export const EXTENSION_DIST_DIR = join(
-  import.meta.dir,
-  "lib/playwright-multi-tab/lib/playwright-mcp/packages/extension/dist",
-);
+// Bundled extension dist (shipped via package.json `files`). `import.meta.dir` resolves to the install
+// location at runtime — under local dev that's the repo root, under bunx/npm it's the package dir.
+const BUNDLED_EXTENSION_DIST_DIR = join(import.meta.dir, "extension");
+// The legacy submodule path (pre-1.12). Kept for backwards-compat with users who installed from there.
+const LEGACY_EXTENSION_DIST_DIR = join(import.meta.dir, "lib/playwright-multi-tab/lib/playwright-mcp/packages/extension/dist");
+
+// Stable per-user location: we copy the bundled dist here so Chrome's recorded install path survives
+// the ephemeral bunx temp dir being cleaned up between invocations.
+export const EXTENSION_DIST_DIR = join(process.env.HOME!, ".rechrome", "extension");
+
+// With the manifest `key` field set, Chrome derives this ID deterministically from the key (not the path),
+// so we can locate the extension by ID even when the on-disk path differs from what Chrome stored.
+export const EXTENSION_ID = "fokngfbogklgiffokdnekajodmhgfnhk";
+
+async function ensureExtensionDistInstalled(): Promise<string> {
+  const source = existsSync(BUNDLED_EXTENSION_DIST_DIR)
+    ? BUNDLED_EXTENSION_DIST_DIR
+    : existsSync(LEGACY_EXTENSION_DIST_DIR)
+      ? LEGACY_EXTENSION_DIST_DIR
+      : null;
+  if (!source) return EXTENSION_DIST_DIR;
+  const sourceManifest = await file(join(source, "manifest.json")).text().catch(() => "");
+  const destManifest = await file(join(EXTENSION_DIST_DIR, "manifest.json")).text().catch(() => "");
+  if (sourceManifest && sourceManifest === destManifest) return EXTENSION_DIST_DIR;
+  mkdirSync(EXTENSION_DIST_DIR, { recursive: true });
+  cpSync(source, EXTENSION_DIST_DIR, { recursive: true, force: true });
+  return EXTENSION_DIST_DIR;
+}
 
-// Walk all Chrome profiles' Secure Preferences and find an extension
-// whose loaded `path` matches our dist directory. The extension ID Chrome
-// generates for an unpacked extension is path-dependent, so we cannot rely
-// on a hardcoded ID across machines.
 async function findInstalledExtension(
   profileDir?: string,
 ): Promise<{ id: string; profile: string } | null> {
@@ -258,6 +278,11 @@ async function findInstalledExtension(
   if (!userDataDir) return null;
   const cache = await readChromeProfileCache();
   const profiles = profileDir ? [profileDir] : (cache ? Object.keys(cache) : []);
+  // Resolve our known-good install paths up front for path-based fallback matching.
+  const knownPaths = new Set<string>();
+  for (const p of [EXTENSION_DIST_DIR, BUNDLED_EXTENSION_DIST_DIR, LEGACY_EXTENSION_DIST_DIR]) {
+    try { knownPaths.add(realpathSync(p)); } catch {}
+  }
   for (const prof of profiles) {
     const prefsPath = join(userDataDir, prof, "Secure Preferences");
     const f = file(prefsPath);
@@ -267,11 +292,12 @@ async function findInstalledExtension(
       const settings = data?.extensions?.settings ?? {};
       for (const [extId, info] of Object.entries(settings as Record<string, any>)) {
         if (!info?.path || info.state === 0) continue; // state 0 = explicitly disabled
+        // Primary: stable ID match (works when manifest `key` is set, regardless of path).
+        if (extId === EXTENSION_ID) return { id: extId, profile: prof };
+        // Fallback: path equality for legacy installs without a stable key.
         let storedPath = info.path as string;
         try { storedPath = realpathSync(storedPath); } catch {}
-        let distPath = EXTENSION_DIST_DIR;
-        try { distPath = realpathSync(distPath); } catch {}
-        if (storedPath === distPath) return { id: extId, profile: prof };
+        if (knownPaths.has(storedPath)) return { id: extId, profile: prof };
       }
     } catch {}
   }
@@ -501,13 +527,18 @@ async function daemonInstall(serveUrl: string): Promise<void> {
   const bunBin = Bun.which("bun") ?? process.execPath;
   const rechScript = import.meta.filename;
 
+  // Resolve PLAYWRIGHT_CLI: env override > bundled fork (development checkout) > "playwright-cli-multi-tab"
+  const bundledForkCli = join(import.meta.dir, "lib/playwright-cli/playwright-cli.js");
+  const resolvedPlaywrightCli = process.env.PLAYWRIGHT_CLI
+    || (existsSync(bundledForkCli) ? bundledForkCli : "playwright-cli-multi-tab");
+
   const envArgs: string[] = [
     "--env", `HOME=${home}`,
     "--env", `PATH=${process.env.PATH || "/usr/local/bin:/usr/bin:/bin"}`,
     "--env", `${ENV_KEY}=${serveUrl}`,
     "--env", `PWMCP_TEST_CONNECTION_TIMEOUT=${process.env.PWMCP_TEST_CONNECTION_TIMEOUT || "30000"}`,
+    "--env", `PLAYWRIGHT_CLI=${resolvedPlaywrightCli}`,
   ];
-  if (process.env.PLAYWRIGHT_CLI) envArgs.push("--env", `PLAYWRIGHT_CLI=${process.env.PLAYWRIGHT_CLI}`);
   if (process.env.RECH_HOST) envArgs.push("--env", `RECH_HOST=${process.env.RECH_HOST}`);
   if (isReadable(process.env.RECH_TLS_CERT)) envArgs.push("--env", `RECH_TLS_CERT=${process.env.RECH_TLS_CERT}`);
   if (isReadable(process.env.RECH_TLS_KEY)) envArgs.push("--env", `RECH_TLS_KEY=${process.env.RECH_TLS_KEY}`);
@@ -675,6 +706,8 @@ async function setup(opts: { profile?: string } = {}): Promise<void> {
   async function getExtAndToken(profileDir: string, profileDisplay: string, profileKey: string): Promise<{ extId: string; token: string } | null> {
     // Extension check
     let extId: string | undefined;
+    // Copy bundled dist to a stable per-user location so the install path survives bunx temp-dir cleanup.
+    await ensureExtensionDistInstalled();
     while (true) {
       const found = await findInstalledExtension(profileDir);
       if (found) { extId = found.id; break; }

package/serve.js

@@ -163,7 +163,7 @@ export async function serve() {
       });
       const namespacedSession = clientSession ? `${sessionId}-${clientSession}` : sessionId;
 
-      const [bin, ...binArgs] = (process.env.PLAYWRIGHT_CLI || "playwright-cli").split(" ");
+      const [bin, ...binArgs] = (process.env.PLAYWRIGHT_CLI || "playwright-cli-multi-tab").split(" ");
 
       if (filteredArgs.length === 0) {
         filteredArgs.push("--help");

package/serve.ts

@@ -163,7 +163,7 @@ export async function serve() {
       });
       const namespacedSession = clientSession ? `${sessionId}-${clientSession}` : sessionId;
 
-      const [bin, ...binArgs] = (process.env.PLAYWRIGHT_CLI || "playwright-cli").split(" ");
+      const [bin, ...binArgs] = (process.env.PLAYWRIGHT_CLI || "playwright-cli-multi-tab").split(" ");
 
       if (filteredArgs.length === 0) {
         filteredArgs.push("--help");