# AI浏览器自动化技能

`浏览器自动化` `AI代理` `OpenClaw` `Browser-Use` `网页抓取`

# 🌐 OpenClaw 的 Browser-Use 技能

> **告别繁琐的截图→操作循环。** 让 AI 端到端处理复杂浏览器自动化任务。

[![ClawHub](https://img.shields.io/badge/ClawHub-browser--use-blue?style=flat-square)](https://clawhub.com)
[![License: MIT](https://img.shields.io/badge/License-MIT-green?style=flat-square)](LICENSE)
[![Browser-Use](https://img.shields.io/badge/Powered_by-Browser--Use-orange?style=flat-square)](https://github.com/browser-use/browser-use)
[![Wiki](https://img.shields.io/badge/📖_Wiki-7_pages-purple?style=flat-square)](https://github.com/abczsl520/browser-use-skill/wiki)

---

## 😤 问题所在

OpenClaw 内置的浏览器工具适合简单任务——截图、点击按钮，搞定。但面对**多步骤工作流**时，它就成了噩梦：

```
Agent: *截图* → *点错按钮* → *截图* → *页面变了* →
       *困惑* → *再点一次* → *弹窗出现* → *彻底懵了* → ❌ 失败
```

是不是很熟悉？登录表单、动态页面、弹窗、反爬检测——内置工具根本不是为这些场景设计的。

## ✅ 解决方案

本技能集成了 [**Browser-Use**](https://github.com/browser-use/browser-use)（38k+ ⭐）——一个能**像人一样看页面**、自主完成整套工作流的 AI 浏览器代理。

```
你：          "登录 Reddit 并把这篇文章发到 r/python"
Browser-Use:  ✅ 打开登录页 → 输入凭证 → 等待 CAPTCHA →
              跳转到发帖页 → 填写标题和正文 → 点击发布 → 返回 URL
```

**一个任务进去，结果出来。** 不需要手动一步步盯着它操作。

## ⚡ 快速开始

```bash
# 1. 安装技能
clawhub install browser-use

# 2. 配置 Python 环境（仅需一次）
python3 -m venv ~/browser-use-env
source ~/browser-use-env/bin/activate
pip install browser-use playwright langchain-openai
playwright install chromium
```

然后直接告诉你的 OpenClaw 代理：

> *"用 browser-use 登录 Reddit 发个帖子"*

技能会处理一切：模式选择、脚本生成、执行和错误恢复。

## 🤔 什么时候用哪个

| 场景 | 内置 `browser` | 本技能 |
|------|:---:|:---:|
| 截图 | ✅ 免费且即时 | ❌ 大材小用 |
| 点击一个按钮 | ✅ | ❌ |
| **5+ 步骤工作流**（登录→导航→填写→提交） | ❌ 容易出错 | **✅ 自主完成** |
| **反爬网站**（Reddit、LinkedIn、Twitter） | ❌ 会被识别 | **✅ 真实 Chrome** |
| **批量操作** | ❌ | **✅** |
| **复杂导航的数据抓取** | ❌ 需手动 | **✅ 智能处理** |

> **经验法则：** 如果需要超过 3 次点击，就用 Browser-Use。

## 🔑 核心特性

### 🎯 智能任务路由
技能能判断何时需要 Browser-Use、何时内置工具就够用，不浪费 API 调用。

### 🔐 安全凭证处理
密码通过占位符替换传递——LLM **永远看不到你的真实凭证**：
```python
agent = Agent(
    task="使用 x_user 和 x_pass 登录",
    sensitive_data={"x_user": "real@email.com", "x_pass": "S3cret!"},
)
```

### 🛡️ 反检测（真实 Chrome 模式）
通过 CDP 连接你实际的 Chrome 浏览器——网站看到的是真实用户，零检测风险：
```python
browser = Browser(cdp_url="http://127.0.0.1:9222")
```

### ⚡ 闪速模式
跳过 LLM 推理处理简单步骤——速度提升 2 倍：
```python
agent = Agent(task="...", flash_mode=True)
```

### 🔧 内置故障恢复
遇到 CAPTCHA？超时？反垃圾检测？技能内置了完整的常见故障决策树。

## 📖 快速示例

```python
import asyncio
from browser_use import Agent, ChatOpenAI, Browser

async def main():
    llm = ChatOpenAI(model="gpt-4o-mini", api_key="YOUR_KEY")
    browser = Browser(cdp_url="http://127.0.0.1:9222")  # 真实 Chrome
    
    agent = Agent(
        task="""
        1. 访问 https://news.ycombinator.com
        2. 提取前 5 条故事的标题和 URL
        3. 以格式化列表形式返回
        """,
        llm=llm, browser=browser, use_vision=True, max_steps=15,
    )
    result = await agent.run()
    print(result)

asyncio.run(main())
```

## 🎮 LLM 兼容性

| LLM | 可用 | 适合场景 |
|-----|:---:|---------|
| GPT-4o-mini | ✅ | **默认选择**——快速且经济 |
| GPT-4o | ✅ | 复杂推理任务 |
| Claude 3.5+ | ✅ | 良好的替代方案 |
| Gemini | ❌ | 结构化输出不兼容 |

## 📚 文档

📖 **[完整 Wiki →](https://github.com/abczsl520/browser-use-skill/wiki)**

| 指南 | 内容 |
|------|------|
| [快速入门](https://github.com/abczsl520/browser-use-skill/wiki/Getting-Started) | 安装、配置、第一个自动化任务 |
| [模式 A vs 模式 B](https://github.com/abczsl520/browser-use-skill/wiki/Mode-A-vs-Mode-B) | 内置 Chromium vs 真实 Chrome |
| [任务编写指南](https://github.com/abczsl520/browser-use-skill/wiki/Task-Writing-Guide) | 写出一次成功的提示词 |
| [敏感数据](https://github.com/abczsl520/browser-use-skill/wiki/Sensitive-Data) | 安全的密码处理 + 双因素认证 |
| [实战示例](https://github.com/abczsl520/browser-use-skill/wiki/Real-World-Examples) | 可直接复用的代码片段 |
| [故障排查](https://github.com/abczsl520/browser-use-skill/wiki/Troubleshooting) | 修复常见问题 |
| [常见问题](https://github.com/abczsl520/browser-use-skill/wiki/FAQ) | 快速解答 |

## 🔗 相关项目

- [Browser-Use](https://github.com/browser-use/browser-use) — 底层浏览器 AI 框架（38k+ ⭐）
- [OpenClaw](https://github.com/openclaw/openclaw) — 本技能运行的 AI 代理平台
- [Bug Audit](https://github.com/abczsl520/bug-audit-skill) — 动态漏洞挖掘（200+ 模式）
- [Debug Methodology](https://github.com/abczsl520/debug-methodology) — AI 代理的根因调试方法
- [Game Quality Gates](https://github.com/abczsl520/game-quality-gates) — 12 项通用游戏开发质量检查

## 🤝 贡献

发现了 bug？有好想法？[提交 issue](https://github.com/abczsl520/browser-use-skill/issues) 或发 PR！

## 📄 许可证

[MIT](LICENSE) — 随意使用。

---

<p align="center">
  <b>⭐ 如果本技能节省了你的时间，欢迎给仓库点个 Star——这能帮助更多人找到它！</b>
</p>