chore: check extension version on connect (#907)

extension/src/background.ts

@@ -19,6 +19,7 @@ import { RelayConnection, debugLog } from './relayConnection.js';
 type PageMessage = {
   type: 'connectToMCPRelay';
   mcpRelayUrl: string;
+  pwMcpVersion: string | null;
 } | {
   type: 'getTabs';
 } | {
@@ -49,7 +50,7 @@ class TabShareExtension {
   private _onMessage(message: PageMessage, sender: chrome.runtime.MessageSender, sendResponse: (response: any) => void) {
     switch (message.type) {
       case 'connectToMCPRelay':
-        this._connectToRelay(sender.tab!.id!, message.mcpRelayUrl!).then(
+        this._connectToRelay(sender.tab!.id!, message.mcpRelayUrl, message.pwMcpVersion).then(
             () => sendResponse({ success: true }),
             (error: any) => sendResponse({ success: false, error: error.message }));
         return true;
@@ -77,7 +78,11 @@ class TabShareExtension {
     return false;
   }
 
-  private async _connectToRelay(selectorTabId: number, mcpRelayUrl: string): Promise<void> {
+  private async _connectToRelay(selectorTabId: number, mcpRelayUrl: string, pwMcpVersion: string | null): Promise<void> {
+    const version = chrome.runtime.getManifest().version;
+    if (pwMcpVersion !== version)
+      throw new Error(`Incompatible Playwright MCP version: ${pwMcpVersion} (extension version: ${version}). Please install the latest version of the extension.`);
+
     try {
       debugLog(`Connecting to relay at ${mcpRelayUrl}`);
       const socket = new WebSocket(mcpRelayUrl);
@@ -96,8 +101,9 @@ class TabShareExtension {
       this._pendingTabSelection.set(selectorTabId, { connection });
       debugLog(`Connected to MCP relay`);
     } catch (error: any) {
-      debugLog(`Failed to connect to MCP relay:`, error.message);
-      throw error;
+      const message = `Failed to connect to MCP relay: ${error.message}`;
+      debugLog(message);
+      throw new Error(message);
     }
   }
 

extension/src/ui/connect.tsx

@@ -54,16 +54,22 @@ const ConnectApp: React.FC = () => {
       return;
     }
 
-    void connectToMCPRelay(relayUrl);
+    void connectToMCPRelay(relayUrl, params.get('pwMcpVersion'));
     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 handleReject = useCallback((message: string) => {
+    setShowButtons(false);
+    setShowTabList(false);
+    setStatus({ type: 'error', message });
   }, []);
 
+  const connectToMCPRelay = useCallback(async (mcpRelayUrl: string, pwMcpVersion: string | null) => {
+    const response = await chrome.runtime.sendMessage({ type: 'connectToMCPRelay', mcpRelayUrl, pwMcpVersion  });
+    if (!response.success)
+      handleReject(response.error);
+  }, [handleReject]);
+
   const loadTabs = useCallback(async () => {
     const response = await chrome.runtime.sendMessage({ type: 'getTabs' });
     if (response.success)
@@ -100,22 +106,16 @@ const ConnectApp: React.FC = () => {
     }
   }, [clientInfo, mcpRelayUrl]);
 
-  const handleReject = useCallback(() => {
-    setShowButtons(false);
-    setShowTabList(false);
-    setStatus({ type: 'error', message: 'Connection rejected. This tab can be closed.' });
-  }, []);
-
   useEffect(() => {
     const listener = (message: any) => {
       if (message.type === 'connectionTimeout')
-        handleReject();
+        handleReject('Connection timed out.');
     };
     chrome.runtime.onMessage.addListener(listener);
     return () => {
       chrome.runtime.onMessage.removeListener(listener);
     };
-  }, []);
+  }, [handleReject]);
 
   return (
     <div className='app-container'>
@@ -124,7 +124,7 @@ const ConnectApp: React.FC = () => {
           <div className='status-container'>
             <StatusBanner type={status.type} message={status.message} />
             {showButtons && (
-              <Button variant='reject' onClick={handleReject}>
+              <Button variant='reject' onClick={() => handleReject('Connection rejected. This tab can be closed.')}>
                 Reject
               </Button>
             )}