@zibby/mcp-browser 0.1.0 → 0.1.6

package/src/stable-id-inject.js

@@ -1,347 +0,0 @@
-/**
- * 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();
-})();