chrome-cdp-cli 1.3.0 → 1.6.0

package/README.md

@@ -49,7 +49,7 @@ A command-line tool designed specifically for Large Language Models (LLMs) and A
 - 📸 **Visual Capture**: Take screenshots and capture complete DOM snapshots with layout information
 - 📊 **Console Monitoring**: Real-time console message capture with filtering and storage
 - 🌐 **Network Monitoring**: Real-time network request/response monitoring with comprehensive filtering
-- 🖱️ **Element Interaction**: Native click, hover, and form filling commands with CSS selector support
+- 🖱️ **Element Interaction**: Complete native interaction commands (click, hover, fill, drag, press_key, upload_file, wait_for, handle_dialog)
 - 🔧 **CLI Interface**: Full command-line interface with argument parsing and routing
 - 🛠️ **IDE Integration**: Install Cursor commands and Claude skills with directory validation and --force option
 - 📦 **Build System**: Complete TypeScript build pipeline with testing framework
@@ -101,7 +101,7 @@ This tool is designed for LLM-assisted development. The IDE integrations (`insta
 - ⚡ **JavaScript Execution**: Execute JavaScript code in browser context with full async support
 - 📸 **Visual Capture**: Take screenshots and capture HTML content
 - 📊 **Monitoring**: Monitor console messages and network requests in real-time
-- 🖱️ **Element Interaction**: Native click, hover, and form filling commands with CSS selector support
+- 🖱️ **Element Interaction**: Complete native interaction commands (click, hover, fill, drag, press_key, upload_file, wait_for, handle_dialog)
 - 📝 **Form Automation**: Single field and batch form filling with comprehensive options
 - 🔧 **Flexible Output**: Support for JSON and human-readable text output formats
 - 🚧 **Eval Workarounds**: Many advanced features available through JavaScript execution
@@ -390,6 +390,18 @@ chrome-cdp-cli list_console_messages
 chrome-cdp-cli list_console_messages --filter '{"types":["error","warn"]}'
 ```
 
+**Note**: Console monitoring only captures messages generated *after* monitoring starts. For historical messages or immediate console operations, use the eval-first approach:
+
+```bash
+# Generate and capture console messages in one command
+chrome-cdp-cli eval "console.log('Test message'); console.warn('Warning'); 'Messages logged'"
+
+# Check for existing console history (if page maintains it)
+chrome-cdp-cli eval "window.consoleHistory || window._console_logs || 'No custom console history'"
+```
+
+See [Console Monitoring Documentation](docs/CONSOLE_MONITORING.md) for detailed solutions and workarounds.
+
 #### Network Monitoring
 ```bash
 # Get latest network request
@@ -586,7 +598,6 @@ chrome-cdp-cli eval "document.cookie"
 These features require dedicated handlers and are not yet available:
 
 - Native page management commands (new_page, close_page, list_pages, select_page)
-- Native element interaction commands (click, hover, fill, drag)
 - Native performance profiling commands
 - Native device emulation commands
 - Advanced output formatting options
@@ -669,20 +680,15 @@ new Promise(resolve => {
    - `new_page`, `close_page`, `list_pages`, `select_page`
    - Direct CDP Target domain integration
 
-2. **Native Element Interaction** ✅ **COMPLETED**
-   - `click`, `hover`, `fill`, `fill_form` commands
-   - CSS selector-based element targeting
-   - Comprehensive form filling with batch operations
-
-3. **Performance Analysis**
+2. **Performance Analysis**
    - `performance_start_trace`, `performance_stop_trace`
    - Built-in performance metrics and analysis
 
-4. **Device Emulation**
+3. **Device Emulation**
    - `emulate` command for device simulation
    - Network condition simulation
 
-5. **Advanced Output Formatting**
+4. **Advanced Output Formatting**
    - Enhanced JSON/text formatting
    - Quiet and verbose modes
    - Custom output templates

package/dist/cli/CLIApplication.js

@@ -6,11 +6,13 @@ const ConnectionManager_1 = require("../connection/ConnectionManager");
 const handlers_1 = require("../handlers");
 const logger_1 = require("../utils/logger");
 const CommandRouter_1 = require("./CommandRouter");
+const ProxyManager_1 = require("../proxy/ProxyManager");
 class CLIApplication {
     constructor() {
         this.cli = new CLIInterface_1.CLIInterface();
         this.connectionManager = new ConnectionManager_1.ConnectionManager();
         this.logger = new logger_1.Logger();
+        this.proxyManager = ProxyManager_1.ProxyManager.getInstance();
         this.setupHandlers();
     }
     setupHandlers() {
@@ -36,6 +38,10 @@ class CLIApplication {
     async run(argv) {
         try {
             const command = this.cli.parseArgs(argv);
+            if (command.config.verbose) {
+                this.proxyManager.setLogging(true);
+            }
+            await this.ensureProxyReady();
             if (this.needsConnection(command.name)) {
                 await this.ensureConnection(command);
             }
@@ -49,6 +55,15 @@ class CLIApplication {
             return CommandRouter_1.ExitCode.GENERAL_ERROR;
         }
     }
+    async ensureProxyReady() {
+        try {
+            const isReady = await this.proxyManager.ensureProxyReady();
+            if (!isReady) {
+            }
+        }
+        catch (error) {
+        }
+    }
     needsConnection(commandName) {
         const noConnectionCommands = [
             'help',
@@ -104,6 +119,12 @@ class CLIApplication {
                 this.logger.error('Error during shutdown:', error);
             }
         }
+        try {
+            await this.proxyManager.shutdown();
+        }
+        catch (error) {
+            this.logger.error('Error shutting down proxy manager:', error);
+        }
     }
     getCLI() {
         return this.cli;

package/dist/cli/CLIInterface.js

@@ -39,6 +39,7 @@ const path = __importStar(require("path"));
 const CLIInterface_1 = require("../interfaces/CLIInterface");
 const CommandRegistry_1 = require("./CommandRegistry");
 const CommandRouter_1 = require("./CommandRouter");
+const packageJson = require('../../package.json');
 class CLIInterface {
     constructor() {
         this.program = new commander_1.Command();
@@ -50,7 +51,7 @@ class CLIInterface {
         this.program
             .name('chrome-cdp-cli')
             .description('Command-line tool for controlling Chrome browser via DevTools Protocol')
-            .version('1.0.0')
+            .version(packageJson.version)
             .allowUnknownOption(true)
             .allowExcessArguments(true);
         this.program
@@ -65,6 +66,10 @@ class CLIInterface {
     parseArgs(argv) {
         try {
             const args = argv.slice(2);
+            if (args.includes('--version') || args.includes('-V')) {
+                console.log(packageJson.version);
+                process.exit(0);
+            }
             const options = {};
             const commandArgs = [];
             let i = 0;
@@ -341,6 +346,65 @@ class CLIInterface {
         if (result.data === undefined || result.data === null) {
             return 'Success';
         }
+        let output = '';
+        let dataSourceInfo = '';
+        if (result.dataSource === 'proxy' && result.hasHistoricalData) {
+            dataSourceInfo = '📊 Data from proxy server (includes historical data)\n';
+        }
+        else if (result.dataSource === 'direct' && result.hasHistoricalData === false) {
+            dataSourceInfo = '⚠️  Data from direct connection (new messages only, no historical data)\n';
+        }
+        if (result.data && typeof result.data === 'object') {
+            const data = result.data;
+            if (data.messages && Array.isArray(data.messages)) {
+                output += dataSourceInfo;
+                if (data.messages.length === 0) {
+                    output += 'No console messages found.';
+                }
+                else {
+                    output += `Found ${data.messages.length} console message(s):\n\n`;
+                    data.messages.forEach((msg, index) => {
+                        const timestamp = new Date(msg.timestamp).toISOString();
+                        output += `[${index + 1}] ${timestamp} [${msg.type.toUpperCase()}] ${msg.text}\n`;
+                        if (msg.args && msg.args.length > 0) {
+                            output += `    Args: ${JSON.stringify(msg.args)}\n`;
+                        }
+                    });
+                }
+                return output.trim();
+            }
+            if (data.requests && Array.isArray(data.requests)) {
+                output += dataSourceInfo;
+                if (data.requests.length === 0) {
+                    output += 'No network requests found.';
+                }
+                else {
+                    output += `Found ${data.requests.length} network request(s):\n\n`;
+                    data.requests.forEach((req, index) => {
+                        const timestamp = new Date(req.timestamp).toISOString();
+                        const status = req.status ? ` [${req.status}]` : ' [pending]';
+                        output += `[${index + 1}] ${timestamp} ${req.method} ${req.url}${status}\n`;
+                    });
+                }
+                return output.trim();
+            }
+            if (data.type && data.text !== undefined && data.timestamp) {
+                output += dataSourceInfo;
+                const timestamp = new Date(data.timestamp).toISOString();
+                output += `${timestamp} [${data.type.toUpperCase()}] ${data.text}`;
+                if (data.args && data.args.length > 0) {
+                    output += `\nArgs: ${JSON.stringify(data.args)}`;
+                }
+                return output;
+            }
+            if (data.requestId && data.url && data.method) {
+                output += dataSourceInfo;
+                const timestamp = new Date(data.timestamp).toISOString();
+                const status = data.status ? ` [${data.status}]` : ' [pending]';
+                output += `${timestamp} ${data.method} ${data.url}${status}`;
+                return output;
+            }
+        }
         if (typeof result.data === 'string') {
             return result.data;
         }

package/dist/cli/CommandRouter.js

@@ -214,6 +214,7 @@ Global Options:
   -q, --quiet              Enable quiet mode
   -t, --timeout <ms>       Command timeout in milliseconds (default: 30000)
   -c, --config <path>      Configuration file path
+  -V, --version            Show version number
 
 Available Commands:
 ${commands.map(cmd => `  ${cmd.padEnd(20)} - ${this.getCommandDescription(cmd)}`).join('\n')}

package/dist/client/ProxyClient.js

@@ -0,0 +1,254 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProxyClient = void 0;
+const ws_1 = require("ws");
+const node_fetch_1 = __importDefault(require("node-fetch"));
+const ProxyManager_1 = require("../proxy/ProxyManager");
+class ProxyClient {
+    constructor(config) {
+        this.config = {
+            proxyUrl: 'http://localhost:9223',
+            fallbackToDirect: true,
+            startProxyIfNeeded: true,
+            ...config
+        };
+        this.proxyManager = ProxyManager_1.ProxyManager.getInstance();
+    }
+    async ensureProxyRunning() {
+        if (this.config.startProxyIfNeeded) {
+            return await this.proxyManager.ensureProxyReady();
+        }
+        return await this.isProxyRunning();
+    }
+    async isProxyAvailable() {
+        return await this.isProxyRunning();
+    }
+    async isProxyRunning() {
+        try {
+            const controller = new AbortController();
+            const timeout = setTimeout(() => controller.abort(), 2000);
+            const response = await (0, node_fetch_1.default)(`${this.config.proxyUrl}/api/health`, {
+                method: 'GET',
+                signal: controller.signal
+            });
+            clearTimeout(timeout);
+            return response.ok;
+        }
+        catch (error) {
+            return false;
+        }
+    }
+    async connect(host, port, targetId) {
+        const request = {
+            host,
+            port,
+            targetId
+        };
+        try {
+            const controller = new AbortController();
+            const timeout = setTimeout(() => controller.abort(), 30000);
+            const response = await (0, node_fetch_1.default)(`${this.config.proxyUrl}/api/connect`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(request),
+                signal: controller.signal
+            });
+            clearTimeout(timeout);
+            if (!response.ok) {
+                throw new Error(`Proxy connect failed: ${response.status} ${response.statusText}`);
+            }
+            const result = await response.json();
+            if (!result.success) {
+                throw new Error(`Proxy connect failed: ${result.error}`);
+            }
+            this.connectionId = result.data.connectionId;
+            return this.connectionId;
+        }
+        catch (error) {
+            throw new Error(`Failed to connect through proxy: ${error instanceof Error ? error.message : error}`);
+        }
+    }
+    async getConsoleMessages(filter) {
+        if (!this.connectionId) {
+            throw new Error('No active connection. Call connect() first.');
+        }
+        try {
+            const url = new URL(`${this.config.proxyUrl}/api/console/${this.connectionId}`);
+            if (filter) {
+                if (filter.types) {
+                    url.searchParams.set('types', filter.types.join(','));
+                }
+                if (filter.textPattern) {
+                    url.searchParams.set('textPattern', filter.textPattern);
+                }
+                if (filter.maxMessages) {
+                    url.searchParams.set('maxMessages', filter.maxMessages.toString());
+                }
+                if (filter.startTime) {
+                    url.searchParams.set('startTime', filter.startTime.toString());
+                }
+                if (filter.endTime) {
+                    url.searchParams.set('endTime', filter.endTime.toString());
+                }
+                if (filter.source) {
+                    url.searchParams.set('source', filter.source);
+                }
+            }
+            const controller = new AbortController();
+            const timeout = setTimeout(() => controller.abort(), 5000);
+            const response = await (0, node_fetch_1.default)(url.toString(), {
+                method: 'GET',
+                signal: controller.signal
+            });
+            clearTimeout(timeout);
+            if (!response.ok) {
+                throw new Error(`Failed to get console messages: ${response.status} ${response.statusText}`);
+            }
+            const result = await response.json();
+            if (!result.success) {
+                throw new Error(`Failed to get console messages: ${result.error}`);
+            }
+            return result.data?.messages || [];
+        }
+        catch (error) {
+            throw new Error(`Failed to get console messages: ${error instanceof Error ? error.message : error}`);
+        }
+    }
+    async getNetworkRequests(filter) {
+        if (!this.connectionId) {
+            throw new Error('No active connection. Call connect() first.');
+        }
+        try {
+            const url = new URL(`${this.config.proxyUrl}/api/network/${this.connectionId}`);
+            if (filter) {
+                if (filter.methods) {
+                    url.searchParams.set('methods', filter.methods.join(','));
+                }
+                if (filter.statusCodes) {
+                    url.searchParams.set('statusCodes', filter.statusCodes.join(','));
+                }
+                if (filter.urlPattern) {
+                    url.searchParams.set('urlPattern', filter.urlPattern);
+                }
+                if (filter.maxRequests) {
+                    url.searchParams.set('maxRequests', filter.maxRequests.toString());
+                }
+                if (filter.startTime) {
+                    url.searchParams.set('startTime', filter.startTime.toString());
+                }
+                if (filter.endTime) {
+                    url.searchParams.set('endTime', filter.endTime.toString());
+                }
+                if (filter.includeResponseBody !== undefined) {
+                    url.searchParams.set('includeResponseBody', filter.includeResponseBody.toString());
+                }
+            }
+            const controller = new AbortController();
+            const timeout = setTimeout(() => controller.abort(), 5000);
+            const response = await (0, node_fetch_1.default)(url.toString(), {
+                method: 'GET',
+                signal: controller.signal
+            });
+            clearTimeout(timeout);
+            if (!response.ok) {
+                throw new Error(`Failed to get network requests: ${response.status} ${response.statusText}`);
+            }
+            const result = await response.json();
+            if (!result.success) {
+                throw new Error(`Failed to get network requests: ${result.error}`);
+            }
+            return result.data?.requests || [];
+        }
+        catch (error) {
+            throw new Error(`Failed to get network requests: ${error instanceof Error ? error.message : error}`);
+        }
+    }
+    async createWebSocketProxy() {
+        if (!this.connectionId) {
+            throw new Error('No active connection. Call connect() first.');
+        }
+        try {
+            const wsUrl = this.config.proxyUrl.replace('http://', 'ws://').replace('https://', 'wss://');
+            const ws = new ws_1.WebSocket(`${wsUrl}/ws/${this.connectionId}`);
+            return new Promise((resolve, reject) => {
+                const timeout = setTimeout(() => {
+                    reject(new Error('WebSocket connection timeout'));
+                }, 10000);
+                ws.on('open', () => {
+                    clearTimeout(timeout);
+                    this.wsConnection = ws;
+                    resolve(ws);
+                });
+                ws.on('error', (error) => {
+                    clearTimeout(timeout);
+                    reject(error);
+                });
+            });
+        }
+        catch (error) {
+            throw new Error(`Failed to create WebSocket proxy: ${error instanceof Error ? error.message : error}`);
+        }
+    }
+    async healthCheck() {
+        if (!this.connectionId) {
+            return null;
+        }
+        try {
+            const controller = new AbortController();
+            const timeout = setTimeout(() => controller.abort(), 5000);
+            const response = await (0, node_fetch_1.default)(`${this.config.proxyUrl}/api/health/${this.connectionId}`, {
+                method: 'GET',
+                signal: controller.signal
+            });
+            clearTimeout(timeout);
+            if (!response.ok) {
+                throw new Error(`Health check failed: ${response.status} ${response.statusText}`);
+            }
+            const result = await response.json();
+            if (!result.success) {
+                throw new Error(`Health check failed: ${result.error}`);
+            }
+            return result.data || null;
+        }
+        catch (error) {
+            console.warn('Health check failed:', error instanceof Error ? error.message : error);
+            return null;
+        }
+    }
+    async disconnect() {
+        try {
+            if (this.wsConnection) {
+                this.wsConnection.close();
+                this.wsConnection = undefined;
+            }
+            if (this.connectionId) {
+                try {
+                    const controller = new AbortController();
+                    const timeout = setTimeout(() => controller.abort(), 5000);
+                    await (0, node_fetch_1.default)(`${this.config.proxyUrl}/api/connection/${this.connectionId}`, {
+                        method: 'DELETE',
+                        signal: controller.signal
+                    });
+                    clearTimeout(timeout);
+                }
+                catch (error) {
+                }
+                this.connectionId = undefined;
+            }
+        }
+        catch (error) {
+        }
+    }
+    getConnectionId() {
+        return this.connectionId;
+    }
+    getConfig() {
+        return { ...this.config };
+    }
+}
+exports.ProxyClient = ProxyClient;

package/dist/client/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./CDPClient"), exports);
+__exportStar(require("./ProxyClient"), exports);

package/dist/handlers/EvaluateScriptHandler.js

@@ -1,10 +1,17 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EvaluateScriptHandler = void 0;
+const ProxyClient_1 = require("../client/ProxyClient");
 const fs_1 = require("fs");
+const node_fetch_1 = __importDefault(require("node-fetch"));
 class EvaluateScriptHandler {
-    constructor() {
+    constructor(useProxy = true) {
         this.name = 'eval';
+        this.proxyClient = new ProxyClient_1.ProxyClient();
+        this.useProxy = useProxy;
     }
     async execute(client, args) {
         const scriptArgs = args;
@@ -20,6 +27,124 @@ class EvaluateScriptHandler {
                 error: 'Cannot specify both "expression" and "file" arguments'
             };
         }
+        try {
+            if (this.useProxy) {
+                const proxyAvailable = await this.proxyClient.isProxyAvailable();
+                if (proxyAvailable) {
+                    console.log('[INFO] Using proxy connection for script evaluation');
+                    return await this.executeWithProxy(scriptArgs);
+                }
+                else {
+                    console.warn('[WARN] Proxy not available, falling back to direct CDP connection');
+                }
+            }
+        }
+        catch (error) {
+            console.warn('[WARN] Proxy execution failed, falling back to direct CDP:', error instanceof Error ? error.message : error);
+        }
+        return await this.executeWithDirectCDP(client, scriptArgs);
+    }
+    async executeWithProxy(scriptArgs) {
+        try {
+            let expression;
+            if (scriptArgs.file) {
+                expression = await this.readScriptFile(scriptArgs.file);
+            }
+            else {
+                expression = scriptArgs.expression;
+            }
+            const response = await (0, node_fetch_1.default)('http://localhost:9223/api/connections');
+            if (!response.ok) {
+                throw new Error('Failed to get proxy connections');
+            }
+            const result = await response.json();
+            if (!result.success || !result.data.connections || result.data.connections.length === 0) {
+                throw new Error('No active proxy connections found');
+            }
+            const connection = result.data.connections.find((conn) => conn.isHealthy);
+            if (!connection) {
+                throw new Error('No healthy proxy connections found');
+            }
+            console.log(`[INFO] Using existing proxy connection: ${connection.id}`);
+            this.proxyClient.connectionId = connection.id;
+            const ws = await this.proxyClient.createWebSocketProxy();
+            try {
+                const result = await this.executeScriptThroughProxy(ws, expression, scriptArgs);
+                return {
+                    success: true,
+                    data: result
+                };
+            }
+            finally {
+                ws.close();
+            }
+        }
+        catch (error) {
+            return {
+                success: false,
+                error: error instanceof Error ? error.message : String(error)
+            };
+        }
+    }
+    async executeScriptThroughProxy(ws, expression, args) {
+        return new Promise((resolve, reject) => {
+            const commandId = Date.now();
+            const timeout = args.timeout || 30000;
+            const awaitPromise = args.awaitPromise ?? true;
+            const returnByValue = args.returnByValue ?? true;
+            const timeoutHandle = setTimeout(() => {
+                reject(new Error(`Script execution timeout after ${timeout}ms`));
+            }, timeout);
+            ws.on('message', (data) => {
+                try {
+                    const response = JSON.parse(data.toString());
+                    if (response.id === commandId) {
+                        clearTimeout(timeoutHandle);
+                        if (response.error) {
+                            reject(new Error(`CDP Error: ${response.error.message}`));
+                            return;
+                        }
+                        const result = response.result;
+                        if (result.exceptionDetails) {
+                            const error = new Error(result.result?.description || 'Script execution failed');
+                            error.exceptionDetails = result.exceptionDetails;
+                            reject(error);
+                            return;
+                        }
+                        let value = result.result?.value;
+                        if (result.result?.type === 'undefined') {
+                            value = undefined;
+                        }
+                        else if (result.result?.unserializableValue) {
+                            value = result.result.unserializableValue;
+                        }
+                        resolve(value);
+                    }
+                }
+                catch (error) {
+                    clearTimeout(timeoutHandle);
+                    reject(new Error(`Failed to parse CDP response: ${error instanceof Error ? error.message : error}`));
+                }
+            });
+            ws.on('error', (error) => {
+                clearTimeout(timeoutHandle);
+                reject(new Error(`WebSocket error: ${error.message}`));
+            });
+            const command = {
+                id: commandId,
+                method: 'Runtime.evaluate',
+                params: {
+                    expression: expression,
+                    awaitPromise: awaitPromise,
+                    returnByValue: returnByValue,
+                    userGesture: true,
+                    generatePreview: false
+                }
+            };
+            ws.send(JSON.stringify(command));
+        });
+    }
+    async executeWithDirectCDP(client, scriptArgs) {
         try {
             let expression;
             if (scriptArgs.file) {