mcpField
A
agent-browser

agent-browser

github.com/its-a-skill-issueAgent 工作流080.2k 次安装12 周前更新
代码仓库

关于 agent-browser

agent-browser 是面向 AI Agent 的浏览器自动化技能,基于 Playwright,通过 inference.sh 的 belt CLI 运行。它用元素引用执行交互,并支持持久会话、截图和录制。

主要功能

  1. 01打开页面并获取快照
  2. 02通过 @e 元素引用交互
  3. 03上传文件和拖放元素
  4. 04运行页面 JavaScript
  5. 05截取屏幕并录制视频

适用场景

  1. 01自动填写并提交表单
  2. 02搜索网页并查看结果
  3. 03录制浏览器流程以便调试

MCP 相关

此技能未说明 MCP 功能。

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/its-a-skill-issue/superpowers --skill agent-browser

安装后在 Claude Code 中输入/agent-browser确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

references/
authentication.md
commands.md
proxy-support.md
session-management.md
snapshot-refs.md
video-recording.md
templates/
authenticated-session.sh
capture-workflow.sh
form-automation.sh

详细介绍

安装 belt CLI 技能: npx skills add belt-sh/cli

Agentic Browser

通过 inference.sh 为 AI Agent 提供浏览器自动化功能。底层使用 Playwright,并通过简单的 @e 引用系统与元素交互。

Agentic Browser

快速开始

需要 inference.sh CLI(belt)。安装说明

belt login

# Open a page and get interactive elements
belt app run agent-browser --function open --input '{"url": "https://example.com"}' --session new

核心工作流

每次浏览器自动化都遵循以下模式:

  1. 打开 - 导航到 URL,获取元素的 @e 引用
  2. 交互 - 使用引用执行点击、填充、拖拽等操作
  3. 重新快照 - 导航或页面变更后,获取最新引用
  4. 关闭 - 结束会话(录制时会返回视频)
# 1. Start session
RESULT=$(belt app run agent-browser --function open --session new --input '{
  "url": "https://example.com/login"
}')
SESSION_ID=$(echo $RESULT | jq -r '.session_id')
# Elements: @e1 [input] "Email", @e2 [input] "Password", @e3 [button] "Sign In"

# 2. Fill and submit
belt app run agent-browser --function interact --session $SESSION_ID --input '{
  "action": "fill", "ref": "@e1", "text": "[email protected]"
}'
belt app run agent-browser --function interact --session $SESSION_ID --input '{
  "action": "fill", "ref": "@e2", "text": "password123"
}'
belt app run agent-browser --function interact --session $SESSION_ID --input '{
  "action": "click", "ref": "@e3"
}'

# 3. Re-snapshot after navigation
belt app run agent-browser --function snapshot --session $SESSION_ID --input '{}'

# 4. Close when done
belt app run agent-browser --function close --session $SESSION_ID --input '{}'

函数

函数说明
open导航到 URL,配置浏览器(视口、代理、视频录制)
snapshotDOM 变更后,重新获取带有 @e 引用的页面状态
interact使用 @e 引用执行操作(点击、填充、拖拽、上传等)
screenshot截取页面(视口或整页)
execute在页面上运行 JavaScript 代码
close关闭会话;如果启用了录制,则返回视频

交互操作

操作说明必填字段
click点击元素ref
dblclick双击元素ref
fill清除并输入文本ref、text
type输入文本(不清除)text
press按下按键(Enter、Tab 等)text
select选择下拉选项ref、text
hover将鼠标悬停在元素上ref
check勾选复选框ref
uncheck取消勾选复选框ref
drag拖放ref、target_ref
upload上传文件ref、file_paths
scroll滚动页面direction(up/down/left/right)、scroll_amount
back返回上一条历史记录-
wait等待指定毫秒数wait_ms
goto导航到 URLurl

元素引用

元素会以 @e 引用的形式返回:

@e1 [a] "Home" href="/"
@e2 [input type="text"] placeholder="Search"
@e3 [button] "Submit"
@e4 [select] "Choose option"
@e5 [input type="checkbox"] name="agree"

**重要:**导航后引用会失效。以下操作后务必重新获取快照:

  • 点击会触发导航的链接或按钮
  • 提交表单
  • 动态内容加载

功能

视频录制

录制浏览器会话,以便调试或编写文档:

# Start with recording enabled (optionally show cursor indicator)
SESSION=$(belt app run agent-browser --function open --session new --input '{
  "url": "https://example.com",
  "record_video": true,
  "show_cursor": true
}' | jq -r '.session_id')

# ... perform actions ...

# Close to get the video file
belt app run agent-browser --function close --session $SESSION --input '{}'
# Returns: {"success": true, "video": <File>}
光标指示器

在截图和视频中显示可见光标(适用于演示):

belt app run agent-browser --function open --session new --input '{
  "url": "https://example.com",
  "show_cursor": true,
  "record_video": true
}'

光标显示为红点,会跟随鼠标移动,并提供点击反馈。

代理支持

通过代理服务器转发流量:

belt app run agent-browser --function open --session new --input '{
  "url": "https://example.com",
  "proxy_url": "http://proxy.example.com:8080",
  "proxy_username": "user",
  "proxy_password": "pass"
}'
文件上传

将文件上传到文件输入框:

belt app run agent-browser --function interact --session $SESSION --input '{
  "action": "upload",
  "ref": "@e5",
  "file_paths": ["/path/to/file.pdf"]
}'
拖放

将元素拖到目标位置:

belt app run agent-browser --function interact --session $SESSION --input '{
  "action": "drag",
  "ref": "@e1",
  "target_ref": "@e2"
}'
JavaScript 执行

运行自定义 JavaScript:

belt app run agent-browser --function execute --session $SESSION --input '{
  "code": "document.querySelectorAll(\"h2\").length"
}'
# Returns: {"result": "5", "screenshot": <File>}

深入文档

参考文档说明
references/commands.md完整函数参考及所有选项
references/snapshot-refs.md引用生命周期、失效规则和故障排查
references/session-management.md会话持久化、并行会话
references/authentication.md登录流程、OAuth、双重身份验证处理
references/video-recording.md用于调试的录制工作流
references/proxy-support.md代理配置、地理位置测试

即用模板

模板说明
templates/form-automation.sh带验证的表单填写
templates/authenticated-session.sh登录一次,重复使用会话
templates/capture-workflow.sh使用截图提取内容

示例

表单提交
SESSION=$(belt app run agent-browser --function open --session new --input '{
  "url": "https://example.com/contact"
}' | jq -r '.session_id')

# Get elements: @e1 [input] "Name", @e2 [input] "Email", @e3 [textarea], @e4 [button] "Send"

belt app run agent-browser --function interact --session $SESSION --input '{"action": "fill", "ref": "@e1", "text": "John Doe"}'
belt app run agent-browser --function interact --session $SESSION --input '{"action": "fill", "ref": "@e2", "text": "[email protected]"}'
belt app run agent-browser --function interact --session $SESSION --input '{"action": "fill", "ref": "@e3", "text": "Hello!"}'
belt app run agent-browser --function interact --session $SESSION --input '{"action": "click", "ref": "@e4"}'

belt app run agent-browser --function snapshot --session $SESSION --input '{}'
belt app run agent-browser --function close --session $SESSION --input '{}'
搜索和提取
SESSION=$(belt app run agent-browser --function open --session new --input '{
  "url": "https://google.com"
}' | jq -r '.session_id')

belt app run agent-browser --function interact --session $SESSION --input '{"action": "fill", "ref": "@e1", "text": "weather today"}'
belt app run agent-browser --function interact --session $SESSION --input '{"action": "press", "text": "Enter"}'
belt app run agent-browser --function interact --session $SESSION --input '{"action": "wait", "wait_ms": 2000}'

belt app run agent-browser --function snapshot --session $SESSION --input '{}'
belt app run agent-browser --function close --session $SESSION --input '{}'
带视频的截图
SESSION=$(belt app run agent-browser --function open --session new --input '{
  "url": "https://example.com",
  "record_video": true
}' | jq -r '.session_id')

# Take full page screenshot
belt app run agent-browser --function screenshot --session $SESSION --input '{
  "full_page": true
}'

# Close and get video
RESULT=$(belt app run agent-browser --function close --session $SESSION --input '{}')
echo $RESULT | jq '.video'

会话

浏览器状态会在会话中保留。请务必:

  1. 首次调用时使用 --session new
  2. 后续调用使用返回的 session_id
  3. 完成后关闭会话

相关技能

# Web search (for research + browse)
npx skills add inference-sh/skills@web-search

# LLM models (analyze extracted content)
npx skills add inference-sh/skills@llm-models

文档

评论

支持 Markdown