@dynamicu/chromedebug-mcp 2.5.8 → 2.5.10

package/README.md

@@ -5,6 +5,14 @@
 
 ChromeDebug MCP is a Model Context Protocol (MCP) server that gives AI assistants like Claude Code full control over a Chrome browser instance. It provides comprehensive browser automation, debugging, and screen recording capabilities optimized for AI-assisted development.
 
+## 🎥 See It In Action
+
+Watch the demo video to see how ChromeDebug MCP works:
+
+[![ChromeDebug MCP Demo](https://img.youtube.com/vi/2Y9nIsvEjks/0.jpg)](https://youtu.be/2Y9nIsvEjks?si=x5XjN0ZPHYhjZAqd)
+
+**[▶️ Watch Demo Video](https://youtu.be/2Y9nIsvEjks?si=x5XjN0ZPHYhjZAqd)**
+
 ## Quick Start
 
 ### Installation from npm
@@ -19,6 +27,17 @@ npm install @dynamicu/chromedebug-mcp
 
 > **Want unlimited recordings and advanced features?** See [Installing PRO Version](#installing-pro-version) below for automated PRO installation.
 
+### Chrome Extension Installation
+
+Install the Chrome extension to enable visual element selection and recording features:
+
+🌐 **[Install from Chrome Web Store](https://chromewebstore.google.com/detail/chromedebug-mcp-assistant/lemgbmdnephoaniipapgeciebfeakffn)**
+
+- ✅ 5 recordings per day (FREE version)
+- ✅ Visual element selection
+- ✅ Full MCP integration
+- ✅ Automatic updates
+
 ### Development Installation
 
 ```bash
@@ -109,15 +128,49 @@ When you launch Chrome with `chromedebug-mcp`, you should see:
 
 ### As MCP Server
 
-#### macOS / Linux
+#### Quick Setup (Claude Code CLI)
 
+**macOS / Linux:**
 ```bash
 claude mcp add chromedebug -s user -- chromedebug-mcp
 ```
 
+**Windows (WSL2):**
+```bash
+claude mcp add chromedebug -s user -- wsl chromedebug-mcp
+```
+
 The MCP server will automatically start both the stdio MCP server and HTTP server for Chrome extension integration.
 
-#### Windows
+#### Manual Configuration (Any MCP Client)
+
+If you're not using Claude Code CLI or want to configure manually, add this to your MCP settings file:
+
+**Location:** `~/.claude/config.json` or your MCP client's configuration file
+
+```json
+{
+  "mcpServers": {
+    "chromedebug": {
+      "command": "chromedebug-mcp"
+    }
+  }
+}
+```
+
+**For WSL2 users:**
+```json
+{
+  "mcpServers": {
+    "chromedebug": {
+      "command": "wsl",
+      "args": ["chromedebug-mcp"]
+    }
+  }
+}
+```
+
+#### Windows Setup Details
 
 ⚠️ **Important: WSL2 Recommended for Windows Users**
 
@@ -260,7 +313,7 @@ Chrome Debug includes a Chrome extension that enables visual element selection f
 
 Install the FREE version directly from the Chrome Web Store:
 
-🌐 **[Install from Chrome Web Store](https://chromewebstore.google.com/detail/lemgbmdnephoaniipapgeciebfeakffn?utm_source=item-share-cb)**
+🌐 **[Install from Chrome Web Store](https://chromewebstore.google.com/detail/chromedebug-mcp-assistant/lemgbmdnephoaniipapgeciebfeakffn)**
 
 - ✅ 5 recordings per day
 - ✅ Full MCP integration

package/chrome-extension/firebase-client.js

@@ -1,4 +1,4 @@
-import { FUNCTIONS_URL } from './firebase-config.module.js';
+import { FUNCTIONS_URL } from './firebase-config.public.js';
 
 /**
  * Firebase License Client

package/chrome-extension/firebase-config.public-sw.js

@@ -0,0 +1,29 @@
+/**
+ * Firebase Cloud Functions configuration - PUBLIC VERSION
+ * For Service Worker (background.js) via importScripts
+ *
+ * SECURITY NOTE: This API key is intentionally public and restricted:
+ * - Restricted by HTTP referrers in Google Cloud Console
+ * - Protected by Firebase Security Rules server-side
+ * - Standard practice for all web/mobile Firebase apps
+ */
+
+// Firebase configuration (public, restricted API key)
+const FIREBASE_CONFIG = {
+  projectId: 'chrome-debug-mcp',
+  apiKey: 'AIzaSyDu4r5k7J4gb76CVN9evBNg3DV6KjworCE',
+  authDomain: 'chromedebug.com'
+};
+
+// Cloud Functions base URL
+const FUNCTIONS_URL = `https://us-central1-${FIREBASE_CONFIG.projectId}.cloudfunctions.net`;
+
+// LemonSqueezy checkout URL (Production)
+const LEMONSQUEEZY_CHECKOUT_URL = 'https://chromedebug.com/buy/996773cb-682b-430f-b9e3-9ce2130bd967';
+
+// Make available globally for service worker context
+if (typeof self !== 'undefined') {
+  self.FIREBASE_CONFIG = FIREBASE_CONFIG;
+  self.FUNCTIONS_URL = FUNCTIONS_URL;
+  self.LEMONSQUEEZY_CHECKOUT_URL = LEMONSQUEEZY_CHECKOUT_URL;
+}

package/chrome-extension/firebase-config.public.js

@@ -0,0 +1,30 @@
+/**
+ * Firebase Cloud Functions configuration - PUBLIC VERSION
+ * Safe for client-side use and Web Store distribution
+ *
+ * SECURITY NOTE: This API key is intentionally public and restricted:
+ * - Restricted by HTTP referrers in Google Cloud Console
+ * - Protected by Firebase Security Rules server-side
+ * - Standard practice for all web/mobile Firebase apps
+ *
+ * This file is committed to the repository and used for:
+ * - Web Store extension builds
+ * - Development environments
+ * - License validation via Firebase Cloud Functions
+ */
+
+// Firebase configuration (public, restricted API key)
+const FIREBASE_CONFIG = {
+  projectId: 'chrome-debug-mcp',
+  apiKey: 'AIzaSyDu4r5k7J4gb76CVN9evBNg3DV6KjworCE',
+  authDomain: 'chromedebug.com'
+};
+
+// Cloud Functions base URL
+const FUNCTIONS_URL = `https://us-central1-${FIREBASE_CONFIG.projectId}.cloudfunctions.net`;
+
+// LemonSqueezy checkout URL (Production)
+const LEMONSQUEEZY_CHECKOUT_URL = 'https://chromedebug.com/buy/996773cb-682b-430f-b9e3-9ce2130bd967';
+
+// Export for ES6 modules (popup.js, firebase-client.js)
+export { FIREBASE_CONFIG, FUNCTIONS_URL, LEMONSQUEEZY_CHECKOUT_URL };

package/chrome-extension/manifest.free.json

@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
-  "name": "ChromeDebug MCP Assistant FREE v2.4.1",
-  "version": "2.4.1",
-  "description": "ChromeDebug MCP visual element selector [FREE Edition] [Build: 2025-01-20-v2.4.1]",
+  "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]",
   "permissions": [
     "activeTab",
     "scripting",

package/chrome-extension/popup.js

@@ -2,14 +2,30 @@
 const EXTENSION_VERSION = '2.0.4-BUILD-20250119';
 console.log(`[popup.js] Loaded version: ${EXTENSION_VERSION}`);
 
-// Import Firebase license client
-import { FirebaseLicenseClient } from './firebase-client.js';
-import { LEMONSQUEEZY_CHECKOUT_URL } from './firebase-config.module.js';
-
-// Initialize license client
-const licenseClient = new FirebaseLicenseClient();
+// Import Firebase license client with graceful fallback
+let FirebaseLicenseClient = null;
+let LEMONSQUEEZY_CHECKOUT_URL = 'https://chromedebug.com/buy/996773cb-682b-430f-b9e3-9ce2130bd967';
+let licenseClient = null;
 let currentUserId = null;
 
+// Load Firebase asynchronously to avoid blocking module execution
+(async () => {
+  try {
+    const firebaseClientModule = await import('./firebase-client.js');
+    FirebaseLicenseClient = firebaseClientModule.FirebaseLicenseClient;
+
+    const firebaseConfigModule = await import('./firebase-config.public.js');
+    LEMONSQUEEZY_CHECKOUT_URL = firebaseConfigModule.LEMONSQUEEZY_CHECKOUT_URL;
+
+    // Initialize license client if Firebase loaded successfully
+    licenseClient = new FirebaseLicenseClient();
+    console.log('[popup.js] Firebase license client initialized');
+  } catch (error) {
+    console.warn('[popup.js] Firebase not available - license features disabled:', error);
+    // Extension will work without Firebase, just no license validation
+  }
+})();
+
 // Global variables for recording functionality
 let isRecording = false;
 let recordingTimer = null;
@@ -102,8 +118,24 @@ function stopWorkflowTimer() {
   }
 }
 
-// Import configuration - this will be available globally
-const CONFIG_PORTS = CHROMEDEBUG_CONFIG?.ports || [3001, 3000, 3002, 3028]; // Fallback to defaults
+// Smart tiered port discovery configuration
+const PORT_TIERS = {
+  // Try common ports first with short timeout (fast discovery)
+  common: [3000, 3001, 3002, 3028, 3033],
+  // Then try extended range if not found
+  extended: [3003, 3004, 3005, 3006, 3007, 3008, 3009, 3010,
+             3029, 3030, 3031, 3032, 3034, 3035, 3036],
+  // Finally try alternative common development ports
+  alternative: [8080, 8081, 8082, 8083, 8084, 8085,
+                9000, 9001, 9002, 9003, 9004, 9005]
+};
+
+// All ports in one array for compatibility (used by CONFIG_PORTS references)
+const CONFIG_PORTS = [
+  ...PORT_TIERS.common,
+  ...PORT_TIERS.extended,
+  ...PORT_TIERS.alternative
+];
 
 // Site management functions
 async function initializeSiteManagement() {
@@ -262,45 +294,122 @@ function testSiteAccess(hostname, mode, allowedSites, restrictedSites) {
 
 // Function definitions (outside DOMContentLoaded for proper scope)
 async function checkServerStatus() {
+  console.log('[popup.js] checkServerStatus() called');
   const statusEl = document.getElementById('serverStatus');
   const statusTextEl = document.getElementById('statusText');
-  
-  const ports = CONFIG_PORTS;
+
+  if (!statusEl || !statusTextEl) {
+    console.error('[popup.js] Status elements not found in DOM');
+    return { connected: false, connectedPort: null };
+  }
+
   let connected = false;
   let connectedPort = null;
-  
-  for (const port of ports) {
+
+  // Helper function to try a port with timeout
+  const tryPort = async (port, timeout = 1000) => {
     try {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), timeout);
+
       const response = await fetch(`http://localhost:${port}/chromedebug/status`, {
         method: 'GET',
-        mode: 'cors'
+        mode: 'cors',
+        signal: controller.signal
       });
-      
-      if (response.ok) {
+
+      clearTimeout(timeoutId);
+      console.log(`[popup.js] Port ${port} responded: ${response.ok}`);
+      return response.ok;
+    } catch (error) {
+      console.log(`[popup.js] Port ${port} failed:`, error.message);
+      return false;
+    }
+  };
+
+  // Check if we have a cached successful port from previous session
+  const cachedPort = await chrome.storage.local.get('lastSuccessfulPort');
+  if (cachedPort.lastSuccessfulPort) {
+    if (await tryPort(cachedPort.lastSuccessfulPort, 500)) {
+      connected = true;
+      connectedPort = cachedPort.lastSuccessfulPort;
+      console.log(`[popup.js] Connected to cached port ${connectedPort}`);
+    }
+  }
+
+  // If cached port didn't work, try tiered discovery
+  if (!connected) {
+    // Phase 1: Try common ports with short timeout (fast)
+    for (const port of PORT_TIERS.common) {
+      if (await tryPort(port, 500)) {
         connected = true;
         connectedPort = port;
+        console.log(`[popup.js] Connected to common port ${connectedPort}`);
         break;
       }
-    } catch (error) {
-      // Try next port
     }
   }
-  
+
+  // Phase 2: Try extended range with longer timeout
+  if (!connected) {
+    for (const port of PORT_TIERS.extended) {
+      if (await tryPort(port, 1000)) {
+        connected = true;
+        connectedPort = port;
+        console.log(`[popup.js] Connected to extended port ${connectedPort}`);
+        break;
+      }
+    }
+  }
+
+  // Phase 3: Try alternative ports as last resort
+  if (!connected) {
+    for (const port of PORT_TIERS.alternative) {
+      if (await tryPort(port, 1000)) {
+        connected = true;
+        connectedPort = port;
+        console.log(`[popup.js] Connected to alternative port ${connectedPort}`);
+        break;
+      }
+    }
+  }
+
+  // Cache the successful port for faster connection next time
+  if (connected && connectedPort) {
+    await chrome.storage.local.set({ lastSuccessfulPort: connectedPort });
+  }
+
   if (connected) {
     statusEl.className = 'server-status connected';
-    statusTextEl.innerHTML = `Server connected (port ${connectedPort})`;
+    statusTextEl.innerHTML = `
+      Server connected (port ${connectedPort})
+      <div style="margin-top: 4px;">
+        <a href="https://www.npmjs.com/package/@dynamicu/chromedebug-mcp" target="_blank" style="font-size: 10px; color: #666; text-decoration: none;">
+          📚 Documentation
+        </a>
+      </div>
+    `;
   } else {
     statusEl.className = 'server-status disconnected';
 
     // Enhanced disconnected state with install instructions
     statusTextEl.innerHTML = `
-      <span style="display: block; margin-bottom: 8px;">Server not installed</span>
+      <div style="font-weight: bold; margin-bottom: 8px;">Server Not Running</div>
+      <div style="font-size: 11px; color: #666; margin-bottom: 8px; line-height: 1.4;">
+        To use ChromeDebug, install and start the MCP server:
+      </div>
+      <div style="background: #f5f5f5; padding: 8px; border-radius: 4px; font-family: monospace; font-size: 10px; margin-bottom: 8px;">
+        <div style="margin-bottom: 4px;"># Install the server</div>
+        <div style="color: #1976d2; margin-bottom: 8px;">npm install -g @dynamicu/chromedebug-mcp</div>
+        <div style="margin-bottom: 4px;"># Start the server</div>
+        <div style="color: #1976d2;">chromedebug-mcp-server</div>
+      </div>
       <div style="display: flex; gap: 5px; align-items: center;">
-        <button id="copyInstallCmd" style="padding: 4px 8px; font-size: 11px; background: #2196F3; color: white; border: none; border-radius: 3px; cursor: pointer; flex-shrink: 0;">
-          📋 Copy Install Command
+        <button id="copyInstallCmd" style="padding: 4px 8px; font-size: 11px; background: #2196F3; color: white; border: none; border-radius: 3px; cursor: pointer;">
+          📋 Copy Commands
         </button>
-        <a href="https://www.npmjs.com/package/@dynamicu/chromedebug-mcp" target="_blank" style="font-size: 11px; white-space: nowrap;">
-          View Installation Guide
+        <a href="https://www.npmjs.com/package/@dynamicu/chromedebug-mcp" target="_blank" style="font-size: 11px; color: #2196F3; text-decoration: none;">
+          📚 Full Documentation
         </a>
       </div>
     `;
@@ -311,10 +420,14 @@ async function checkServerStatus() {
       if (copyBtn) {
         copyBtn.addEventListener('click', async (e) => {
           e.preventDefault();
-          const installCommand = 'npm install -g @dynamicu/chromedebug-mcp';
+          const installCommands = `# Install the server
+npm install -g @dynamicu/chromedebug-mcp
+
+# Start the server
+chromedebug-mcp-server`;
 
           try {
-            await navigator.clipboard.writeText(installCommand);
+            await navigator.clipboard.writeText(installCommands);
             const originalText = copyBtn.innerHTML;
             copyBtn.innerHTML = '✅ Copied!';
             copyBtn.style.background = '#4CAF50';
@@ -327,7 +440,7 @@ async function checkServerStatus() {
             console.error('Failed to copy:', err);
             copyBtn.innerHTML = '❌ Failed';
             setTimeout(() => {
-              copyBtn.innerHTML = '📋 Copy Install Command';
+              copyBtn.innerHTML = '📋 Copy Commands';
             }, 2000);
           }
         });
@@ -829,6 +942,25 @@ async function initializeLicenseUI() {
     console.log('[License] Created new user ID:', currentUserId);
   }
 
+  // Check for license activation file and pre-fill license key
+  try {
+    const activationFileUrl = chrome.runtime.getURL('license-activation.json');
+    const response = await fetch(activationFileUrl);
+    if (response.ok) {
+      const activationData = await response.json();
+      if (activationData.license_key) {
+        const licenseKeyInput = document.getElementById('license-key-input');
+        if (licenseKeyInput) {
+          licenseKeyInput.value = activationData.license_key;
+          console.log('[License UI] Pre-filled license key from activation file');
+        }
+      }
+    }
+  } catch (error) {
+    // Activation file doesn't exist or is inaccessible - this is normal for FREE version
+    console.log('[License UI] No activation file found - normal for FREE version');
+  }
+
   // Check license status
   const licenseStatus = await licenseClient.getCachedLicenseStatus();
   console.log('[License] License status:', licenseStatus);
@@ -878,6 +1010,11 @@ async function handleLicenseActivation() {
   messageDiv.style.color = '#2196F3';
   console.log('[License] Validating license key...');
 
+  // Clear any existing instance ID to force fresh activation
+  // This ensures we don't try to validate with stale/deleted instance IDs
+  await chrome.storage.local.remove(['ls_instance_id']);
+  console.log('[License] Cleared existing instance ID for fresh activation');
+
   const result = await licenseClient.validateLicense(licenseKey);
   console.log('[License] Validation result:', result);
   console.log('[License] Error value:', result.error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamicu/chromedebug-mcp",
-  "version": "2.5.8",
+  "version": "2.5.10",
   "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,8 +49,10 @@ const filesToInclude = [
   'chrome-session-manager.js',
   'logger.js',
   'extension-config.js',
+  'upload-manager.js',
   'firebase-client.js',
-  'firebase-config.js',
+  { source: 'firebase-config.public.js', target: 'firebase-config.public.js' },
+  { source: 'firebase-config.public-sw.js', target: 'firebase-config.js' }, // For service worker importScripts
   'license-helper.js',
 
   // Content scripts (from manifest)
@@ -78,7 +80,6 @@ const filesToInclude = [
 
   // Offscreen
   'offscreen.html',
-  'offscreen.js',
 
   // Frame capture
   'frame-capture.js',