browser-control-skill

[English](README_EN.md) | 中文

# 人和 AI，终于能一起好好用浏览器了

你在前台，它在后台。你让它帮忙，它就接管你的页面——点按钮、填表单、传文件、操作富文本编辑器。你让它自己查，它悄悄开 Tab 并行调研。登录态共享，安全有边界，5 个 AI 平台通用。

---

## 先说清楚：这不是一个"网页阅读器"

大多数 AI 联网方案只能**读**网页——抓取文本、提取内容、返回摘要。

Browser Control Skill 能**操控**你的浏览器：

- 点击按钮、链接、菜单项——包括 React/Vue 等框架渲染的动态元素
- 填写表单——兼容原生 input 和 React 受控组件，值不会被框架吞掉
- 在 Notion、Slack、Gmail 的富文本编辑器里打字——通过 CDP 的 `Input.insertText`，连 contenteditable 区域也能写
- 键盘快捷键——Enter 提交、Tab 切字段、Ctrl+A 全选
- 上传文件——绕过系统文件对话框，直接把本地文件塞给 `<input type="file">`
- 操作下拉框和悬停菜单——标准 `<select>` 和自定义 dropdown 都行
- 截图 + 元素标注——给每个可交互元素编号，截图后一目了然
- 拦截 Console 日志和网络请求——调试 Web 应用时直接看到后台发生了什么

**这是完整的浏览器操控，不是只读的内容提取。**

---

## 但现在的问题是：人和 AI 没法共用一个浏览器

你已经在 Chrome 里登录了公司内网、企业后台、各种 SaaS 平台。你想让 AI 帮你做点事——

但现有方案全在某个环节掉链子：

**Playwright / Puppeteer** — 开一个全新的浏览器。你的登录态？不存在。你得重新登录一遍，或者折腾 Cookie 导出。它和你用的不是同一个 Chrome。

**Chrome DevTools MCP** — 能连你的 Chrome，但你和 AI 没法同时操作。Agent 一动，你的页面就跳。也没有安全防护——你的银行页面它也能点。

**纯 AppleScript 方案** — 只能操作「最前面的窗口」。你在看文档，AI 要填表单——它直接把你的页面抢走了。串行操作，查 5 个网站等 5 倍时间。

**WebFetch / curl** — 根本进不了登录页面。

它们的共同问题：**没有一个方案能让人和 AI 和平共处在同一个浏览器里。**

---

## 解法：前台协作，后台并行，共享一个 Chrome

Browser Control Skill 不是给 AI 单独开一个浏览器——而是让 AI 学会**和你共用一个 Chrome**。

### 两种模式，按场景自动切换

```
/browse here 帮我在这个页面上填表      ← 你看着它做，操作你眼前的页面
/browse bg 同时调研这 5 家公司的官网     ← 它在后台悄悄干，你该干嘛干嘛
/browse 帮我查一下这个公司的信息        ← 自动判断用前台还是后台
```

| 模式 | 技术原理 | 用户体验 |
|------|---------|---------|
| **前台** (here) | AppleScript，操作你的 `front window` | 你看着 AI 操作你眼前的页面，每一步都看得到 |
| **后台** (bg) | CDP 协议，通过 `targetId` 精确寻址 | AI 开自己的 Tab，你的页面纹丝不动 |

前台走 UI 层，后台走协议层。这就是为什么后台模式能做到**完全不碰你的 Tab**——它根本不通过界面操作，而是通过 Chrome 的调试协议直接和目标 Tab 通信。

### 你可以这样用

**场景 1：你在看一个页面，需要 AI 帮忙操作**

你打开了一个内部审批系统，想让 AI 帮你填写表单。

```
/browse here 帮我把这个表单里的申请人改成张三，部门填研发部，然后上传桌面上的附件.pdf
```

AI 直接操作你眼前的页面——填文本框、选下拉菜单、上传文件。你看着它一步步做，确认无误再提交。

**场景 2：你在工作，让 AI 后台帮你调研**

你在写代码，同时需要 AI 帮你查 5 家竞品的最新动态。

```
/browse bg 帮我同时调研这 5 家公司的官网，总结它们最近的产品更新
```

AI 在后台开 5 个 Tab，派 5 个子 Agent 并行调研，各查各的。你的 Chrome 界面完全不受影响。查完了它汇总结果给你