@eddym06/custom-chrome-mcp 1.0.8 → 1.1.0

package/USAGE_GUIDE.md

@@ -0,0 +1,393 @@
+# Custom Chrome MCP - AI Usage Guide
+
+## 🎯 Philosophy: Always Analyze Before Acting
+
+**GOLDEN RULE**: Never guess selectors or click blindly. Always analyze the page structure first.
+
+---
+
+## 📋 Common Workflows
+
+### 1. Basic Web Navigation & Interaction
+
+```
+CORRECT WORKFLOW:
+1️⃣ navigate - Go to the website
+2️⃣ wait_for_load_state - Wait for page to fully load (use 'networkidle')
+3️⃣ get_html or screenshot - ANALYZE the page structure
+4️⃣ Identify correct CSS selectors from the HTML
+5️⃣ click or type - Interact using verified selectors
+
+EXAMPLE:
+User: "Go to google.com and search for cats"
+
+Correct sequence:
+1. navigate("https://google.com")
+2. wait_for_load_state("networkidle")
+3. get_html() → See: <input name="q" class="gLFyf">
+4. type("input[name='q']", "cats")
+5. click("input[value='Google Search']")
+```
+
+**❌ WRONG**: 
+```
+navigate → click(".search-button")  // NO! You don't know if .search-button exists!
+```
+
+**✅ RIGHT**:
+```
+navigate → get_html → find selector → click with verified selector
+```
+
+---
+
+### 2. Extension Debugging
+
+```
+WORKFLOW:
+1️⃣ list_all_targets - Find all execution contexts
+   → Filter by 'service_worker' to see extensions
+2️⃣ Identify your extension - Look for title/url matching your extension
+3️⃣ Get targetId - Copy the ID from the target
+4️⃣ connect_to_target - Establish connection to that target
+5️⃣ execute_in_target - Run code in the extension context
+6️⃣ inspect_service_worker_logs - See console output (optional)
+
+EXAMPLE:
+User: "Debug my Chrome extension background script"
+
+1. list_all_targets(filterType: 'service_worker')
+   → Result: [{id: "ABC123", title: "My Extension", type: "service_worker"}]
+2. connect_to_target("ABC123")
+3. execute_in_target("ABC123", "return chrome.runtime.getManifest()")
+4. inspect_service_worker_logs("ABC123") → See console.log output
+```
+
+**⚠️ CRITICAL**: 
+- Use `execute_in_target` for extension contexts, NOT `execute_script`
+- `execute_script` only works on page contexts (tabs)
+- Extension service workers are separate execution contexts
+
+---
+
+### 3. Network Traffic Interception
+
+```
+WORKFLOW FOR INSPECTING REQUESTS:
+1️⃣ enable_response_interception - Start capturing responses
+   → Or use enable_network_interception for simpler request-only capture
+2️⃣ navigate - Trigger the network request
+3️⃣ list_intercepted_responses - See what was captured
+4️⃣ modify_intercepted_response - Change response if needed (optional)
+5️⃣ disable_response_interception - Stop capturing
+
+WORKFLOW FOR MOCKING ENDPOINTS:
+1️⃣ create_mock_endpoint - Set up fake API response
+   → Pattern: "*api.example.com/users*"
+   → Response: {"users": [...]}
+2️⃣ navigate - Page will hit mock instead of real API
+3️⃣ Test your frontend with fake data
+4️⃣ delete_mock_endpoint - Clean up
+
+⚠️ CONFLICTS:
+- Cannot use response_interception AND mock_endpoint simultaneously
+- Choose one: interception (for analysis) OR mocking (for testing)
+```
+
+---
+
+### 4. Form Filling & Submission
+
+```
+WORKFLOW:
+1️⃣ navigate to form page
+2️⃣ wait_for_load_state('networkidle')
+3️⃣ get_html → Analyze form structure
+4️⃣ Identify input selectors:
+   - input#email
+   - input[name="password"]
+   - button[type="submit"]
+5️⃣ type into each field with verified selectors
+6️⃣ click submit button with verified selector
+
+EXAMPLE:
+1. navigate("https://example.com/login")
+2. wait_for_load_state("networkidle")
+3. get_html() → See: 
+   <input id="email" type="email">
+   <input id="password" type="password">
+   <button type="submit">Login</button>
+4. type("#email", "user@example.com")
+5. type("#password", "mypassword")
+6. click("button[type='submit']")
+```
+
+---
+
+### 5. Data Extraction / Web Scraping
+
+```
+WORKFLOW:
+1️⃣ navigate to target page
+2️⃣ wait_for_load_state('networkidle') - Ensure dynamic content loaded
+3️⃣ get_html → Get full page structure
+4️⃣ execute_script with complex query:
+   return Array.from(document.querySelectorAll('.item'))
+     .map(el => ({
+       title: el.querySelector('.title').textContent,
+       price: el.querySelector('.price').textContent
+     }))
+
+WHEN TO USE execute_script:
+✅ Complex data extraction (querySelectorAll + map/filter)
+✅ Accessing window variables (return window.appConfig)
+✅ Triggering custom events
+✅ Advanced DOM manipulation
+
+WHEN NOT TO USE execute_script:
+❌ Simple clicks (use click tool instead)
+❌ Simple typing (use type tool instead)
+❌ Getting HTML (use get_html instead)
+```
+
+---
+
+### 6. Visual Analysis & Debugging
+
+```
+WORKFLOW:
+1️⃣ navigate
+2️⃣ screenshot - Take visual snapshot
+3️⃣ Analyze screenshot visually
+4️⃣ Identify elements by their visual position
+5️⃣ get_html to find selectors for those elements
+6️⃣ Interact with verified selectors
+
+WHEN TO USE SCREENSHOT:
+✅ Page layout is complex
+✅ Need visual confirmation (before/after actions)
+✅ Debugging UI issues
+✅ HTML is too large to analyze
+
+WHEN TO USE GET_HTML:
+✅ Need exact selectors
+✅ Scraping structured data
+✅ Analyzing page structure
+✅ Finding element attributes/IDs/classes
+```
+
+---
+
+### 7. HAR Recording (Performance Analysis)
+
+```
+WORKFLOW:
+1️⃣ start_har_recording - Begin capturing all network traffic
+2️⃣ navigate or perform actions - Trigger network requests
+3️⃣ stop_har_recording - Stop capture
+4️⃣ get_har_entries - Analyze requests/responses
+   → Or export_har_file - Save for external analysis
+
+USE CASES:
+- Performance testing (find slow requests)
+- Network debugging (see all API calls)
+- Security analysis (inspect headers/cookies)
+- Regression testing (compare HAR files)
+```
+
+---
+
+### 8. CSS/JS Injection (Persistent Modifications)
+
+```
+WORKFLOW FOR STYLING:
+1️⃣ inject_css_global - Add persistent styles
+   → CSS applies to all new pages automatically
+2️⃣ navigate to any page
+3️⃣ CSS is automatically injected
+4️⃣ clear_all_injections - Remove when done
+
+WORKFLOW FOR BEHAVIOR:
+1️⃣ inject_js_global - Add persistent JavaScript
+   → Runs BEFORE page scripts
+   → Can intercept functions
+2️⃣ navigate to any page
+3️⃣ Your code runs automatically
+4️⃣ clear_all_injections - Remove when done
+
+USE CASES:
+- UI customization (dark mode, hide elements)
+- Function interception (override fetch, console.log)
+- Auto-fill forms
+- Add custom buttons/features
+```
+
+---
+
+## 🚫 Common Mistakes to Avoid
+
+### ❌ Mistake #1: Guessing Selectors
+```javascript
+// WRONG
+navigate("https://example.com")
+click(".login-button")  // What if .login-button doesn't exist?
+```
+
+```javascript
+// RIGHT
+navigate("https://example.com")
+get_html()  // See: <button id="signin">Login</button>
+click("#signin")  // Use verified selector
+```
+
+---
+
+### ❌ Mistake #2: Not Waiting for Page Load
+```javascript
+// WRONG
+navigate("https://example.com")
+click("#button")  // Button might not exist yet!
+```
+
+```javascript
+// RIGHT
+navigate("https://example.com")
+wait_for_load_state("networkidle")  // Wait for page to finish loading
+get_html()  // Now analyze
+click("#button")  // Now interact
+```
+
+---
+
+### ❌ Mistake #3: Using Wrong Tool for Context
+```javascript
+// WRONG - Trying to debug extension with execute_script
+list_all_targets()  // Find extension targetId: "ABC123"
+execute_script("chrome.runtime.getManifest()")  // ❌ Won't work!
+```
+
+```javascript
+// RIGHT - Use execute_in_target for extensions
+list_all_targets()  // Find extension: "ABC123"
+connect_to_target("ABC123")
+execute_in_target("ABC123", "return chrome.runtime.getManifest()")  // ✅ Works!
+```
+
+---
+
+### ❌ Mistake #4: Over-using execute_script
+```javascript
+// WRONG - Using execute_script for simple actions
+execute_script("document.querySelector('#button').click()")
+```
+
+```javascript
+// RIGHT - Use dedicated tools
+get_html()  // Verify selector exists
+click("#button")  // Simpler, more reliable
+```
+
+---
+
+### ❌ Mistake #5: Not Analyzing Before Clicking
+```javascript
+// WRONG
+User: "Click the submit button on example.com"
+navigate("https://example.com")
+click("button")  // Which button? There might be many!
+```
+
+```javascript
+// RIGHT
+navigate("https://example.com")
+get_html()  // Analyze: <button class="submit-btn">Submit</button>
+click(".submit-btn")  // Use specific selector
+```
+
+---
+
+## 🎓 Decision Trees
+
+### "Should I use screenshot or get_html?"
+
+```
+START: Need to analyze page
+├─ Need exact selectors/IDs/classes? → get_html
+├─ Need visual layout/position? → screenshot
+├─ HTML is very large (>50KB)? → screenshot first, then get_html if needed
+└─ Need both? → screenshot (visual), then get_html (selectors)
+```
+
+### "Should I use execute_script or dedicated tools?"
+
+```
+START: Need to interact with page
+├─ Simple click? → click tool
+├─ Simple type? → type tool
+├─ Get HTML? → get_html tool
+├─ Complex query (querySelectorAll + map)? → execute_script
+├─ Access window variables? → execute_script
+└─ Trigger custom events? → execute_script
+```
+
+### "Which interception tool should I use?"
+
+```
+START: Need to intercept network traffic
+├─ Need to ANALYZE real traffic? → enable_response_interception
+├─ Need to MOCK/FAKE responses? → create_mock_endpoint
+├─ Need WebSocket traffic? → enable_websocket_interception
+├─ Need HAR file for analysis? → start_har_recording
+└─ Just need simple request logging? → enable_network_interception
+```
+
+---
+
+## 🔧 Troubleshooting
+
+### Problem: "Element not found" errors
+**Solution**: Always use get_html BEFORE clicking to verify selector exists
+
+### Problem: "Timeout" errors
+**Solution**: Use wait_for_load_state("networkidle") after navigation
+
+### Problem: "Cannot read property of undefined" in extension
+**Solution**: Verify you're using execute_in_target, not execute_script
+
+### Problem: Mock endpoint not working
+**Solution**: Check if response_interception is active (conflicts with mocks)
+
+### Problem: Injection not persisting
+**Solution**: Use inject_css_global/inject_js_global, not execute_script
+
+---
+
+## 💡 Pro Tips
+
+1. **Always analyze before acting** - get_html or screenshot first
+2. **Use specific selectors** - ID > class > tag name
+3. **Wait for page load** - Use wait_for_load_state("networkidle")
+4. **Test selectors in browser console** - Before using them in tools
+5. **Use timeouts wisely** - Increase for slow pages, decrease for fast ones
+6. **Clean up after yourself** - Clear injections, disable interceptors
+7. **Read tool descriptions** - They contain workflows and examples
+8. **Combine tools logically** - navigate → wait → analyze → interact
+
+---
+
+## 📚 Quick Reference
+
+| Task | Tools | Workflow |
+|------|-------|----------|
+| Navigate web | navigate → wait_for_load_state → get_html → click/type | Analysis-first approach |
+| Debug extension | list_all_targets → connect_to_target → execute_in_target | Extension-specific execution |
+| Intercept traffic | enable_response_interception → navigate → list_intercepted_responses | Live traffic capture |
+| Mock APIs | create_mock_endpoint → navigate | Testing without backend |
+| Scrape data | navigate → wait → get_html → execute_script (complex queries) | Structured extraction |
+| Visual debug | navigate → screenshot → analyze → get_html → interact | Visual-first analysis |
+| Performance | start_har_recording → actions → stop → get_har_entries | Full network profile |
+| Inject styles | inject_css_global → navigate → clear_all_injections | Persistent modifications |
+
+---
+
+**Remember**: The AI should read page structure BEFORE attempting any interaction. Never guess - always verify!

package/demo_features.ts

@@ -0,0 +1,115 @@
+
+import { ChromeConnector } from './src/chrome-connector.js';
+import { createAdvancedNetworkTools } from './src/tools/advanced-network.js';
+import { createPlaywrightLauncherTools } from './src/tools/playwright-launcher.js';
+import { createNavigationTools } from './src/tools/navigation.js';
+
+async function runDemo() {
+  console.log('🚀 Iniciando Demo de Herramientas Avanzadas...');
+  
+  // 1. Inicializar Connector
+  const connector = new ChromeConnector(9222);
+  
+  // 2. Obtener manejadores de herramientas
+  const launcherTools = createPlaywrightLauncherTools(connector);
+  const networkTools = createAdvancedNetworkTools(connector);
+  const navTools = createNavigationTools(connector);
+
+  const getHandler = (tools: any[], name: string) => tools.find(t => t.name === name)?.handler;
+
+  try {
+    // 3. Lanzar Chrome
+    console.log('\n🌐 Lanzando Chrome...');
+    const launchHandler = getHandler(launcherTools, 'launch_chrome_with_profile');
+    if (launchHandler) {
+      await launchHandler({ profileDirectory: 'Default' });
+      console.log('✅ Chrome lanzado correctamente');
+    } else {
+        // Si falla el launch (quizas ya esta abierto), intentamos conectar
+        console.log('⚠️ No se pudo lanzar (quizás ya abierto), intentando conectar...');
+    }
+
+    // Esperar un momento para la conexión
+    await new Promise(r => setTimeout(r, 3000));
+
+    // 4. Configurar Mock de API
+    console.log('\n📦 Configurando Mock de API...');
+    const createMock = getHandler(networkTools, 'create_mock_endpoint');
+    await createMock({
+      urlPattern: '*api.example.com/users*',
+      responseBody: JSON.stringify([{ id: 1, name: 'Usuario Demo', role: 'Tester' }]),
+      statusCode: 200,
+      headers: { 'Content-Type': 'application/json' },
+      latency: 1000,
+      timeoutMs: 10000
+    });
+    console.log('✅ Mock registrado para *api.example.com/users*');
+
+    // 5. Inyectar CSS Global
+    console.log('\n🎨 Inyectando CSS Global...');
+    const injectCss = getHandler(networkTools, 'inject_css_global');
+    await injectCss({
+      css: 'body { background-color: #f0f8ff !important; border: 5px solid red !important; }',
+      name: 'demo-theme',
+      timeoutMs: 5000
+    });
+    console.log('✅ CSS inyectado (Fondo azul claro, borde rojo)');
+
+    // 6. Iniciar Grabación HAR
+    console.log('\n📹 Iniciando grabación HAR...');
+    const startHar = getHandler(networkTools, 'start_har_recording');
+    await startHar({});
+    console.log('✅ Grabación HAR iniciada');
+
+    // 7. Navegar a una página para probar
+    console.log('\nse Navegando a example.com...');
+    const navigate = getHandler(navTools, 'navigate');
+    await navigate({ url: 'https://example.com' });
+    console.log('✅ Navegación completada');
+
+    // 8. Simular "fetch" en la consola para probar el Mock
+    console.log('\n🧪 Probando Mock (Simulando fetch)...');
+    // Esto es un truco: inyectamos JS que hace un fetch
+    const injectJs = getHandler(networkTools, 'inject_js_global');
+    await injectJs({
+      javascript: `
+        setTimeout(() => {
+            console.log("Haciendo fetch a api.example.com...");
+            fetch("https://api.example.com/users")
+                .then(r => r.json())
+                .then(d => {
+                    console.log("Respuesta Mock recibida:", d);
+                    const div = document.createElement("div");
+                    div.style = "position: fixed; top: 10px; right: 10px; background: gold; padding: 20px; z-index: 9999;";
+                    div.innerText = "MOCK DATA: " + JSON.stringify(d);
+                    document.body.appendChild(div);
+                });
+        }, 1000);
+      `,
+      name: 'mock-test',
+      runImmediately: true
+    });
+    console.log('✅ JS para probar Mock inyectado');
+
+    // Esperar para que ocurra el tráfico
+    console.log('⏳ Esperando 5 segundos para capturar tráfico...');
+    await new Promise(r => setTimeout(r, 5000));
+
+    // 9. Exportar HAR
+    console.log('\n💾 Exportando archivo HAR...');
+    const exportHar = getHandler(networkTools, 'export_har_file');
+    const harResult = await exportHar({
+      filename: 'demo_recording.har',
+      outputDir: './recordings',
+      timeoutMs: 30000
+    });
+    console.log(`✅ HAR exportado: ${JSON.stringify(harResult)}`);
+
+    console.log('\n🎉 DEMO COMPLETADA EXITOSAMENTE');
+
+  } catch (error) {
+    console.error('❌ Error durante la demo:', error);
+  }
+}
+
+runDemo();

package/dist/chrome-connector.d.ts

@@ -28,6 +28,7 @@ export declare class ChromeConnector {
     private currentTabId;
     private browserContext;
     private chromeProcess;
+    private persistentClients;
     constructor(port?: number);
     /**
      * Get platform-specific Chrome paths
@@ -121,6 +122,15 @@ export declare class ChromeConnector {
      * Get current tab ID
      */
     getCurrentTabId(): string | null;
+    /**
+     * Get or create a persistent client for interceptors
+     * These clients stay alive for the entire session
+     */
+    getPersistentClient(tabId?: string): Promise<any>;
+    /**
+     * Close persistent client (used when disabling interceptors)
+     */
+    closePersistentClient(tabId?: string): Promise<void>;
     /**
      * Helper to inject a visual connection status toast into the page
      */

package/dist/chrome-connector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chrome-connector.d.ts","sourceRoot":"","sources":["../src/chrome-connector.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAA0B,KAAK,cAAc,EAAE,MAAM,YAAY,CAAC;AASzE,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,GAAG,CAAC;IACZ,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,qBAAa,eAAe;IAC1B,OAAO,CAAC,UAAU,CAAiC;IACnD,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,cAAc,CAA+B;IACrD,OAAO,CAAC,aAAa,CAA6B;gBAEtC,IAAI,GAAE,MAAa;IAI/B;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAqCxB;;;;OAIG;YACW,mBAAmB;IAuEjC;;;OAGG;IACG,iBAAiB,CAAC,OAAO,GAAE,aAAkB,GAAG,OAAO,CAAC,IAAI,CAAC;IA4RnE;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA6B1B;;OAEG;IACG,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAoBjC;;OAEG;IACG,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAuB9B;;OAEG;IACH,iBAAiB,IAAI,cAAc,GAAG,IAAI;IAI1C;;OAEG;IACH,mBAAmB,IAAI,OAAO;IAI9B;;OAEG;IACH,aAAa,IAAI,gBAAgB;IAOjC;;OAEG;IACH,WAAW,IAAI,OAAO;IAItB;;OAEG;IACH,OAAO,IAAI,MAAM;IAIjB;;;OAGG;IACG,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC;IAyBvC;;OAEG;IACG,QAAQ,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;IAoBpC;;OAEG;IACG,YAAY,IAAI,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;IAK7C;;OAEG;IACG,SAAS,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;IAe/C;;OAEG;IACG,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ5C;;OAEG;IACG,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAS/C;;OAEG;IACG,YAAY,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC;IA+BhD;;OAEG;IACG,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC;IAWhF;;OAEG;IACG,UAAU,IAAI,OAAO,CAAC,GAAG,CAAC;IAShC;;OAEG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIlC;;OAEG;IACH,eAAe,IAAI,MAAM,GAAG,IAAI;IAIhC;;OAEG;IACG,sBAAsB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IA0B7D;;OAEG;IACG,mBAAmB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;CA+E3D"}
+{"version":3,"file":"chrome-connector.d.ts","sourceRoot":"","sources":["../src/chrome-connector.ts"],"names":[],"mappings":"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"}

package/dist/chrome-connector.js

@@ -17,6 +17,7 @@ export class ChromeConnector {
     currentTabId = null;
     browserContext = null;
     chromeProcess = null;
+    persistentClients = new Map(); // Persistent clients for interceptors
     constructor(port = 9222) {
         this.port = port;
     }
@@ -656,6 +657,49 @@ export class ChromeConnector {
     getCurrentTabId() {
         return this.currentTabId;
     }
+    /**
+     * Get or create a persistent client for interceptors
+     * These clients stay alive for the entire session
+     */
+    async getPersistentClient(tabId) {
+        const effectiveTabId = tabId || 'default';
+        // Return existing persistent client if available
+        if (this.persistentClients.has(effectiveTabId)) {
+            return this.persistentClients.get(effectiveTabId);
+        }
+        // Create new persistent client using same logic as getTabClient
+        const target = tabId || this.currentTabId;
+        let targetId = target;
+        if (!targetId) {
+            const tabs = await this.listTabs();
+            if (tabs.length === 0) {
+                throw new Error('No open tabs available');
+            }
+            targetId = tabs[0].id;
+        }
+        const client = await CDP({ port: this.port, target: targetId });
+        // Store it persistently
+        this.persistentClients.set(effectiveTabId, client);
+        console.error(`[Persistent Client] Created for tab: ${effectiveTabId}`);
+        return client;
+    }
+    /**
+     * Close persistent client (used when disabling interceptors)
+     */
+    async closePersistentClient(tabId) {
+        const effectiveTabId = tabId || 'default';
+        if (this.persistentClients.has(effectiveTabId)) {
+            const client = this.persistentClients.get(effectiveTabId);
+            try {
+                await client.close();
+            }
+            catch (e) {
+                console.error(`[Persistent Client] Error closing client:`, e);
+            }
+            this.persistentClients.delete(effectiveTabId);
+            console.error(`[Persistent Client] Closed for tab: ${effectiveTabId}`);
+        }
+    }
     /**
      * Helper to inject a visual connection status toast into the page
      */