教程概述

系列索引: gstack 教程系列

/browse 给你的 AI 代理真正的眼睛。不是模拟的——真实的 Chromium、真实的点击、真实的截图。

你将学到

• ✅ /browse 命令参考
• ✅ /open-gstack-browser 带反机器人隐身
• ✅ 带自动模型路由的侧边栏代理
• ✅ 用于 CAPTCHA 处理的 Handoff/resume
• ✅ QA 流程示例

为什么需要真实浏览器？

没有真实浏览器

flowchart LR
    A[AI 猜测 UI] --> B[写代码]
    B --> C[部署]
    C --> D[用户报告 bug]
    D --> E[AI 猜测修复]

    style A fill:#ffcccc
    style D fill:#ffcccc

有 /browse

flowchart TD
    A[/browse] --> B[真实 Chromium]
    B --> C[实际点击]
    C --> D[截图]
    D --> E[AI 看到问题]
    E --> F[有证据地修复]

    style A fill:#e1f5ff
    style E fill:#e8f5e9

/browse — 无头 Chromium

基本命令

# 导航
/browse https://example.com

# 截图
$B screenshot

# 点击元素
$B click "button[type='submit']"

# 输入文本
$B type "#email" "[email protected]"

# 等待元素
$B wait ".result"

# 提取文本
$B text "h1"

# 执行 JavaScript
$B eval "document.querySelector('.price').innerText"

性能

/open-gstack-browser — 品牌浏览器

增加的功能

1. 反机器人隐身 — 通过 Cloudflare、Google
2. 侧边栏扩展 — 内置 Claude Code 集成
3. 自定义品牌 — 菜单栏显示 “GStack Browser”
4. 持久会话 — 工作时无空闲超时

何时使用

• 有机器人检测的网站
• 认证流程
• 长时间运行的会话
• 需要看到浏览器时

无头 vs 有头

# 无头（默认，更快）
/browse https://example.com

# 有头（可见，用于调试）
/open-gstack-browser
# 然后正常使用 $B 命令

侧边栏代理

是什么

Chrome 侧面板中的自然语言。一个子 Claude 实例执行你的命令。

自动模型路由

示例命令

侧边栏："导航到设置页面并截图"
侧边栏："用测试数据填写这个表单"
侧边栏："遍历这个列表中的每一项并提取价格"
侧边栏："找到这个页面上的损坏链接"

会话隔离

每个侧边栏任务在隔离会话中运行。不会干扰你的主 Claude Code 窗口。每个任务最多 5 分钟。

Handoff/Resume

问题

有时 AI 会卡住：

• CAPTCHA 挑战
• MFA 提示
• 认证墙
• 复杂登录

解决方案

flowchart TD
    A[AI 卡住] --> B[$B handoff]
    B --> C[打开可见 Chrome]
    C --> D[用户解决问题]
    D --> E[用户: '完成']
    E --> F[$B resume]
    F --> G[AI 继续]

    style B fill:#fff3e0
    style F fill:#e8f5e9

自动建议

连续失败 3 次后，gstack 会建议：

我在 CAPTCHA/认证墙上卡住了。
你希望我切换到可见浏览器吗？
你可以解决它，然后告诉我什么时候完成。

命令

# 切换到可见浏览器
$B handoff

# 用户解决后恢复
$B resume

Cookie 导入

一键导入

从你的真实浏览器导入 cookies：

/setup-browser-cookies

选择来源：

• Chrome
• Arc
• Brave
• Edge

何时使用

• 测试认证页面
• 保留登录状态
• 访问付费内容

QA 流程示例

场景

测试预发布环境的登录流程。

命令

# 启动浏览器
/browse https://staging.example.com

# 导航到登录
$B click "a[href='/login']"

# 截图登录页
$B screenshot

# 填写凭证
$B type "#email" "[email protected]"
$B type "#password" "testpassword123"

# 提交
$B click "button[type='submit']"

# 等待仪表板
$B wait ".dashboard"

# 验证已登录
$B text ".user-name"
# 输出: "Test User"

# 截图结果
$B screenshot

结果

✅ 登录流程正常
- 导航到 /login
- 填写凭证
- 重定向到仪表板
- 用户名正确显示

截图已保存: login-flow-001.png

技能快速参考

总结

/browse 给 AI 真正的眼睛：

1. 真实 Chromium — 不是模拟，真实浏览器
2. 快速命令 — 每个操作约 100ms
3. 侧边栏代理 — Chrome 中的自然语言
4. Handoff/resume — 卡住时人工帮助

关键要点

• ✅ 使用 /browse 进行自动化测试
• ✅ 使用 /open-gstack-browser 处理机器人重的网站
• ✅ 导入 cookies 进行认证测试
• ✅ 对 CAPTCHA 切换给人工

系列导航：

• ← 上一篇: 教程 5：设计管道
• → 下一篇: 教程 6B：多代理浏览器
• 返回: 系列索引