@dynamicu/chromedebug-mcp 2.6.1 → 2.6.2

package/chrome-extension/disable-react-devtools.js

@@ -0,0 +1,19 @@
+/**
+ * Disable React DevTools to prevent semver validation error
+ *
+ * This prevents the React DevTools browser extension from trying to inject
+ * into ChromeDebug's extension pages, which causes a console error:
+ * "Invalid argument not valid semver ('' received)"
+ *
+ * IMPORTANT: This only affects ChromeDebug extension pages (popup, options).
+ * It does NOT affect developers' React applications in other tabs.
+ * Each browser tab/window has its own isolated JavaScript context.
+ */
+
+window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
+  isDisabled: true,
+  supportsFiber: true,
+  inject: function() {},
+  onCommitFiberRoot: function() {},
+  onCommitFiberUnmount: function() {}
+};

package/chrome-extension/manifest.free.json

@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
-  "name": "ChromeDebug MCP Assistant FREE v2.5.0",
-  "version": "2.5.0",
-  "description": "ChromeDebug MCP visual element selector [FREE Edition] [Build: 2025-10-21-v2.5.0]",
+  "name": "ChromeDebug MCP Assistant FREE v2.6.0",
+  "version": "2.6.0",
+  "description": "ChromeDebug MCP visual element selector [FREE Edition] [Build: 2025-10-24-v2.6.0]",
   "permissions": [
     "activeTab",
     "scripting",

package/chrome-extension/options.html

@@ -196,7 +196,8 @@
       <button id="reset" class="secondary">Reset to Default</button>
     </div>
   </div>
-  
+
+  <script src="disable-react-devtools.js"></script>
   <script src="extension-config.js"></script>
   <script src="options.js"></script>
 </body>

package/chrome-extension/popup.html

@@ -164,6 +164,19 @@
     </div>
 
     <div id="license-message" style="margin-top: 5px; font-size: 12px; text-align: center;"></div>
+
+    <!-- Inline Activation Manager (shown when activation limit reached) -->
+    <div id="inline-activation-manager" style="display: none; margin-top: 15px; padding: 12px; background: #fff3cd; border: 1px solid #ffc107; border-radius: 4px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;">
+      <div style="font-size: 13px; font-weight: 500; color: #856404; margin-bottom: 10px;">
+        ⚠️ Activation Limit Reached
+      </div>
+      <div style="font-size: 12px; color: #856404; margin-bottom: 12px;">
+        Please deactivate an existing activation to continue
+      </div>
+      <div id="activations-list-inline" style="max-height: 250px; overflow-y: auto; background: white; border-radius: 4px; border: 1px solid #ddd;">
+        <!-- Activations will be loaded here dynamically -->
+      </div>
+    </div>
   </div>
 
   <div class="status">
@@ -526,7 +539,8 @@
       color: #c62828;
     }
   </style>
-  
+
+  <script src="disable-react-devtools.js"></script>
   <script src="extension-config.js"></script>
   <script type="module" src="popup.js"></script>
 </body>

package/chrome-extension/popup.js

@@ -995,6 +995,193 @@ async function initializeLicenseUI() {
   }
 }
 
+// Inline Activation Manager Functions
+/**
+ * Show the inline activation manager with slide-down animation
+ */
+async function showInlineActivationManager(licenseKey) {
+  const inlineManager = document.getElementById('inline-activation-manager');
+  const activationsList = document.getElementById('activations-list-inline');
+
+  // Show the container
+  inlineManager.style.display = 'block';
+
+  // Trigger animation
+  setTimeout(() => {
+    inlineManager.style.maxHeight = '400px';
+  }, 10);
+
+  // Load activations
+  try {
+    activationsList.innerHTML = '<div style="padding: 15px; text-align: center; color: #666;">Loading activations...</div>';
+
+    // Get current instance ID
+    const stored = await chrome.storage.local.get(['chromedebug_instance_id']);
+    const currentInstanceId = stored.chromedebug_instance_id;
+
+    // Fetch activations from Firebase
+    const data = await licenseClient.listActivations(licenseKey);
+    const activations = data.activations || [];
+
+    // Render activations
+    renderInlineActivations(activations, currentInstanceId, licenseKey);
+
+  } catch (error) {
+    console.error('[License] Error loading activations:', error);
+    activationsList.innerHTML = `<div style="padding: 15px; text-align: center; color: #f44336;">Failed to load activations: ${error.message}</div>`;
+  }
+}
+
+/**
+ * Hide the inline activation manager with slide-up animation
+ */
+function hideInlineActivationManager() {
+  const inlineManager = document.getElementById('inline-activation-manager');
+  inlineManager.style.maxHeight = '0';
+
+  setTimeout(() => {
+    inlineManager.style.display = 'none';
+  }, 300);
+}
+
+/**
+ * Render activations in the inline manager
+ */
+function renderInlineActivations(activations, currentInstanceId, licenseKey) {
+  const container = document.getElementById('activations-list-inline');
+  container.innerHTML = '';
+
+  if (activations.length === 0) {
+    container.innerHTML = '<div style="padding: 15px; text-align: center; color: #666;">No activations found.</div>';
+    return;
+  }
+
+  activations.forEach((activation, index) => {
+    const item = document.createElement('div');
+    item.style.cssText = 'padding: 12px; border-bottom: 1px solid #e0e0e0; transition: background 0.2s;';
+    item.onmouseenter = () => item.style.background = '#f9f9f9';
+    item.onmouseleave = () => item.style.background = isCurrentDevice ? '#e8f5e9' : 'white';
+
+    // Check if this is the current device
+    const isCurrentDevice = activation.name === currentInstanceId || activation.identifier === currentInstanceId;
+
+    if (isCurrentDevice) {
+      item.style.background = '#e8f5e9';
+      item.style.borderLeft = '3px solid #4caf50';
+    }
+
+    // Format date
+    const date = new Date(activation.createdAt);
+    const formattedDate = date.toLocaleString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+
+    // Build device info
+    let deviceDisplay = 'Unknown Device';
+    if (activation.deviceInfo) {
+      deviceDisplay = activation.deviceInfo.deviceName ||
+                     `${activation.deviceInfo.platform || 'Unknown'} • ${activation.deviceInfo.browser || 'Unknown'}`;
+    } else if (activation.name && activation.name !== currentInstanceId) {
+      deviceDisplay = activation.name;
+    }
+
+    item.innerHTML = `
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
+        <span style="font-weight: 500; font-size: 13px; color: #333;">Activation ${index + 1}</span>
+        ${isCurrentDevice ? '<span style="background: #4caf50; color: white; padding: 2px 6px; border-radius: 10px; font-size: 10px; font-weight: bold;">CURRENT</span>' : ''}
+      </div>
+      <div style="font-size: 12px; color: #666; margin-bottom: 4px;">
+        <strong style="color: #333;">${deviceDisplay}</strong>
+      </div>
+      <div style="font-size: 11px; color: #999; margin-bottom: 8px;">
+        ${formattedDate}
+      </div>
+      <button
+        class="deactivate-btn-inline"
+        data-instance-id="${activation.identifier}"
+        data-activation-number="${index + 1}"
+        data-license-key="${licenseKey}"
+        style="padding: 5px 10px; background: ${isCurrentDevice ? '#ccc' : '#f44336'}; color: white; border: none; border-radius: 3px; cursor: ${isCurrentDevice ? 'not-allowed' : 'pointer'}; font-size: 11px; width: 100%;"
+        ${isCurrentDevice ? 'disabled' : ''}
+      >
+        ${isCurrentDevice ? '✓ Current Device' : 'Deactivate'}
+      </button>
+    `;
+
+    // Add click handler for deactivate button
+    if (!isCurrentDevice) {
+      const deactivateBtn = item.querySelector('.deactivate-btn-inline');
+      deactivateBtn.addEventListener('click', () => {
+        handleInlineDeactivate(activation.identifier, index + 1, licenseKey);
+      });
+    }
+
+    container.appendChild(item);
+  });
+}
+
+/**
+ * Handle deactivation of an instance (inline)
+ */
+async function handleInlineDeactivate(instanceId, activationNumber, licenseKey) {
+  const confirmed = confirm(
+    `Are you sure you want to deactivate Activation ${activationNumber}?\n\n` +
+    `This will free up an activation slot and automatically activate on this device.`
+  );
+
+  if (!confirmed) {
+    return;
+  }
+
+  const messageDiv = document.getElementById('license-message');
+
+  try {
+    // Disable all deactivate buttons
+    const buttons = document.querySelectorAll('.deactivate-btn-inline');
+    buttons.forEach(btn => btn.disabled = true);
+
+    messageDiv.textContent = 'Deactivating...';
+    messageDiv.style.color = '#2196F3';
+
+    // Deactivate the instance
+    const result = await licenseClient.deactivateInstance(licenseKey, instanceId);
+    console.log('[License] Deactivation result:', result);
+
+    if (result.deactivated) {
+      messageDiv.textContent = 'Deactivated! Activating on this device...';
+      messageDiv.style.color = '#4caf50';
+
+      // Hide inline activation manager
+      hideInlineActivationManager();
+
+      // Wait a moment, then retry activation
+      setTimeout(async () => {
+        // Set the license key in the input
+        document.getElementById('license-key-input').value = licenseKey;
+
+        // Retry activation automatically
+        await handleLicenseActivation();
+      }, 1000);
+
+    } else {
+      throw new Error(result.error || 'Deactivation failed');
+    }
+
+  } catch (error) {
+    console.error('[License] Deactivation error:', error);
+    messageDiv.textContent = `Deactivation failed: ${error.message}`;
+    messageDiv.style.color = '#f44336';
+
+    // Re-enable buttons
+    const buttons = document.querySelectorAll('.deactivate-btn-inline:not([disabled])');
+    buttons.forEach(btn => btn.disabled = false);
+  }
+}
+
 // License activation handler
 async function handleLicenseActivation() {
   const licenseKey = document.getElementById('license-key-input').value.trim();
@@ -1033,43 +1220,12 @@ async function handleLicenseActivation() {
 
     if (result.error === 'ACTIVATION_LIMIT_REACHED' ||
         (result.error && result.error.toLowerCase().includes('activation limit'))) {
-      console.log('[License] Activation limit reached, opening activation manager');
-      messageDiv.textContent = 'Opening activation manager...';
+      console.log('[License] Activation limit reached, showing inline activation manager');
+      messageDiv.textContent = 'Please deactivate an existing activation to continue';
       messageDiv.style.color = '#ff9800';
 
-      // Store the license key temporarily so activation manager can access it
-      await chrome.storage.local.set({
-        'ls_license_key': licenseKey.trim(),
-        'activation_manager_open': true
-      });
-
-      // Open activation manager in a new window
-      const width = 500;
-      const height = 600;
-      const left = Math.round((screen.width - width) / 2);
-      const top = Math.round((screen.height - height) / 2);
-
-      const activationManagerUrl = chrome.runtime.getURL('activation-manager.html');
-      console.log('[License] Opening activation manager at URL:', activationManagerUrl);
-
-      chrome.windows.create({
-        url: activationManagerUrl,
-        type: 'popup',
-        width: width,
-        height: height,
-        left: left,
-        top: top
-      }, (window) => {
-        if (chrome.runtime.lastError) {
-          console.error('[License] Failed to open activation manager:', chrome.runtime.lastError);
-          messageDiv.textContent = 'Error: Could not open activation manager. See console.';
-          messageDiv.style.color = '#f44336';
-        } else {
-          console.log('[License] Activation manager window created:', window);
-          messageDiv.textContent = 'Please deactivate an existing activation to continue';
-          messageDiv.style.color = '#ff9800';
-        }
-      });
+      // Show inline activation manager
+      await showInlineActivationManager(licenseKey.trim());
     } else {
       messageDiv.textContent = result.error || 'Invalid license key';
       messageDiv.style.color = '#f44336';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamicu/chromedebug-mcp",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "ChromeDebug MCP - MCP server that provides full control over a Chrome browser instance for debugging and automation with AI assistants like Claude Code",
   "main": "src/index.js",
   "type": "module",

package/scripts/package-webstore-extension.js

@@ -49,6 +49,7 @@ const filesToInclude = [
   'chrome-session-manager.js',
   'logger.js',
   'extension-config.js',
+  'disable-react-devtools.js',
   'upload-manager.js',
   'firebase-client.js',
   { source: 'firebase-config.public.js', target: 'firebase-config.public.js' },

package/scripts/webpack.config.free.cjs

@@ -50,6 +50,7 @@ module.exports = {
         { from: 'chrome-extension/web-vitals.iife.js', to: 'web-vitals.iife.js' },
 
         // Copy supporting modules (these are imported by bundled scripts)
+        { from: 'chrome-extension/disable-react-devtools.js', to: 'disable-react-devtools.js' },
         { from: 'chrome-extension/pii-redactor.js', to: 'pii-redactor.js' },
         { from: 'chrome-extension/data-buffer.js', to: 'data-buffer.js' },
         { from: 'chrome-extension/performance-monitor.js', to: 'performance-monitor.js' },

package/scripts/webpack.config.pro.cjs

@@ -52,6 +52,7 @@ module.exports = {
         { from: 'chrome-extension/web-vitals.iife.js', to: 'web-vitals.iife.js' },
 
         // Copy supporting modules (these are imported by bundled scripts)
+        { from: 'chrome-extension/disable-react-devtools.js', to: 'disable-react-devtools.js' },
         { from: 'chrome-extension/pii-redactor.js', to: 'pii-redactor.js' },
         { from: 'chrome-extension/data-buffer.js', to: 'data-buffer.js' },
         { from: 'chrome-extension/performance-monitor.js', to: 'performance-monitor.js' },

package/src/index.js

@@ -260,5 +260,26 @@ For more information, see the documentation in CLAUDE.md
 }
 
 // Export for library usage and testing
-// This file is now safe to import without side effects
-export { ChromePilotApp };
+export { ChromePilotApp };
+
+// Auto-start when run directly (not imported as a module)
+if (import.meta.url === `file://${process.argv[1]}`) {
+  const app = new ChromePilotApp();
+
+  // Handle graceful shutdown
+  process.on('SIGINT', async () => {
+    await app.shutdown();
+    process.exit(0);
+  });
+
+  process.on('SIGTERM', async () => {
+    await app.shutdown();
+    process.exit(0);
+  });
+
+  // Start the application
+  app.start().catch(error => {
+    logger.error('Failed to start ChromeDebug:', error);
+    process.exit(1);
+  });
+}

package/src/logger.js

@@ -77,15 +77,22 @@ export function logHttpRequest(logger, req, options = {}) {
 /**
  * Intercept stdout to prevent MCP JSON-RPC pollution
  * Call this at application startup for MCP servers
+ * Allows MCP JSON-RPC messages through while redirecting other output
  */
 export function interceptStdout() {
   const originalWrite = process.stdout.write;
 
   process.stdout.write = function(chunk, encoding, callback) {
-    // Redirect all stdout to stderr with a warning prefix
     const message = chunk.toString();
-    const redirectedMessage = `[STDOUT-REDIRECT] ${message}`;
 
+    // Allow MCP JSON-RPC messages through (they start with { and contain "jsonrpc")
+    if (message.trim().startsWith('{') && message.includes('"jsonrpc"')) {
+      // This is an MCP message - let it through to stdout unchanged
+      return originalWrite.call(process.stdout, chunk, encoding, callback);
+    }
+
+    // Redirect all other stdout to stderr with a warning prefix
+    const redirectedMessage = `[STDOUT-REDIRECT] ${message}`;
     return process.stderr.write(redirectedMessage, encoding, callback);
   };