mooncat-browser 0.1.0

package/browser-op/web/image.js

@@ -0,0 +1,177 @@
+// -*- coding: utf-8 -*-
+//
+// web/image — 图片捕获（多策略，路由无关，全走 operate）
+//
+// 四个策略 + 保存：
+//   - imgFromScreenshot：用 operate screenshot（**仅视觉确认，不取资源**）
+//   - imgFromElement：evaluate 提取 src，再 fetchAsBase64
+//   - fetchAsBase64：evaluate 内 fetch（共享 cookie jar）
+//   - captureImages：扫描页面所有 img + background-image，逐个 fetch
+//
+// 防盗链/CORS 适配：fetch 失败时自动 fallback 到 crossOrigin 重载 + canvas 导出
+//   （见 crossOriginExport）。这是通用能力，覆盖大多数 CDN（alicdn/OSS 等）。
+//   机理：<img> 加载不受 CORS 限，但 fetch 跨域被拦；crossOrigin='anonymous'
+//   重载后若 CDN 返回 Access-Control-Allow-Origin，canvas 不 tainted 可导出原图。
+//
+// 依赖：./browser（operate）, node:fs（saveImage）
+
+'use strict'
+
+const fs = require('node:fs')
+const { operate } = require('./browser')
+
+// 页面内 fetch 图片为 base64（共享页面 cookie）
+const FETCH_SOURCE = (url) => 'async (u) => {\n' +
+  '  try {\n' +
+  '    const res = await fetch(u, { credentials: "include" })\n' +
+  '    const ct = res.headers.get("content-type") || "application/octet-stream"\n' +
+  '    const buf = await res.arrayBuffer()\n' +
+  '    const bytes = new Uint8Array(buf)\n' +
+  '    let bin = ""\n' +
+  '    for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i])\n' +
+  '    return { data: btoa(bin), mimeType: ct }\n' +
+  '  } catch (e) {\n' +
+  '    return { error: String((e && e.message) || e) }\n' +
+  '  }\n' +
+  '}'
+
+// 提取元素 src（el.src 自动解析为绝对 URL，避免相对路径 fetch 失败）
+const SRC_SOURCE = (selector) => '(s) => {\n' +
+  '  const el = document.querySelector(s)\n' +
+  '  if (!el) return null\n' +
+  '  const src = el.src || el.getAttribute("src") || el.getAttribute("data-src") || el.getAttribute("href") || null\n' +
+  '  return src\n' +
+'}'
+
+
+// crossOrigin 重载 + canvas 导出（防盗链/CORS 兼底）
+// 给定 URL，新建带 crossOrigin='anonymous' 的 Image 重新加载，成功后 canvas toDataURL。
+// 仅当 CDN 返回 Access-Control-Allow-Origin 时成功（大多数 CDN 都是）。
+const CROSS_ORIGIN_EXPORT = 'async (u) => {\n' +
+  '  return await new Promise(resolve => {\n' +
+  '    const im = new Image()\n' +
+  '    im.crossOrigin = "anonymous"\n' +
+  '    im.onload = () => {\n' +
+  '      try {\n' +
+  '        const c = document.createElement("canvas")\n' +
+  '        c.width = im.naturalWidth; c.height = im.naturalHeight\n' +
+  '        c.getContext("2d").drawImage(im, 0, 0)\n' +
+  '        const url = c.toDataURL("image/png")\n' +
+  '        if (url.length < 100) return resolve({ error: "toDataURL empty (tainted)" })\n' +
+  '        resolve({ data: url.split(",")[1], mimeType: "image/png" })\n' +
+  '      } catch (e) { resolve({ error: "canvas: " + String((e && e.message) || e) }) }\n' +
+  '    }\n' +
+  '    im.onerror = () => resolve({ error: "reload failed (CDN denied CORS)" })\n' +
+  '    im.src = u\n' +
+  '  })\n' +
+'}'
+
+
+// 先 fetch；fetch 报错（CORS/防盗链）才 fallback 到 crossOrigin 重载。返回 {data, mimeType}。
+// 第一步 fetch 成功就直接返回（普通站点零开销）；失败才走重载，一次兼容到底。
+
+/**
+ * 截图取图（可视区域或元素）。
+ * @param {object} pageHandle 单个 page 句柄
+ * @param {object} [options]
+ * @param {string} [options.selector] - 元素截图 selector，不传则整页可视区
+ * @returns {Promise<{data, mimeType}>}  data 为纯 base64
+ */
+async function imgFromScreenshot (pageHandle, options = {}) {
+  if (!pageHandle) throw new Error('imgFromScreenshot: pageHandle required')
+  const r = await operate(pageHandle, { action: 'screenshot' })
+  const dataUrl = r.dataUrl || (r.result && r.result.dataUrl) || ''
+  const m = dataUrl.match(/^data:([^;]+);base64,(.*)$/)
+  if (!m) throw new Error('imgFromScreenshot: no dataUrl')
+  return { data: m[2], mimeType: m[1] }
+}
+
+/**
+ * 通过页面 fetch 重新请求图片为 base64（共享 cookie）。
+ * @param {object} pageHandle 单个 page 句柄
+ * @param {string} url
+ * @returns {Promise<{data, mimeType}>}
+ */
+async function fetchAsBase64 (pageHandle, url) {
+  if (!pageHandle) throw new Error('fetchAsBase64: pageHandle required')
+  if (!url) throw new Error('fetchAsBase64: url required')
+  const r = await operate(pageHandle, { action: 'evaluate', source: FETCH_SOURCE(url), args: url })
+  const d = (r && r.value) || r || {}
+  // fetch 成功直接返回
+  if (d && d.data && d.data.length > 0 && !d.error) return { data: d.data, mimeType: d.mimeType }
+  // fetch 失败（CORS/防盗链）→ fallback crossOrigin 重载 + canvas
+  if (d && d.error) {
+    const r2 = await operate(pageHandle, { action: 'evaluate', source: CROSS_ORIGIN_EXPORT, args: url })
+    const d2 = (r2 && r2.value) || r2 || {}
+    if (d2 && d2.data && d2.data.length > 0 && !d2.error) return { data: d2.data, mimeType: d2.mimeType }
+    throw new Error('fetchAsBase64: ' + d.error + (d2.error ? ' (crossOrigin fallback also failed: ' + d2.error + ')' : ''))
+  }
+  throw new Error('fetchAsBase64: empty response from ' + url)
+}
+
+/**
+ * 从 img 元素取图：先提取 src，再 fetchAsBase64。
+ * @param {object} pageHandle 单个 page 句柄
+ * @param {string} selector
+ * @param {Array} [captured] - captureImages 的缓存（优先用）
+ * @returns {Promise<{data, mimeType}>}
+ */
+async function imgFromElement (pageHandle, selector, captured) {
+  if (!pageHandle) throw new Error('imgFromElement: pageHandle required')
+  if (!selector) throw new Error('imgFromElement: selector required')
+  const srcR = await operate(pageHandle, { action: 'evaluate', source: SRC_SOURCE(selector), args: selector })
+  const src = (srcR && typeof srcR === 'string') ? srcR : (srcR && srcR.value) || (srcR && srcR.result)
+  if (!src) throw new Error('imgFromElement: no src for ' + selector)
+  if (Array.isArray(captured) && captured.includes(src)) {
+    return fetchAsBase64(pageHandle, src)
+  }
+  return fetchAsBase64(pageHandle, src)
+}
+
+/**
+ * 扫描页面所有图片，返回 [{url,data,mimeType}]。
+ * @param {object} pageHandle 单个 page 句柄
+ * @param {(url:string)=>boolean} [match] - URL 过滤函数
+ * @returns {Promise<Array<{url,data,mimeType}>>}
+ */
+async function captureImages (pageHandle, match) {
+  if (!pageHandle) throw new Error('captureImages: pageHandle required')
+  const scanSrc = '(() => {\n' +
+    '  const urls = new Set()\n' +
+    '  document.querySelectorAll("img[src]").forEach((el) => { try { if (el.src) urls.add(el.src) } catch {} })\n' +
+    '  document.querySelectorAll("[data-src]").forEach((el) => { try { const s = el.getAttribute("data-src"); if (s) urls.add(new URL(s, location.href).href) } catch {} })\n' +
+    '  document.querySelectorAll("*").forEach((el) => {\n' +
+    '    const bg = getComputedStyle(el).backgroundImage\n' +
+    '    if (bg && bg !== "none") {\n' +
+    '      const m = bg.matchAll(/url\\(["\']?([^"\')]+)["\']?\\)/g)\n' +
+    '      for (const x of m) { try { urls.add(new URL(x[1], location.href).href) } catch {} }\n' +
+    '    }\n' +
+    '  })\n' +
+    '  return [...urls]\n' +
+    '})()'
+  const urlsR = await operate(pageHandle, { action: 'evaluate', source: scanSrc })
+  const urls = Array.isArray(urlsR) ? urlsR : (urlsR && urlsR.value) || (urlsR && urlsR.result) || []
+  const out = []
+  for (const u of urls) {
+    if (match && typeof match === 'function' && !match(u)) continue
+    try {
+      const img = await fetchAsBase64(pageHandle, u)
+      if (img && img.data && img.data.length > 0) out.push({ url: u, data: img.data, mimeType: img.mimeType })
+    } catch {}
+  }
+  return out
+}
+
+/**
+ * 保存 base64 到文件。
+ * @param {string} data - 纯 base64
+ * @param {string} mimeType
+ * @param {string} savePath - 绝对路径
+ */
+async function saveImage (data, mimeType, savePath) {
+  const buf = Buffer.from(data, 'base64')
+  await fs.promises.writeFile(savePath, buf)
+  return { savePath, bytes: buf.length, mimeType }
+}
+
+module.exports = { captureImages, fetchAsBase64, imgFromElement, imgFromScreenshot, saveImage }

package/browser-op/web/interact.js

@@ -0,0 +1,169 @@
+// -*- coding: utf-8 -*-
+//
+// web/interact — 页面可视化 overlay（路由无关, 纯 fixed div, 不碰业务 DOM）
+//
+// 三类用途:
+//   highlight/visualMark — 高亮真实操作对象 (单源 visual-runtime: resolve → mark 同一元素)
+//   toast/status        — 提示/状态栏 overlay
+//   ensureVisual        — 正式注入 visual-runtime (open 后页面有 window.visualMark)
+//
+// 铁律: 高亮对象 = 执行对象。这里只接受"已拿到的真实对象" (元素引用 / 坐标),
+// 不再做 selector→元素的二次解析 (解析走单源 visual-runtime.resolveSelector,
+// 由 operate 在后端一次完成 resolve+mark+execute)。
+//
+// 依赖：./browser（operate）、./visual-runtime.inject（注入串）
+
+'use strict'
+
+const { operate } = require('./browser')
+const VISUAL_RUNTIME_SRC = require('./visual-runtime.inject.cjs')
+
+const OVERLAY_ID = 'bee-interact-overlay'
+const STYLE_ID = 'bee-interact-style'
+
+// toast/status 用独立 CSS (visual-runtime 只管高亮框, 不管 toast)
+const TOAST_CSS = '\n' +
+  '    .bee-tk{position:fixed;z-index:2147483647;font-family:system-ui,Arial,sans-serif;font-size:13px;color:#fff;background:rgba(30,30,30,.92);padding:8px 12px;border-radius:6px;box-shadow:0 2px 12px rgba(0,0,0,.3);max-width:60vw}\n' +
+  '    .bee-tk.b-success{background:rgba(22,101,52,.95)} .bee-tk.b-warn{background:rgba(180,83,9,.95)} .bee-tk.b-error{background:rgba(153,27,27,.95)}\n' +
+  '    .bee-status{top:12px;right:12px}\n' +
+  '    .bee-toast{bottom:16px;right:16px;transition:opacity .3s}\n' +
+  '  '
+
+// 注入 toast/status 样式 (幂等)。visual-runtime 的样式由它自己的 ensureVisualOverlay 注入。
+const ENSURE_TOAST_STYLE = '(() => {\n' +
+  '  if (!document.getElementById("' + STYLE_ID + '")) {\n' +
+  '    var s = document.createElement("style")\n' +
+  '    s.id = "' + STYLE_ID + '"\n' +
+  '    s.textContent = ' + JSON.stringify(TOAST_CSS) + '\n' +
+  '    document.head.appendChild(s)\n' +
+  '  }\n' +
+  '  return null\n' +
+  '})()'
+
+/**
+ * 正式注入 visual-runtime 到页面 MAIN world (幂等)。
+ *
+ * 注入后页面有 window.visualMark / window.resolveSelector / window.__beeVR。
+ * 这是 eval 契约的正式入口: eval 内拿到真实元素后调 window.visualMark(它)。
+ * 不再用旧版 "调一次假 highlight 触发 ensureStyle" 的 hack。
+ *
+ * 注意: open() 后每个新 page 自动注入 (browserd ensureVisualRuntime);
+ * 这个函数供 humanize/find 等页面侧代码在不确定注入状态时显式保险。
+ */
+async function ensureVisual (pageHandle) {
+  if (!pageHandle) throw new Error('ensureVisual: pageHandle required')
+  await operate(pageHandle, {
+    action: 'evaluate',
+    source: '(() => { if (!window.__beeVR) { ' + VISUAL_RUNTIME_SRC + ' } return !!window.__beeVR })()',
+    _skipHumanize: true
+  })
+  return null
+}
+
+async function ensureToastStyle (pageHandle) {
+  await operate(pageHandle, { action: 'evaluate', source: ENSURE_TOAST_STYLE, _skipHumanize: true })
+}
+
+// ─── highlight / visualMark: 高亮真实对象 ───
+//
+// target 直接是真实对象 (元素引用 / {x,y[,w,h]} / 数组), 不接受 selector/文本。
+// 要按 selector 高亮, 用 highlightSelector (走单源 resolver)。
+
+/**
+ * 在真实对象上画高亮 overlay。target 必须是页面内已拿到的真实元素/坐标。
+ * @param {object} pageHandle
+ * @param {Element|{x,y,w?,h?}|Array} target 真实对象 (页面侧 evaluate 拿到的)
+ * @param {object} [options] - { ms:1000 }
+ * @returns {Promise<{ok:boolean}>}
+ *
+ * 注意: target 是在调用方 evaluate 内构造的; 外部传坐标时,
+ *       内部用 visualMark 的 point 语义画小标记。
+ */
+async function highlight (pageHandle, target, options = {}) {
+  if (!pageHandle) throw new Error('highlight: pageHandle required')
+  if (!target) return { ok: false, reason: 'no target' }
+  await ensureVisual(pageHandle)
+  // 走注入的 visualMark: target 经 evaluate 序列化传入页面
+  // (坐标对象可序列化; 元素引用需在 evaluate 内拿, 这里主要服务坐标场景)
+  const r = await operate(pageHandle, {
+    action: 'evaluate',
+    source: '(t) => { if (!window.__beeVR) return { ok:false, reason:"runtime not injected" }; window.__beeVR.visualMark(t); return { ok:true } }',
+    args: target,
+    _skipHumanize: true
+  }).catch((e) => ({ ok: false, reason: e.message }))
+  const ms = options.ms != null ? options.ms : 1000
+  if (r && r.ok && ms > 0) await new Promise((res) => setTimeout(res, ms))
+  return r || { ok: false, reason: 'no result' }
+}
+
+/**
+ * 按 selector 高亮 (走单源 resolver, resolve → mark 同一元素)。
+ * 调用方已有真实元素时优先用 highlight(el); 只有 selector 时用这个。
+ */
+async function highlightSelector (pageHandle, selector, options = {}) {
+  if (!pageHandle) throw new Error('highlightSelector: pageHandle required')
+  if (!selector) return { ok: false, reason: 'no selector' }
+  await ensureVisual(pageHandle)
+  const r = await operate(pageHandle, {
+    action: 'evaluate',
+    source: '(sel) => { if (!window.__beeVR) return { ok:false, reason:"runtime not injected" }; const ok = window.__beeVR.highlightResolved(sel, undefined); return { ok } }',
+    args: selector,
+    _skipHumanize: true
+  }).catch((e) => ({ ok: false, reason: e.message }))
+  const ms = options.ms != null ? options.ms : 1000
+  if (r && r.ok && ms > 0) await new Promise((res) => setTimeout(res, ms))
+  return r || { ok: false, reason: 'no result' }
+}
+
+/**
+ * 清除所有 overlay。
+ */
+async function clear (pageHandle) {
+  if (!pageHandle) throw new Error('clear: pageHandle required')
+  await operate(pageHandle, {
+    action: 'evaluate',
+    source: '(() => { document.querySelectorAll(".bee-tk,.bee-hl-box").forEach(function(e){e.remove()}); return null })()',
+    _skipHumanize: true
+  })
+  return null
+}
+
+/**
+ * 底部右下角 toast。
+ */
+async function toast (pageHandle, message, levelOrOpts = 'info') {
+  if (!pageHandle) throw new Error('toast: pageHandle required')
+  const level = typeof levelOrOpts === 'object' ? (levelOrOpts.level || 'info') : levelOrOpts
+  const ms = typeof levelOrOpts === 'object' ? (Number(levelOrOpts.ms) || 2500) : 2500
+  await ensureToastStyle(pageHandle)
+  const cls = level === 'success' ? 'b-success' : level === 'warn' ? 'b-warn' : level === 'error' ? 'b-error' : ''
+  const src = '(() => {\n' +
+    '      const e = document.createElement("div")\n' +
+    '      e.className = "bee-tk bee-toast ' + cls + '"\n' +
+    '      e.textContent = ' + JSON.stringify(message) + '\n' +
+    '      document.body.appendChild(e)\n' +
+    '      setTimeout(() => { e.style.opacity = "0"; setTimeout(() => e.remove(), 300) }, ' + ms + ')\n' +
+    '      return null\n' +
+    '    })()'
+  await operate(pageHandle, { action: 'evaluate', source: src, _skipHumanize: true })
+  return null
+}
+
+/**
+ * 右上角状态栏。
+ */
+async function status (pageHandle, text, step) {
+  if (!pageHandle) throw new Error('status: pageHandle required')
+  await ensureToastStyle(pageHandle)
+  const content = step ? String(step) + ': ' + String(text) : String(text)
+  const src = '(() => {\n' +
+    '      let e = document.getElementById("' + OVERLAY_ID + '")\n' +
+    '      if (!e) { e = document.createElement("div"); e.id = "' + OVERLAY_ID + '"; e.className = "bee-tk bee-status"; document.body.appendChild(e) }\n' +
+    '      e.textContent = ' + JSON.stringify(content) + '\n' +
+    '      return null\n' +
+    '    })()'
+  await operate(pageHandle, { action: 'evaluate', source: src, _skipHumanize: true })
+  return null
+}
+
+module.exports = { ensureVisual, highlight, highlightSelector, clear, toast, status }

package/browser-op/web/markdown.js

@@ -0,0 +1,80 @@
+// -*- coding: utf-8 -*-
+//
+// web/markdown — HTML 转 Markdown（纯函数，路由无关）
+//
+// 完整复刻自 bee/resources/sandbox/builtin-libs/web/markdown.js。
+// 不依赖任何浏览器通道。HTML 字符串进来，Markdown 出去。
+// 用 turndown + cheerio。
+//
+// 依赖：turndown, cheerio（调用方自装：npm i turndown cheerio）
+
+'use strict'
+
+let _deps = null
+async function getDeps () {
+  if (_deps) return _deps
+  try {
+    const TurndownModule = require('turndown')
+    const TurndownService = TurndownModule.default || TurndownModule
+    const cheerio = require('cheerio')
+    _deps = { TurndownService, cheerio }
+  } catch (e) {
+    throw new Error(
+      'web/markdown 需要 turndown + cheerio，请先安装：npm i turndown cheerio\n' +
+      '原始错误: ' + (e && e.message)
+    )
+  }
+  return _deps
+}
+
+/**
+ * 将 HTML 字符串转换为 Markdown。
+ *
+ * @param {string} html - HTML 字符串
+ * @returns {Promise<{markdown: string, title: string|null}>}
+ */
+async function htmlToMarkdown (html) {
+  const { TurndownService, cheerio } = await getDeps()
+  const $ = cheerio.load(html)
+  const title = $('title').text() || null
+
+  // 删除 script/style 标签
+  $('script, style').remove()
+
+  const body = $('body').length > 0 ? $('body') : $.root()
+  const converter = new TurndownService({ headingStyle: 'atx' })
+
+  // 过滤 javascript: 链接
+  converter.addRule('filterLinks', {
+    filter: 'a',
+    replacement: (content, node) => {
+      const href = node.getAttribute('href')
+      if (!href) return content
+      try {
+        const protocol = new URL(href).protocol
+        if (protocol && !['http:', 'https:', 'file:'].includes(protocol.toLowerCase())) {
+          return content
+        }
+      } catch {}
+      const t = node.getAttribute('title')
+      const titlePart = t ? ' "' + t.replace(/"/g, '\\"') + '"' : ''
+      return '[' + content + '](' + href + titlePart + ')'
+    }
+  })
+
+  // 截断 data URI
+  converter.addRule('filterImages', {
+    filter: 'img',
+    replacement: (content, node) => {
+      const alt = node.getAttribute('alt') || ''
+      let src = node.getAttribute('src') || node.getAttribute('data-src') || ''
+      if (src.startsWith('data:')) src = src.split(',')[0] + '...'
+      return '![' + alt + '](' + src + ')'
+    }
+  })
+
+  const md = converter.turndown(body.html() || '')
+  return { markdown: md.trim(), title }
+}
+
+module.exports = { htmlToMarkdown }