chore: version extension-relay protocol (#939)

extension/src/ui/connect.tsx

@@ -22,7 +22,10 @@ import type { TabInfo } from './tabItem.js';
 type Status =
   | { type: 'connecting'; message: string }
   | { type: 'connected'; message: string }
-  | { type: 'error'; message: string };
+  | { type: 'error'; message: string }
+  | { type: 'error'; versionMismatch: { extensionVersion: string; } };
+
+const SUPPORTED_PROTOCOL_VERSION = 1;
 
 const ConnectApp: React.FC = () => {
   const [tabs, setTabs] = useState<TabInfo[]>([]);
@@ -58,6 +61,21 @@ const ConnectApp: React.FC = () => {
       return;
     }
 
+    const parsedVersion = parseInt(params.get('protocolVersion') ?? '', 10);
+    const requiredVersion = isNaN(parsedVersion) ? 1 : parsedVersion;
+    if (requiredVersion > SUPPORTED_PROTOCOL_VERSION) {
+      const extensionVersion = chrome.runtime.getManifest().version;
+      setShowButtons(false);
+      setShowTabList(false);
+      setStatus({
+        type: 'error',
+        versionMismatch: {
+          extensionVersion,
+        }
+      });
+      return;
+    }
+
     void connectToMCPRelay(relayUrl);
 
     // If this is a browser_navigate command, hide the tab list and show simple allow/reject
@@ -181,11 +199,28 @@ const ConnectApp: React.FC = () => {
   );
 };
 
+const VersionMismatchError: React.FC<{ extensionVersion: string }> = ({ 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 (
+    <div>
+      Playwright MCP version trying to connect requires newer extension version (current version: {extensionVersion}).{' '}
+      <a href={latestReleaseUrl}>Click here</a> to download latest version of the extension, then drag and drop it into the Chrome Extensions page.{' '}
+      See <a href={readmeUrl} target='_blank' rel='noopener noreferrer'>installation instructions</a> for more details.
+    </div>
+  );
+};
 
 const StatusBanner: React.FC<{ status: Status }> = ({ status }) => {
   return (
     <div className={`status-banner ${status.type}`}>
-      {status.message}
+      {'versionMismatch' in status ? (
+        <VersionMismatchError
+          extensionVersion={status.versionMismatch.extensionVersion}
+        />
+      ) : (
+        status.message
+      )}
     </div>
   );
 };

extension/tests/extension.spec.ts

@@ -33,6 +33,7 @@ type TestFixtures = {
   browserWithExtension: BrowserWithExtension,
   pathToExtension: string,
   useShortConnectionTimeout: (timeoutMs: number) => void
+  overrideProtocolVersion: (version: number) => void
 };
 
 const test = base.extend<TestFixtures>({
@@ -80,6 +81,12 @@ const test = base.extend<TestFixtures>({
     process.env.PWMCP_TEST_CONNECTION_TIMEOUT = undefined;
   },
 
+  overrideProtocolVersion: async ({}, use) => {
+    await use((version: number) => {
+      process.env.PWMCP_TEST_PROTOCOL_VERSION = version.toString();
+    });
+    process.env.PWMCP_TEST_PROTOCOL_VERSION = undefined;
+  }
 });
 
 async function startAndCallConnectTool(browserWithExtension: BrowserWithExtension, startClient: StartClient): Promise<Client> {
@@ -241,4 +248,31 @@ for (const [mode, startClientMethod] of [
     });
   });
 
+  test(`extension needs update (${mode})`, async ({ browserWithExtension, startClient, server, useShortConnectionTimeout, overrideProtocolVersion }) => {
+    useShortConnectionTimeout(500);
+    overrideProtocolVersion(1000);
+
+    // Prelaunch the browser, so that it is properly closed after the test.
+    const browserContext = await browserWithExtension.launch();
+
+    const client = await startClientMethod(browserWithExtension, startClient);
+
+    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 confirmationPage = await confirmationPagePromise;
+    await expect(confirmationPage.locator('.status-banner')).toContainText(`Playwright MCP version trying to connect requires newer extension version`);
+
+    expect(await navigateResponse).toHaveResponse({
+      result: expect.stringContaining('Extension connection timeout.'),
+      isError: true,
+    });
+  });
+
 }