什么是 浏览器控制技能？

浏览器控制技能是一套高性能工具集，旨在通过 Chrome DevTools Protocol (CDP) 让 AI 智能体对浏览器进行细粒度控制。通过利用 cdp_send 方法，该技能允许直接执行任何 CDP 命令，绕过了传统高级自动化封装的限制。对于使用 Openclaw Skills 且需要深度浏览器集成以完成复杂任务的开发人员来说，这是一个至关重要的组件。

无论是浏览复杂的 Web 应用程序、实时操作 DOM，还是监控网络流量，该技能都为智能体提供了必要的接口，使其能够像高级 Web 用户一样操作。它将标准浏览器转变为一个可编程环境，使 Openclaw Skills 能够精确地执行视觉审计、运行自定义 JavaScript 以及管理浏览器存储。

下载入口:https://github.com/openclaw/skills/tree/main/skills/nonggialiang/verify-on-browser-1-0-0

安装与下载

1. ClawHub CLI

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

2. 手动安装

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

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

3. 提示词安装

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

浏览器控制技能 应用场景

• 在动态网站上自动执行多步导航和复杂的编码用户交互流程。
• 生成整页或特定元素的截图，用于视觉回归测试和审计。
• 通过直接在浏览器运行时执行自定义 JavaScript 进行深度数据抓取。
• 模拟真实的用户输入，包括鼠标移动、点击和键盘事件，用于功能测试。
• 监控、拦截和修改网络请求及响应，以分析 API 行为。
• 模拟各种设备、视口和地理位置，以测试响应式网页设计和本地化内容。

1. AI 智能体通过 MCP 服务器接口初始化与浏览器实例的连接。
2. 智能体选择特定工具，例如用于原始访问的 cdp_send 或用于特定任务的 screenshot。
3. 命令以 JSON 负载的形式发送到浏览器，针对特定的 CDP 域（如 Page、DOM 或 Network）。
4. 浏览器执行命令并返回结构化响应，包括任何请求的数据或状态更改。
5. 智能体处理返回的数据，以确定 Openclaw Skills 框架内自动化工作流的下一步。

浏览器控制技能 配置指南

要在您的环境中部署浏览器控制技能，请确保您拥有兼容的浏览器并配置了 MCP 服务器。请遵循以下常规步骤：

# 通过 Openclaw CLI 安装浏览器控制技能
openclaw-cli install browser-control

# 配置您的 MCP 设置以包含浏览器服务器
# 确保已安装 Chromium 或 Chrome 且可在路径中访问

安装完成后，您可以通过要求智能体执行基于 Web 的任务（如截屏或与特定 URL 交互）来触发该技能。

浏览器控制技能 数据架构与分类体系

该技能基于 Chrome DevTools Protocol 规范生成和消费结构化数据。以下是涉及的主要数据类型：

description: Control browser via Chrome DevTools Protocol - full CDP access

Browser Control Skill

Use the browser MCP server to control a browser with full CDP access. The core cdp_send tool can call ANY Chrome DevTools Protocol method.

Available Tools

cdp_send - Raw CDP Access

Call any CDP method directly:

cdp_send(method: "Domain.method", params: {...})

screenshot - Capture Page

screenshot(format: "png"|"jpeg", fullPage: true|false)

get_url - Current URL

get_url()

close_browser - Close Browser

close_browser()

Common CDP Operations

Navigation

// Navigate to URL
cdp_send(method: "Page.navigate", params: { url: "https://example.com" })

// Reload
cdp_send(method: "Page.reload")

// Go back/forward
cdp_send(method: "Page.navigateToHistoryEntry", params: { entryId: 1 })

DOM Manipulation

// Get document root
cdp_send(method: "DOM.getDocument")

// Query selector (needs nodeId from getDocument)
cdp_send(method: "DOM.querySelector", params: { nodeId: 1, selector: "h1" })

// Get outer HTML
cdp_send(method: "DOM.getOuterHTML", params: { nodeId: 5 })

// Set attribute
cdp_send(method: "DOM.setAttributeValue", params: { nodeId: 5, name: "class", value: "new-class" })

JavaScript Execution

// Evaluate expression
cdp_send(method: "Runtime.evaluate", params: { expression: "document.title" })

// Evaluate with return value
cdp_send(method: "Runtime.evaluate", params: {
  expression: "document.querySelectorAll('a').length",
  returnByValue: true
})

// Call function on object
cdp_send(method: "Runtime.callFunctionOn", params: {
  objectId: "...",
  functionDeclaration: "function() { return this.innerText; }"
})

Network

// Enable network tracking (required first)
cdp_send(method: "Network.enable")

// Set cookies
cdp_send(method: "Network.setCookie", params: {
  name: "session",
  value: "abc123",
  domain: ".example.com"
})

// Get cookies
cdp_send(method: "Network.getCookies")

// Clear cache
cdp_send(method: "Network.clearBrowserCache")

// Set extra headers
cdp_send(method: "Network.setExtraHTTPHeaders", params: {
  headers: { "X-Custom": "value" }
})

// Block URLs
cdp_send(method: "Network.setBlockedURLs", params: { urls: ["*.ads.com"] })

Input Simulation

// Click (dispatch mouse event)
cdp_send(method: "Input.dispatchMouseEvent", params: {
  type: "mousePressed",
  x: 100,
  y: 200,
  button: "left",
  clickCount: 1
})

// Type text
cdp_send(method: "Input.insertText", params: { text: "Hello world" })

// Key press
cdp_send(method: "Input.dispatchKeyEvent", params: {
  type: "keyDown",
  key: "Enter"
})

Emulation

// Set viewport
cdp_send(method: "Emulation.setDeviceMetricsOverride", params: {
  width: 375,
  height: 812,
  deviceScaleFactor: 3,
  mobile: true
})

// Set geolocation
cdp_send(method: "Emulation.setGeolocationOverride", params: {
  latitude: 37.7749,
  longitude: -122.4194,
  accuracy: 100
})

// Set timezone
cdp_send(method: "Emulation.setTimezoneOverride", params: { timezoneId: "America/New_York" })

Performance & Debugging

// Enable performance metrics
cdp_send(method: "Performance.enable")

// Get metrics
cdp_send(method: "Performance.getMetrics")

// Start profiler
cdp_send(method: "Profiler.start")

// Stop and get profile
cdp_send(method: "Profiler.stop")

// Enable debugger
cdp_send(method: "Debugger.enable")

// Set breakpoint
cdp_send(method: "Debugger.setBreakpointByUrl", params: {
  lineNumber: 10,
  url: "https://example.com/script.js"
})

Storage

// Get local storage
cdp_send(method: "DOMStorage.getDOMStorageItems", params: {
  storageId: { securityOrigin: "https://example.com", isLocalStorage: true }
})

// Clear storage
cdp_send(method: "Storage.clearDataForOrigin", params: {
  origin: "https://example.com",
  storageTypes: "all"
})

CDP Protocol Reference

For complete list of all domains and methods: https://chromedevtools.github.io/devtools-protocol/

Common domains:

• Page - Navigation, lifecycle, PDF generation
• DOM - Document structure manipulation
• CSS - Stylesheet manipulation
• Runtime - JavaScript execution
• Network - Request/response interception
• Input - Keyboard/mouse simulation
• Emulation - Device/viewport simulation
• Debugger - JavaScript debugging
• Performance - Performance metrics
• Storage - localStorage, IndexedDB, cookies