什么是 OpenClaw 浏览器？

OpenClaw 浏览器技能通过利用 Chrome DevTools Protocol (CDP) 实现无缝的浏览器自动化。它允许 AI 代理与实时网页交互、执行自动化任务并捕获高质量截图。通过连接到正在运行的 Chrome 实例，该技能可以绕过复杂网站上常见的无头浏览器检测机制，使其成为 Openclaw Skills 生态系统中进行可靠 Web 数据提取和视觉验证的理想选择。

该技能专为需要不仅仅是简单 HTML 解析的开发者设计。通过使用真实的浏览器实例，它可以处理传统爬虫经常遗漏的 JavaScript 渲染、动态内容和复杂的用户交互。

下载入口:https://github.com/openclaw/skills/tree/main/skills/roger0808/openclaw-browser

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

2. 手动安装

将技能文件夹复制到以下位置之一

优先级：工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

OpenClaw 浏览器 应用场景

• 捕获网站的全屏截图，用于文档备案或监控。
• 自动化操作需要真实浏览器环境的 Web 应用程序。
• 绕过淘宝、小红书等现代 Web 平台上的反爬虫和无头浏览器检测。
• 在开发生命周期中进行视觉回归测试和 UI 验证。

1. 通过 9222 端口的 Chrome DevTools Protocol 建立与运行中的 Chrome 实例的连接。
2. 为任务初始化新的浏览器标签页或选择现有会话。
3. 导航到指定的目标 URL 并等待页面生命周期完成。
4. 执行自动化操作或触发渲染内容的截图捕获。
5. 将输出文件保存到指定的本地路径，以便进一步处理或代理反馈。

OpenClaw 浏览器 配置指南

首先，确保已安装 Chrome 并使用以下命令启动它以启用远程调试：

chrome --remote-debugging-port=9222 --remote-debugging-address=0.0.0.0

要使用您的 Openclaw Skills 配置捕获截图，请运行提供的 Node.js 脚本：

node ~/.openclaw/workspace/skills/openclaw-browser/scripts/screenshot.js https://example.com /tmp/output.png

OpenClaw 浏览器 数据架构与分类体系

该技能通过以下架构管理浏览器会话和输出文件：

name: openclaw-browser
description: Browser automation via Chrome DevTools Protocol (CDP) for OpenClaw. Use when user needs to take screenshots of websites, automate browser actions, or interact with web pages programmatically. Triggers on: screenshot requests, browser automation, web page capture, CDP-based browser control.

OpenClaw Browser

Browser automation for OpenClaw via Chrome DevTools Protocol.

Prerequisites

Chrome must be installed and running with remote debugging enabled:

# Start Chrome with CDP (port 9222)
chrome --remote-debugging-port=9222 --remote-debugging-address=0.0.0.0

Quick Start

Screenshot a Website

# Using the provided script
node ~/.openclaw/workspace/skills/openclaw-browser/scripts/screenshot.js https://example.com /tmp/output.png

# With custom viewport
node ~/.openclaw/workspace/skills/openclaw-browser/scripts/screenshot.js https://example.com /tmp/output.png --width=1920 --height=1080

Full Page Screenshot

The script automatically captures full page content, not just viewport.

How It Works

1. Connects to running Chrome via CDP (http://127.0.0.1:9222)
2. Creates new tab or uses existing one
3. Navigates to target URL
4. Waits for page load
5. Takes screenshot
6. Saves to specified path

Common Issues

Chrome not running:

• Start Chrome with CDP flags first
• Verify with: curl http://127.0.0.1:9222/json/version

Headless detection:

• Some sites (Xiaohongshu, Taobao) detect headless browsers
• Solution: Use non-headless Chrome (visible window)
• This skill connects to existing Chrome, avoiding detection

Permission errors:

• Use --no-sandbox when starting Chrome if needed

Script Reference

See scripts/screenshot.js for the main automation script.

Advanced Usage

For custom automation beyond screenshots, modify the script or use Puppeteer directly:

const puppeteer = require('puppeteer');
const browser = await puppeteer.connect({ browserURL: 'http://127.0.0.1:9222' });
// ... custom actions