cdp-skill 1.0.16 → 1.0.17

package/scripts/aria/role-query.js

@@ -0,0 +1,295 @@
+import { createQueryOutputProcessor } from './output-processor.js';
+
+// ============================================================================
+// Role Query Executor (from RoleQueryExecutor.js)
+// ============================================================================
+
+/**
+ * Create a role query executor for advanced role-based queries
+ * @param {Object} session - CDP session
+ * @param {Object} elementLocator - Element locator instance
+ * @returns {Object} Role query executor interface
+ */
+export function createRoleQueryExecutor(session, elementLocator, options = {}) {
+  const getFrameContext = options.getFrameContext || null;
+  const outputProcessor = createQueryOutputProcessor(session);
+
+  async function releaseObject(objectId) {
+    try {
+      await session.send('Runtime.releaseObject', { objectId });
+    } catch {
+      // Ignore
+    }
+  }
+
+  /**
+   * Query elements by one or more roles
+   * @param {string[]} roles - Array of roles to query
+   * @param {Object} filters - Filter options
+   * @returns {Promise<Object[]>} Array of element handles
+   */
+  async function queryByRoles(roles, filters) {
+    const { name, nameExact, nameRegex, checked, disabled, level } = filters;
+
+    // Map ARIA roles to common HTML element selectors
+    const ROLE_SELECTORS = {
+      button: ['button', 'input[type="button"]', 'input[type="submit"]', 'input[type="reset"]', '[role="button"]'],
+      textbox: ['input:not([type])', 'input[type="text"]', 'input[type="email"]', 'input[type="password"]', 'input[type="search"]', 'input[type="tel"]', 'input[type="url"]', 'textarea', '[role="textbox"]'],
+      checkbox: ['input[type="checkbox"]', '[role="checkbox"]'],
+      link: ['a[href]', '[role="link"]'],
+      heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', '[role="heading"]'],
+      listitem: ['li', '[role="listitem"]'],
+      option: ['option', '[role="option"]'],
+      combobox: ['select', '[role="combobox"]'],
+      radio: ['input[type="radio"]', '[role="radio"]'],
+      img: ['img[alt]', '[role="img"]'],
+      tab: ['[role="tab"]'],
+      tabpanel: ['[role="tabpanel"]'],
+      menu: ['[role="menu"]'],
+      menuitem: ['[role="menuitem"]'],
+      dialog: ['dialog', '[role="dialog"]'],
+      alert: ['[role="alert"]'],
+      navigation: ['nav', '[role="navigation"]'],
+      main: ['main', '[role="main"]'],
+      search: ['[role="search"]'],
+      form: ['form', '[role="form"]']
+    };
+
+    // Build selectors for all requested roles
+    const allSelectors = [];
+    for (const r of roles) {
+      const selectors = ROLE_SELECTORS[r] || [`[role="${r}"]`];
+      allSelectors.push(...selectors);
+    }
+    const selectorString = allSelectors.join(', ');
+
+    // Build filter conditions
+    const nameFilter = (name !== undefined && name !== null) ? JSON.stringify(name) : null;
+    const nameExactFlag = nameExact === true;
+    const nameRegexPattern = nameRegex ? JSON.stringify(nameRegex) : null;
+    const checkedFilter = checked !== undefined ? checked : null;
+    const disabledFilter = disabled !== undefined ? disabled : null;
+    const levelFilter = level !== undefined ? level : null;
+    const rolesForLevel = roles; // For heading level detection
+
+    const expression = `
+      (function() {
+        const selectors = ${JSON.stringify(selectorString)};
+        const nameFilter = ${nameFilter};
+        const nameExact = ${nameExactFlag};
+        const nameRegex = ${nameRegexPattern};
+        const checkedFilter = ${checkedFilter !== null ? checkedFilter : 'null'};
+        const disabledFilter = ${disabledFilter !== null ? disabledFilter : 'null'};
+        const levelFilter = ${levelFilter !== null ? levelFilter : 'null'};
+        const rolesForLevel = ${JSON.stringify(rolesForLevel)};
+
+        const elements = Array.from(document.querySelectorAll(selectors));
+
+        return elements.filter(el => {
+          // Filter by accessible name if specified
+          if (nameFilter !== null || nameRegex !== null) {
+            const accessibleName = (
+              el.getAttribute('aria-label') ||
+              el.textContent?.trim() ||
+              el.getAttribute('title') ||
+              el.getAttribute('placeholder') ||
+              el.value ||
+              ''
+            );
+
+            if (nameFilter !== null) {
+              if (nameExact) {
+                // Exact match
+                if (accessibleName !== nameFilter) return false;
+              } else {
+                // Contains match (case-insensitive)
+                if (!accessibleName.toLowerCase().includes(nameFilter.toLowerCase())) return false;
+              }
+            }
+
+            if (nameRegex !== null) {
+              // Regex match
+              try {
+                const regex = new RegExp(nameRegex);
+                if (!regex.test(accessibleName)) return false;
+              } catch (e) {
+                // Invalid regex, skip filter
+              }
+            }
+          }
+
+          // Filter by checked state if specified
+          if (checkedFilter !== null) {
+            const isChecked = el.checked === true || el.getAttribute('aria-checked') === 'true';
+            if (isChecked !== checkedFilter) return false;
+          }
+
+          // Filter by disabled state if specified
+          if (disabledFilter !== null) {
+            const isDisabled = el.disabled === true || el.getAttribute('aria-disabled') === 'true';
+            if (isDisabled !== disabledFilter) return false;
+          }
+
+          // Filter by heading level if specified
+          if (levelFilter !== null && rolesForLevel.includes('heading')) {
+            const tagName = el.tagName.toLowerCase();
+            let headingLevel = null;
+
+            // Check aria-level first
+            const ariaLevel = el.getAttribute('aria-level');
+            if (ariaLevel) {
+              headingLevel = parseInt(ariaLevel, 10);
+            } else if (tagName.match(/^h[1-6]$/)) {
+              // Extract level from h1-h6 tag
+              headingLevel = parseInt(tagName.charAt(1), 10);
+            }
+
+            if (headingLevel !== levelFilter) return false;
+          }
+
+          return true;
+        });
+      })()
+    `;
+
+    let result;
+    try {
+      const evalArgs = { expression, returnByValue: false };
+      if (getFrameContext) {
+        const contextId = getFrameContext();
+        if (contextId) evalArgs.contextId = contextId;
+      }
+      result = await session.send('Runtime.evaluate', evalArgs);
+    } catch (error) {
+      throw new Error(`Role query error: ${error.message}`);
+    }
+
+    if (result.exceptionDetails) {
+      throw new Error(`Role query error: ${result.exceptionDetails.text}`);
+    }
+
+    if (!result.result.objectId) return [];
+
+    const arrayObjectId = result.result.objectId;
+    let props;
+    try {
+      props = await session.send('Runtime.getProperties', {
+        objectId: arrayObjectId,
+        ownProperties: true
+      });
+    } catch (error) {
+      await releaseObject(arrayObjectId);
+      throw new Error(`Role query error: ${error.message}`);
+    }
+
+    const { createElementHandle } = await import('../dom/element-handle.js');
+    const elements = props.result
+      .filter(p => /^\d+$/.test(p.name) && p.value && p.value.objectId)
+      .map(p => createElementHandle(session, p.value.objectId, {
+        selector: `[role="${roles.join('|')}"]`
+      }));
+
+    await releaseObject(arrayObjectId);
+    return elements;
+  }
+
+  /**
+   * Execute a role-based query with advanced options
+   * @param {Object} params - Query parameters
+   * @returns {Promise<Object>} Query results
+   */
+  async function execute(params) {
+    const {
+      role,
+      name,
+      nameExact,
+      nameRegex,
+      checked,
+      disabled,
+      level,
+      limit = 10,
+      output = 'text',
+      clean = false,
+      metadata = false,
+      countOnly = false,
+      refs = false
+    } = params;
+
+    // Handle compound roles
+    const roles = Array.isArray(role) ? role : [role];
+
+    // Build query expression
+    const elements = await queryByRoles(roles, {
+      name,
+      nameExact,
+      nameRegex,
+      checked,
+      disabled,
+      level
+    });
+
+    // Count-only mode
+    if (countOnly) {
+      // Dispose all elements
+      for (const el of elements) {
+        try { await el.dispose(); } catch { /* ignore */ }
+      }
+
+      return {
+        role: roles.length === 1 ? roles[0] : roles,
+        total: elements.length,
+        countOnly: true
+      };
+    }
+
+    const results = [];
+    const count = Math.min(elements.length, limit);
+
+    for (let i = 0; i < count; i++) {
+      const el = elements[i];
+      try {
+        const resultItem = {
+          index: i + 1,
+          value: await outputProcessor.processOutput(el, output, { clean })
+        };
+
+        // Add element metadata if requested
+        if (metadata) {
+          resultItem.metadata = await outputProcessor.getElementMetadata(el);
+        }
+
+        // Add element ref if requested
+        if (refs) {
+          resultItem.ref = el.objectId;
+        }
+
+        results.push(resultItem);
+      } catch (e) {
+        results.push({ index: i + 1, value: null, error: e.message });
+      }
+    }
+
+    // Dispose all elements
+    for (const el of elements) {
+      try { await el.dispose(); } catch { /* ignore */ }
+    }
+
+    return {
+      role: roles.length === 1 ? roles[0] : roles,
+      name: name || null,
+      nameExact: nameExact || false,
+      nameRegex: nameRegex || null,
+      checked: checked !== undefined ? checked : null,
+      disabled: disabled !== undefined ? disabled : null,
+      level: level !== undefined ? level : null,
+      total: elements.length,
+      showing: count,
+      results
+    };
+  }
+
+  return {
+    execute,
+    queryByRoles
+  };
+}

package/{src → scripts}/aria.js

@@ -475,7 +475,7 @@ export function createRoleQueryExecutor(session, elementLocator, options = {}) {
 // The snapshot script runs entirely in the browser context
 const SNAPSHOT_SCRIPT = `
 (function generateAriaSnapshot(rootSelector, options) {
-  const { mode = 'ai', maxDepth = 50, maxElements = 0, includeText = false, includeFrames = false, viewportOnly = false, pierceShadow = false, preserveRefs = false, since = null, internal = false, frameIdentifier = 'f0' } = options || {};
+  const { mode = 'ai', maxDepth = 50, maxElements = 0, maxNameLength = 150, includeText = false, includeFrames = false, viewportOnly = false, pierceShadow = false, preserveRefs = false, since = null, internal = false, frameIdentifier = 'f0' } = options || {};
 
   // Viewport dimensions for viewport-only mode
   const viewportWidth = window.innerWidth;
@@ -628,7 +628,7 @@ const SNAPSHOT_SCRIPT = `
     'searchbox', 'slider', 'spinbutton', 'textbox', 'tree'];
 
   // Interactable roles for AI mode
-  const INTERACTABLE_ROLES = ['button', 'checkbox', 'combobox', 'link', 'listbox', 'menuitem',
+  const INTERACTABLE_ROLES = ['button', 'checkbox', 'combobox', 'heading', 'link', 'listbox', 'menuitem',
     'menuitemcheckbox', 'menuitemradio', 'option', 'radio', 'searchbox', 'slider', 'spinbutton',
     'switch', 'tab', 'textbox', 'treeitem'];
 
@@ -766,6 +766,11 @@ const SNAPSHOT_SCRIPT = `
     return text.replace(/\\s+/g, ' ').trim();
   }
 
+  function truncateName(text) {
+    if (!text || maxNameLength <= 0 || text.length <= maxNameLength) return text;
+    return text.substring(0, maxNameLength) + '…';
+  }
+
   function getCheckedState(el, role) {
     if (!CHECKED_ROLES.includes(role)) return undefined;
 
@@ -1017,7 +1022,7 @@ const SNAPSHOT_SCRIPT = `
     if (mode === 'ai' && !visible) return null;
 
     const role = getAriaRole(el);
-    const name = getAccessibleName(el);
+    const name = truncateName(getAccessibleName(el));
 
     // Skip elements without semantic meaning
     if (!role && mode === 'ai') {
@@ -1415,6 +1420,7 @@ export function createAriaSnapshot(session, options = {}) {
    * @param {string} options.detail - Detail level: 'summary', 'interactive', or 'full' (default: 'full')
    * @param {number} options.maxDepth - Maximum tree depth (default: 50)
    * @param {number} options.maxElements - Maximum elements to include (default: unlimited)
+   * @param {number} options.maxNameLength - Truncate accessible names longer than this (default: 150, 0 to disable)
    * @param {boolean} options.includeText - Include static text nodes in output (default: false for ai mode)
    * @param {boolean} options.includeFrames - Include same-origin iframe content (default: false)
    * @param {boolean} options.viewportOnly - Only include elements visible in viewport (default: false)
@@ -1424,13 +1430,13 @@ export function createAriaSnapshot(session, options = {}) {
    * @returns {Promise<Object>} Snapshot result with tree, yaml, refs, and snapshotId
    */
   async function generate(options = {}) {
-    const { root = null, mode = 'ai', detail = 'full', maxDepth = 50, maxElements = 0, includeText = false, includeFrames = false, viewportOnly = false, pierceShadow = false, preserveRefs = false, since = null, internal = false } = options;
+    const { root = null, mode = 'ai', detail = 'full', maxDepth = 50, maxElements = 0, maxNameLength = 150, includeText = false, includeFrames = false, viewportOnly = false, pierceShadow = false, preserveRefs = false, since = null, internal = false } = options;
 
     // Get frame identifier for ref generation (f0 for main frame, f1, f2, etc. for iframes)
     const frameIdentifier = getFrameIdentifier ? await getFrameIdentifier() : 'f0';
 
     const evalArgs = {
-      expression: `(${SNAPSHOT_SCRIPT})(${JSON.stringify(root)}, ${JSON.stringify({ mode, detail, maxDepth, maxElements, includeText, includeFrames, viewportOnly, pierceShadow, preserveRefs, since, internal, frameIdentifier })})`,
+      expression: `(${SNAPSHOT_SCRIPT})(${JSON.stringify(root)}, ${JSON.stringify({ mode, detail, maxDepth, maxElements, maxNameLength, includeText, includeFrames, viewportOnly, pierceShadow, preserveRefs, since, internal, frameIdentifier })})`,
       returnByValue: true,
       awaitPromise: false
     };

package/{src → scripts}/capture/console-capture.js

@@ -122,18 +122,20 @@ export function createConsoleCapture(session, options = {}) {
   async function stopCapture() {
     if (!capturing) return;
 
-    if (handlers.consoleAPICalled) {
-      session.off('Runtime.consoleAPICalled', handlers.consoleAPICalled);
+    try {
+      if (handlers.consoleAPICalled) {
+        session.off('Runtime.consoleAPICalled', handlers.consoleAPICalled);
+      }
+      if (handlers.exceptionThrown) {
+        session.off('Runtime.exceptionThrown', handlers.exceptionThrown);
+      }
+
+      await session.send('Runtime.disable');
+    } finally {
       handlers.consoleAPICalled = null;
-    }
-    if (handlers.exceptionThrown) {
-      session.off('Runtime.exceptionThrown', handlers.exceptionThrown);
       handlers.exceptionThrown = null;
+      capturing = false;
     }
-
-    await session.send('Runtime.disable');
-
-    capturing = false;
   }
 
   /**

package/{src → scripts}/capture/screenshot-capture.js

@@ -86,14 +86,15 @@ export function createScreenshotCapture(session, options = {}) {
       };
     }
 
-    const result = await session.send('Page.captureScreenshot', params);
-
-    // Reset background override if we changed it
-    if (captureOptions.omitBackground) {
-      await session.send('Emulation.setDefaultBackgroundColorOverride');
+    try {
+      const result = await session.send('Page.captureScreenshot', params);
+      return Buffer.from(result.data, 'base64');
+    } finally {
+      // Reset background override even if screenshot fails
+      if (captureOptions.omitBackground) {
+        await session.send('Emulation.setDefaultBackgroundColorOverride');
+      }
     }
-
-    return Buffer.from(result.data, 'base64');
   }
 
   /**
@@ -226,7 +227,6 @@ export function createScreenshotCapture(session, options = {}) {
    */
   async function captureToFile(filePath, captureOptions = {}, elementLocator = null) {
     let buffer;
-    let elementBox = null;
 
     // Support element screenshot via selector
     if (captureOptions.selector && elementLocator) {
@@ -241,7 +241,6 @@ export function createScreenshotCapture(session, options = {}) {
         throw new Error(`Element has no visible dimensions: ${captureOptions.selector}`);
       }
 
-      elementBox = box;
       buffer = await captureElement(box, captureOptions);
     } else if (captureOptions.fullPage) {
       buffer = await captureFullPage(captureOptions);

package/{src → scripts}/cdp/connection.js

@@ -121,6 +121,7 @@ export function createConnection(wsUrl, options = {}) {
       connected = false;
       connecting = false;
       rejectPendingCommands('Connection closed');
+      emit('__connection_closed');
 
       if (wasConnected && !intentionalClose && autoReconnect) {
         attemptReconnect();
@@ -164,13 +165,24 @@ export function createConnection(wsUrl, options = {}) {
 
   function doReconnect() {
     return new Promise((resolve, reject) => {
-      ws = new WebSocket(wsUrl);
-      ws.addEventListener('open', () => {
+      // Close old WebSocket if still open to prevent stale event handlers
+      if (ws) {
+        try { ws.close(); } catch { /* already closed */ }
+        ws = null;
+      }
+
+      const newWs = new WebSocket(wsUrl);
+
+      newWs.addEventListener('open', () => {
+        ws = newWs;
         connected = true;
         setupWebSocketListeners();
         resolve();
       });
-      ws.addEventListener('error', (event) => {
+
+      newWs.addEventListener('error', (event) => {
+        // Don't assign to ws if connection failed
+        try { newWs.close(); } catch { /* already closing */ }
         reject(new Error(`CDP reconnection error: ${event.message || 'Connection failed'}`));
       });
     });
@@ -206,6 +218,7 @@ export function createConnection(wsUrl, options = {}) {
         connected = false;
         connecting = false;
         rejectPendingCommands('Connection closed');
+        emit('__connection_closed');
 
         if (wasConnected && !intentionalClose && autoReconnect) {
           attemptReconnect();
@@ -300,20 +313,31 @@ export function createConnection(wsUrl, options = {}) {
    */
   function waitForEvent(event, predicate = () => true, timeout = 30000) {
     return new Promise((resolve, reject) => {
-      const timer = setTimeout(() => {
+      function cleanup() {
+        clearTimeout(timer);
         off(event, handler);
+        off('__connection_closed', closeHandler);
+      }
+
+      const timer = setTimeout(() => {
+        cleanup();
         reject(new Error(`Timeout waiting for event: ${event}`));
       }, timeout);
 
       const handler = (params) => {
         if (predicate(params)) {
-          clearTimeout(timer);
-          off(event, handler);
+          cleanup();
           resolve(params);
         }
       };
 
+      const closeHandler = () => {
+        cleanup();
+        reject(new Error(`Connection closed while waiting for event: ${event}`));
+      };
+
       on(event, handler);
+      on('__connection_closed', closeHandler);
     });
   }
 

package/{src → scripts}/cdp-skill.js

@@ -6,9 +6,9 @@
  * or reads from stdin (fallback).
  *
  * Usage:
- *   node src/cdp-skill.js '{"steps":[{"goto":"https://google.com"}]}'
- *   echo '{"steps":[...]}' | node src/cdp-skill.js
- *   node src/cdp-skill.js --debug '{"steps":[...]}'  # Enable debug logging
+ *   node scripts/cdp-skill.js '{"steps":[{"goto":"https://google.com"}]}'
+ *   echo '{"steps":[...]}' | node scripts/cdp-skill.js
+ *   node scripts/cdp-skill.js --debug '{"steps":[...]}'  # Enable debug logging
  */
 
 import { createBrowser, getChromeStatus } from './cdp/index.js';
@@ -62,7 +62,8 @@ function generateDebugFilename(steps, status, tabId) {
     const actionKeys = ['goto', 'click', 'fill', 'type', 'press', 'scroll', 'snapshot',
       'query', 'hover', 'wait', 'sleep', 'pageFunction', 'newTab', 'closeTab',
       'selectOption', 'select', 'viewport', 'cookies', 'back', 'forward', 'drag',
-      'frame', 'elementsAt', 'extract', 'formState', 'assert', 'validate', 'submit'];
+      'frame', 'elementsAt', 'extract', 'formState', 'assert', 'validate', 'submit',
+      'upload'];
     for (const key of actionKeys) {
       if (step[key] !== undefined) return key;
     }
@@ -507,7 +508,7 @@ async function main() {
 
     // Extract top-level fields
     const tab = json.tab || null;
-    const timeout = json.timeout || 30000;
+    const timeout = json.timeout ?? 30000;
     let host = 'localhost';
     let port = 9222;
     let headless = false;
@@ -689,7 +690,7 @@ async function main() {
     const frameContextProvider = () => pageController.getFrameContext();
     const frameIdentifierProvider = () => pageController.getFrameIdentifier();
     const elementLocator = createElementLocator(session, { getFrameContext: frameContextProvider });
-    const inputEmulator = createInputEmulator(session);
+    const inputEmulator = createInputEmulator(session, { getFrameContext: frameContextProvider });
     const screenshotCapture = createScreenshotCapture(session);
     const consoleCapture = createConsoleCapture(session);
     const pdfCapture = createPdfCapture(session);

package/{src → scripts}/diff.js

@@ -19,9 +19,10 @@ export function createSnapshotDiffer() {
 
     const lines = yaml.split('\n');
     for (const line of lines) {
-      // Match lines like: - button "Submit" [ref=s1e1]
-      // Or: - heading "Title" [level=1] [ref=s2e3]
-      const refMatch = line.match(/\[ref=(s\d+e\d+)\]/);
+      // Match lines like: - button "Submit" [ref=f0s1e1]
+      // Or: - heading "Title" [level=1] [ref=f0s2e3]
+      // Ref format: f{frameId}s{snapshotId}e{elementNumber} where frameId can be a number or [name]
+      const refMatch = line.match(/\[ref=(f(?:\d+|\[[^\]]+\])s\d+e\d+)\]/);
       if (refMatch) {
         const ref = refMatch[1];
 
@@ -126,16 +127,16 @@ export function createSnapshotDiffer() {
   }
 
   /**
-   * Extract ref from a line like "- link \"text\" [ref=s1e42]"
+   * Extract ref from a line like "- link \"text\" [ref=f0s1e42]"
    */
   function extractRef(line) {
-    const match = line.match(/\[ref=(s\d+e\d+)\]/);
+    const match = line.match(/\[ref=(f(?:\d+|\[[^\]]+\])s\d+e\d+)\]/);
     return match ? match[1] : null;
   }
 
   /**
    * Format refs as a compact list
-   * e.g., [s1e1, s1e2, s1e5] -> "s1e1, s1e2, s1e5"
+   * e.g., [f0s1e1, f0s1e2, f0s1e5] -> "f0s1e1, f0s1e2, f0s1e5"
    */
   function formatRefs(lines, maxRefs = 10) {
     const refs = lines.map(extractRef).filter(Boolean);

package/{src → scripts}/dom/LazyResolver.js

@@ -417,16 +417,20 @@ export function createLazyResolver(session, options = {}) {
           return null;
         }
 
-        // Collect all shadow roots
-        const shadowHosts = document.querySelectorAll('*');
-        for (const host of shadowHosts) {
-          if (host.shadowRoot) {
-            const result = searchInRoot(host.shadowRoot, []);
+        // Walk the tree to find shadow roots (avoids querySelectorAll('*'))
+        function walkForShadowRoots(node) {
+          if (node.shadowRoot) {
+            const result = searchInRoot(node.shadowRoot, []);
             if (result) return result;
           }
+          const children = node.children || [];
+          for (const child of children) {
+            const result = walkForShadowRoots(child);
+            if (result) return result;
+          }
+          return null;
         }
-
-        return null;
+        return walkForShadowRoots(document.body);
       })()
     `;
 
@@ -474,20 +478,27 @@ export function createLazyResolver(session, options = {}) {
             return rect.width > 0 && rect.height > 0;
           }
 
-          const shadowHosts = document.querySelectorAll('*');
-          for (const host of shadowHosts) {
-            if (host.shadowRoot) {
+          function walkForShadowRoots(node) {
+            if (node.shadowRoot) {
               const selectors = ROLE_SELECTORS[targetRole] || ['[role="' + targetRole + '"]'];
-              const elements = host.shadowRoot.querySelectorAll(selectors.join(', '));
+              const elements = node.shadowRoot.querySelectorAll(selectors.join(', '));
               for (const el of elements) {
                 if (!isVisible(el)) continue;
                 const elName = getAccessibleName(el);
                 if (targetName && !elName.toLowerCase().includes(targetName.toLowerCase())) continue;
                 return el;
               }
+              const found = walkForShadowRoots(node.shadowRoot);
+              if (found) return found;
+            }
+            const children = node.children || [];
+            for (const child of children) {
+              const found = walkForShadowRoots(child);
+              if (found) return found;
             }
+            return null;
           }
-          return null;
+          return walkForShadowRoots(document.body);
         })()
       `;