electron-debug-skill 1.0.1 → 1.0.3

package/README.md

@@ -22,10 +22,28 @@
 
 ## Installation
 
+### Two-Step Setup (Recommended)
+
+**Step 1: Install Claude Code Skill** (enables `/electron-debug` commands in Claude Code)
+
+```bash
+npx skills add kvenLin/electron-debug@electron-debug
+```
+
+**Step 2: Install CLI Tool** (required for the skill to work)
+
+```bash
+npm install -g electron-debug-skill
+```
+
 ### Option 1: via skills.sh (Recommended)
 
 ```bash
+# Step 1: Install skill definition
 npx skills add kvenLin/electron-debug@electron-debug
+
+# Step 2: Install CLI tool
+npm install -g electron-debug-skill
 ```
 
 ### Option 2: Manual Install
@@ -35,15 +53,8 @@ npx skills add kvenLin/electron-debug@electron-debug
 git clone https://github.com/kvenLin/electron-debug.git
 cd electron-debug
 
-# Install dependencies
-npm install
-```
-
-### Option 3: Development (Symlink)
-
-```bash
-ln -s ~/path/to/electron-debug ~/.claude/skills/electron-debug
-/reload-plugins
+# Install CLI tool globally
+npm install -g
 ```
 
 ## Quick Start

package/dist/index.js

@@ -308,9 +308,31 @@ async function cmdStatus() {
     }
 }
 async function cmdListPages(args) {
+    // Use daemon API
+    const isDaemonRunning = await daemonCheck();
+    if (isDaemonRunning) {
+        try {
+            const targets = await daemonRequest('/targets', 'GET');
+            console.log('\nAvailable Pages:');
+            console.log('─'.repeat(60));
+            (targets || [])
+                .filter((t) => t.type === 'page')
+                .forEach((t, i) => {
+                const marker = t.id === currentTargetId ? '→ ' : '  ';
+                console.log(`${marker}[${i + 1}] ${t.title}`);
+                console.log(`     URL: ${t.url}`);
+                console.log(`     ID: ${t.id}`);
+                console.log('');
+            });
+        }
+        catch (err) {
+            console.error('Error:', err.message);
+        }
+        return;
+    }
+    // Fallback to direct connection
     const port = Number(args.port) || connectionPort;
     const host = args.host ? String(args.host) : connectionHost;
-    // Fetch targets via HTTP JSON endpoint (doesn't require connection)
     const http = await import('http');
     const targetsJson = await new Promise((resolve, reject) => {
         http.get(`http://${host}:${port}/json`, (res) => {
@@ -486,18 +508,19 @@ async function cmdScreenshot(args) {
     // Try daemon mode first
     const isDaemonRunning = await daemonCheck();
     if (isDaemonRunning) {
-        const path = String(args.path || '');
+        const specifiedPath = String(args.path || '');
         try {
             const result = await daemonRequest('/screenshot', 'GET');
-            if (path) {
-                const fs = await import('fs/promises');
-                const buffer = Buffer.from(result.data, 'base64');
-                await fs.writeFile(path, buffer);
-                console.log(`Screenshot saved to: ${path}`);
-            } else {
-                console.log(`Screenshot captured (${result.data.length} bytes, base64)`);
-                console.log(`Preview: data:image/${result.format || 'png'};base64,${result.data.slice(0, 100)}...`);
+            let savePath = specifiedPath;
+            if (!savePath) {
+                const now = new Date();
+                const timestamp = now.toISOString().replace(/[-:T]/g, '').slice(0, 14);
+                savePath = `${process.cwd()}/screenshot-${timestamp}.png`;
             }
+            const fs = await import('fs/promises');
+            const buffer = Buffer.from(result.data, 'base64');
+            await fs.writeFile(savePath, buffer);
+            console.log(`Screenshot saved to: ${savePath}`);
         } catch (err) {
             console.error('Error:', err.message);
         }
@@ -508,20 +531,20 @@ async function cmdScreenshot(args) {
         console.log('Not connected. Use "daemon start" or "connect" first.');
         return;
     }
-    const path = String(args.path || '');
+    const specifiedPath = String(args.path || '');
     const format = args.jpeg ? 'jpeg' : 'png';
     const quality = args.jpeg ? 80 : undefined;
     const result = await client.captureScreenshot(format, quality);
-    if (path) {
-        const fs = await import('fs/promises');
-        const buffer = Buffer.from(result.data, 'base64');
-        await fs.writeFile(path, buffer);
-        console.log(`Screenshot saved to: ${path}`);
-    }
-    else {
-        console.log(`Screenshot captured (${result.data.length} bytes, base64)`);
-        console.log(`Preview: data:image/${format};base64,${result.data.slice(0, 100)}...`);
-    }
+    let savePath = specifiedPath;
+    if (!savePath) {
+        const now = new Date();
+        const timestamp = now.toISOString().replace(/[-:T]/g, '').slice(0, 14);
+        savePath = `${process.cwd()}/screenshot-${timestamp}.png`;
+    }
+    const fs = await import('fs/promises');
+    const buffer = Buffer.from(result.data, 'base64');
+    await fs.writeFile(savePath, buffer);
+    console.log(`Screenshot saved to: ${savePath}`);
 }
 async function cmdDom(args) {
     // Try daemon mode first

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "electron-debug-skill",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "description": "Claude Code Skill for debugging Electron applications using Chrome DevTools Protocol (CDP)",
   "main": "dist/index.js",

package/skills/electron-debug/SKILL.md

@@ -85,9 +85,6 @@ Electron 应用调试技能，支持 Chrome DevTools Protocol (CDP) 完整调试
 
 # 截图并保存到文件
 /electron-debug screenshot --path ./screenshot.png
-
-# 全页面截图
-/electron-debug screenshot --full
 ```
 
 ## 元素交互
@@ -107,10 +104,10 @@ Electron 应用调试技能，支持 Chrome DevTools Protocol (CDP) 完整调试
 /electron-debug eval "document.title"
 /electron-debug eval "navigator.userAgent"
 
-/# 调用函数
+# 调用函数
 /electron-debug eval "Math.random()"
 
-/# 多行表达式
+# 多行表达式
 /electron-debug eval "(() => { return document.querySelector('#output').textContent; })()"
 ```
 
@@ -121,7 +118,7 @@ Electron 应用调试技能，支持 Chrome DevTools Protocol (CDP) 完整调试
 /electron-debug dom --selector "#my-element"
 /electron-debug dom --selector ".class-name"
 
-/# 查看元素属性
+# 查看元素属性
 /electron-debug dom --selector "#my-input" --props "id,value,disabled"
 ```
 

package/skills-lock.json

@@ -0,0 +1,10 @@
+{
+  "version": 1,
+  "skills": {
+    "electron-debug": {
+      "source": "kvenLin/electron-debug",
+      "sourceType": "github",
+      "computedHash": "a268ac21dbd6f98a5505d6f025016cdf38be71b08ee24b577d958d7edac3841f"
+    }
+  }
+}