chrome-ai-bridge 2.3.9 → 2.4.0

package/build/extension/ui/connect.js

@@ -0,0 +1,491 @@
+/**
+ * chrome-ai-bridge Connect UI
+ * Extension2-style simple flow:
+ * 1. MCP server opens connect.html?mcpRelayUrl=ws://...
+ * 2. Tab list is displayed
+ * 3. User selects tab -> Click "Connect"
+ * 4. Done
+ */
+
+class ConnectUI {
+  constructor() {
+    this.mcpRelayUrl = null;
+    this.sessionId = null;
+    this.allowTabTakeover = false;
+    this.autoMode = false;
+    this.autoTabId = null;
+    this.autoTabUrl = null;
+    this.autoNewTab = false;
+    this.debugPanelVisible = false;
+    this.autoRefreshInterval = null;
+
+    // DOM elements
+    this.statusEl = document.getElementById('status');
+    this.statusTextEl = document.getElementById('status-text');
+    this.statusIconEl = this.statusEl.querySelector('.status-icon');
+    this.tabSelectionEl = document.getElementById('tab-selection');
+    this.tabsListEl = document.getElementById('tabs-list');
+    this.connectedViewEl = document.getElementById('connected-view');
+    this.connectedTabTitleEl = document.getElementById('connected-tab-title');
+    this.connectedTabIdEl = document.getElementById('connected-tab-id');
+    this.disconnectBtnEl = document.getElementById('disconnect-btn');
+    this.errorViewEl = document.getElementById('error-view');
+    this.errorMessageEl = document.getElementById('error-message');
+
+    // Debug panel elements
+    this.debugToggleEl = document.getElementById('debug-toggle');
+    this.debugPanelEl = document.getElementById('debug-panel');
+    this.logFilterEl = document.getElementById('log-filter');
+    this.refreshLogsEl = document.getElementById('refresh-logs');
+    this.clearLogsEl = document.getElementById('clear-logs');
+    this.exportLogsEl = document.getElementById('export-logs');
+    this.debugStatsEl = document.getElementById('debug-stats');
+    this.logOutputEl = document.getElementById('log-output');
+
+    this.init();
+    this.initDebugPanel();
+  }
+
+  async init() {
+    try {
+      // Parse URL parameters (Extension2 style: parameters are always provided)
+      const params = new URLSearchParams(window.location.search);
+      this.mcpRelayUrl = params.get('mcpRelayUrl');
+      this.sessionId = params.get('sessionId');
+      this.allowTabTakeover = params.get('allowTabTakeover') === 'true';
+      this.autoMode = params.get('auto') === 'true';
+      this.autoTabUrl = params.get('tabUrl');
+      this.autoNewTab = params.get('newTab') === 'true';
+      const rawTabId = params.get('tabId');
+      this.autoTabId =
+        rawTabId && /^\d+$/.test(rawTabId) ? Number(rawTabId) : null;
+
+      // Validate relay URL
+      if (!this.mcpRelayUrl) {
+        this.showError('Missing mcpRelayUrl parameter. Make sure the MCP server is running.');
+        return;
+      }
+
+      if (!this.validateRelayUrl()) {
+        return;
+      }
+
+      if (this.autoMode) {
+        const connected = await this.tryAutoConnect();
+        if (connected) {
+          return;
+        }
+      }
+
+      // Show tab selection UI
+      await this.loadTabs();
+
+    } catch (error) {
+      this.showError(`Initialization failed: ${error.message}`);
+    }
+  }
+
+  validateRelayUrl() {
+    try {
+      const url = new URL(this.mcpRelayUrl);
+      if (!['127.0.0.1', 'localhost', '::1'].includes(url.hostname)) {
+        this.showError('Invalid relay URL: must be loopback address (127.0.0.1)');
+        return false;
+      }
+      return true;
+    } catch {
+      this.showError('Invalid relay URL format');
+      return false;
+    }
+  }
+
+  async tryAutoConnect() {
+    if (!this.autoTabUrl && !this.autoTabId) {
+      return false;
+    }
+
+    try {
+      this.showStatus('Auto-connecting...', 'info', '⚡');
+
+      const relayResponse = await chrome.runtime.sendMessage({
+        type: 'connectToRelay',
+        mcpRelayUrl: this.mcpRelayUrl,
+        sessionId: this.sessionId,
+      });
+      if (!relayResponse || !relayResponse.success) {
+        throw new Error(relayResponse?.error || 'Relay connection failed');
+      }
+
+      const connectResponse = await chrome.runtime.sendMessage({
+        type: 'connectToTab',
+        mcpRelayUrl: this.mcpRelayUrl,
+        tabId: this.autoTabId,
+        tabUrl: this.autoTabUrl,
+        newTab: this.autoNewTab,
+        sessionId: this.sessionId,
+        allowTabTakeover: this.allowTabTakeover,
+      });
+      if (!connectResponse || !connectResponse.success) {
+        throw new Error(connectResponse?.error || 'Tab connection failed');
+      }
+
+      this.showStatus('Connected. Closing...', 'success', '✅');
+      setTimeout(() => {
+        window.close();
+      }, 300);
+      return true;
+    } catch (error) {
+      const message =
+        error && typeof error === 'object' && 'message' in error
+          ? error.message
+          : String(error);
+      this.showStatus(
+        `Auto-connect failed (${message}). Select tab manually.`,
+        'error',
+        '⚠️',
+      );
+      return false;
+    }
+  }
+
+  async loadTabs() {
+    try {
+      const tabs = await chrome.tabs.query({});
+
+      // Filter out extension pages and chrome:// URLs
+      const filteredTabs = tabs.filter(tab => {
+        if (!tab.url) return false;
+        if (tab.url.startsWith('chrome://')) return false;
+        if (tab.url.startsWith('chrome-extension://')) return false;
+        if (tab.url.startsWith('devtools://')) return false;
+        return true;
+      });
+
+      if (filteredTabs.length === 0) {
+        this.showError('No tabs available. Open a web page first.');
+        return;
+      }
+
+      this.renderTabs(filteredTabs);
+      this.showStatus('Select a tab to connect', 'info', '📋');
+      this.tabSelectionEl.classList.remove('hidden');
+
+    } catch (error) {
+      this.showError(`Failed to load tabs: ${error.message}`);
+    }
+  }
+
+  renderTabs(tabs) {
+    this.tabsListEl.innerHTML = '';
+
+    // Sort tabs: active tab first, then by window/tab order
+    const sortedTabs = [...tabs].sort((a, b) => {
+      if (a.active && !b.active) return -1;
+      if (!a.active && b.active) return 1;
+      if (a.windowId !== b.windowId) return a.windowId - b.windowId;
+      return a.index - b.index;
+    });
+
+    sortedTabs.forEach(tab => {
+      const tabItem = document.createElement('div');
+      tabItem.className = `tab-item${tab.active ? ' active' : ''}`;
+      tabItem.dataset.tabId = tab.id;
+
+      // Favicon
+      const faviconEl = document.createElement('div');
+      faviconEl.className = 'tab-favicon';
+      if (tab.favIconUrl && !tab.favIconUrl.startsWith('chrome://')) {
+        const img = document.createElement('img');
+        img.src = tab.favIconUrl;
+        img.onerror = () => { faviconEl.textContent = '🌐'; };
+        faviconEl.appendChild(img);
+      } else {
+        faviconEl.textContent = '🌐';
+      }
+
+      // Tab info
+      const infoEl = document.createElement('div');
+      infoEl.className = 'tab-info';
+
+      const titleRow = document.createElement('div');
+      titleRow.className = 'tab-title-row';
+
+      const titleEl = document.createElement('span');
+      titleEl.className = 'tab-title';
+      titleEl.textContent = tab.title || 'Untitled';
+      titleRow.appendChild(titleEl);
+
+      if (tab.active) {
+        const badge = document.createElement('span');
+        badge.className = 'tab-active-badge';
+        badge.textContent = 'Active';
+        titleRow.appendChild(badge);
+      }
+
+      const urlEl = document.createElement('div');
+      urlEl.className = 'tab-url';
+      urlEl.textContent = tab.url || '';
+
+      const idEl = document.createElement('div');
+      idEl.className = 'tab-id';
+      idEl.textContent = `Tab ID: ${tab.id}`;
+
+      infoEl.appendChild(titleRow);
+      infoEl.appendChild(urlEl);
+      infoEl.appendChild(idEl);
+
+      // Connect button
+      const connectBtn = document.createElement('button');
+      connectBtn.className = 'tab-connect-btn';
+      connectBtn.textContent = 'Connect';
+      connectBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.connectToTab(tab);
+      });
+
+      tabItem.appendChild(faviconEl);
+      tabItem.appendChild(infoEl);
+      tabItem.appendChild(connectBtn);
+
+      // Also connect on row click
+      tabItem.addEventListener('click', () => {
+        this.connectToTab(tab);
+      });
+
+      this.tabsListEl.appendChild(tabItem);
+    });
+  }
+
+  async connectToTab(tab) {
+    try {
+      this.showStatus(`Connecting to "${tab.title}"...`, 'info', '⏳');
+
+      // Step 1: Connect to relay
+      const relayResponse = await chrome.runtime.sendMessage({
+        type: 'connectToRelay',
+        mcpRelayUrl: this.mcpRelayUrl,
+        sessionId: this.sessionId,
+      });
+
+      if (!relayResponse || !relayResponse.success) {
+        throw new Error(relayResponse?.error || 'Relay connection failed');
+      }
+
+      // Step 2: Connect to tab
+      const connectResponse = await chrome.runtime.sendMessage({
+        type: 'connectToTab',
+        mcpRelayUrl: this.mcpRelayUrl,
+        tabId: tab.id,
+        windowId: tab.windowId,
+        sessionId: this.sessionId,
+        allowTabTakeover: this.allowTabTakeover,
+      });
+
+      if (!connectResponse || !connectResponse.success) {
+        throw new Error(connectResponse?.error || 'Tab connection failed');
+      }
+
+      // Show connected view
+      this.tabSelectionEl.classList.add('hidden');
+      this.connectedViewEl.classList.remove('hidden');
+      this.connectedTabTitleEl.textContent = tab.title || 'Untitled';
+      this.connectedTabIdEl.textContent = tab.id;
+      this.showStatus('Connected', 'success', '✅');
+
+      // Set up disconnect button
+      this.disconnectBtnEl.onclick = () => this.disconnect(tab.id);
+
+    } catch (error) {
+      this.showError(`Connection failed: ${error.message}`);
+    }
+  }
+
+  async disconnect(tabId) {
+    try {
+      await chrome.runtime.sendMessage({
+        type: 'disconnect',
+        tabId: tabId
+      });
+    } catch {
+      // Ignore disconnect errors
+    }
+    this.reset();
+  }
+
+  reset() {
+    this.connectedViewEl.classList.add('hidden');
+    this.errorViewEl.classList.add('hidden');
+    this.loadTabs();
+  }
+
+  showStatus(message, type = 'info', icon = '⏳') {
+    this.statusTextEl.textContent = message;
+    this.statusIconEl.textContent = icon;
+    this.statusEl.className = `status ${type}`;
+    this.statusEl.classList.remove('hidden');
+    this.errorViewEl.classList.add('hidden');
+  }
+
+  showError(message) {
+    this.showStatus(message, 'error', '❌');
+    this.tabSelectionEl.classList.add('hidden');
+    this.connectedViewEl.classList.add('hidden');
+    this.errorViewEl.classList.remove('hidden');
+    this.errorMessageEl.textContent = message;
+  }
+
+  escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  // ========== Debug Panel Methods ==========
+
+  initDebugPanel() {
+    this.debugToggleEl.addEventListener('click', () => {
+      this.toggleDebugPanel();
+    });
+
+    this.logFilterEl.addEventListener('change', () => {
+      this.refreshLogs();
+    });
+
+    this.refreshLogsEl.addEventListener('click', () => {
+      this.refreshLogs();
+    });
+
+    this.clearLogsEl.addEventListener('click', () => {
+      this.clearLogs();
+    });
+
+    this.exportLogsEl.addEventListener('click', () => {
+      this.exportLogs();
+    });
+  }
+
+  toggleDebugPanel() {
+    this.debugPanelVisible = !this.debugPanelVisible;
+    if (this.debugPanelVisible) {
+      this.debugPanelEl.classList.remove('hidden');
+      this.debugToggleEl.textContent = 'Hide Debug Logs';
+      this.refreshLogs();
+      this.autoRefreshInterval = setInterval(() => this.refreshLogs(), 2000);
+    } else {
+      this.debugPanelEl.classList.add('hidden');
+      this.debugToggleEl.textContent = 'Show Debug Logs';
+      if (this.autoRefreshInterval) {
+        clearInterval(this.autoRefreshInterval);
+        this.autoRefreshInterval = null;
+      }
+    }
+  }
+
+  async refreshLogs() {
+    try {
+      const filter = this.logFilterEl.value || null;
+      const response = await chrome.runtime.sendMessage({
+        type: 'getDebugLogs',
+        filter: filter,
+        limit: 100
+      });
+
+      if (!response || !response.success) {
+        this.logOutputEl.textContent = 'Failed to fetch logs';
+        return;
+      }
+
+      // Update stats
+      const stats = response.stats;
+      const state = response.state;
+      this.debugStatsEl.innerHTML = `
+        <strong>Total Logs:</strong> ${stats.total} |
+        <strong>Active Connections:</strong> ${state.activeConnections?.length || 0} |
+        <strong>Pending:</strong> ${state.pendingTabSelection?.length || 0}
+        <br>
+        <strong>By Category:</strong>
+        ${Object.entries(stats.byCategory || {}).map(([cat, count]) => `${cat}: ${count}`).join(', ') || 'none'}
+      `;
+
+      // Render logs
+      const logs = response.logs || [];
+      if (logs.length === 0) {
+        this.logOutputEl.innerHTML = '<span style="color: #888;">No logs yet</span>';
+        return;
+      }
+
+      const html = logs.map(log => this.formatLogEntry(log)).join('');
+      this.logOutputEl.innerHTML = html;
+
+      // Scroll to bottom
+      this.logOutputEl.scrollTop = this.logOutputEl.scrollHeight;
+    } catch (error) {
+      this.logOutputEl.textContent = `Error: ${error.message}`;
+    }
+  }
+
+  formatLogEntry(log) {
+    const ts = log.ts ? log.ts.split('T')[1].split('.')[0] : '';
+    const cat = log.category || 'unknown';
+    const catClass = `cat-${cat}`;
+    const msg = this.escapeHtml(log.message || '');
+    const data = log.data ? this.escapeHtml(JSON.stringify(log.data)) : '';
+
+    return `<div class="log-entry">` +
+      `<span class="ts">${ts}</span> ` +
+      `<span class="${catClass}">[${cat.toUpperCase()}]</span> ` +
+      `<span class="msg">${msg}</span>` +
+      (data ? `<span class="data">${data}</span>` : '') +
+      `</div>`;
+  }
+
+  async clearLogs() {
+    try {
+      await chrome.runtime.sendMessage({ type: 'clearDebugLogs' });
+      this.refreshLogs();
+    } catch (error) {
+      this.showError(`Failed to clear logs: ${error.message}`);
+    }
+  }
+
+  async exportLogs() {
+    try {
+      const response = await chrome.runtime.sendMessage({
+        type: 'getDebugLogs',
+        filter: null,
+        limit: 500
+      });
+
+      if (!response || !response.success) {
+        this.showError('Failed to export logs');
+        return;
+      }
+
+      const exportData = {
+        timestamp: new Date().toISOString(),
+        stats: response.stats,
+        state: response.state,
+        logs: response.logs
+      };
+
+      const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `chrome-ai-bridge-debug-${Date.now()}.json`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      this.showError(`Failed to export logs: ${error.message}`);
+    }
+  }
+}
+
+// Initialize when DOM is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => {
+    new ConnectUI();
+  });
+} else {
+  new ConnectUI();
+}

package/build/src/extension/relay-server.js

@@ -29,6 +29,7 @@ export class RelayServer extends EventEmitter {
     discoveryServer = null;
     discoveryPort = null;
     keepAliveTimer = null;
+    _lastDiscoveryOptions = {};
     constructor(options = {}) {
         super();
         this.host = options.host || '127.0.0.1';
@@ -172,6 +173,9 @@ export class RelayServer extends EventEmitter {
                     this.ready = true;
                     debugLog(`[RelayServer] Connection ready for tab ${this.tabId}`);
                     this.emit('ready', this.tabId);
+                    // Release discovery port after WebSocket is established.
+                    // 1-second grace period lets Extension finish processing the response.
+                    setTimeout(() => this.stopDiscoveryServer(), 1000);
                     break;
                 case 'pong':
                     debugLog('[RelayServer] Received keep-alive pong');
@@ -269,6 +273,7 @@ export class RelayServer extends EventEmitter {
      * Extension polls this endpoint when user clicks the extension icon.
      */
     async startDiscoveryServer(options = {}) {
+        this._lastDiscoveryOptions = options;
         const ports = [38765, 38766, 38767, 38768, 38769, 38770, 38771, 38772, 38773, 38774, 38775];
         const wsUrl = this.getConnectionURL();
         for (const port of ports) {
@@ -332,6 +337,27 @@ export class RelayServer extends EventEmitter {
         debugLog('[RelayServer] Could not start discovery server on any port');
         return null;
     }
+    /**
+     * Release the discovery HTTP server (port).
+     * Called automatically after the Extension WebSocket connects (ready event).
+     * The port becomes available for other sessions.
+     */
+    stopDiscoveryServer() {
+        if (this.discoveryServer) {
+            this.discoveryServer.close();
+            debugLog(`[RelayServer] Discovery server released (port ${this.discoveryPort})`);
+            this.discoveryServer = null;
+            this.discoveryPort = null;
+        }
+    }
+    /**
+     * Re-acquire a discovery port (e.g. after WebSocket disconnect for reconnection).
+     * Uses the same options as the last startDiscoveryServer() call.
+     */
+    async restartDiscoveryServer(options) {
+        this.stopDiscoveryServer();
+        return this.startDiscoveryServer(options || this._lastDiscoveryOptions);
+    }
     /**
      * Stop server
      */
@@ -349,11 +375,7 @@ export class RelayServer extends EventEmitter {
         this.ready = false;
         this.tabId = null;
         this.rejectPendingRequests(new Error('RELAY_STOPPED: Relay stopped before request completion'));
-        if (this.discoveryServer) {
-            this.discoveryServer.close();
-            this.discoveryServer = null;
-            this.discoveryPort = null;
-        }
+        this.stopDiscoveryServer();
         if (this.wss) {
             return new Promise((resolve) => {
                 this.wss.close(() => {

package/build/src/fast-cdp/extension-raw.js

@@ -5,7 +5,10 @@ import { RelayServer } from '../extension/relay-server.js';
 import { logRelay, logExtension, logInfo, logError } from './mcp-logger.js';
 // Stable extension ID (from manifest.json key)
 const EXTENSION_ID = 'ibjplbopgmcacpmfpnaeoloepdhenlbm';
-const ENABLE_WAKE_CONNECT_PAGE = process.env.CAI_ENABLE_WAKE_CONNECT_PAGE !== '0';
+// Wake connect page disabled by default — it opens a chrome-extension:// URL
+// that gets ERR_BLOCKED_BY_CLIENT and annoys users. Discovery polling is the
+// primary mechanism; wake is only useful in rare edge cases.
+const ENABLE_WAKE_CONNECT_PAGE = process.env.CAI_ENABLE_WAKE_CONNECT_PAGE === '1';
 /**
  * Get Chrome executable path for current platform
  */

package/build/src/fast-cdp/fast-chat.js

@@ -2032,16 +2032,20 @@ async function askChatGPTFastInternal(question, debug) {
         summary: interceptor.getSummary(),
     });
     // Hybrid: prefer network text (primary), DOM as fallback
+    // Use network if it captured anything and is at least 50% of DOM length
+    // (avoids using truncated network text when DOM has the full answer)
     let hybridAnswer = finalAnswer;
     let answerSource = 'dom';
-    if (networkResult.text.length > 50) {
+    const netLen = networkResult.text.length;
+    const domLen = finalAnswer.length;
+    if (netLen > 0 && (domLen === 0 || netLen >= domLen * 0.5)) {
         hybridAnswer = networkResult.text;
         answerSource = 'network';
     }
     logInfo('chatgpt', 'Answer source selected', {
         source: answerSource,
-        networkLen: networkResult.text.length,
-        domLen: finalAnswer.length,
+        networkLen: netLen,
+        domLen,
     });
     return { answer: hybridAnswer, timings: fullTimings, debug: debugInfo };
 }
@@ -3030,17 +3034,20 @@ async function askGeminiFastInternal(question, debug) {
     });
     // Hybrid: prefer network text (primary), DOM as fallback
     // Normalize network text with same Gemini-specific cleanup as DOM text
+    // Use network if it captured anything and is at least 50% of DOM length
     const networkNormalized = normalizeGeminiResponse(networkResult.text, question);
     let hybridAnswer = normalized;
     let answerSource = 'dom';
-    if (networkNormalized.length > 50) {
+    const netLen = networkNormalized.length;
+    const domLen = normalized.length;
+    if (netLen > 0 && (domLen === 0 || netLen >= domLen * 0.5)) {
         hybridAnswer = networkNormalized;
         answerSource = 'network';
     }
     logInfo('gemini', 'Answer source selected', {
         source: answerSource,
-        networkLen: networkNormalized.length,
-        domLen: normalized.length,
+        networkLen: netLen,
+        domLen,
     });
     return { answer: hybridAnswer, timings: fullTimings, debug: debugInfo };
 }