chromex-mcp 1.0.0 → 1.1.0

package/README.md

@@ -289,11 +289,11 @@ Chromex also ships as an MCP server -- typed tools, auto-approve with one line,
 ### Setup
 
 ```bash
-# Via npx (recommended)
-claude mcp add chromex npx chromex-mcp@latest
+# Global (all projects)
+claude mcp add chromex -s user npx chromex-mcp@latest
 
-# Or with absolute path (no npm needed)
-claude mcp add chromex node /path/to/plugins/chromex/skills/chromex/scripts/mcp-server.mjs
+# Or project-only
+claude mcp add chromex npx chromex-mcp@latest
 ```
 
 ### Auto-Approve

package/bin/chromex-cli.mjs

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import '../plugins/chromex/skills/chromex/scripts/chromex.mjs';

package/bin/chromex-mcp.mjs

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import '../plugins/chromex/skills/chromex/scripts/mcp-server.mjs';

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "chromex-mcp",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Zero-dependency Chrome DevTools Protocol MCP server for AI agents. 52 typed tools, per-tab daemons, security hardened.",
   "type": "module",
   "bin": {
-    "chromex-mcp": "./plugins/chromex/skills/chromex/scripts/mcp-server.mjs",
-    "chromex-cli": "./plugins/chromex/skills/chromex/scripts/chromex.mjs"
+    "chromex-mcp": "./bin/chromex-mcp.mjs",
+    "chromex-cli": "./bin/chromex-cli.mjs"
   },
   "files": [
+    "bin/",
     "plugins/chromex/skills/chromex/scripts/",
     "LICENSE",
     "README.md"

package/plugins/chromex/skills/chromex/scripts/lib/commands/snapshot.mjs

@@ -1,4 +1,4 @@
-// Accessibility tree snapshot with optional interactive refs (@e1, @e2...)
+// Accessibility tree snapshot with incremental diff and interactive refs (@e1, @e2...)
 
 const INTERACTIVE_ROLES = new Set([
   'button', 'link', 'textbox', 'checkbox', 'radio', 'combobox',
@@ -6,7 +6,17 @@ const INTERACTIVE_ROLES = new Set([
   'option', 'menuitemcheckbox', 'menuitemradio', 'treeitem',
 ]);
 
+// Check if AX node is marked as ignored/hidden by the browser
+function isAxNodeHidden(node) {
+  if (node.ignored) return true;
+  // CDP includes boolean properties like 'hidden' in the properties array
+  const hidden = node.properties?.find(p => p.name === 'hidden');
+  if (hidden?.value?.value === true) return true;
+  return false;
+}
+
 function shouldShowAxNode(node, compact = false) {
+  if (isAxNodeHidden(node)) return false;
   const role = node.role?.value || '';
   const name = node.name?.value ?? '';
   const value = node.value?.value;
@@ -14,21 +24,35 @@ function shouldShowAxNode(node, compact = false) {
   return role !== 'none' && role !== 'generic' && !(name === '' && (value === '' || value == null));
 }
 
+// Check if element is focusable/clickable (not disabled, not aria-disabled)
+function isAxNodeInteractable(node) {
+  const disabled = node.properties?.find(p => p.name === 'disabled');
+  if (disabled?.value?.value === true) return false;
+  return true;
+}
+
+const MAX_NAME_LENGTH = 200;
+
+function truncate(str, max = MAX_NAME_LENGTH) {
+  if (!str || str.length <= max) return str;
+  return str.slice(0, max) + '...';
+}
+
 function formatAxNode(node, depth, refIndex, refs) {
   const role = node.role?.value || '';
-  const name = node.name?.value ?? '';
+  const name = truncate(node.name?.value ?? '');
   const value = node.value?.value;
   const indent = '  '.repeat(Math.min(depth, 10));
 
   let refTag = '';
-  if (refs && INTERACTIVE_ROLES.has(role.toLowerCase())) {
+  if (refs && INTERACTIVE_ROLES.has(role.toLowerCase()) && isAxNodeInteractable(node)) {
     refTag = `@e${refIndex.value} `;
     refIndex.value++;
   }
 
   let line = `${indent}${refTag}[${role}]`;
   if (name !== '') line += ` ${name}`;
-  if (!(value === '' || value == null)) line += ` = ${JSON.stringify(value)}`;
+  if (!(value === '' || value == null)) line += ` = ${JSON.stringify(truncate(String(value)))}`;
   return line;
 }
 
@@ -51,9 +75,28 @@ function orderedAxChildren(node, nodesById, childrenByParent) {
   return children;
 }
 
+// Build a fingerprint for each visible node: role + name + value + childCount
+// Used for incremental diff to detect changes
+function buildFingerprints(nodes, nodesById, childrenByParent, compact) {
+  const fingerprints = new Map();
+  for (const node of nodes) {
+    if (!shouldShowAxNode(node, compact)) continue;
+    const role = node.role?.value || '';
+    const name = node.name?.value ?? '';
+    const value = node.value?.value ?? '';
+    const children = orderedAxChildren(node, nodesById, childrenByParent);
+    const childIds = children.filter(c => shouldShowAxNode(c, compact)).map(c => c.nodeId).join(',');
+    fingerprints.set(node.nodeId, `${role}|${name}|${value}|${childIds}`);
+  }
+  return fingerprints;
+}
+
 // refMap is populated when refs=true: { refNumber -> { backendNodeId, role, name } }
 // The caller (daemon) stores this map for later ref resolution.
-export async function snapshotStr(cdp, sid, compact = true, refs = false) {
+// previousFingerprints: Map from prior snapshot for incremental diff.
+// maxDepth: limit tree depth (0 = unlimited). Nodes at the limit render as leaves.
+// Returns { text, refMap, fingerprints } -- caller stores fingerprints for next diff.
+export async function snapshotStr(cdp, sid, compact = true, refs = false, previousFingerprints = null, maxDepth = 0) {
   const { nodes } = await cdp.send('Accessibility.getFullAXTree', {}, sid);
   const nodesById = new Map(nodes.map(node => [node.nodeId, node]));
   const childrenByParent = new Map();
@@ -63,38 +106,114 @@ export async function snapshotStr(cdp, sid, compact = true, refs = false) {
     childrenByParent.get(node.parentId).push(node);
   }
 
+  const currentFingerprints = buildFingerprints(nodes, nodesById, childrenByParent, compact);
+  const isDiff = previousFingerprints !== null && previousFingerprints.size > 0;
+
   const refIndex = { value: 1 };
   const refMap = new Map();
   const lines = [];
   const visited = new Set();
 
+  // Track unchanged subtree roots for diff output
+  let unchangedCount = 0;
+
+  function isSubtreeUnchanged(node) {
+    if (!previousFingerprints) return false;
+    const nodeId = node.nodeId;
+    const curr = currentFingerprints.get(nodeId);
+    const prev = previousFingerprints.get(nodeId);
+    if (!curr || !prev || curr !== prev) return false;
+    // Node itself matches -- check all visible children recursively
+    const children = orderedAxChildren(node, nodesById, childrenByParent);
+    for (const child of children) {
+      if (!shouldShowAxNode(child, compact)) continue;
+      if (!isSubtreeUnchanged(child)) return false;
+    }
+    return true;
+  }
+
   function visit(node, depth) {
     if (!node || visited.has(node.nodeId)) return;
     visited.add(node.nodeId);
-    if (shouldShowAxNode(node, compact)) {
-      const role = node.role?.value || '';
-      const currentRef = refIndex.value;
 
-      lines.push(formatAxNode(node, depth, refIndex, refs));
+    const show = shouldShowAxNode(node, compact);
 
-      // If ref was assigned (refIndex advanced), record the mapping
-      if (refs && refIndex.value > currentRef) {
-        refMap.set(currentRef, {
+    if (!show) {
+      // Generic/none node: collapse by visiting children at SAME depth (no indentation increase)
+      for (const child of orderedAxChildren(node, nodesById, childrenByParent)) {
+        visit(child, depth);
+      }
+      return;
+    }
+
+    // Incremental diff: if this subtree is unchanged, collapse it
+    if (isDiff && isSubtreeUnchanged(node)) {
+      unchangedCount++;
+      if (refs) {
+        advanceRefsForSubtree(node);
+      }
+      return;
+    }
+
+    const role = node.role?.value || '';
+    const currentRef = refIndex.value;
+
+    lines.push(formatAxNode(node, depth, refIndex, refs));
+
+    if (refs && refIndex.value > currentRef) {
+      refMap.set(currentRef, {
+        backendNodeId: node.backendDOMNodeId,
+        nodeId: node.nodeId,
+        role,
+        name: node.name?.value ?? '',
+      });
+    }
+
+    // Depth limiting: at the limit, render as leaf (no children)
+    if (maxDepth > 0 && depth >= maxDepth) return;
+
+    for (const child of orderedAxChildren(node, nodesById, childrenByParent)) {
+      visit(child, depth + 1);
+    }
+  }
+
+  // Advance ref counter for unchanged subtrees to keep ref numbers stable
+  // Uses its own visited set because visit() already marked nodes before calling this
+  const refAdvanced = new Set();
+  function advanceRefsForSubtree(node) {
+    if (!node || refAdvanced.has(node.nodeId)) return;
+    refAdvanced.add(node.nodeId);
+    if (shouldShowAxNode(node, compact)) {
+      const role = node.role?.value || '';
+      if (INTERACTIVE_ROLES.has(role.toLowerCase()) && isAxNodeInteractable(node)) {
+        refMap.set(refIndex.value, {
           backendNodeId: node.backendDOMNodeId,
           nodeId: node.nodeId,
           role,
           name: node.name?.value ?? '',
         });
+        refIndex.value++;
       }
     }
     for (const child of orderedAxChildren(node, nodesById, childrenByParent)) {
-      visit(child, depth + 1);
+      advanceRefsForSubtree(child);
     }
   }
 
   const roots = nodes.filter(node => !node.parentId || !nodesById.has(node.parentId));
   for (const root of roots) visit(root, 0);
-  for (const node of nodes) visit(node, 0);
+  // Second pass: catch disconnected nodes (skip when depth-limited to avoid false depth=0)
+  if (!maxDepth) {
+    for (const node of nodes) visit(node, 0);
+  }
+
+  // Add diff summary header when in incremental mode
+  let text = lines.join('\n');
+  if (isDiff && unchangedCount > 0) {
+    const totalVisible = currentFingerprints.size;
+    const changedCount = totalVisible - unchangedCount;
+    text = `[incremental: ${changedCount} changed, ${unchangedCount} unchanged]\n${text}`;
+  }
 
-  return { text: lines.join('\n'), refMap };
+  return { text, refMap, fingerprints: currentFingerprints };
 }

package/plugins/chromex/skills/chromex/scripts/lib/daemon.mjs

@@ -106,8 +106,9 @@ export async function runDaemon(targetId, config) {
     idleTimer = setTimeout(shutdown, config.idleTimeout);
   }
 
-  // Ref-based selection state: stores mapping from @eN -> {backendNodeId, role, name}
+  // Per-tab state: ref map for @eN resolution + fingerprints for incremental diff
   let currentRefMap = new Map();
+  let previousFingerprints = null;
 
   async function handleCommand({ cmd, args }) {
     resetIdle();
@@ -145,8 +146,13 @@ export async function runDaemon(targetId, config) {
         }
         case 'snap': case 'snapshot': {
           const useRefs = args.includes('--refs') || args.includes('-i');
-          const snapResult = await snapshotStr(cdp, sessionId, true, useRefs);
+          const forceFull = args.includes('--full');
+          const depthArg = args.find(a => a.startsWith('--depth='));
+          const maxDepth = depthArg ? parseInt(depthArg.split('=')[1]) || 0 : 0;
+          const prevFp = forceFull ? null : previousFingerprints;
+          const snapResult = await snapshotStr(cdp, sessionId, true, useRefs, prevFp, maxDepth);
           result = snapResult.text;
+          previousFingerprints = snapResult.fingerprints;
           if (useRefs && snapResult.refMap.size > 0) {
             currentRefMap = snapResult.refMap;
           }

package/plugins/chromex/skills/chromex/scripts/mcp-server.mjs

@@ -97,10 +97,12 @@ const TOOLS = [
 
   // == INSPECT (readOnly) ==
   tool('chromex_snapshot',
-    'Accessibility tree snapshot. Prefer over HTML for page structure. Use refs=true to get @eN references for click/fill/hover.',
+    'Accessibility tree snapshot. Returns incremental diff after first call (only changed nodes). Use refs=true to get @eN references for click/fill/hover.',
     {
       target: P_TARGET,
       refs: { type: 'boolean', description: 'Assign @eN refs to interactive elements', default: false },
+      full: { type: 'boolean', description: 'Force full snapshot (skip incremental diff)', default: false },
+      depth: { type: 'number', description: 'Max tree depth (0 = unlimited)' },
     }, ['target'], RO),
 
   tool('chromex_html',
@@ -445,7 +447,13 @@ const TOOLS = [
 function toolToCmd(name, p) {
   switch (name) {
     // Inspect
-    case 'chromex_snapshot':   return { cmd: 'snap', args: p.refs ? ['--refs'] : [] };
+    case 'chromex_snapshot': {
+      const a = [];
+      if (p.refs) a.push('--refs');
+      if (p.full) a.push('--full');
+      if (p.depth) a.push(`--depth=${p.depth}`);
+      return { cmd: 'snap', args: a };
+    }
     case 'chromex_html':       return { cmd: 'html', args: p.selector ? [p.selector] : [] };
     case 'chromex_screenshot': {
       const a = [];