Automation Skills

浏览器自动化、基于截图的交互以及请求路由。这些技能赋予 CLI-JAW 通过 CDP 控制 Chrome、从截图中点击 UI 元素以及以编程方式路由 Web 请求的能力。

browser

通过 Chrome DevTools Protocol (CDP) 控制 Chrome 浏览器。可以打开页面、导航、拍摄参考快照、点击元素、输入文本、提取内容以及捕获截图。需要 cli-jaw 浏览器服务器处于运行状态。

功能

使用示例

# Open a page and take a screenshot
/browser open https://example.com
/browser screenshot

# Click a button by selector
/browser click "#submit-btn"

# Type into an input field
/browser type "#search-input" "CLI-JAW documentation"

# Extract text content from an element
/browser extract ".main-content" text

# Execute JavaScript in the page
/browser eval "document.title"

CDP 连接

browser 技能通过 cli-jaw 浏览器服务器连接到 Chrome，该服务器管理 CDP WebSocket 连接。使用浏览器命令前必须先启动服务器。

# Start the browser server (runs on a dedicated port)
jaw browser serve

# The skill auto-connects when invoked
# Connection is reused across commands in the same session

vision-click

基于截图的 UI 交互，使用视觉模型。该技能不依赖 DOM 选择器，而是通过截图识别 UI 元素，并在正确的坐标位置进行点击。适用于屏幕上可见的任何应用程序——不仅限于浏览器。

工作原理

1. 捕获 -- 对当前屏幕或指定区域进行截图
2. 分析 -- 将截图发送给视觉模型以识别目标元素
3. 定位 -- 模型返回要点击的元素的像素坐标
4. 执行 -- 在识别到的坐标位置执行点击（或其他操作）

使用示例

# Click a button described by its visual label
/vision-click "the blue Submit button"

# Click on a specific icon
/vision-click "the gear icon in the top-right corner"

# Right-click on a file in Finder
/vision-click --right "the README.md file"

# Describe what is currently visible
/vision-click --describe

何时使用 vision-click 与 browser

web-routing

编程式 HTTP 请求路由和拦截。配置请求处理程序，可以重定向、重写、阻止或转换 Web 流量。适用于本地开发代理、API 模拟和流量整形。

路由规则

使用示例

# Redirect API calls to local dev server
/web-routing add /api/* -> http://localhost:8080/api/*

# Mock a specific endpoint with a JSON response
/web-routing mock GET /api/users '[{"id":1,"name":"Test"}]'

# Block tracking requests
/web-routing block *.analytics.com

# Add auth header to all outgoing API requests
/web-routing transform /api/* --header "Authorization: Bearer $TOKEN"

# List active routing rules
/web-routing list

# Remove a routing rule
/web-routing remove /api/*

模式匹配

路由模式支持 glob 语法，可以基于路径、主机、方法和头部进行匹配。

# Glob patterns
/api/*                    # matches /api/users, /api/posts/1, etc.
/api/users/:id            # named parameter capture
*.example.com             # subdomain wildcard

# Method-specific routes
GET /api/users            # only match GET requests
POST /api/users           # only match POST requests

# Header-based matching
/api/* [Content-Type: application/json]   # match by header

技能对比

根据您的任务选择合适的自动化技能。

常见模式

抓取与提取

将 browser 技能与内容提取相结合，从网页中获取结构化数据。

# Open the target page
/browser open https://news.example.com

# Extract all article titles
/browser eval "Array.from(document.querySelectorAll('h2.title')).map(el => el.textContent)"

# Take a screenshot for reference
/browser screenshot

表单自动化

通过链式输入和点击命令来填写并提交表单。

# Navigate to login page
/browser open https://app.example.com/login

# Fill in credentials
/browser type "#email" "user@example.com"
/browser type "#password" "secretpassword"

# Submit the form
/browser click "#login-btn"

# Wait for navigation and verify
/browser wait "nav.dashboard"
/browser screenshot

桌面应用 + 浏览器组合

在混合工作流中，使用 vision-click 操作桌面应用元素，使用 browser 操作 Web 内容。

# Click "Open in Browser" in a desktop app
/vision-click "the Open in Browser button"

# Switch to browser skill for DOM-level control
/browser wait ".main-content"
/browser extract ".main-content" text