mooncat-browser 0.1.0

package/browser-op/webplater/lib/snapshot.ts

@@ -0,0 +1,352 @@
+/**
+ * Aria snapshot - 生成 playwright ariaSnapshot() 兼容的 YAML 无障碍树。
+ *
+ * role 用 aria-query 的 getRole,accessible name 用 dom-accessibility-api,
+ * 尽量接近 Chromium 原生无障碍树。
+ *
+ * 同时维护 ref(e1, e2...)→ Element 映射,供 *Ref 动作按 ref 定位。
+ */
+import { getRole, computeAccessibleName } from 'dom-accessibility-api'
+
+/** 全局 ref → Element 映射。每次 snapshot 重建。 */
+const refToElement = new Map<string, Element>()
+let refSeq = 0
+
+export function resetRefs(): void {
+  // 清理上一次的 DOM 属性，防止旧 ref 残留污染新映射（重扫后 refSeq 从头计）
+  document
+    .querySelectorAll('[data-bee-ref]')
+    .forEach((el) => el.removeAttribute('data-bee-ref'))
+  refToElement.clear()
+  refSeq = 0
+}
+
+export function getElementByRef(ref: string): Element | undefined {
+  const cached = refToElement.get(ref)
+  if (cached && document.contains(cached)) return cached
+  // fallback：DOM 属性。MAIN world 写入、或缓存元素 detach 后重附着的兜底。
+  // data-bee-ref 跨 world 共享，是插件能用的最接近 playwright backendDOMNodeId 的机制。
+  const byAttr = document.querySelector(`[data-bee-ref="${ref}"]`)
+  if (byAttr) {
+    refToElement.set(ref, byAttr)
+    return byAttr
+  }
+  return undefined
+}
+
+// ── 节点数据结构 ──────────────────────────────────────────
+
+interface SnapshotNode {
+  role: string
+  name?: string
+  attributes?: string[]
+  ref: string
+  value?: string
+  children?: SnapshotNode[]
+}
+
+// ── 属性提取(对齐 playwright 的 [attr=value] 集合)──────
+
+const HEADING_LEVELS: Record<string, number> = {
+  H1: 1, H2: 2, H3: 3, H4: 4, H5: 5, H6: 6,
+}
+
+/** 提取 playwright snapshot 暴露的属性:checked/disabled/expanded/invalid/level/pressed/selected */
+function extractAttributes(el: Element, role: string | null): string[] {
+  const attrs: string[] = []
+
+  const disabled =
+    (el as HTMLElement).hasAttribute?.('disabled') ||
+    el.getAttribute('aria-disabled') === 'true'
+  if (disabled) attrs.push('disabled')
+
+  const ariaChecked = el.getAttribute('aria-checked')
+  if (role === 'checkbox' || role === 'radio' || role === 'menuitemcheckbox' || role === 'menuitemradio' || role === 'switch' || role === 'option' || ariaChecked != null) {
+    if (ariaChecked === 'true' || ((el as HTMLInputElement).checked === true && ariaChecked == null)) {
+      attrs.push('checked')
+    } else if (ariaChecked === 'mixed') {
+      attrs.push('checked=mixed')
+    }
+  }
+
+  const ariaExpanded = el.getAttribute('aria-expanded')
+  if (ariaExpanded != null) {
+    attrs.push(ariaExpanded === 'true' ? 'expanded' : 'expanded=false')
+  }
+
+  const ariaPressed = el.getAttribute('aria-pressed')
+  if (ariaPressed != null) {
+    attrs.push(ariaPressed === 'true' ? 'pressed' : 'pressed=false')
+  }
+
+  const ariaSelected = el.getAttribute('aria-selected')
+  if (ariaSelected === 'true') attrs.push('selected')
+
+  const ariaInvalid = el.getAttribute('aria-invalid')
+  if (ariaInvalid === 'true' || ariaInvalid === '') attrs.push('invalid')
+  else if (ariaInvalid === 'grammar') attrs.push('invalid=grammar')
+  else if (ariaInvalid === 'spelling') attrs.push('invalid=spelling')
+
+  if (role === 'heading') {
+    let level = Number(el.getAttribute('aria-level'))
+    if (!Number.isFinite(level) || level < 1) {
+      level = HEADING_LEVELS[el.tagName] ?? 0
+    }
+    if (level > 0) attrs.push(`level=${level}`)
+  }
+
+  return attrs
+}
+
+// ── 可见性 / 隐藏判断 ────────────────────────────────────
+
+function isHidden(el: Element): boolean {
+  if (el.getAttribute('aria-hidden') === 'true') return true
+  const style = (el as HTMLElement).style
+  if (style?.display === 'none' || style?.visibility === 'hidden') return true
+  if (el.hasAttribute('hidden')) return true
+  return false
+}
+
+// role 为这些时,其文本内容作为子节点(容器),否则作为叶子
+const CONTAINER_ROLES = new Set([
+  'application', 'article', 'banner', 'complementary', 'contentinfo',
+  'dialog', 'document', 'feed', 'figure', 'form', 'group', 'main',
+  'navigation', 'region', 'search', 'section', 'table', 'rowgroup',
+  'row', 'cell', 'columnheader', 'rowheader', 'list', 'listitem',
+  'menu', 'menubar', 'toolbar', 'tablist', 'tabpanel', 'tree',
+  'treegrid', 'treegroup', 'radiogroup', 'grid', 'combobox',
+])
+
+// 叶子 role:不递归子节点,文本直接作为 name 或 value
+const LEAF_ROLES = new Set([
+  'button', 'link', 'textbox', 'checkbox', 'radio', 'switch',
+  'menuitem', 'menuitemcheckbox', 'menuitemradio', 'option',
+  'tab', 'heading', 'separator', 'slider', 'spinbutton', 'progressbar',
+  'img', 'alert', 'status', 'note', 'tooltip', 'scrollbar',
+])
+
+/** 可交互 role：interactiveOnly 模式只保留这些 */
+const INTERACTIVE_ROLES = new Set([
+  'button', 'link', 'textbox', 'checkbox', 'radio', 'switch',
+  'menuitem', 'menuitemcheckbox', 'menuitemradio', 'option', 'tab',
+  'combobox', 'menu', 'menubar', 'listbox', 'treeitem', 'tree',
+  'slider', 'spinbutton', 'searchbox', 'gridcell', 'row',
+  'toolbar', 'tablist',
+])
+
+interface BuildCtx {
+  depth?: number
+  interactiveOnly?: boolean
+}
+
+/** 判断元素是否“可交互”（用于 interactiveOnly 过滤） */
+function isInteractive(el: Element, role: string | null): boolean {
+  if (role && INTERACTIVE_ROLES.has(role)) return true
+  if ((el as HTMLElement).onclick != null) return true
+  if ((el as HTMLElement).style?.cursor === 'pointer') return true
+  const tag = el.tagName
+  if (tag === 'A' || tag === 'BUTTON' || tag === 'INPUT' || tag === 'SELECT' || tag === 'TEXTAREA') return true
+  return false
+}
+
+/** 元素的"直接文本"(用于无 role 但有文本的 text 节点)。超长截断,防止 inline script/style 喜炸。 */
+function directText(el: Element): string {
+  let text = ''
+  for (const node of Array.from(el.childNodes)) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      text += (node.textContent || '') + ' '
+    }
+  }
+  text = text.replace(/\s+/g, ' ').trim()
+  if (text.length > 200) text = text.slice(0, 200) + '...'
+  return text
+}
+
+function nextRef(el: Element): string {
+  const ref = `e${++refSeq}`
+  refToElement.set(ref, el)
+  // 打 DOM 属性：让 MAIN world 的 evaluate 也能用 aria-ref=eN 定位同一元素，
+  // 对齐 playwright ref 的“上下文无关”特性。
+  try {
+    el.setAttribute('data-bee-ref', ref)
+  } catch {
+    // 忽略只读 / SVG 等无法 setAttribute 的元素
+  }
+  return ref
+}
+
+// ── 树构建 ────────────────────────────────────────────────
+
+/** 这些标签不产生无障碍信息,playwright snapshot 永不输出 */
+const IGNORED_TAGS = new Set([
+  'SCRIPT', 'STYLE', 'NOSCRIPT', 'TEMPLATE', 'LINK', 'META',
+  'TITLE', 'BASE', 'HEAD', 'COL', 'COLGROUP',
+])
+
+function buildNode(el: Element, ctx: BuildCtx, level = 0): SnapshotNode | null {
+  if (isHidden(el)) return null
+  if (IGNORED_TAGS.has(el.tagName)) return null
+  const atMaxDepth = ctx.depth != null && level >= ctx.depth
+
+  const role = getRole(el as HTMLElement) as string | null
+  const name = computeAccessibleName(el).trim() || undefined
+
+  // 有 role 的情况
+  if (role) {
+    const attributes = extractAttributes(el, role)
+    const ref = nextRef(el)
+
+    // textbox:value 作为叶子值
+    if (role === 'textbox') {
+      const value = (el as HTMLInputElement).value || ''
+      return { role, name, attributes: attributes.length ? attributes : undefined, ref, value: value || undefined }
+    }
+
+    // 叶子 role
+    if (LEAF_ROLES.has(role)) {
+      return { role, name, attributes: attributes.length ? attributes : undefined, ref }
+    }
+
+    // 容器 role 或其它：递归子元素
+    let children: SnapshotNode[] = []
+    if (!atMaxDepth) {
+      for (const child of Array.from(el.children)) {
+        const node = buildNode(child, ctx, level + 1)
+        if (node) children.push(node)
+      }
+    }
+    // 容器内还可能有直接文本
+    if (children.length === 0 && name) {
+      // 纯命名容器,作为叶子
+      return { role, name, attributes: attributes.length ? attributes : undefined, ref }
+    }
+    return { role, name, attributes: attributes.length ? attributes : undefined, ref, children: children.length ? children : undefined }
+  }
+
+  // 无 role:可能是有文本的纯容器(div/p/span 等)
+  const text = directText(el)
+  if (!text) {
+    // 无文本容器：递归子元素，把它们“提升”
+    const lifted: SnapshotNode[] = []
+    if (!atMaxDepth) {
+      for (const child of Array.from(el.children)) {
+        const node = buildNode(child, ctx, level + 1)
+        if (node) lifted.push(node)
+      }
+    }
+    if (lifted.length === 1) return lifted[0]
+    if (lifted.length > 1) {
+      return { role: 'text', ref: nextRef(el), children: lifted }
+    }
+    return null
+  }
+
+  // 有文本、无 role:生成 text 节点
+  return { role: 'text', ref: nextRef(el), name: text }
+}
+
+// ── YAML 序列化(对齐 playwright aria snapshot 格式)────
+
+function quoteIfNeeded(name: string): string {
+  // playwright: 精确值用双引号;正则用 /.../;这里 snapshot 输出总是精确值
+  if (!name) return ''
+  let n = name
+  if (n.length > 200) n = n.slice(0, 200) + '...'
+  return ` "${n.replace(/"/g, '\\"')}"`
+}
+
+function serializeNode(node: SnapshotNode, indent: number): string {
+  const pad = '  '.repeat(indent)
+  const parts: string[] = []
+
+  // 头:- role "name" [attrs] [ref]
+  let line = `${pad}- ${node.role}`
+  if (node.name) line += quoteIfNeeded(node.name)
+  if (node.attributes?.length) {
+    for (const a of node.attributes) line += ` [${a}]`
+  }
+  line += ` [ref=${node.ref}]`
+
+  const hasChildren = node.children && node.children.length > 0
+  const hasValue = node.value !== undefined
+
+  if (hasChildren) {
+    line += ':'
+    parts.push(line)
+    for (const child of node.children!) {
+      parts.push(serializeNode(child, indent + 1))
+    }
+  } else if (hasValue) {
+    line += `: ${node.value}`
+    parts.push(line)
+  } else {
+    parts.push(line)
+  }
+  return parts.join('\n')
+}
+
+// ── 主入口 ────────────────────────────────────────────────
+
+export interface SnapshotOptions {
+  /** 根元素 selector，不传则整个 body */
+  rootSelector?: string
+  /** 限制深度 */
+  depth?: number
+  /** 只保留可交互元素（button/link/textbox 等） */
+  interactiveOnly?: boolean
+}
+
+/** 生成的完整 yaml 与其分块（按行 + 字数切，不在行中间断）。同一份 snapshot 的分块共享 ref 映射。 */
+export interface SnapshotResult {
+  yaml: string
+  refs: number
+}
+
+/** 生成完整 snapshot。分块由调用方（content）缓存后按 chunkId 切。 */
+export function ariaSnapshot(opts: SnapshotOptions = {}): SnapshotResult {
+  resetRefs()
+
+  const root: Element = opts.rootSelector
+    ? document.querySelector(opts.rootSelector) || document.body
+    : document.body
+
+  const ctx: BuildCtx = { depth: opts.depth, interactiveOnly: opts.interactiveOnly }
+
+  const children: SnapshotNode[] = []
+  for (const child of Array.from(root.children)) {
+    const node = buildNode(child, ctx, 0)
+    if (node) children.push(node)
+  }
+
+  let yaml: string
+  if (opts.interactiveOnly) {
+    // interactiveOnly：从完整树中提取可交互叶子，保留路径但压缩
+    const interactive: SnapshotNode[] = []
+    for (const c of children) collectInteractive(c, interactive)
+    yaml = interactive.map((n) => serializeNode(n, 0)).join('\n')
+  } else if (children.length === 1) {
+    yaml = serializeNode(children[0], 0)
+  } else if (children.length > 1) {
+    yaml = children.map((c) => serializeNode(c, 0)).join('\n')
+  } else {
+    yaml = ''
+  }
+
+  return { yaml, refs: refSeq }
+}
+
+/** 递归收集可交互节点（interactiveOnly 用）。纯展示节点跳过，保留可交互的。 */
+function collectInteractive(node: SnapshotNode, out: SnapshotNode[]): void {
+  if (isInteractiveRole(node.role)) {
+    out.push(node)
+    return
+  }
+  if (node.children) {
+    for (const c of node.children) collectInteractive(c, out)
+  }
+}
+
+function isInteractiveRole(role: string): boolean {
+  return INTERACTIVE_ROLES.has(role) || role === 'textbox'
+}

package/browser-op/webplater/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "webplater",
+  "version": "0.0.1",
+  "description": "Browser-agent extension — Playwright alternative layer for web automation",
+  "private": true,
+  "type": "module",
+  "packageManager": "pnpm@9.15.0",
+  "engines": {
+    "node": ">=22.0.0"
+  },
+  "scripts": {
+    "dev": "wxt",
+    "dev:firefox": "wxt -b firefox",
+    "build": "wxt build",
+    "build:firefox": "wxt build -b firefox",
+    "zip": "wxt zip",
+    "zip:firefox": "wxt zip -b firefox",
+    "publish": "node scripts/publish-extension.mjs",
+    "compile": "tsc --noEmit",
+    "postinstall": "wxt prepare"
+  },
+  "dependencies": {
+    "dom-accessibility-api": "^0.7.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.2",
+    "wxt": "^0.19.24"
+  }
+}