chore: move from esm to cjs before upstreaming (#986)

extension/manifest.json

@@ -14,7 +14,7 @@
     "<all_urls>"
   ],
   "background": {
-    "service_worker": "lib/background.js",
+    "service_worker": "lib/background.mjs",
     "type": "module"
   },
   "action": {

extension/package.json

@@ -2,7 +2,6 @@
   "name": "@playwright/mcp-extension",
   "version": "0.0.36",
   "description": "Playwright MCP Browser Extension",
-  "type": "module",
   "private": true,
   "repository": {
     "type": "git",
@@ -17,8 +16,8 @@
   },
   "license": "Apache-2.0",
   "scripts": {
-    "build": "tsc --project . && tsc --project tsconfig.ui.json && vite build",
-    "watch": "tsc --watch --project . & tsc --watch --project tsconfig.ui.json & vite build --watch",
+    "build": "tsc --project . && tsc --project tsconfig.ui.json && vite build && vite build --config vite.sw.config.mts",
+    "watch": "tsc --watch --project . & tsc --watch --project tsconfig.ui.json & vite build --watch & vite build --watch --config vite.sw.config.mts",
     "test": "playwright test",
     "clean": "rm -rf dist"
   },

extension/src/background.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { RelayConnection, debugLog } from './relayConnection.js';
+import { RelayConnection, debugLog } from './relayConnection';
 
 type PageMessage = {
   type: 'connectToMCPRelay';

extension/tests/extension.spec.ts

@@ -16,7 +16,6 @@
 
 import fs from 'fs';
 import path from 'path';
-import { fileURLToPath } from 'url';
 import { chromium } from 'playwright';
 import { test as base, expect } from '../../tests/fixtures.js';
 
@@ -38,7 +37,7 @@ type TestFixtures = {
 
 const test = base.extend<TestFixtures>({
   pathToExtension: async ({}, use) => {
-    await use(fileURLToPath(new URL('../dist', import.meta.url)));
+    await use(path.resolve(__dirname, '../dist'));
   },
 
   browserWithExtension: async ({ mcpBrowser, pathToExtension }, use, testInfo) => {
@@ -126,7 +125,7 @@ async function startWithExtensionFlag(browserWithExtension: BrowserWithExtension
 const testWithOldExtensionVersion = test.extend({
   pathToExtension: async ({}, use, testInfo) => {
     const extensionDir = testInfo.outputPath('extension');
-    const oldPath = fileURLToPath(new URL('../dist', import.meta.url));
+    const oldPath = path.resolve(__dirname, '../dist');
 
     await fs.promises.cp(oldPath, extensionDir, { recursive: true });
     const manifestPath = path.join(extensionDir, 'manifest.json');

extension/tsconfig.json

@@ -10,7 +10,8 @@
     "resolveJsonModule": true,
     "types": ["chrome"],
     "jsx": "react-jsx",
-    "jsxImportSource": "react"
+    "jsxImportSource": "react",
+    "noEmit": true
   },
   "include": [
     "src",

extension/vite.sw.config.mts

@@ -0,0 +1,31 @@
+/**
+ * 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.
+ */
+
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/background.ts'),
+      fileName: 'lib/background',
+      formats: ['es']
+    },
+    outDir: 'dist',
+    emptyOutDir: false,
+    minify: false
+  }
+});