Nanobrowser 源代码解析：可点击元素检测与哈希去重——智能体怎么「看」页面

async function _buildDomTree(
  tabId: number,
  url: string,
  showHighlightElements = true,
  focusElement = -1,
  viewportExpansion = 0,
  debugMode = false,
): Promise<[DOMElementNode, Map<number, DOMElementNode>]> {
  // about:blank 或 chrome:// 页面返回最小 DOM 树
  if (isNewTabPage(url) || url.startsWith('chrome://')) {
    const elementTree = new DOMElementNode({
      tagName: 'body',
      xpath: '', attributes: {}, children: [],
      isVisible: false, isInteractive: false,
      isTopElement: false, isInViewport: false,
      parent: null,
    });
    return [elementTree, new Map()];
  }
 
  // 注入 buildDomTree 到页面
  await injectBuildDomTreeScripts(tabId);
 
  // 在主 frame 中执行 buildDomTree
  const mainFrameResult = await chrome.scripting.executeScript({
    target: { tabId },
    func: args => window.buildDomTree(args),
    args: [{ showHighlightElements, focusHighlightIndex: focusElement,
             viewportExpansion, startId: 0, startHighlightIndex: 0, debugMode }],
  });
  // ... 后续用 _constructDomTree 将原始节点转为 DOMElementNode 树
}

export function getClickableElements(
  domElement: DOMElementNode
): DOMElementNode[] {
  const clickableElements: DOMElementNode[] = [];
  const stack: DOMElementNode[] = [];
 
  // 根节点的所有子节点逆序入栈
  for (let i = domElement.children.length - 1; i >= 0; i--) {
    const child = domElement.children[i];
    if (child instanceof DOMElementNode) {
      stack.push(child);
    }
  }
 
  while (stack.length > 0) {
    const node = stack.pop() as DOMElementNode;
 
    // 当前节点有 highlightIndex → 是可点击元素
    if (node.highlightIndex !== null) {
      clickableElements.push(node);
    }
 
    // 子节点逆序入栈（保持文档顺序）
    for (let i = node.children.length - 1; i >= 0; i--) {
      const child = node.children[i];
      if (child instanceof DOMElementNode) {
        stack.push(child);
      }
    }
  }
 
  return clickableElements;
}

export async function hashDomElement(
  domElement: DOMElementNode
): Promise<string> {
  const parentBranchPath = _getParentBranchPath(domElement);
 
  // 并行计算三层哈希
  const [branchPathHash, attributesHash, xpathHash] = await Promise.all([
    _parentBranchPathHash(parentBranchPath),
    _attributesHash(domElement.attributes),
    _xpathHash(domElement.xpath),
  ]);
 
  return _hashString(
    `${branchPathHash}-${attributesHash}-${xpathHash}`
  );
}

function _getParentBranchPath(
  domElement: DOMElementNode
): string[] {
  const parents: DOMElementNode[] = [];
  let currentElement: DOMElementNode | null = domElement;
 
  while (currentElement?.parent !== null) {
    parents.push(currentElement);
    currentElement = currentElement.parent;
  }
  parents.reverse();
  // ... 生成每条路径的索引签名
}

export const DEFAULT_INCLUDE_ATTRIBUTES = [
  'title', 'type', 'checked', 'name', 'role',
  'value', 'placeholder', 'data-date-format', 'data-state',
  'alt', 'aria-checked', 'aria-label', 'aria-expanded', 'href',
];

export interface DOMState {
  elementTree: DOMElementNode;
  selectorMap: Map<number, DOMElementNode>;
}

[33]<div>User form</div>
\t[35]<button aria-label='Submit form'>Submit</button>

# 爬虫伪代码：找到页面上的"下一页"按钮
elements = await page.evaluate("""
  () => {
    const buttons = document.querySelectorAll('a, button, [role="button"]');
    return Array.from(buttons)
      .filter(el => el.offsetParent !== null)   // 可见
      .filter(el => el.textContent.includes('下一页') || 
                     el.textContent.includes('Next'))
      .map(el => ({ text: el.textContent.trim(), href: el.href }));
  }
""")

CSS 选择器：.product-card .add-to-cart
  页面改版 → class 名变化 → 失效
 
分支路径哈希：3-1-5-2
  页面改版 → 元素在树中的位置不变 → 仍然有效