Snapshot to API
Replace browser snapshots with direct API calls. 15-20x fewer tokens, 2x faster, 100% complete data.
Why
Browser snapshots return the full DOM tree — menus, buttons, refs, styling — when you only need the data.
A typical table page: 45 KB DOM → ~15k tokens, ~15% useful. The same data via API: 3.5 KB JSON → ~1k tokens, ~90% useful.
Core Workflow
Step 1: Open the target page
CODEBLOCK0
Purpose: establish cookie/session auth. You don't need to read the page.
Step 2: Discover API endpoints
CODEBLOCK1
This returns all API calls the page made during loading — the data sources behind the UI.
Step 3: Identify the data API
Look for URLs containing:
- -
/api/, /v2/, INLINECODE2 - Keywords matching your data need (
schema, table, list, detail, query, search) - INLINECODE9 endpoints with query params like
id=, name=, INLINECODE12
Ignore: analytics, tracking, user-info, config, SDK URLs.
Step 4: Test the API via evaluate
CODEBLOCK2
Step 5: Extract structured data
Once you understand the response shape, write a focused extractor:
CODEBLOCK3
Step 6: Close the browser tab
CODEBLOCK4
Param Tuning
Many APIs need specific parameters to return full data. Common pattern:
- 1. Start with the full URL the page used (from Step 2)
- Try removing parameters one at a time
- ⚠️ Some params return empty data instead of errors when missing — always verify field counts
Cross-Environment Variations
Different environments (regions, clusters, staging/prod) may have:
- - Different base domains (e.g.,
app.example.com vs app-eu.example.com) - Different API path prefixes (e.g.,
/api/v2/ vs /api_eu/v2/) - Different ID suffixes in query params (e.g.,
@0 vs @10)
Always test each environment separately.
When NOT to Use
- - Write operations (forms, submissions) — keep using browser automation for safety
- Pages requiring user interaction to load data (click-to-expand, infinite scroll APIs)
- Auth flows that need OAuth redirects — cookie-based auth only
- Frequently changing APIs — snapshot may be more maintainable as fallback
Comparison Reference
See references/comparison.md for detailed benchmark data (token counts, timing, completeness).
After Discovery
- 1. Update the original Skill — replace snapshot steps with evaluate + fetch
- Keep snapshot as fallback — in case the API changes or auth expires
- Document the API — path, required params, response structure, environment differences
- Log to learnings — record the discovery for future reference
快照转API
用直接API调用替换浏览器快照。减少15-20倍令牌，速度提升2倍，100%完整数据。
为什么
浏览器快照返回完整的DOM树——菜单、按钮、引用、样式——而您只需要数据。
一个典型的表格页面：45 KB DOM → 约15k令牌，约15%有用。通过API获取相同数据：3.5 KB JSON → 约1k令牌，约90%有用。
核心工作流程
第一步：打开目标页面
browser(action=open, url=, profile=openclaw)
目的：建立cookie/会话认证。您无需读取页面。
第二步：发现API端点
javascript
// 在浏览器标签页中执行
() => {
const entries = performance.getEntriesByType(resource)
.filter(e => e.name.includes(window.location.hostname) &&
!e.name.match(/\.(js|css|png|jpg|webp|svg|woff|ttf)(\?|$)/))
.map(e => e.name);
return JSON.stringify(entries, null, 2);
}
这将返回页面加载期间发出的所有API调用——UI背后的数据源。
第三步：识别数据API
查找包含以下内容的URL：
- - /api/、/v2/、/v3/
- 与您的数据需求匹配的关键词（schema、table、list、detail、query、search）
- 带有查询参数的GET端点，如id=、name=、type=
忽略：分析、跟踪、用户信息、配置、SDK URL。
第四步：通过evaluate测试API
javascript
// 将替换为第三步中的路径
() => {
return fetch()
.then(r => r.json())
.then(data => {
// 检查结构
const keys = Object.keys(data?.data || data || {});
return JSON.stringify({
topLevelKeys: keys,
sample: JSON.stringify(data).substring(0, 1000)
});
});
}
第五步：提取结构化数据
一旦您理解了响应结构，编写一个聚焦的提取器：
javascript
() => {
return fetch()
.then(r => r.json())
.then(data => {
// 仅提取您需要的内容——返回干净的JSON
return JSON.stringify({ / 结构化结果 / });
});
}
第六步：关闭浏览器标签页
browser(action=close, targetId=)
参数调优
许多API需要特定参数才能返回完整数据。常见模式：
- 1. 从页面使用的完整URL开始（来自第二步）
- 尝试一次删除一个参数
- ⚠️ 某些参数缺失时会返回空数据而非错误——始终验证字段数量
跨环境差异
不同环境（区域、集群、预发布/生产）可能有：
- - 不同的基础域名（例如，app.example.com vs app-eu.example.com）
- 不同的API路径前缀（例如，/api/v2/ vs /api_eu/v2/）
- 查询参数中不同的ID后缀（例如，@0 vs @10）
始终分别测试每个环境。
何时不使用
- - 写操作（表单、提交）——为安全起见，继续使用浏览器自动化
- 需要用户交互才能加载数据的页面（点击展开、无限滚动API）
- 需要OAuth重定向的认证流程——仅限基于cookie的认证
- 频繁变化的API——快照作为回退可能更易维护
对比参考
参见references/comparison.md获取详细基准数据（令牌数量、时间、完整性）。
发现之后
- 1. 更新原始技能——用evaluate + fetch替换快照步骤
- 保留快照作为回退——以防API更改或认证过期
- 记录API——路径、必需参数、响应结构、环境差异
- 记录到经验库——保存发现以备将来参考
