OpenClaw 操控浏览器
每天都要学习新东东。

点击、输入、上传文件、滚动、截图、执行 JS 等等，全都能做。

1. 先确保 Chrome 已正确启动（调试端口开启）

   "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="C:\remote-debug-profile" --no-first-run --disable-infobars
   

   • 建议额外加 --no-sandbox（如果有权限问题）、--disable-extensions（减少干扰）。
   • 启动后，在另一个正常 Chrome 里访问 http://localhost:9222/json/version 应该看到类似：

     {
       "Browser": "Chrome/xxx",
       "Protocol-Version": "1.3",
       "User-Agent": "...",
       "V8-Version": "...",
       "WebKit-Version": "...",
       "webSocketDebuggerUrl": "ws://localhost:9222/devtools/browser/xxxx-xxxx-xxxx-xxxx"
     }
     

     → 如果能看到，就说明 CDP 已就绪。

2. 在 OpenClaw 里添加 remote profile
   OpenClaw 的配置文件通常在：

   • Windows: C:\Users\你的用户名\.openclaw\config.json 或类似路径（也可能在项目目录下）
   • 或者通过 OpenClaw 的 UI / CLI 配置（推荐用 UI，如果有 macOS/Windows app 的话）。

   编辑（或添加） profiles 部分，大概长这样：

   {
     "profiles": {
       "my-chrome-debug": {
         "type": "remote",
         "cdpUrl": "ws://localhost:9222/devtools/browser",
         "color": "#FF5555",           // 可选，界面标签颜色
         "name": "My Debug Chrome"     // 可选，显示名
       }
     }
   }
   

   • 关键：cdpUrl 必须是 WebSocket 地址。
     • 最简单方式：打开 http://localhost:9222/json/version，直接复制里面的 "webSocketDebuggerUrl" 值贴进去。
     • 如果你每次启动的 browser UUID 不同（常见），可以用固定端口的简写形式："ws://127.0.0.1:9222"（OpenClaw 会自动找 browser websocket）。
     • 推荐用完整 ws 路径，避免连接不稳定。

   保存后，重启 OpenClaw gateway（如果是用 CLI：openclaw gateway restart 或通过系统托盘重启）。

3. 在 OpenClaw 的 Agent / Skill / 对话中使用这个 profile
   当你让 OpenClaw 执行浏览器操作时，必须指定 profile，否则默认走 openclaw 或 chrome 模式。

   常见用法示例（在对话里直接说，或者写 skill / hook）：

   • 基础指令（自然语言）：

     用 my-chrome-debug 这个浏览器 profile 打开 https://example.com 并登录
     

   • 更精确的工具调用（如果你的 agent 支持显式 tool call）：

     {
       "tool": "browser",
       "args": {
         "profile": "my-chrome-debug",
         "action": "goto",
         "url": "https://twitter.com/login"
       }
     }
     

   OpenClaw 的 browser tool 支持的常见动作（2026 年最新大致支持这些，具体看 docs.openclaw.ai/tools/browser 或内置 skill 文档）：

   动作	说明	示例参数
   goto / open	打开/跳转页面	url: “https://…”
   click	点击元素	selector: “button[type=submit]”, 或用 @ref（见下面）
   type / fill	输入文本	selector: “input[name=username]”, text: “myuser”
   upload	上传文件（图片/视频等）	selector: “input[type=file]”, path: “C:/pics/a.jpg”
   snapshot	截图当前页面或元素 → 生成元素引用	返回 @0, @1… 的元素标签，便于后续 click @3
   scrape / get_content	读取页面文本/HTML/可见内容	selector 或 whole_page: true
   evaluate	执行 JS	script: “document.title”
   scroll	滚动页面	direction: “down”, amount: 800
   wait_for	等待元素出现/网络空闲	selector 或 navigation: true

   上传图片/视频的典型流程（最实用场景）：

   1. 先 snapshot → 得到文件输入框的引用（如 @7）
   2. 然后：

      用 my-chrome-debug 浏览器，在 @7 这个上传控件上传文件 C:\videos\demo.mp4
      

      或更底层：

      browser profile=my-chrome-debug upload selector="input[type='file'][accept='video']" file="C:/path/to/video.mp4"
      

   OpenClaw 会通过 CDP 的 Page.setFileInputFiles 实现上传，支持本地绝对路径。

4. 调试 & 常见问题处理

   • 连不上？ → 检查 http://localhost:9222 是否可访问；确认 Chrome 没关；端口没被占（netstat -ano | find “9222”）。
   • 总是默认走 chrome 扩展模式？ → 强制指定 profile=“my-chrome-debug”，或在 config 里把 defaultBrowserProfile 设成你的 remote profile。
   • 元素找不到？ → 用 snapshot 先看页面结构，很多 agent 会自动生成带 @编号 的元素地图，优先用 @ref 点击/填写，更稳定。
   • 想看操作过程？ → 可以同时开 chrome://inspect 连同一个端口，实时看 DevTools 里发生了什么。
   • 安全性：这个 profile 能访问你 Chrome 的 Cookie/登录态，小心别让 agent 乱点付费/敏感操作。

基本上配置好 remote profile 后，