@dynamicu/chromedebug-mcp 2.2.2 → 2.3.1

package/chrome-extension/README.md

@@ -0,0 +1,41 @@
+# Chrome Debug Assistant Extension
+
+This Chrome extension enables visual element selection for the Chrome Debug MCP server.
+
+## Installation
+
+1. Open Chrome and navigate to `chrome://extensions/`
+2. Enable "Developer mode" (toggle in the top right)
+3. Click "Load unpacked"
+4. Select the `chrome-extension` directory
+
+## Usage
+
+1. Ensure the Chrome Debug MCP server is running (`npm start`)
+2. Navigate to any webpage
+3. Click on any element to select it
+4. The element will be:
+   - Highlighted with a pink outline
+   - Sent to Chrome Debug server
+   - Available for modification via Claude MCP tools
+
+## How it Works
+
+1. Click any element on the page
+2. The extension sends the element's selector to Chrome Debug
+3. Use Claude in your terminal to modify the selected element:
+   ```
+   "Show me what element is currently selected"
+   "Make the selected element blue"
+   "Apply CSS: padding: 20px !important; border-radius: 8px !important"
+   "Execute JavaScript to get the element's text content"
+   "Clear the selected element"
+   ```
+
+## Features
+
+- Visual element selection with hover highlighting
+- Automatic server detection (scans ports 3000-3025)
+- Pink outline shows currently selected element
+- Server connection status indicator
+- One-click element selection

package/chrome-extension/background.js

@@ -1537,7 +1537,7 @@ async function createUserNotification(priority, message) {
 
     const notificationOptions = {
       type: 'basic',
-      iconUrl: 'icons/icon48.png',
+      iconUrl: chrome.runtime.getURL('icon48.png'),
       title: 'Chrome Debug Error',
       message: message,
       priority: priority === 'CRITICAL' ? 2 : 1,
@@ -2428,7 +2428,7 @@ async function startRecording(tabId, settings = {}) {
       // Show notification to user
       chrome.notifications.create({
         type: 'basic',
-        iconUrl: 'icon.png',
+        iconUrl: chrome.runtime.getURL('icon48.png'),
         title: 'Recording Limit Reached',
         message: licenseCheck.message || 'Upgrade to Pro for unlimited recordings.',
         priority: 2
@@ -2938,7 +2938,7 @@ async function startWorkflowRecording(tabId, includeLogsInExport, sessionName =
       // Show notification to user (same pattern as screen recording)
       chrome.notifications.create({
         type: 'basic',
-        iconUrl: 'icon128.png',
+        iconUrl: chrome.runtime.getURL('icon128.png'),
         title: 'Recording Limit Reached',
         message: licenseCheck.message || 'Daily limit reached. Upgrade to Pro for unlimited workflow recordings.',
         buttons: [{ title: 'Upgrade to Pro' }],
@@ -3749,7 +3749,7 @@ async function handleFrameCaptureComplete(sessionData) {
         // Show user notification about log association failure
         chrome.notifications.create({
           type: 'basic',
-          iconUrl: 'icon.png',
+          iconUrl: chrome.runtime.getURL('icon48.png'),
           title: 'Chrome Debug - Log Association Failed',
           message: `${errorDetails} Recording saved but logs may be missing. Check console for details.`,
           priority: 1
@@ -3766,7 +3766,7 @@ async function handleFrameCaptureComplete(sessionData) {
       // Show user notification about no logs captured
       chrome.notifications.create({
         type: 'basic',
-        iconUrl: 'icon.png',
+        iconUrl: chrome.runtime.getURL('icon48.png'),
         title: 'Chrome Debug - No Console Logs Captured',
         message: 'Recording completed but no console logs were captured. This may be expected if the page had no console activity.',
         priority: 0

package/chrome-extension/manifest.free.json

@@ -0,0 +1,72 @@
+{
+  "manifest_version": 3,
+  "name": "ChromeDebug MCP Assistant FREE v2.1.1",
+  "version": "2.1.1",
+  "description": "ChromeDebug MCP visual element selector [FREE Edition] [Build: 2025-01-20-v2.1.1]",
+  "permissions": [
+    "activeTab",
+    "scripting",
+    "tabs",
+    "storage",
+    "tabCapture",
+    "desktopCapture",
+    "notifications",
+    "offscreen"
+  ],
+  "host_permissions": [
+    "https://*.cloudfunctions.net/*"
+  ],
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icon16.png",
+      "48": "icon48.png",
+      "128": "icon128.png"
+    }
+  },
+  "options_page": "options.html",
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "exclude_matches": [
+        "*://youtube.com/*",
+        "*://www.youtube.com/*",
+        "*://m.youtube.com/*",
+        "*://google.com/*",
+        "*://www.google.com/*",
+        "*://gmail.com/*",
+        "*://www.gmail.com/*",
+        "*://facebook.com/*",
+        "*://www.facebook.com/*",
+        "*://twitter.com/*",
+        "*://www.twitter.com/*",
+        "*://x.com/*",
+        "*://www.x.com/*",
+        "*://instagram.com/*",
+        "*://www.instagram.com/*"
+      ],
+      "js": [
+        "pako.min.js",
+        "web-vitals.iife.js",
+        "pii-redactor.js",
+        "data-buffer.js",
+        "performance-monitor.js",
+        "dom-tracker.js",
+        "network-tracker.js",
+        "content.js"
+      ],
+      "css": ["content.css"],
+      "run_at": "document_idle"
+    }
+  ],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "icons": {
+    "16": "icon16.png",
+    "48": "icon48.png",
+    "128": "icon128.png"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamicu/chromedebug-mcp",
-  "version": "2.2.2",
+  "version": "2.3.1",
   "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",
@@ -34,7 +34,9 @@
     "config": "node scripts/config-manager.js",
     "config-show": "node scripts/config-manager.js show",
     "config-ports": "node scripts/config-manager.js list-ports",
-    "postinstall": "npm run update-extension-config",
+    "postinstall": "npm run update-extension-config && node scripts/postinstall.js",
+    "package-extension": "node scripts/package-extension.js",
+    "prepublishOnly": "npm run package-extension",
     "test": "NODE_OPTIONS='--experimental-vm-modules' jest",
     "test:watch": "NODE_OPTIONS='--experimental-vm-modules' jest --watch",
     "test:coverage": "NODE_OPTIONS='--experimental-vm-modules' jest --coverage",
@@ -86,9 +88,13 @@
     "chrome-extension/*.html",
     "chrome-extension/*.png",
     "chrome-extension/manifest.json",
+    "chrome-extension/manifest.free.json",
     "chrome-extension/README.md",
     "config/",
-    "scripts/",
+    "scripts/*.js",
+    "scripts/*.cjs",
+    "!scripts/dist",
+    "dist/chromedebug-extension-free.zip",
     "README.md",
     "LICENSE",
     "CLAUDE.md"
@@ -114,6 +120,7 @@
   },
   "devDependencies": {
     "@jest/globals": "^30.0.5",
+    "archiver": "^7.0.1",
     "copy-webpack-plugin": "^13.0.1",
     "jest": "^30.0.5",
     "jsdom": "^27.0.0",

package/scripts/package-extension.js

@@ -0,0 +1,73 @@
+#!/usr/bin/env node
+
+/**
+ * Package FREE Chrome extension for distribution
+ * Builds the free version and creates a .zip file
+ */
+
+import { createWriteStream, promises as fs } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
+import archiver from 'archiver';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const rootDir = join(__dirname, '..');
+const freeExtensionDir = join(rootDir, 'dist', 'free');
+const outputDir = join(rootDir, 'dist');
+const outputFile = join(outputDir, 'chromedebug-extension-free.zip');
+
+async function packageExtension() {
+  console.log('📦 Building and packaging FREE Chrome extension...');
+
+  // Step 1: Build the free version
+  console.log('🔨 Building free version...');
+  try {
+    execSync('npm run build:free', {
+      cwd: rootDir,
+      stdio: 'inherit'
+    });
+  } catch (error) {
+    console.error('❌ Failed to build free version');
+    throw error;
+  }
+
+  // Step 2: Verify the build output exists
+  try {
+    await fs.access(freeExtensionDir);
+  } catch {
+    throw new Error(`Build output not found at ${freeExtensionDir}`);
+  }
+
+  // Step 3: Create zip file
+  console.log('📦 Creating zip package...');
+
+  const output = createWriteStream(outputFile);
+  const archive = archiver('zip', { zlib: { level: 9 } });
+
+  return new Promise((resolve, reject) => {
+    output.on('close', () => {
+      const sizeKB = (archive.pointer() / 1024).toFixed(2);
+      console.log(`✅ FREE extension packaged successfully!`);
+      console.log(`   Size: ${sizeKB} KB`);
+      console.log(`   Location: ${outputFile}`);
+      console.log(`   📌 This is the FREE version (5 recordings/day limit)`);
+      resolve();
+    });
+
+    archive.on('error', reject);
+
+    archive.pipe(output);
+
+    // Add all files from the free build directory
+    archive.directory(freeExtensionDir, false);
+
+    archive.finalize();
+  });
+}
+
+packageExtension().catch(err => {
+  console.error('❌ Failed to package extension:', err);
+  process.exit(1);
+});

package/scripts/postinstall.js

@@ -0,0 +1,51 @@
+#!/usr/bin/env node
+
+/**
+ * Post-install script to help users find the Chrome extension
+ */
+
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { existsSync } from 'fs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const packageRoot = join(__dirname, '..');
+const zipPath = join(packageRoot, 'dist', 'chromedebug-extension-free.zip');
+const extensionPath = join(packageRoot, 'chrome-extension');
+
+console.log('\n✅ ChromeDebug MCP installed successfully!\n');
+
+console.log('🚀 How ChromeDebug Works:');
+console.log('   When Claude Code starts chromedebug-mcp, it automatically runs:');
+console.log('   • MCP Server (for Claude Code communication)');
+console.log('   • HTTP Server on port 3000-4000 (for Chrome extension)\n');
+
+console.log('🆓 FREE Chrome Extension (5 recordings/day):');
+if (existsSync(zipPath)) {
+  console.log(`   Location: ${zipPath}`);
+  console.log('   Extract the zip file and load in Chrome\n');
+} else {
+  console.log(`   Source: ${extensionPath}`);
+  console.log('   Load directly from this path\n');
+}
+
+console.log('🔧 Installation steps:');
+console.log('   1. Open Chrome and go to chrome://extensions/');
+console.log('   2. Enable "Developer mode" (toggle in top right)');
+console.log('   3. Click "Load unpacked"');
+if (existsSync(zipPath)) {
+  console.log('   4. Extract the zip file above');
+  console.log('   5. Select the extracted folder');
+} else {
+  console.log('   4. Navigate to and select the path above');
+}
+console.log('   6. The extension will auto-detect the HTTP server port\n');
+
+console.log('ℹ️  No manual server startup needed!');
+console.log('   Claude Code automatically starts both servers when it runs chromedebug-mcp\n');
+
+console.log('💎 Want unlimited recordings?');
+console.log('   Upgrade to Pro: https://chromedebug.com/buy/996773cb-682b-430f-b9e3-9ce2130bd967\n');
+
+console.log('📚 Full documentation: https://github.com/dynamicupgrade/ChromeDebug#readme\n');