chore(extension): use separate package.json (#778)

extension/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@playwright/mcp-extension",
+  "version": "0.0.32",
+  "description": "Playwright MCP Browser Extension",
+  "type": "module",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/microsoft/playwright-mcp.git"
+  },
+  "homepage": "https://playwright.dev",
+  "engines": {
+    "node": ">=18"
+  },
+  "author": {
+    "name": "Microsoft Corporation"
+  },
+  "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",
+    "clean": "rm -rf lib"
+  },
+  "devDependencies": {
+    "@types/chrome": "^0.0.315",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react": "^4.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.8.2",
+    "vite": "^5.0.0"
+  }
+}

extension/src/ui/connect.tsx

@@ -16,7 +16,6 @@
 
 import React, { useState, useEffect, useCallback } from 'react';
 import { createRoot } from 'react-dom/client';
-import './connect.css';
 
 interface TabInfo {
   id: number;
@@ -65,7 +64,7 @@ const ConnectApp: React.FC = () => {
     void loadTabs();
   }, []);
 
-  const loadTabs = async () => {
+  const loadTabs = useCallback(async () => {
     const response = await chrome.runtime.sendMessage({ type: 'getTabs' });
     if (response.success) {
       setTabs(response.tabs);
@@ -74,7 +73,7 @@ const ConnectApp: React.FC = () => {
     } else {
       setStatus({ type: 'error', message: 'Failed to load tabs: ' + response.error });
     }
-  };
+  }, []);
 
   const handleContinue = useCallback(async () => {
     setShowButtons(false);

extension/src/ui/tsconfig.json

@@ -0,0 +1,4 @@
+// Help VSCode to find right tsconfig file.
+{
+    "extends": "../../tsconfig.ui.json"
+}

extension/tsconfig.ui.json

@@ -8,6 +8,7 @@
     "rootDir": "src",
     "outDir": "./lib",
     "resolveJsonModule": true,
+    "types": ["chrome"],
     "jsx": "react-jsx",
     "jsxImportSource": "react",
     "noEmit": true,

package.json

@@ -17,19 +17,16 @@
   "license": "Apache-2.0",
   "scripts": {
     "build": "tsc",
-    "build:extension": "tsc --project extension && tsc --project extension && vite build extension",
     "lint": "npm run update-readme && eslint . && tsc --noEmit",
     "lint-fix": "eslint . --fix",
     "update-readme": "node utils/update-readme.js",
     "watch": "tsc --watch",
-    "watch:extension": "tsc --watch --project extension & tsc --watch --project extension/tsconfig.ui.json & vite build extension --watch",
-    "dev:extension": "vite build --watch",
     "test": "playwright test",
     "ctest": "playwright test --project=chrome",
     "ftest": "playwright test --project=firefox",
     "wtest": "playwright test --project=webkit",
     "run-server": "node lib/browserServer.js",
-    "clean": "rm -rf lib extension/lib",
+    "clean": "rm -rf lib",
     "npm-publish": "npm run clean && npm run build && npm run test && npm publish"
   },
   "exports": {
@@ -56,11 +53,8 @@
     "@eslint/js": "^9.19.0",
     "@playwright/test": "1.55.0-alpha-1752701791000",
     "@stylistic/eslint-plugin": "^3.0.1",
-    "@types/chrome": "^0.0.315",
     "@types/debug": "^4.1.12",
     "@types/node": "^22.13.10",
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
     "@types/ws": "^8.18.1",
     "@typescript-eslint/eslint-plugin": "^8.26.1",
     "@typescript-eslint/parser": "^8.26.1",
@@ -68,12 +62,8 @@
     "esbuild": "^0.20.1",
     "eslint": "^9.19.0",
     "eslint-plugin-import": "^2.31.0",
-    "vite": "^5.0.0",
-    "@vitejs/plugin-react": "^4.0.0",
     "eslint-plugin-notice": "^1.0.0",
     "openai": "^5.10.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "typescript": "^5.8.2"
   },
   "bin": {