agent-zero/lib/browser/extract_dom.js

function extractDOM([
  selectorLabel = "",
  selectorName = "data-a0sel3ct0r",
  guidName = "data-a0gu1d",
]) {
  let elementCounter = 0;
  const now = new Date();
  const time = [
    String(now.getHours()).padStart(2, "0"),
    String(now.getMinutes()).padStart(2, "0"),
    String(now.getSeconds()).padStart(2, "0"),
    String(now.getMilliseconds()).padStart(3, "0"),
  ].join("");
  const ignoredTags = [
    "style",
    "script",
    "meta",
    "link",
    "svg",
    "noscript",
    "path",
  ];

  // Convert number to base64 and trim unnecessary chars
  function toBase64(num) {
    const chars =
      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
    let result = "";

    do {
      result = chars[num & 63] + result;
      num = num >> 6;
    } while (num > 0);

    return result;
  }

  function isElementVisible(element) {
    // Return true for non-element nodes
    if (element.nodeType !== Node.ELEMENT_NODE) {
      return true;
    }

    const computedStyle = window.getComputedStyle(element);

    // Check if element is hidden via CSS
    if (
      computedStyle.display === "none" ||
      computedStyle.visibility === "hidden" ||
      computedStyle.opacity === "0"
    ) {
      return false;
    }

    // Check for hidden input type
    if (element.tagName === "INPUT" && element.type === "hidden") {
      return false;
    }

    // Check for hidden attribute
    if (
      element.hasAttribute("hidden") ||
      element.getAttribute("aria-hidden") === "true"
    ) {
      return false;
    }

    return true;
  }

  function convertAttribute(tag, attr) {
    let out = {
      name: attr.name,
      value:
        typeof attr.value == "string" ? attr.value : JSON.stringify(attr.value),
    };

    //excluded attributes
    if (["srcset"].includes(out.name)) return null;
    if (out.name.startsWith("data-") && out.name != selectorName) return null;

    if (out.name == "src" && out.value.startsWith("data:"))
      out.value = "data...";

    return out;
  }

  function traverseNodes(node, depth = 0, visited = new Set()) {
    // Safety checks
    if (!node) return "";
    if (depth > 1000) return "<!-- Max depth exceeded -->";

    const guid = node.getAttribute?.(guidName);
    if (guid && visited.has(guid)) {
      return `<!-- Circular reference detected at guid: ${guid} -->`;
    }

    let content = "";
    const tagName = node.tagName ? node.tagName.toLowerCase() : "";

    // Skip ignored tags
    if (tagName && ignoredTags.includes(tagName)) {
      return "";
    }

    if (node.nodeType === Node.ELEMENT_NODE) {
      // Add unique ID to the actual DOM element
      if (tagName) {
        const no = elementCounter++;
        const selector = `${no}${selectorLabel}`;
        const guid = `${time}-${selector}`;
        node.setAttribute(selectorName, selector);
        node.setAttribute(guidName, guid);
        visited.add(guid);
      }

      content += `<${tagName}`;

      // Add invisible attribute if element is not visible
      if (!isElementVisible(node)) {
        content += " invisible";
      }

      for (let attr of node.attributes) {
        const out = convertAttribute(tagName, attr);
        if (out) content += ` ${out.name}="${out.value}"`;
      }

      content += ">";

      // Handle iframes
      if (tagName === "iframe") {
        try {
          const frameId = elementCounter++;
          node.setAttribute(selectorName, frameId);
          content += `<!-- IFrame Content Placeholder ${frameId} -->`;
        } catch (e) {
          console.warn("Error marking iframe:", e);
        }
      }

      if (node.shadowRoot) {
        content += "<!-- Shadow DOM Start -->";
        for (let shadowChild of node.shadowRoot.childNodes) {
          content += traverseNodes(shadowChild, depth + 1, visited);
        }
        content += "<!-- Shadow DOM End -->";
      }

      for (let child of node.childNodes) {
        content += traverseNodes(child, depth + 1, visited);
      }

      content += `</${tagName}>`;
    } else if (node.nodeType === Node.TEXT_NODE) {
      content += node.textContent;
    } else if (node.nodeType === Node.COMMENT_NODE) {
      content += `<!--${node.textContent}-->`;
    }

    return content;
  }

  const fullHTML = traverseNodes(document.documentElement);
  return fullHTML;
}