@zibby/mcp-browser 0.1.0

package/src/stable-id-inject.js

@@ -0,0 +1,347 @@
+/**
+ * Stable ID Injection Script
+ * Injected into every page via --init-script to add data-zibby-id attributes
+ * 
+ * DESIGN GOAL: 100% reliable stable IDs without relying on data-testid
+ * 
+ * Strategy:
+ * 1. Use element's intrinsic attributes (id, name, type, etc.)
+ * 2. Use element's semantic label (aria-label, associated label, text content)
+ * 3. Use element's semantic context (which form, which section, which landmark)
+ * 4. Hash everything for a unique, stable ID
+ */
+(function() {
+  if (window.__zibbyInitialized) return;
+  window.__zibbyInitialized = true;
+
+  /**
+   * Get the semantic label for an element
+   * This is what a user would call the element
+   */
+  function getSemanticLabel(el) {
+    // 1. aria-label is explicit
+    if (el.getAttribute('aria-label')) return el.getAttribute('aria-label').trim();
+    
+    // 2. aria-labelledby
+    const labelledBy = el.getAttribute('aria-labelledby');
+    if (labelledBy) {
+      const labelEl = document.getElementById(labelledBy);
+      if (labelEl) return labelEl.textContent.trim();
+    }
+    
+    // 3. For form fields, check associated <label>
+    if (el.id) {
+      const label = document.querySelector(`label[for="${el.id}"]`);
+      if (label) return label.textContent.trim();
+    }
+    
+    // 4. Check if wrapped in <label>
+    const parentLabel = el.closest('label');
+    if (parentLabel) {
+      // Get label text without the input's value
+      const clone = parentLabel.cloneNode(true);
+      clone.querySelectorAll('input, select, textarea').forEach(e => e.remove());
+      const text = clone.textContent.trim();
+      if (text) return text;
+    }
+    
+    // 5. placeholder for inputs
+    if (el.placeholder) return el.placeholder;
+    
+    // 6. Text content for buttons/links
+    const tag = el.tagName.toLowerCase();
+    if (tag === 'button' || tag === 'a' || el.getAttribute('role') === 'button') {
+      return (el.textContent || '').trim().slice(0, 50);
+    }
+    
+    // 7. title attribute
+    if (el.title) return el.title;
+    
+    // 8. value for submit buttons
+    if (tag === 'input' && (el.type === 'submit' || el.type === 'button')) {
+      return el.value || '';
+    }
+    
+    return '';
+  }
+
+  /**
+   * Get semantic context - which form/section/landmark the element is in
+   * This distinguishes elements with same attributes in different contexts
+   */
+  function getSemanticContext(el) {
+    const context = [];
+    
+    // 1. Form context (most important for form elements)
+    const form = el.closest('form');
+    if (form) {
+      // Use form's identity
+      if (form.id) context.push('form#' + form.id);
+      else if (form.name) context.push('form[name=' + form.name + ']');
+      else if (form.action) {
+        try {
+          const action = new URL(form.action, window.location.origin).pathname;
+          context.push('form[action=' + action + ']');
+        } catch {
+          context.push('form[action=' + form.getAttribute('action') + ']');
+        }
+      } else {
+        // Count which form this is on the page
+        const forms = document.querySelectorAll('form');
+        const index = Array.from(forms).indexOf(form);
+        context.push('form:nth(' + index + ')');
+      }
+    }
+    
+    // 2. Landmark context (header, nav, main, footer, aside)
+    const landmark = el.closest('header, nav, main, footer, aside, [role="banner"], [role="navigation"], [role="main"], [role="contentinfo"]');
+    if (landmark) {
+      const tag = landmark.tagName.toLowerCase();
+      const role = landmark.getAttribute('role');
+      context.push(role || tag);
+    }
+    
+    // 3. Section with heading
+    const section = el.closest('section, article, [role="region"]');
+    if (section) {
+      const heading = section.querySelector('h1, h2, h3, h4, h5, h6');
+      if (heading) {
+        context.push('section:' + heading.textContent.trim().slice(0, 30));
+      }
+    }
+    
+    // 4. Fieldset context
+    const fieldset = el.closest('fieldset');
+    if (fieldset) {
+      const legend = fieldset.querySelector('legend');
+      if (legend) {
+        context.push('fieldset:' + legend.textContent.trim());
+      }
+    }
+    
+    // 5. Dialog/modal context
+    const dialog = el.closest('dialog, [role="dialog"], [role="alertdialog"]');
+    if (dialog) {
+      const title = dialog.querySelector('[role="heading"], h1, h2, h3');
+      if (title) context.push('dialog:' + title.textContent.trim().slice(0, 30));
+      else context.push('dialog');
+    }
+    
+    return context.join('/');
+  }
+
+  /**
+   * Compute stable ID for an element
+   * Combines: tag, attributes, semantic label, semantic context
+   */
+  function computeStableId(el) {
+    const tag = el.tagName.toLowerCase();
+    const id = el.id || '';
+    const name = el.name || '';
+    const type = el.type || '';
+    const role = el.getAttribute('role') || '';
+    
+    // Safely extract href pathname
+    let href = '';
+    if (el.href) {
+      try {
+        href = new URL(el.href, window.location.origin).pathname.slice(0, 50);
+      } catch {
+        // Fallback if URL construction fails (e.g., about:blank pages)
+        href = el.getAttribute('href')?.slice(0, 50) || '';
+      }
+    }
+    
+    // Get semantic label (what user calls this element)
+    const label = getSemanticLabel(el).slice(0, 50).replace(/\s+/g, ' ');
+    
+    // Get semantic context (where this element is)
+    const context = getSemanticContext(el);
+    
+    // Build signature with all identifying info
+    const sig = [
+      tag,
+      id,
+      name, 
+      type,
+      role,
+      href,
+      label,
+      context
+    ].join('|');
+    
+    // djb2 hash - fast and good distribution
+    let hash = 5381;
+    for (let i = 0; i < sig.length; i++) {
+      hash = ((hash << 5) + hash) ^ sig.charCodeAt(i);
+    }
+    
+    return 'zibby-' + (hash >>> 0).toString(36);
+  }
+
+  function injectStableIds() {
+    if (!document.body) return;
+    
+    const selectors = [
+      'button', 'a', 'input', 'select', 'textarea',
+      'label[for]',  // Labels that control inputs
+      '[role="button"]', '[role="link"]', '[role="textbox"]',
+      '[role="checkbox"]', '[role="radio"]', '[role="combobox"]',
+      '[role="menuitem"]', '[role="tab"]', '[role="option"]',
+      '[role="switch"]', '[role="slider"]',
+      '[onclick]', '[data-action]'
+    ].join(', ');
+
+    const idCounts = new Map();
+    
+    try {
+      document.querySelectorAll(selectors).forEach((el) => {
+        // Skip hidden elements
+        const style = window.getComputedStyle(el);
+        if (style.display === 'none' || style.visibility === 'hidden') return;
+        
+        let stableId = computeStableId(el);
+        
+        // Handle duplicates (same ID means truly identical elements)
+        const baseId = stableId;
+        const count = idCounts.get(baseId) || 0;
+        if (count > 0) stableId = baseId + '-' + count;
+        idCounts.set(baseId, count + 1);
+        
+        el.setAttribute('data-zibby-id', stableId);
+      });
+    } catch (e) {
+      console.error('[Zibby] Error injecting stable IDs:', e);
+    }
+  }
+
+  function initialize() {
+    if (!document.body) {
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initialize);
+        return;
+      }
+    }
+
+    injectStableIds();
+
+    // Re-inject on DOM changes (for SPAs)
+    const observer = new MutationObserver(() => {
+      requestAnimationFrame(injectStableIds);
+    });
+    
+    if (document.body) {
+      observer.observe(document.body, { childList: true, subtree: true });
+    }
+  }
+
+  // Expose helper for getting stable ID
+  window.__zibbyGetStableId = function(element) {
+    return element?.getAttribute('data-zibby-id') || null;
+  };
+
+  // Track last interacted element - use cookie to persist across subdomains!
+  // Cookie approach works for: login.example.com -> hr.example.com
+  function getBaseDomain() {
+    const parts = window.location.hostname.split('.');
+    // Get root domain (e.g., example.com from app.example.com)
+    return parts.length >= 2 ? '.' + parts.slice(-2).join('.') : window.location.hostname;
+  }
+  
+  Object.defineProperty(window, '__zibbyLastStableId', {
+    get: function() {
+      const match = document.cookie.match(/(?:^|; )__zibbyLastStableId=([^;]*)/);
+      return match ? decodeURIComponent(match[1]) : null;
+    },
+    set: function(value) {
+      if (value) {
+        // Set cookie with domain to share across subdomains, expires in 1 hour
+        const domain = getBaseDomain();
+        document.cookie = `__zibbyLastStableId=${encodeURIComponent(value)}; domain=${domain}; path=/; max-age=3600; SameSite=Lax`;
+      }
+    }
+  });
+  
+  /**
+   * Find the actual interactive element from an event target
+   * Handles: label clicks that activate inputs, etc.
+   */
+  function findInteractiveElement(target) {
+    // 1. Direct match
+    const el = target.closest('[data-zibby-id]');
+    if (el) return el;
+    
+    // 2. If clicking a label, find its associated input
+    const label = target.closest('label');
+    if (label) {
+      // Check for explicit "for" attribute
+      if (label.htmlFor) {
+        const input = document.getElementById(label.htmlFor);
+        if (input?.getAttribute('data-zibby-id')) return input;
+      }
+      // Check for nested input
+      const nestedInput = label.querySelector('input, select, textarea, [role="checkbox"], [role="radio"]');
+      if (nestedInput?.getAttribute('data-zibby-id')) return nestedInput;
+    }
+    
+    // 3. Check if we're inside a custom component that wraps an input
+    const parent = target.closest('[class*="select"], [class*="dropdown"], [class*="checkbox"], [class*="radio"]');
+    if (parent) {
+      const input = parent.querySelector('[data-zibby-id]');
+      if (input) return input;
+    }
+    
+    return null;
+  }
+  
+  /**
+   * Get stable ID for an element - either existing or computed on-the-fly
+   * This handles race conditions where IDs haven't been injected yet
+   */
+  function getOrComputeStableId(el) {
+    if (!el) return null;
+    
+    // 1. Already has stable ID
+    const existingId = el.getAttribute('data-zibby-id');
+    if (existingId) return existingId;
+    
+    // 2. Compute on-the-fly and inject
+    const stableId = computeStableId(el);
+    el.setAttribute('data-zibby-id', stableId);
+    return stableId;
+  }
+  
+  document.addEventListener('click', (e) => {
+    // Try to find element with existing ID first
+    let target = findInteractiveElement(e.target);
+    
+    // If no match, compute ID for the clicked element itself
+    if (!target && e.target.matches('button, a, input, select, textarea, [role="button"], [onclick]')) {
+      target = e.target;
+    }
+    
+    if (target) {
+      window.__zibbyLastStableId = getOrComputeStableId(target);
+    }
+  }, true);
+  
+  document.addEventListener('focusin', (e) => {
+    let target = findInteractiveElement(e.target);
+    if (!target && e.target.matches('input, select, textarea, [role="textbox"], [role="combobox"]')) {
+      target = e.target;
+    }
+    if (target) {
+      window.__zibbyLastStableId = getOrComputeStableId(target);
+    }
+  }, true);
+  
+  document.addEventListener('change', (e) => {
+    let target = findInteractiveElement(e.target);
+    if (!target) target = e.target;
+    if (target) {
+      window.__zibbyLastStableId = getOrComputeStableId(target);
+    }
+  }, true);
+
+  initialize();
+})();