rechrome 1.13.0 → 1.15.0

package/extension/lib/background.mjs

@@ -366,16 +366,32 @@ async function openRelayConnection(mcpRelayUrl, protocolVersion) {
     throw new Error(message);
   }
 }
-const PLAYWRIGHT_GROUP_TITLE = "Playwright";
+const PLAYWRIGHT_GROUP_TITLE = "pw";
 const PLAYWRIGHT_GROUP_COLOR = "green";
+const MAX_GROUP_TITLE_LEN = 7;
 const NON_DEBUGGABLE_SCHEMES = ["chrome:", "edge:", "devtools:"];
 const CONNECTED_BADGE = { text: "✓", color: "#4CAF50", title: "Connected to Playwright client" };
 function isNonDebuggableUrl(url) {
   return !!url && NON_DEBUGGABLE_SCHEMES.some((s) => url.startsWith(s));
 }
+function urlDomain(url) {
+  if (!url)
+    return void 0;
+  try {
+    const u = new URL(url);
+    if (u.protocol !== "http:" && u.protocol !== "https:")
+      return void 0;
+    return u.hostname.replace(/^www\./, "").split(".")[0];
+  } catch {
+    return void 0;
+  }
+}
+function groupTitle(clientName, seedUrl) {
+  return (clientName || urlDomain(seedUrl) || PLAYWRIGHT_GROUP_TITLE).slice(0, MAX_GROUP_TITLE_LEN);
+}
 async function cleanupStalePlaywrightGroups() {
   try {
-    const groups = await chrome.tabGroups.query({ title: PLAYWRIGHT_GROUP_TITLE });
+    const groups = await chrome.tabGroups.query({ color: PLAYWRIGHT_GROUP_COLOR });
     const tabsPerGroup = await Promise.all(groups.map((g) => chrome.tabs.query({ groupId: g.id })));
     const tabIds = tabsPerGroup.flat().map((t) => t.id).filter((id) => id !== void 0);
     if (tabIds.length)
@@ -385,14 +401,16 @@ async function cleanupStalePlaywrightGroups() {
   }
 }
 class ConnectedTabGroup {
-  constructor(connection, selectedTab) {
+  constructor(connection, selectedTab, clientName) {
     __publicField(this, "_connection");
     __publicField(this, "_groupId", null);
     __publicField(this, "_groupTabIds", /* @__PURE__ */ new Set());
     __publicField(this, "_onTabUpdatedListener");
     __publicField(this, "_onTabRemovedListener");
+    __publicField(this, "_groupTitle");
     __publicField(this, "onclose");
     this._connection = connection;
+    this._groupTitle = groupTitle(clientName, selectedTab.url);
     this._connection.onclose = () => this._onConnectionClose();
     this._connection.ontabattached = (tabId) => this._onTabAttached(tabId);
     this._connection.ontabdetached = (tabId) => this._onTabDetached(tabId);
@@ -485,7 +503,7 @@ class ConnectedTabGroup {
       await this._retryOnDrag(async () => {
         if (this._groupId === null) {
           this._groupId = await chrome.tabs.group({ tabIds: [tabId] });
-          await chrome.tabGroups.update(this._groupId, { color: PLAYWRIGHT_GROUP_COLOR, title: PLAYWRIGHT_GROUP_TITLE });
+          await chrome.tabGroups.update(this._groupId, { color: PLAYWRIGHT_GROUP_COLOR, title: this._groupTitle });
         } else {
           await chrome.tabs.group({ groupId: this._groupId, tabIds: [tabId] });
         }
@@ -518,8 +536,11 @@ class ConnectedTabGroup {
 }
 class PlaywrightExtension {
   constructor() {
-    __publicField(this, "_activeGroup");
-    __publicField(this, "_activeClientName");
+    // Multiple concurrent clients can share one Chrome profile — each connection gets
+    // its own ConnectedTabGroup (its own Chrome tab group), so a new client no longer
+    // evicts existing ones. Tabs stay isolated by per-group _groupId / attachedTabs.
+    __publicField(this, "_activeGroups", /* @__PURE__ */ new Set());
+    __publicField(this, "_clientNames", /* @__PURE__ */ new Map());
     __publicField(this, "_pendingConnections", new PendingConnections());
     // Service worker restarts lose all connection state, so any existing
     // Playwright groups are stale. Connections wait on this before reconciling.
@@ -530,7 +551,6 @@ class PlaywrightExtension {
   }
   // Promise-based message handling is not supported in Chrome: https://issues.chromium.org/issues/40753031
   _onMessage(message, sender, sendResponse) {
-    var _a;
     switch (message.type) {
       case "connectionRequested":
         this._pendingConnections.create(sender.tab.id, message.mcpRelayUrl, message.protocolVersion).then(
@@ -541,8 +561,8 @@ class PlaywrightExtension {
       case "getTabs":
         this._getTabs().then(
           (tabs) => {
-            var _a2;
-            return sendResponse({ success: true, tabs, currentTabId: (_a2 = sender.tab) == null ? void 0 : _a2.id });
+            var _a;
+            return sendResponse({ success: true, tabs, currentTabId: (_a = sender.tab) == null ? void 0 : _a.id });
           },
           (error) => sendResponse({ success: false, error: error.message })
         );
@@ -557,8 +577,8 @@ class PlaywrightExtension {
       }
       case "getConnectionStatus":
         sendResponse({
-          connectedTabIds: ((_a = this._activeGroup) == null ? void 0 : _a.connectedTabIds()) ?? [],
-          clientName: this._activeClientName
+          connectedTabIds: [...this._activeGroups].flatMap((group) => group.connectedTabIds()),
+          clientName: [...this._clientNames.values()].filter(Boolean).join(", ") || void 0
         });
         return false;
       case "disconnect":
@@ -576,19 +596,16 @@ class PlaywrightExtension {
   async _connectTab(selectorTabId, tab, clientName) {
     try {
       await this._cleanupPromise;
-      this._disconnect("Another connection is requested");
       const connection = await this._pendingConnections.take(selectorTabId);
       if (!connection)
         throw new Error("Pending client connection closed");
-      const group = new ConnectedTabGroup(connection, tab);
+      const group = new ConnectedTabGroup(connection, tab, clientName);
       group.onclose = () => {
-        if (this._activeGroup === group) {
-          this._activeGroup = void 0;
-          this._activeClientName = void 0;
-        }
+        this._activeGroups.delete(group);
+        this._clientNames.delete(group);
       };
-      this._activeGroup = group;
-      this._activeClientName = clientName;
+      this._activeGroups.add(group);
+      this._clientNames.set(group, clientName);
       await Promise.all([
         chrome.tabs.update(tab.id, { active: true }),
         chrome.windows.update(tab.windowId, { focused: true })
@@ -612,13 +629,13 @@ class PlaywrightExtension {
       active: true
     });
   }
-  // Closes the active group's connection if any. ConnectedTabGroup's onclose
-  // handles state cleanup (connectedTabIds, badges, reconcile).
+  // Closes every active group's connection. ConnectedTabGroup's onclose handles
+  // per-group state cleanup (connectedTabIds, badges, reconcile).
   _disconnect(reason) {
-    var _a;
-    (_a = this._activeGroup) == null ? void 0 : _a.close(reason);
-    this._activeGroup = void 0;
-    this._activeClientName = void 0;
+    for (const group of this._activeGroups)
+      group.close(reason);
+    this._activeGroups.clear();
+    this._clientNames.clear();
   }
 }
 new PlaywrightExtension();

package/extension/lib/ui/connect.js

@@ -27,9 +27,10 @@ const ConnectApp = () => {
         setError(`Invalid mcpRelayUrl parameter in URL: ${relayUrl}. ${e}`);
         return;
       }
+      let info = "unknown";
       try {
         const client = JSON.parse(params.get("client") || "{}");
-        const info = `${client.name || "unknown"}`;
+        info = `${client.name || "unknown"}`;
         setClientInfo(info);
         setStatus({
           type: "connecting",
@@ -60,7 +61,7 @@ const ConnectApp = () => {
       const expectedToken = getOrCreateAuthToken();
       const token = params.get("token");
       if (token === expectedToken) {
-        await handleConnectToTab();
+        await handleConnectToTab(void 0, info);
         return;
       }
       if (token) {
@@ -86,26 +87,26 @@ const ConnectApp = () => {
     else
       setStatus({ type: "error", message: "Failed to load tabs: " + response.error });
   }, []);
-  const handleConnectToTab = reactExports.useCallback(async (tab) => {
+  const handleConnectToTab = reactExports.useCallback(async (tab, clientName = clientInfo) => {
     setShowTabList(false);
     try {
       const response = await chrome.runtime.sendMessage({
         type: "connectToTab",
         tab,
-        clientName: clientInfo
+        clientName
       });
       if (response == null ? void 0 : response.success) {
-        setStatus({ type: "connected", message: `"${clientInfo}" connected.` });
+        setStatus({ type: "connected", message: `"${clientName}" connected.` });
       } else {
         setStatus({
           type: "error",
-          message: (response == null ? void 0 : response.error) || `"${clientInfo}" failed to connect.`
+          message: (response == null ? void 0 : response.error) || `"${clientName}" failed to connect.`
         });
       }
     } catch (e) {
       setStatus({
         type: "error",
-        message: `"${clientInfo}" failed to connect: ${e}`
+        message: `"${clientName}" failed to connect: ${e}`
       });
     }
   }, [clientInfo]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rechrome",
-  "version": "1.13.0",
+  "version": "1.15.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/snomiao/rechrome.git"

package/serve.js

@@ -14,6 +14,25 @@ import {
 const TAILSCALE_BIN = process.env.TAILSCALE_BIN || "/Applications/Tailscale.app/Contents/MacOS/Tailscale";
 const CERT_RENEW_THRESHOLD_DAYS = 7;
 
+// Short label for a client identity, used as the Chrome tab-group name (the tab
+// strip is space-constrained, so cap at 7 chars). gitUrl ".../owner/repo/tree/branch"
+// -> "rep:bra" (3+3); "host:/path/to/dir" -> "dir"; bare host/IP -> as-is. Strips a
+// trailing "@profile" suffix first.
+const MAX_GROUP_LABEL_LEN = 7;
+function shortClientLabel(raw: string): string {
+  if (!raw) return raw;
+  const baseId = raw.includes("@") ? raw.slice(0, raw.indexOf("@")) : raw;
+  const git = baseId.match(/^https?:\/\/[^/]+\/[^/]+\/([^/]+?)(?:\/tree\/(.+))?$/);
+  let label: string;
+  if (git)
+    label = git[2] ? `${git[1].slice(0, 3)}:${git[2].slice(0, 3)}` : git[1];
+  else {
+    const hostCwd = baseId.match(/^[^:]+:(.+)$/);
+    label = hostCwd ? (hostCwd[1].split("/").filter(Boolean).pop() || baseId) : baseId;
+  }
+  return label.slice(0, MAX_GROUP_LABEL_LEN);
+}
+
 async function renewCertIfNeeded(certPath: string, keyPath: string): Promise<boolean> {
   const certContent = await file(certPath).text().catch(() => null);
   if (!certContent) return false;
@@ -233,7 +252,7 @@ export async function serve() {
         TMPDIR: process.env.TMPDIR,
         DISPLAY: process.env.DISPLAY,
         XDG_RUNTIME_DIR: process.env.XDG_RUNTIME_DIR,
-        ...(clientName ? { PLAYWRIGHT_MCP_CLIENT_NAME: clientName } : {}),
+        ...(clientName ? { PLAYWRIGHT_MCP_CLIENT_NAME: shortClientLabel(clientName) } : {}),
         ...passthroughEnv,
         // Enable extension bridge when credentials are present
         ...(passthroughEnv.PLAYWRIGHT_MCP_EXTENSION_ID && passthroughEnv.PLAYWRIGHT_MCP_EXTENSION_TOKEN

package/serve.ts

@@ -14,6 +14,25 @@ import {
 const TAILSCALE_BIN = process.env.TAILSCALE_BIN || "/Applications/Tailscale.app/Contents/MacOS/Tailscale";
 const CERT_RENEW_THRESHOLD_DAYS = 7;
 
+// Short label for a client identity, used as the Chrome tab-group name (the tab
+// strip is space-constrained, so cap at 7 chars). gitUrl ".../owner/repo/tree/branch"
+// -> "rep:bra" (3+3); "host:/path/to/dir" -> "dir"; bare host/IP -> as-is. Strips a
+// trailing "@profile" suffix first.
+const MAX_GROUP_LABEL_LEN = 7;
+function shortClientLabel(raw: string): string {
+  if (!raw) return raw;
+  const baseId = raw.includes("@") ? raw.slice(0, raw.indexOf("@")) : raw;
+  const git = baseId.match(/^https?:\/\/[^/]+\/[^/]+\/([^/]+?)(?:\/tree\/(.+))?$/);
+  let label: string;
+  if (git)
+    label = git[2] ? `${git[1].slice(0, 3)}:${git[2].slice(0, 3)}` : git[1];
+  else {
+    const hostCwd = baseId.match(/^[^:]+:(.+)$/);
+    label = hostCwd ? (hostCwd[1].split("/").filter(Boolean).pop() || baseId) : baseId;
+  }
+  return label.slice(0, MAX_GROUP_LABEL_LEN);
+}
+
 async function renewCertIfNeeded(certPath: string, keyPath: string): Promise<boolean> {
   const certContent = await file(certPath).text().catch(() => null);
   if (!certContent) return false;
@@ -233,7 +252,7 @@ export async function serve() {
         TMPDIR: process.env.TMPDIR,
         DISPLAY: process.env.DISPLAY,
         XDG_RUNTIME_DIR: process.env.XDG_RUNTIME_DIR,
-        ...(clientName ? { PLAYWRIGHT_MCP_CLIENT_NAME: clientName } : {}),
+        ...(clientName ? { PLAYWRIGHT_MCP_CLIENT_NAME: shortClientLabel(clientName) } : {}),
         ...passthroughEnv,
         // Enable extension bridge when credentials are present
         ...(passthroughEnv.PLAYWRIGHT_MCP_EXTENSION_ID && passthroughEnv.PLAYWRIGHT_MCP_EXTENSION_TOKEN