🚀 快速安装
复制以下命令并运行，立即安装此 Skill：
npx skills add https://skills.sh/runablehq/mini-browser/mini-browser💡 提示：需要 Node.js 和 NPM
mini-browser (mb) — 代理浏览器命令行工具
mb 是一个浏览器命令行工具，每个命令都是一个小的 Unix 工具。它通过 puppeteer-core 与 Chrome 通过 CDP（端口 9222）通信。
设置（仅在尚未可用时执行）
仅当 mb 未安装或 Chrome 无法访问时才需要设置。
先运行以下检查——如果两项都通过，直接跳转到命令参考部分。
检查是否就绪
# 1. mb 是否已安装？
which mb && echo "mb: ok" || echo "mb: MISSING"
# 2. Chrome 是否在 CDP 端口监听？
curl -sf http://127.0.0.1:9222/json/version > /dev/null && echo "chrome: ok" || echo "chrome: NOT RUNNING"
如果两项都输出 “ok”，说明一切就绪——直接使用 mb 命令即可。
安装（仅当 mb 缺失时）
npm install -g @runablehq/mini-browser
启动 Chrome（仅当未运行时）
mb-start-chrome
这将启动带有 --remote-debugging-port=9222 的 Chrome，使用全新配置文件和一个 1024×768 的窗口。如果 Chrome 已在运行，则此命令不执行任何操作。
要终止并重新启动：
mb-restart-chrome
验证
mb go "https://example.com" && mb text
环境变量
| 变量 | 默认值 | 描述 |
|---|---|---|
CHROME_PORT |
9222 |
CDP 端口 |
CHROME_BIN |
自动检测 | Chrome/Chromium 二进制文件路径 |
CHROME_PID_FILE |
<scripts>/.chrome-pid |
PID 文件位置 |
CHROME_USER_DATA_DIR |
<scripts>/.chrome-profile |
Chrome 配置文件目录 |
命令参考
导航
| 命令 | 描述 |
|---|---|
mb go <url> |
导航到 URL（等待网络空闲） |
mb url |
打印当前 URL |
mb back |
后退 |
mb forward |
前进 |
观察
| 命令 | 描述 |
|---|---|
mb text [selector] |
可见文本内容（默认：body） |
mb shot [file] |
截图保存为 PNG（默认：./shot.png） |
mb snap |
列出带有坐标的可交互元素 |
交互
| 命令 | 描述 |
|---|---|
mb click <x> <y> |
点击指定坐标 |
mb type [x y] <text> |
输入文本（带坐标时：先选中第一个） |
mb fill <k=v...> |
通过标签/名称/占位符填写表单字段 |
mb key <key...> |
按键（Enter、Tab、Meta+a） |
mb move <x> <y> |
悬停到指定坐标 |
mb drag <x1> <y1> <x2> <y2> |
在两点之间拖动 |
mb scroll [dir] [px] |
滚动（默认：向下 500 像素） |
录制
| 命令 | 描述 |
|---|---|
mb record start <file> |
开始录制（.webm、.mp4、.gif） |
mb record stop |
停止录制并保存 |
mb record status |
检查录制是否活跃 |
标签页
| 命令 | 描述 |
|---|---|
mb tab list |
列出打开的标签页 |
mb tab new [url] |
打开新标签页，打印索引 |
mb tab close [n] |
关闭标签页（默认：最后一个） |
其他
| 命令 | 描述 |
|---|---|
mb js <code> |
在页面上下文中运行 JavaScript |
mb wait <target> |
等待毫秒数 / 选择器 / 网络空闲 / url:模式 |
mb audit |
设计审核（调色板、排版、对比度、可访问性、SEO） |
mb logs |
流式输出控制台日志（按 Ctrl+C 停止） |
标志
| 标志 | 默认值 | 描述 |
|---|---|---|
--timeout <ms> |
30000 | 命令超时时间 |
--tab <n> |
0 | 目标标签页索引 |
--json |
false | 结构化 JSON 输出 |
--right |
false | 右键点击 |
--double |
false | 双击 |
--fps <n> |
30 | 录制帧率 |
--scale <n> |
1 | 录制缩放因子 |
使用模式
观察 → 行动循环
标准的代理循环：快照页面，选择元素，对其执行操作。
mb snap # 列出带有 (x, y) 坐标的可交互元素
mb click 512 380 # 点击该坐标上的按钮
mb wait networkidle # 等待页面稳定
mb snap # 再次观察
填写并提交表单
mb go "https://example.com/login"
mb fill "邮箱=user@example.com" "密码=hunter2"
mb key Enter
mb wait url:/dashboard
截图
mb shot page.png
提取文本
mb text "main" # 从 <main> 提取文本
mb text "#content" # 从 #content 提取文本
mb text # 完整 body 文本
运行 JavaScript
mb js 'document.title'
echo 'document.querySelectorAll("a").length' | mb js -
录制屏幕
mb record start demo.mp4 --fps 30 --scale 1
# ... 与页面交互 ...
mb record stop
设计审核
mb audit # 人类可读报告
mb audit --json # 结构化 JSON 输出
关闭覆盖层
Cookie 横幅和模态框会阻止点击。用 JS 移除它们：
mb js 'document.querySelector("[class*=cookie]")?.remove()'
等待策略
mb wait 2000 # 等待 2 秒
mb wait ".modal" # 等待选择器出现
mb wait networkidle # 等待网络空闲
mb wait url:/dashboard # 等待 URL 包含特定字符串
重要说明
- 视口为 1024×768。
snap仅返回当前视口内的元素——滚动后再snap可以找到更多元素。 text使用 querySelector —— 仅返回第一个匹配项。使用text "main"比text "p"效果更好。go等待网络空闲。 对于大型单页应用，后续可使用wait ".selector"。- 带坐标的
type会先三击选中现有文本，然后输入替换内容。 fill字段匹配顺序： aria-label → placeholder → name 属性 → id → 标签文本 → CSS 选择器（使用#/./[前缀）。--json输出格式：snap→[{role, name, x, y, state}]，tab list→[{index, url, title}]，logs→ JSON 行，audit→ 完整审核对象。- 录制状态 存储在
~/.mb-recorder.json。一次只能有一个录制。 tab close无法关闭最后一个标签页。
故障排除
| 问题 | 解决方案 |
|---|---|
| “Chrome not found” | 设置 CHROME_BIN=/path/to/chrome |
| 连接被拒绝 | 先运行 mb-start-chrome |
| 录制状态过时 | 删除 ~/.mb-recorder.json |
| Chrome 窗口尺寸错误 | mb-restart-chrome（创建全新配置文件） |
| 元素未出现在 snap 输出中 | mb scroll down 500 然后再次 mb snap |
📄 原始文档
完整文档（英文）：
https://skills.sh/runablehq/mini-browser/mini-browser
💡 提示：点击上方链接查看 skills.sh 原始英文文档，方便对照翻译。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
评论(0)