chrome-cdp-cli 2.0.2 → 2.0.3

package/dist/cli/CommandSchemaRegistry.js

@@ -459,6 +459,17 @@ class CommandSchemaRegistry {
                     description: 'Include text index information',
                     type: 'boolean',
                     default: false
+                },
+                {
+                    name: 'color',
+                    description: 'Enable color output (default: auto-detect)',
+                    type: 'boolean'
+                },
+                {
+                    name: 'no-color',
+                    description: 'Disable color output',
+                    type: 'boolean',
+                    default: false
                 }
             ],
             arguments: []

package/dist/client/CDPClient.js

@@ -141,7 +141,8 @@ class CDPClient {
         }
     }
     async discoverTargets(host, port) {
-        const response = await (0, node_fetch_1.default)(`http://${host}:${port}/json/list`);
+        const normalizedHost = host === 'localhost' ? '127.0.0.1' : host;
+        const response = await (0, node_fetch_1.default)(`http://${normalizedHost}:${port}/json/list`);
         if (!response.ok) {
             throw new Error(`Failed to discover targets: ${response.statusText}`);
         }

package/dist/connection/ConnectionManager.js

@@ -44,7 +44,8 @@ class ConnectionManager {
         this.logger = logger || new logger_1.Logger();
     }
     async discoverTargets(host, port) {
-        const url = `http://${host}:${port}/json/list`;
+        const normalizedHost = host === 'localhost' ? '127.0.0.1' : host;
+        const url = `http://${normalizedHost}:${port}/json/list`;
         try {
             this.logger.debug(`Discovering targets at ${url}`);
             const http = await Promise.resolve().then(() => __importStar(require('http')));

package/dist/handlers/TakeSnapshotHandler.js

@@ -6,9 +6,93 @@ const path_1 = require("path");
 class TakeSnapshotHandler {
     constructor() {
         this.name = 'snapshot';
+        this.colors = {
+            reset: '\x1b[0m',
+            bright: '\x1b[1m',
+            dim: '\x1b[2m',
+            red: '\x1b[31m',
+            green: '\x1b[32m',
+            yellow: '\x1b[33m',
+            blue: '\x1b[34m',
+            magenta: '\x1b[35m',
+            cyan: '\x1b[36m',
+            white: '\x1b[37m',
+            gray: '\x1b[90m',
+        };
+    }
+    shouldUseColors(args) {
+        if (args.color === false) {
+            return false;
+        }
+        if (args.color === true) {
+            return true;
+        }
+        if (process.env.NO_COLOR) {
+            return false;
+        }
+        if (process.env.FORCE_COLOR === '0') {
+            return false;
+        }
+        if (process.env.FORCE_COLOR === '1' || process.env.FORCE_COLOR === 'true') {
+            return true;
+        }
+        if (args.filename) {
+            return false;
+        }
+        return process.stdout.isTTY === true;
+    }
+    colorize(text, color, useColors) {
+        if (!useColors)
+            return text;
+        return `${color}${text}${this.colors.reset}`;
+    }
+    colorTag(tagName, useColors) {
+        if (['button', 'a', 'input', 'textarea', 'select'].includes(tagName.toLowerCase())) {
+            return this.colorize(tagName.toUpperCase(), this.colors.green + this.colors.bright, useColors);
+        }
+        if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName.toLowerCase())) {
+            return this.colorize(tagName.toUpperCase(), this.colors.cyan + this.colors.bright, useColors);
+        }
+        if (tagName.toLowerCase() === 'img') {
+            return this.colorize(tagName.toUpperCase(), this.colors.magenta, useColors);
+        }
+        return this.colorize(tagName.toUpperCase(), this.colors.cyan, useColors);
+    }
+    colorId(id, useColors) {
+        return this.colorize(`#${id}`, this.colors.green, useColors);
+    }
+    colorClass(className, useColors) {
+        return this.colorize(`.${className}`, this.colors.yellow, useColors);
+    }
+    colorAttribute(name, value, useColors) {
+        if (name === 'type') {
+            return this.colorize(`[${value}]`, this.colors.magenta, useColors);
+        }
+        if (name === 'name') {
+            return this.colorize(`name="${value}"`, this.colors.magenta, useColors);
+        }
+        return `[${name}="${value}"]`;
+    }
+    colorText(text, useColors) {
+        return this.colorize(`"${text}"`, this.colors.white, useColors);
+    }
+    colorUrl(url, useColors) {
+        return this.colorize(`"${url}"`, this.colors.blue, useColors);
+    }
+    colorSpecial(text, useColors) {
+        return this.colorize(text, this.colors.yellow, useColors);
+    }
+    colorTreeSymbol(symbol, useColors) {
+        return this.colorize(symbol, this.colors.gray, useColors);
+    }
+    colorPageTitle(title, useColors) {
+        return this.colorize(`PAGE: ${title}`, this.colors.cyan + this.colors.bright, useColors);
     }
     async execute(client, args) {
         const snapshotArgs = args;
+        if (snapshotArgs['no-color']) {
+            snapshotArgs.color = false;
+        }
         try {
             await client.send('DOM.enable');
             await client.send('CSS.enable');
@@ -89,7 +173,8 @@ class TakeSnapshotHandler {
             processedSnapshot = htmlResponse.outerHTML;
         }
         else {
-            const textSnapshot = this.buildTextFromDOMNode(docResponse.root, url, title);
+            const useColors = this.shouldUseColors(snapshotArgs);
+            const textSnapshot = this.buildTextFromDOMNode(docResponse.root, url, title, useColors);
             processedSnapshot = {
                 url,
                 title,
@@ -168,7 +253,8 @@ class TakeSnapshotHandler {
                 error: 'No documents found'
             };
         }
-        const textSnapshot = this.createTextSnapshot(doc, response.strings);
+        const useColors = this.shouldUseColors(args);
+        const textSnapshot = this.createTextSnapshot(doc, response.strings, useColors);
         const result = {
             url: doc.documentURL,
             title: doc.title,
@@ -176,21 +262,21 @@ class TakeSnapshotHandler {
         };
         return result;
     }
-    createTextSnapshot(doc, strings) {
+    createTextSnapshot(doc, strings, useColors = true) {
         const nodes = doc.nodes;
         if (!nodes.nodeName || !nodes.nodeType) {
             return 'Empty document';
         }
         const nodeTree = this.buildNodeTree(doc, strings);
-        let output = `PAGE: ${doc.title || 'Untitled'}\n`;
+        let output = this.colorPageTitle(doc.title || 'Untitled', useColors) + '\n';
         const bodyNode = this.findBodyNode(nodeTree);
         if (bodyNode) {
-            output += this.renderNodeAsText(bodyNode, 0);
+            output += this.renderNodeAsText(bodyNode, 0, false, [], useColors);
         }
         else {
             for (const node of nodeTree) {
                 if (this.shouldIncludeNode(node)) {
-                    output += this.renderNodeAsText(node, 0);
+                    output += this.renderNodeAsText(node, 0, false, [], useColors);
                 }
             }
         }
@@ -288,72 +374,78 @@ class TakeSnapshotHandler {
         }
         return true;
     }
-    renderNodeAsText(node, depth, isLast = false, parentIsLast = []) {
+    renderNodeAsText(node, depth, isLast = false, parentIsLast = [], useColors = true) {
         if (!this.shouldIncludeNode(node)) {
             return '';
         }
         let indent = '';
         for (let i = 0; i < parentIsLast.length; i++) {
-            indent += parentIsLast[i] ? '    ' : '│   ';
+            const symbol = parentIsLast[i] ? '    ' : '│   ';
+            indent += this.colorTreeSymbol(symbol, useColors);
         }
-        const prefix = depth > 0 ? (isLast ? '└── ' : '├── ') : '';
+        const prefixSymbol = depth > 0 ? (isLast ? '└── ' : '├── ') : '';
+        const prefix = this.colorTreeSymbol(prefixSymbol, useColors);
         let output = '';
         if (node.nodeType === 3) {
             if (node.textContent) {
                 const truncatedText = this.truncateText(node.textContent.trim(), 40);
-                output += `${indent}${prefix}"${truncatedText}"\n`;
+                output += `${indent}${prefix}${this.colorText(truncatedText, useColors)}\n`;
             }
         }
         else if (node.nodeType === 1) {
-            const tag = node.nodeName.toUpperCase();
+            const tag = this.colorTag(node.nodeName, useColors);
             let description = tag;
             const attrs = [];
-            if (node.attributes.id)
-                attrs.push(`#${node.attributes.id}`);
+            if (node.attributes.id) {
+                attrs.push(this.colorId(node.attributes.id, useColors));
+            }
             if (node.attributes.class) {
                 const classes = node.attributes.class.split(/\s+/).filter((c) => c.trim().length > 0);
                 classes.forEach((cls) => {
-                    attrs.push(`.${cls.trim()}`);
+                    attrs.push(this.colorClass(cls.trim(), useColors));
                 });
             }
-            if (node.attributes.type)
-                attrs.push(`[${node.attributes.type}]`);
-            if (node.attributes.name)
-                attrs.push(`name="${node.attributes.name}"`);
+            if (node.attributes.type) {
+                attrs.push(this.colorAttribute('type', node.attributes.type, useColors));
+            }
+            if (node.attributes.name) {
+                attrs.push(this.colorAttribute('name', node.attributes.name, useColors));
+            }
             if (attrs.length > 0) {
                 description += `(${attrs.join(' ')})`;
             }
             if (node.nodeName === 'img' && node.attributes.alt) {
                 const altText = this.truncateText(node.attributes.alt, 40);
-                description += `: "${altText}"`;
+                description += `: ${this.colorText(altText, useColors)}`;
             }
             else if (node.nodeName === 'a' && node.attributes.href) {
-                description += `: "${node.attributes.href}"`;
+                description += `: ${this.colorUrl(node.attributes.href, useColors)}`;
             }
             else if (['input', 'textarea'].includes(node.nodeName)) {
                 if (node.attributes.placeholder) {
                     const placeholderText = this.truncateText(node.attributes.placeholder, 40);
-                    description += `: "${placeholderText}"`;
+                    description += `: ${this.colorText(placeholderText, useColors)}`;
                 }
                 else if (node.inputValue) {
                     const inputText = this.truncateText(node.inputValue, 40);
-                    description += `: "${inputText}"`;
+                    description += `: ${this.colorText(inputText, useColors)}`;
                 }
                 else if (node.nodeName === 'textarea') {
                     const textContent = this.extractTextContent(node);
                     if (textContent) {
                         const truncatedText = this.truncateText(textContent, 40);
-                        description += `: "${truncatedText}"`;
+                        description += `: ${this.colorText(truncatedText, useColors)}`;
                     }
                 }
-                if (node.checked)
-                    description += ' [checked]';
+                if (node.checked) {
+                    description += ` ${this.colorSpecial('[checked]', useColors)}`;
+                }
             }
             else if (node.nodeName === 'button' || ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(node.nodeName)) {
                 const textContent = this.extractTextContent(node);
                 if (textContent) {
                     const truncatedText = this.truncateText(textContent, 40);
-                    description += `: "${truncatedText}"`;
+                    description += `: ${this.colorText(truncatedText, useColors)}`;
                 }
             }
             output += `${indent}${prefix}${description}\n`;
@@ -365,7 +457,8 @@ class TakeSnapshotHandler {
                 const textContent = this.extractTextContent(node);
                 if (textContent && textContent.trim().length > 0) {
                     const truncatedText = this.truncateText(textContent.trim(), 40);
-                    output += `${indent}│   └── "${truncatedText}"\n`;
+                    const treeSymbol = this.colorTreeSymbol('│   └── ', useColors);
+                    output += `${indent}${treeSymbol}${this.colorText(truncatedText, useColors)}\n`;
                     return output;
                 }
                 return output;
@@ -375,7 +468,7 @@ class TakeSnapshotHandler {
                 for (let i = 0; i < meaningfulChildren.length; i++) {
                     const child = meaningfulChildren[i];
                     const childIsLast = i === meaningfulChildren.length - 1;
-                    output += this.renderNodeAsText(child, depth + 1, childIsLast, newParentIsLast);
+                    output += this.renderNodeAsText(child, depth + 1, childIsLast, newParentIsLast, useColors);
                 }
             }
         }
@@ -401,17 +494,17 @@ class TakeSnapshotHandler {
             return text;
         return text.substring(0, maxLength) + '...';
     }
-    buildTextFromDOMNode(root, _url, title) {
-        let output = `PAGE: ${title || 'Untitled'}\n`;
+    buildTextFromDOMNode(root, _url, title, useColors = true) {
+        let output = this.colorPageTitle(title || 'Untitled', useColors) + '\n';
         const bodyNode = this.findBodyInDOMTree(root);
         if (bodyNode) {
-            output += this.renderDOMNodeAsText(bodyNode, 0);
+            output += this.renderDOMNodeAsText(bodyNode, 0, false, [], useColors);
         }
         else {
             if (root.children) {
                 for (const child of root.children) {
                     if (this.shouldIncludeDOMNode(child)) {
-                        output += this.renderDOMNodeAsText(child, 0);
+                        output += this.renderDOMNodeAsText(child, 0, false, [], useColors);
                     }
                 }
             }
@@ -448,25 +541,28 @@ class TakeSnapshotHandler {
         }
         return true;
     }
-    renderDOMNodeAsText(node, depth, isLast = false, parentIsLast = []) {
+    renderDOMNodeAsText(node, depth, isLast = false, parentIsLast = [], useColors = true) {
         if (!this.shouldIncludeDOMNode(node)) {
             return '';
         }
         let indent = '';
         for (let i = 0; i < parentIsLast.length; i++) {
-            indent += parentIsLast[i] ? '    ' : '│   ';
+            const symbol = parentIsLast[i] ? '    ' : '│   ';
+            indent += this.colorTreeSymbol(symbol, useColors);
         }
-        const prefix = depth > 0 ? (isLast ? '└── ' : '├── ') : '';
+        const prefixSymbol = depth > 0 ? (isLast ? '└── ' : '├── ') : '';
+        const prefix = this.colorTreeSymbol(prefixSymbol, useColors);
         let output = '';
         if (node.nodeType === 3) {
             const text = (node.nodeValue || '').trim();
             if (text) {
                 const truncatedText = this.truncateText(text, 40);
-                output += `${indent}${prefix}"${truncatedText}"\n`;
+                output += `${indent}${prefix}${this.colorText(truncatedText, useColors)}\n`;
             }
         }
         else if (node.nodeType === 1) {
-            const tag = (node.nodeName || '').toUpperCase();
+            const nodeName = (node.nodeName || '').toLowerCase();
+            const tag = this.colorTag(nodeName, useColors);
             let description = tag;
             const attrs = [];
             if (node.attributes) {
@@ -474,36 +570,38 @@ class TakeSnapshotHandler {
                     const name = node.attributes[i];
                     const value = node.attributes[i + 1];
                     if (['id', 'class', 'type', 'name', 'href', 'src', 'alt', 'placeholder', 'value', 'title'].includes(name)) {
-                        if (name === 'id')
-                            attrs.push(`#${value}`);
+                        if (name === 'id') {
+                            attrs.push(this.colorId(value, useColors));
+                        }
                         else if (name === 'class') {
                             const classes = value.split(/\s+/).filter((c) => c.trim().length > 0);
                             classes.forEach((cls) => {
-                                attrs.push(`.${cls.trim()}`);
+                                attrs.push(this.colorClass(cls.trim(), useColors));
                             });
                         }
-                        else if (name === 'type')
-                            attrs.push(`[${value}]`);
-                        else
-                            attrs.push(`${name}="${value}"`);
+                        else if (name === 'type') {
+                            attrs.push(this.colorAttribute('type', value, useColors));
+                        }
+                        else {
+                            attrs.push(this.colorAttribute(name, value, useColors));
+                        }
                     }
                 }
             }
             if (attrs.length > 0) {
                 description += `(${attrs.join(' ')})`;
             }
-            const nodeName = (node.nodeName || '').toLowerCase();
             if (nodeName === 'img' && node.attributes) {
                 const altIndex = node.attributes.indexOf('alt');
                 if (altIndex >= 0 && altIndex + 1 < node.attributes.length) {
                     const altText = this.truncateText(node.attributes[altIndex + 1], 40);
-                    description += `: "${altText}"`;
+                    description += `: ${this.colorText(altText, useColors)}`;
                 }
             }
             else if (nodeName === 'a' && node.attributes) {
                 const hrefIndex = node.attributes.indexOf('href');
                 if (hrefIndex >= 0 && hrefIndex + 1 < node.attributes.length) {
-                    description += `: "${node.attributes[hrefIndex + 1]}"`;
+                    description += `: ${this.colorUrl(node.attributes[hrefIndex + 1], useColors)}`;
                 }
             }
             else if (['input', 'textarea'].includes(nodeName)) {
@@ -511,14 +609,14 @@ class TakeSnapshotHandler {
                     const placeholderIndex = node.attributes.indexOf('placeholder');
                     if (placeholderIndex >= 0 && placeholderIndex + 1 < node.attributes.length) {
                         const placeholderText = this.truncateText(node.attributes[placeholderIndex + 1], 40);
-                        description += `: "${placeholderText}"`;
+                        description += `: ${this.colorText(placeholderText, useColors)}`;
                     }
                 }
                 if (nodeName === 'textarea') {
                     const textContent = this.extractTextFromDOMNode(node);
                     if (textContent) {
                         const truncatedText = this.truncateText(textContent, 40);
-                        description += `: "${truncatedText}"`;
+                        description += `: ${this.colorText(truncatedText, useColors)}`;
                     }
                 }
             }
@@ -526,7 +624,7 @@ class TakeSnapshotHandler {
                 const textContent = this.extractTextFromDOMNode(node);
                 if (textContent) {
                     const truncatedText = this.truncateText(textContent, 40);
-                    description += `: "${truncatedText}"`;
+                    description += `: ${this.colorText(truncatedText, useColors)}`;
                 }
             }
             output += `${indent}${prefix}${description}\n`;
@@ -539,7 +637,8 @@ class TakeSnapshotHandler {
                     const textContent = this.extractTextFromDOMNode(node);
                     if (textContent && textContent.trim().length > 0) {
                         const truncatedText = this.truncateText(textContent.trim(), 40);
-                        output += `${indent}│   └── "${truncatedText}"\n`;
+                        const treeSymbol = this.colorTreeSymbol('│   └── ', useColors);
+                        output += `${indent}${treeSymbol}${this.colorText(truncatedText, useColors)}\n`;
                         return output;
                     }
                     return output;
@@ -549,7 +648,7 @@ class TakeSnapshotHandler {
                     for (let i = 0; i < meaningfulChildren.length; i++) {
                         const child = meaningfulChildren[i];
                         const childIsLast = i === meaningfulChildren.length - 1;
-                        output += this.renderDOMNodeAsText(child, depth + 1, childIsLast, newParentIsLast);
+                        output += this.renderDOMNodeAsText(child, depth + 1, childIsLast, newParentIsLast, useColors);
                     }
                 }
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-cdp-cli",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Browser automation CLI via Chrome DevTools Protocol. Designed for developers and AI assistants - combines dedicated commands for common tasks with flexible JavaScript execution for complex scenarios. Features: element interaction, screenshots, DOM snapshots, console/network monitoring. Built-in IDE integration for Cursor and Claude.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",