/ 目录 / 演练场 / browser-act skills
● 社区 browser-act ⚡ 即开即用

browser-act skills

作者 browser-act · browser-act/skills

浏览、爬取并从复杂网站提取结构化数据——比驱动完整无头浏览器更快、更便宜。

browser-act 是一个用于网页自动化的 Claude skill,优先考虑结构化提取而非「截图 + 推理」循环。访问页面、导航流程、通过显式选择器或 schema 引导的 prompt 提取有类型的数据。可以处理 DDG 式抓取返回空结果的 JS 重度网站,但对于许多任务比完整的 Playwright MCP 更便宜。

为什么要用

核心特性

实时演示

实际使用效果

就绪

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "browser-act-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ],
      "_inferred": true
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "browser-act-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "browser-act-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ],
      "_inferred": true
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标,然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "browser-act-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ],
      "_inferred": true
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "browser-act-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ]
    }
  ]
}

Continue 使用服务器对象数组,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "browser-act-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/browser-act/skills",
          "~/.claude/skills/browser-act"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add browser-act-skill -- git clone https://github.com/browser-act/skills ~/.claude/skills/browser-act

一行命令搞定。用 claude mcp list 验证,claude mcp remove 卸载。

使用场景

实战用法: browser-act skills

从 JS 重度 SPA 中提取有类型的数据列表

👤 需要从没有 API 的网站一次性获取数据的开发者 ⏱ ~25 min intermediate

何时使用: 网站只在 JS 执行后才渲染你需要的数据;普通抓取返回空结果。

前置条件
  • Skill 已安装 — git clone https://github.com/browser-act/skills ~/.claude/skills/browser-act
步骤
  1. 定义 schema
    Use browser-act. Schema: items[]{title:str, price:number, available:bool}.✓ 已复制
    → Schema 已接受
  2. 访问并提取
    Open <url>; wait for the product grid; extract matching the schema.✓ 已复制
    → 有类型的 JSON 列表
  3. 验证异常值
    Spot-check 3 random rows by re-fetching their detail page; check parsing is correct.✓ 已复制
    → 抽查通过;或发现了需要修复的解析 bug

结果: 可靠的有类型数据;无需手动点击。

注意事项
  • 网站在 50 次请求后检测到爬虫并封锁 — 降低并发;轮换 UA;遵守 robots.txt 或放弃该任务
搭配使用: filesystem

通过多步骤表单导航到隐藏在后面的数据

👤 需要爬取登录或向导后面数据的开发者 ⏱ ~40 min intermediate

何时使用: 公共数据集隐藏在「选国家 → 选年份 → 点查看」这样的流程后面。

步骤
  1. 规划流程
    Use browser-act. Steps: pick country=US, year=2025, click 'View'. Then extract the table.✓ 已复制
    → 流程计划已接受
  2. 执行
    Run the flow for 50 country/year combinations.✓ 已复制
    → 50 组合的有类型行数据
  3. 持久化
    Write each combo to /data/<country>-<year>.json.✓ 已复制
    → /data/ 中有对应文件

结果: 批量获取点击式 UI 后面的数据,无需手动劳动。

注意事项
  • 网站添加了步骤或重命名了按钮导致流程中断 — Skill 会注意到并暂停;你只需重新录制一次流程,而非 50 次
搭配使用: filesystem

监控页面变化并发出告警

👤 监视状态页/可用性追踪的任何人 ⏱ ~15 min beginner

何时使用: 你想知道预约名额什么时候放出、价格什么时候降低、文档什么时候更新。

步骤
  1. 定义监控目标
    Use browser-act. Watch <url> selector '.availability-banner' every 10 minutes. Alert if text changes.✓ 已复制
    → 监控已激活
  2. 定义告警路径
    Alert via: write to ~/inbox/alerts.txt + notify webhook https://<my-webhook>.✓ 已复制
    → 变化时两者都会触发

结果: 对特定信号的免手动监控。

注意事项
  • 监控频率过高 = 被封锁 — 大多数网站保持 ≥5 分钟间隔;遵守 429 响应

组合

与其他 MCP 搭配,撬动十倍杠杆

browser-act-skill + filesystem

将爬取数据持久化到结构化路径

Save extraction outputs to /data/<source>/<date>.json with provenance metadata.✓ 已复制
browser-act-skill + duckduckgo-mcp

先通过搜索找到页面,再进行结构化提取

Search via duckduckgo-mcp for the data source; pass the URL into browser-act for typed extraction.✓ 已复制

工具

此 MCP 暴露的能力

工具输入参数何时调用成本
extract_typed url, schema, wait_for? 从页面拉取结构化数据 Browser run + LLM tokens
run_flow steps[], schema? 多步骤导航 Multi-step browser cost
watch url, selector, interval, action 长期运行的变化检测 Per-poll cost
screenshot url, full_page? 视觉调试 Browser run

成本与限制

运行它的成本

API 配额
取决于提供商;部分流程使用内置浏览器免费
每次调用 Token 数
Schema 引导提取比原始「截图 + 推理」更便宜
费用
Skill 免费;提取时消耗 LLM token
提示
始终传入 schema——无方向的提取会在噪音上浪费 token

安全

权限、密钥、影响范围

最小权限: Outbound HTTPS
凭据存储: 如需登录网站,通过环境变量传入凭证;一次性爬取后轮换
数据出站: 目标网站 + LLM 提供商
切勿授予: 不要在 skill 的工作区中持久存储登录 token

故障排查

常见错误与修复

提取返回空结果

等待选择器的时间更长;网站可能在点击后延迟加载数据或通过 XHR 加载

验证: 使用 screenshot 工具验证页面状态
网站检测到爬虫

降低并发;轮换 UA;考虑该网站是否允许爬取

Schema 不匹配

放宽类型(string vs number);网站的格式可能破坏了严格的类型检查

Watch 因外观变化而频繁触发

将选择器缩窄;或从 HTML diff 切换到基于文本的 diff

替代方案

browser-act skills 对比其他方案

替代方案何时用它替代权衡
Playwright MCP / chrome-devtools-mcp你需要完整浏览器控制和所有 DevTools 功能更重量级;每次调用成本更高
Firecrawl MCP需要全站爬取,而非逐页面的有类型提取使用方式不同;大量使用需付费
duckduckgo-mcp fetch_content页面是纯 HTML;不需要 JS无法处理 SPA

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills