chore(cli): share Playwright extension id between cdpRelay and cli-client (#40345)

packages/playwright-core/src/tools/cli-client/DEPS.list

@@ -11,10 +11,12 @@
 
 [output.ts]
 "strict"
+../utils/extension.ts
 ./channelSessions.ts
 
 [channelSessions.ts]
 "strict"
+../utils/extension.ts
 
 [session.ts]
 "strict"

packages/playwright-core/src/tools/cli-client/channelSessions.ts

@@ -19,6 +19,8 @@ import net from 'net';
 import os from 'os';
 import path from 'path';
 
+import { playwrightExtensionId } from '../utils/extension';
+
 export type ChannelSession = {
   channel: string;
   userDataDir: string;
@@ -26,12 +28,6 @@ export type ChannelSession = {
   extensionInstalled: boolean;
 };
 
-// Keep in sync with the id declared via "key" in packages/extension/manifest.json
-// and the hardcoded url in packages/playwright-core/src/tools/mcp/cdpRelay.ts.
-const playwrightExtensionId = 'mmlmfjhmonkocbjadbfplnigmagldckm';
-
-export const playwrightExtensionInstallUrl = `https://chromewebstore.google.com/detail/playwright-mcp-bridge/${playwrightExtensionId}`;
-
 export async function listChannelSessions(): Promise<ChannelSession[]> {
   if (process.env.PWTEST_CLI_CHANNEL_SCAN_DISABLED_FOR_TEST)
     return [];

packages/playwright-core/src/tools/cli-client/output.ts

@@ -19,7 +19,7 @@
 
 import path from 'path';
 
-import { playwrightExtensionInstallUrl } from './channelSessions';
+import { playwrightExtensionInstallUrl } from '../utils/extension';
 
 import type { ChannelSession } from './channelSessions';
 import type { BrowserStatus } from '../../serverRegistry';

packages/playwright-core/src/tools/mcp/DEPS.list

@@ -2,6 +2,7 @@
 ../../..
 ../../
 ../utils/mcp/
+../utils/extension.ts
 ../backend/
 @utils/**
 @isomorphic/**

packages/playwright-core/src/tools/mcp/cdpRelay.ts

@@ -35,6 +35,7 @@ import ws, { WebSocketServer as wsServer } from 'ws';
 import { ManualPromise } from '@isomorphic/manualPromise';
 import { registry } from '../../server/registry/index';
 
+import { playwrightExtensionId } from '../utils/extension';
 import { addressToString } from '../utils/mcp/http';
 import { logUnhandledError } from './log';
 import { ExtensionProtocolV1 } from './cdpRelayV1';
@@ -125,8 +126,7 @@ export class CDPRelayServer {
 
   private _connectBrowser(clientName: string) {
     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://mmlmfjhmonkocbjadbfplnigmagldckm/connect.html');
+    const url = new URL(`chrome-extension://${playwrightExtensionId}/connect.html`);
     url.searchParams.set('mcpRelayUrl', mcpRelayEndpoint);
     const client = {
       name: clientName,

packages/playwright-core/src/tools/utils/DEPS.list

@@ -3,3 +3,6 @@
 
 [connect.ts]
 "strict"
+
+[extension.ts]
+"strict"

packages/playwright-core/src/tools/utils/extension.ts

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+// Also pinned via the "key" field in packages/extension/manifest.json.
+export const playwrightExtensionId = 'mmlmfjhmonkocbjadbfplnigmagldckm';
+
+export const playwrightExtensionInstallUrl = `https://chromewebstore.google.com/detail/playwright-mcp-bridge/${playwrightExtensionId}`;

utils/build/build.js

@@ -593,6 +593,7 @@ steps.push(new EsbuildStep({
     filePath('packages/playwright-core/src/tools/cli-client/*.ts'),
     filePath('packages/playwright-core/src/package.ts'),
     filePath('packages/playwright-core/src/tools/utils/socketConnection.ts'),
+    filePath('packages/playwright-core/src/tools/utils/extension.ts'),
   ],
   outdir: filePath('packages/playwright-core/lib'),
   plugins: [dynamicImportToRequirePlugin],