OpenClawSkills
GitHub
特性 • 4 分钟阅读

浏览器与画布

为你的 Agent 提供在网页上的眼睛和双手。全面的自动化和视觉交互。

OpenClaw 包含强大的浏览器自动化功能和视觉画布 (Canvas) 工作区。这些功能允许 Agent 与网站交互、自动化任务，并为复杂操作提供视觉界面。

Tutorial.step

浏览器控制

浏览器工具使 OpenClaw 能够：

  • 🔍
    导航网站访问并与任何网站交互。
  • ✍️
    填写表单自动填写并提交网页表单。
  • 📄
    提取数据抓取并从页面中提取信息。
  • 🖱️
    点击元素与按钮、链接和 UI 元素交互。
  • 📸
    截屏捕获页面截图。
  • ⚡
    执行 JavaScript在页面上运行自定义 JavaScript。

启用浏览器控制

BrowserPage.browserControl.configDesc

openclaw.json
{
  "browser": {
    "enabled": true,
    "defaultProfile": "openclaw",
    "headless": false,
    "profiles": {
      "openclaw": { "cdpPort": 18800, "color": "#FF4500" },
      "work": { "cdpPort": 18801, "color": "#0066CC" }
    }
  }
}

使用场景

  • 自动化表单提交
  • 监控网站变化
  • 从网页提取数据
  • 进行基于 Web 的研究
  • 自动化重复的 Web 任务
Tutorial.step

画布工作区

画布是 OpenClaw 的视觉工作区功能：

  • 视觉界面 - Agent 驱动的视觉工作区
  • 交互式元素 - 按钮、表单和控件
  • 实时更新 - 动态内容更新
  • 节点集成 - 可通过 iOS/Android 节点访问

画布宿主

画布宿主提供视觉界面：

  • 端口 18793 上的 HTTP 文件服务器 (默认)BrowserPage.canvas.server.desc
  • 可通过控制 UI 或节点访问默认安全 (回环或经过身份验证)。
Tutorial.step

浏览器自动化示例

表单自动化

要求 OpenClaw 填写并提交表单：

  • "填写 example.com 上的联系表单"
  • "使用我的详细信息提交此申请表单"
  • "预订下周的机票"

数据提取

从网站提取信息：

  • "从该产品页面获取最新价格"
  • "从该页面提取所有电子邮件地址"
  • "抓取该网站的表格数据"

网页监控

监控网站变化：

  • 检查产品是否有货
  • 监控价格变化
  • 追踪网站更新
Tutorial.step

浏览器安全

浏览器控制功能强大，应谨慎使用：

默认沙箱化

浏览器在隔离环境中运行。

会话隔离

每个会话都有自己的浏览器上下文。

工具策略

控制每个会话的浏览器访问权限。

仅限受信任的会话

对于不受信任的会话 (群组)，浏览器访问通常默认禁用。

Tutorial.step

浏览器故障排除

常见的浏览器问题及解决方案：

  • Linux 问题可能需要额外的依赖项 (参见 Linux 浏览器故障排除文档)。
  • 权限确保浏览器具有必要的权限。
  • 无头模式浏览器默认以无头模式运行。
  • 超时问题如果页面加载缓慢，请调整超时设置。