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,