chrome-cdp-cli 1.7.9 → 1.8.0

package/dist/cli/CLIInterface.js

@@ -373,6 +373,9 @@ class CLIInterface {
         }
         if (result.data && typeof result.data === 'object') {
             const data = result.data;
+            if (data.snapshot && typeof data.snapshot === 'string') {
+                return data.snapshot;
+            }
             if (data.messages && Array.isArray(data.messages)) {
                 output += dataSourceInfo;
                 if (data.messages.length === 0) {

package/dist/handlers/TakeSnapshotHandler.js

@@ -47,6 +47,20 @@ class TakeSnapshotHandler {
                 }
             };
         }
+        if (snapshotArgs.format !== 'html' && typeof processedSnapshot === 'object' && processedSnapshot !== null) {
+            const snapshotObj = processedSnapshot;
+            if (snapshotObj.snapshot && typeof snapshotObj.snapshot === 'string') {
+                return {
+                    success: true,
+                    data: {
+                        snapshot: snapshotObj.snapshot,
+                        format: 'text',
+                        documentsCount: response.documents.length,
+                        nodesCount: response.documents[0]?.nodes?.nodeName?.length || 0
+                    }
+                };
+            }
+        }
         return {
             success: true,
             data: {
@@ -62,29 +76,24 @@ class TakeSnapshotHandler {
         if (!docResponse || !docResponse.root) {
             throw new Error('Failed to get document root');
         }
-        const htmlResponse = await client.send('DOM.getOuterHTML', {
-            nodeId: docResponse.root.nodeId
-        });
-        if (!htmlResponse || !htmlResponse.outerHTML) {
-            throw new Error('Failed to get document HTML');
-        }
+        const url = await this.getCurrentURL(client);
+        const title = await this.getCurrentTitle(client);
         let processedSnapshot;
         if (snapshotArgs.format === 'html') {
+            const htmlResponse = await client.send('DOM.getOuterHTML', {
+                nodeId: docResponse.root.nodeId
+            });
+            if (!htmlResponse || !htmlResponse.outerHTML) {
+                throw new Error('Failed to get document HTML');
+            }
             processedSnapshot = htmlResponse.outerHTML;
         }
         else {
+            const textSnapshot = this.buildTextFromDOMNode(docResponse.root, url, title);
             processedSnapshot = {
-                metadata: {
-                    captureTime: new Date().toISOString(),
-                    method: 'DOM.getOuterHTML',
-                    documentsCount: 1
-                },
-                documents: [{
-                        url: await this.getCurrentURL(client),
-                        title: await this.getCurrentTitle(client),
-                        html: htmlResponse.outerHTML,
-                        domTree: docResponse.root
-                    }]
+                url,
+                title,
+                snapshot: textSnapshot
             };
         }
         if (snapshotArgs.filename) {
@@ -98,6 +107,18 @@ class TakeSnapshotHandler {
                 }
             };
         }
+        if (snapshotArgs.format !== 'html' && typeof processedSnapshot === 'object' && processedSnapshot !== null) {
+            const snapshotObj = processedSnapshot;
+            if (snapshotObj.snapshot && typeof snapshotObj.snapshot === 'string') {
+                return {
+                    success: true,
+                    data: {
+                        snapshot: snapshotObj.snapshot,
+                        format: 'text'
+                    }
+                };
+            }
+        }
         return {
             success: true,
             data: {
@@ -148,11 +169,12 @@ class TakeSnapshotHandler {
             };
         }
         const textSnapshot = this.createTextSnapshot(doc, response.strings);
-        return {
+        const result = {
             url: doc.documentURL,
             title: doc.title,
             snapshot: textSnapshot
         };
+        return result;
     }
     createTextSnapshot(doc, strings) {
         const nodes = doc.nodes;
@@ -160,7 +182,7 @@ class TakeSnapshotHandler {
             return 'Empty document';
         }
         const nodeTree = this.buildNodeTree(doc, strings);
-        let output = `PAGE: ${doc.title || 'Untitled'} (${doc.documentURL})\n`;
+        let output = `PAGE: ${doc.title || 'Untitled'}\n`;
         const bodyNode = this.findBodyNode(nodeTree);
         if (bodyNode) {
             output += this.renderNodeAsText(bodyNode, 0);
@@ -256,28 +278,30 @@ class TakeSnapshotHandler {
         return findNode(nodeTree, 'body') || findNode(nodeTree, 'main') || null;
     }
     shouldIncludeNode(node) {
-        const skipTags = ['script', 'style', 'meta', 'link', 'head', 'noscript', 'svg', 'path'];
+        const skipTags = ['script', 'style', 'meta', 'link', 'head', 'noscript'];
         if (skipTags.includes(node.nodeName)) {
             return false;
         }
-        if (node.nodeType === 3 && !node.textContent) {
-            return false;
-        }
-        if (node.nodeType === 1 && !node.textContent && node.children.length === 0) {
-            return false;
+        if (node.nodeType === 3) {
+            const text = (node.textContent || '').trim();
+            return text.length > 0;
         }
         return true;
     }
-    renderNodeAsText(node, depth) {
+    renderNodeAsText(node, depth, isLast = false, parentIsLast = []) {
         if (!this.shouldIncludeNode(node)) {
             return '';
         }
-        const indent = '│   '.repeat(depth);
-        const prefix = depth > 0 ? '├── ' : '';
+        let indent = '';
+        for (let i = 0; i < parentIsLast.length; i++) {
+            indent += parentIsLast[i] ? '    ' : '│   ';
+        }
+        const prefix = depth > 0 ? (isLast ? '└── ' : '├── ') : '';
         let output = '';
         if (node.nodeType === 3) {
             if (node.textContent) {
-                output += `${indent}${prefix}"${node.textContent}"\n`;
+                const truncatedText = this.truncateText(node.textContent.trim(), 40);
+                output += `${indent}${prefix}"${truncatedText}"\n`;
             }
         }
         else if (node.nodeType === 1) {
@@ -286,8 +310,12 @@ class TakeSnapshotHandler {
             const attrs = [];
             if (node.attributes.id)
                 attrs.push(`#${node.attributes.id}`);
-            if (node.attributes.class)
-                attrs.push(`.${node.attributes.class.split(' ')[0]}`);
+            if (node.attributes.class) {
+                const classes = node.attributes.class.split(/\s+/).filter((c) => c.trim().length > 0);
+                classes.forEach((cls) => {
+                    attrs.push(`.${cls.trim()}`);
+                });
+            }
             if (node.attributes.type)
                 attrs.push(`[${node.attributes.type}]`);
             if (node.attributes.name)
@@ -296,17 +324,27 @@ class TakeSnapshotHandler {
                 description += `(${attrs.join(' ')})`;
             }
             if (node.nodeName === 'img' && node.attributes.alt) {
-                description += `: "${node.attributes.alt}"`;
+                const altText = this.truncateText(node.attributes.alt, 40);
+                description += `: "${altText}"`;
             }
             else if (node.nodeName === 'a' && node.attributes.href) {
                 description += `: "${node.attributes.href}"`;
             }
             else if (['input', 'textarea'].includes(node.nodeName)) {
                 if (node.attributes.placeholder) {
-                    description += `: "${node.attributes.placeholder}"`;
+                    const placeholderText = this.truncateText(node.attributes.placeholder, 40);
+                    description += `: "${placeholderText}"`;
                 }
                 else if (node.inputValue) {
-                    description += `: "${node.inputValue}"`;
+                    const inputText = this.truncateText(node.inputValue, 40);
+                    description += `: "${inputText}"`;
+                }
+                else if (node.nodeName === 'textarea') {
+                    const textContent = this.extractTextContent(node);
+                    if (textContent) {
+                        const truncatedText = this.truncateText(textContent, 40);
+                        description += `: "${truncatedText}"`;
+                    }
                 }
                 if (node.checked)
                     description += ' [checked]';
@@ -314,20 +352,31 @@ class TakeSnapshotHandler {
             else if (node.nodeName === 'button' || ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(node.nodeName)) {
                 const textContent = this.extractTextContent(node);
                 if (textContent) {
-                    description += `: "${textContent}"`;
+                    const truncatedText = this.truncateText(textContent, 40);
+                    description += `: "${truncatedText}"`;
                 }
             }
             output += `${indent}${prefix}${description}\n`;
+            if (node.nodeName === 'textarea') {
+                return output;
+            }
             const meaningfulChildren = node.children.filter((child) => this.shouldIncludeNode(child));
-            if (['p', 'div', 'span', 'li', 'td', 'th'].includes(node.nodeName)) {
+            if (meaningfulChildren.length === 0) {
                 const textContent = this.extractTextContent(node);
-                if (textContent && meaningfulChildren.length <= 1) {
-                    output += `${indent}│   └── "${textContent}"\n`;
+                if (textContent && textContent.trim().length > 0) {
+                    const truncatedText = this.truncateText(textContent.trim(), 40);
+                    output += `${indent}│   └── "${truncatedText}"\n`;
                     return output;
                 }
+                return output;
             }
-            for (const child of meaningfulChildren) {
-                output += this.renderNodeAsText(child, depth + 1);
+            else {
+                const newParentIsLast = [...parentIsLast, isLast];
+                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);
+                }
             }
         }
         return output;
@@ -345,6 +394,180 @@ class TakeSnapshotHandler {
         }
         return text.trim().replace(/\s+/g, ' ');
     }
+    truncateText(text, maxLength) {
+        if (!text)
+            return '';
+        if (text.length <= maxLength)
+            return text;
+        return text.substring(0, maxLength) + '...';
+    }
+    buildTextFromDOMNode(root, _url, title) {
+        let output = `PAGE: ${title || 'Untitled'}\n`;
+        const bodyNode = this.findBodyInDOMTree(root);
+        if (bodyNode) {
+            output += this.renderDOMNodeAsText(bodyNode, 0);
+        }
+        else {
+            if (root.children) {
+                for (const child of root.children) {
+                    if (this.shouldIncludeDOMNode(child)) {
+                        output += this.renderDOMNodeAsText(child, 0);
+                    }
+                }
+            }
+        }
+        return output;
+    }
+    findBodyInDOMTree(node) {
+        if (node.nodeName && node.nodeName.toLowerCase() === 'body') {
+            return node;
+        }
+        if (node.nodeName && node.nodeName.toLowerCase() === 'main') {
+            return node;
+        }
+        if (node.children) {
+            for (const child of node.children) {
+                const found = this.findBodyInDOMTree(child);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    }
+    shouldIncludeDOMNode(node) {
+        if (!node)
+            return false;
+        const nodeName = node.nodeName ? node.nodeName.toLowerCase() : '';
+        const skipTags = ['script', 'style', 'meta', 'link', 'head', 'noscript'];
+        if (skipTags.includes(nodeName)) {
+            return false;
+        }
+        if (node.nodeType === 3) {
+            const text = node.nodeValue || '';
+            return text.trim().length > 0;
+        }
+        return true;
+    }
+    renderDOMNodeAsText(node, depth, isLast = false, parentIsLast = []) {
+        if (!this.shouldIncludeDOMNode(node)) {
+            return '';
+        }
+        let indent = '';
+        for (let i = 0; i < parentIsLast.length; i++) {
+            indent += parentIsLast[i] ? '    ' : '│   ';
+        }
+        const prefix = depth > 0 ? (isLast ? '└── ' : '├── ') : '';
+        let output = '';
+        if (node.nodeType === 3) {
+            const text = (node.nodeValue || '').trim();
+            if (text) {
+                const truncatedText = this.truncateText(text, 40);
+                output += `${indent}${prefix}"${truncatedText}"\n`;
+            }
+        }
+        else if (node.nodeType === 1) {
+            const tag = (node.nodeName || '').toUpperCase();
+            let description = tag;
+            const attrs = [];
+            if (node.attributes) {
+                for (let i = 0; i < node.attributes.length; i += 2) {
+                    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}`);
+                        else if (name === 'class') {
+                            const classes = value.split(/\s+/).filter((c) => c.trim().length > 0);
+                            classes.forEach((cls) => {
+                                attrs.push(`.${cls.trim()}`);
+                            });
+                        }
+                        else if (name === 'type')
+                            attrs.push(`[${value}]`);
+                        else
+                            attrs.push(`${name}="${value}"`);
+                    }
+                }
+            }
+            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}"`;
+                }
+            }
+            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]}"`;
+                }
+            }
+            else if (['input', 'textarea'].includes(nodeName)) {
+                if (node.attributes) {
+                    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}"`;
+                    }
+                }
+                if (nodeName === 'textarea') {
+                    const textContent = this.extractTextFromDOMNode(node);
+                    if (textContent) {
+                        const truncatedText = this.truncateText(textContent, 40);
+                        description += `: "${truncatedText}"`;
+                    }
+                }
+            }
+            else if (nodeName === 'button' || ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(nodeName)) {
+                const textContent = this.extractTextFromDOMNode(node);
+                if (textContent) {
+                    const truncatedText = this.truncateText(textContent, 40);
+                    description += `: "${truncatedText}"`;
+                }
+            }
+            output += `${indent}${prefix}${description}\n`;
+            if (nodeName === 'textarea') {
+                return output;
+            }
+            if (node.children) {
+                const meaningfulChildren = node.children.filter((child) => this.shouldIncludeDOMNode(child));
+                if (meaningfulChildren.length === 0) {
+                    const textContent = this.extractTextFromDOMNode(node);
+                    if (textContent && textContent.trim().length > 0) {
+                        const truncatedText = this.truncateText(textContent.trim(), 40);
+                        output += `${indent}│   └── "${truncatedText}"\n`;
+                        return output;
+                    }
+                    return output;
+                }
+                else {
+                    const newParentIsLast = [...parentIsLast, isLast];
+                    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);
+                    }
+                }
+            }
+        }
+        return output;
+    }
+    extractTextFromDOMNode(node) {
+        if (node.nodeType === 3) {
+            return (node.nodeValue || '').trim();
+        }
+        let text = '';
+        if (node.children) {
+            for (const child of node.children) {
+                text += this.extractTextFromDOMNode(child) + ' ';
+            }
+        }
+        return text.trim().replace(/\s+/g, ' ');
+    }
     convertToHTML(response) {
         const doc = response.documents[0];
         if (!doc)
@@ -482,7 +705,7 @@ class TakeSnapshotHandler {
         if (snapshotArgs.filename !== undefined && typeof snapshotArgs.filename !== 'string') {
             return false;
         }
-        if (snapshotArgs.format !== undefined && !['json', 'html'].includes(snapshotArgs.format)) {
+        if (snapshotArgs.format !== undefined && !['json', 'html', 'text'].includes(snapshotArgs.format)) {
             return false;
         }
         if (snapshotArgs.includeStyles !== undefined && typeof snapshotArgs.includeStyles !== 'boolean') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-cdp-cli",
-  "version": "1.7.9",
+  "version": "1.8.0",
   "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",