mirror of
https://github.com/Tencent/BrowserSkill.git
synced 2026-09-10 13:01:23 +08:00
drakezhangandCursor
1ef93463dd
The extension is now published to Edge Add-ons, but every install path still pointed Edge users at the Chrome Web Store. Both READMEs and AGENT_INSTALL.md now name a store per browser, and `bsk doctor` offers both listings when no browser is connected. Two Edge-specific gaps went with it: Edge blocks content-script injection on its own storefront the same way Chrome does, so the borrow-confirmation overlay must treat microsoftedge.microsoft.com/addons as non-injectable; and the Chinese README still described the pre-install.ps1 manual Windows setup. Also give the DeepSeek Harness section its npm package link and the profile-start step, so plugin users have a complete path. Co-authored-by: Cursor <cursoragent@cursor.com>
185 lines
8.0 KiB
Markdown
185 lines
8.0 KiB
Markdown
# BrowserSkill
|
||
|
||
<p align="center">
|
||
<img src="docs/assets/browserskill-readme-banner.png" alt="BrowserSkill 横幅" />
|
||
</p>
|
||
|
||
<p align="center">
|
||
<strong>让 AI Agent 操作你的浏览器，而不打断你的工作。</strong>
|
||
</p>
|
||
|
||
<p align="center">
|
||
<a href="README.md">English</a> · 中文
|
||
</p>
|
||
|
||
**BrowserSkill** 把 Cursor、Claude Code、Codex、OpenClaw、CodeBuddy、WorkBuddy、Pi、Hermes Agent、DeepSeek Harness 等 AI Agent 连接到你已登录的浏览器。
|
||
|
||
需要 Agent 操作你已打开的标签页？必须显式借用该标签，任务结束后归还，其余浏览器窗口不受影响。
|
||
|
||
https://github.com/user-attachments/assets/db782c92-b1d4-4aae-a255-039675937a90
|
||
|
||
## BrowserSkill 的优势
|
||
|
||
- **复用真实登录态**：Agent 可以操作你已经登录的网站，不需要额外测试账号。
|
||
- **不中断你的工作**：浏览器任务在独立可见的 Agent Window 中运行，不影响你继续使用自己的浏览器。
|
||
- **支持任意 Agent**：只要 Agent 能调用 Shell，就可以通过 `bsk` CLI 使用 BrowserSkill，不绑定特定模型、Agent 框架或 harness。
|
||
- **内置 human-in-loop**：遇到 captcha、登录、确认弹窗等必须由人处理的步骤时，Agent 可以主动请求你接管，完成后再继续任务。
|
||
|
||
## 运行环境
|
||
|
||
BrowserSkill 由两个本地运行组件组成：`bsk` CLI/daemon 和浏览器扩展。
|
||
|
||
| 运行项 | 支持情况 |
|
||
| --- | --- |
|
||
| 操作系统 | macOS（Apple Silicon 和 Intel）、Linux（x64 和 ARM64）、Windows x64 |
|
||
| 浏览器 | 已支持 Chrome 和 Microsoft Edge；其他支持加载 Chromium 扩展的浏览器通常可用；Firefox 计划中 |
|
||
|
||
## 快速开始
|
||
|
||
<details open>
|
||
<summary><b>让 Agent 帮你安装（推荐）</b></summary>
|
||
|
||
<br>
|
||
|
||
已经在用 Cursor、Claude Code、Codex 或其他支持 Shell 的 Agent？只需复制下面这句话发给 Agent，它会帮你安装 CLI 和 skill，并引导你加载浏览器扩展：
|
||
|
||
```text
|
||
按照 https://raw.githubusercontent.com/Tencent/BrowserSkill/main/AGENT_INSTALL.md 的说明，在本机安装并配置 browser-skill
|
||
```
|
||
|
||
</details>
|
||
|
||
<details>
|
||
<summary><b>手动安装</b></summary>
|
||
|
||
<br>
|
||
|
||
先安装 CLI，再从 [Chrome Web Store](https://chromewebstore.google.com/detail/hhcmgoofomhgciiibhipgmgkgnoenaoi)
|
||
或 [Edge 加载项商店](https://microsoftedge.microsoft.com/addons/detail/browserskill/emacgiaaaiojkkpkddmmdfhmokgmnikg) 安装浏览器扩展。
|
||
|
||
#### 1. 安装 `bsk` CLI
|
||
|
||
**macOS / Linux**（推荐，安装到 `~/.local/bin`）：
|
||
|
||
```bash
|
||
curl -fsSL https://raw.githubusercontent.com/Tencent/BrowserSkill/main/install.sh | sh
|
||
```
|
||
|
||
**Windows**（PowerShell，安装到 `~/.local/bin`）：
|
||
|
||
```powershell
|
||
irm https://raw.githubusercontent.com/Tencent/BrowserSkill/main/install.ps1 | iex
|
||
```
|
||
|
||
验证二进制：
|
||
|
||
```bash
|
||
bsk --version
|
||
```
|
||
|
||
#### 2. 安装浏览器扩展
|
||
|
||
在对应浏览器的商店安装 BrowserSkill：
|
||
|
||
| 浏览器 | 商店页面 |
|
||
| --- | --- |
|
||
| Chrome | [Chrome Web Store](https://chromewebstore.google.com/detail/hhcmgoofomhgciiibhipgmgkgnoenaoi) |
|
||
| Microsoft Edge | [Edge 加载项商店](https://microsoftedge.microsoft.com/addons/detail/browserskill/emacgiaaaiojkkpkddmmdfhmokgmnikg) |
|
||
|
||
其他基于 Chromium 的浏览器，安装 Chrome Web Store 版本即可。
|
||
|
||
#### 3. 安装 skill
|
||
|
||
BrowserSkill 自带 skill，用于教 Agent harness 如何使用 `bsk`。以下 harness 可一键安装：
|
||
|
||
<p align="center">
|
||
<table>
|
||
<tr>
|
||
<td align="center" width="108"><a href="https://cursor.com" title="Cursor"><img src="docs/assets/harnesses/cursor.svg" height="36" alt="Cursor" /></a><br /><sub><b>Cursor</b></sub></td>
|
||
<td align="center" width="108"><a href="https://docs.anthropic.com/en/docs/claude-code" title="Claude Code"><img src="docs/assets/harnesses/claude.svg" height="36" alt="Claude Code" /></a><br /><sub><b>Claude Code</b></sub></td>
|
||
<td align="center" width="108"><a href="https://developers.openai.com/codex" title="Codex"><img src="docs/assets/harnesses/codex.svg" height="36" alt="Codex" /></a><br /><sub><b>Codex</b></sub></td>
|
||
<td align="center" width="108"><a href="https://openclaw.ai" title="OpenClaw"><img src="docs/assets/harnesses/openclaw.svg" height="36" alt="OpenClaw" /></a><br /><sub><b>OpenClaw</b></sub></td>
|
||
<td align="center" width="108"><a href="https://www.codebuddy.ai" title="CodeBuddy"><img src="docs/assets/harnesses/codebuddy.svg" height="36" alt="CodeBuddy" /></a><br /><sub><b>CodeBuddy</b></sub></td>
|
||
<td align="center" width="108"><a href="https://www.workbuddy.ai" title="WorkBuddy"><img src="docs/assets/harnesses/workbuddy.svg" height="36" alt="WorkBuddy" /></a><br /><sub><b>WorkBuddy</b></sub></td>
|
||
<td align="center" width="108"><a href="https://github.com/badlogic/pi-mono" title="Pi"><img src="docs/assets/harnesses/pi.svg" height="36" alt="Pi" /></a><br /><sub><b>Pi</b></sub></td>
|
||
<td align="center" width="108"><a href="https://github.com/NousResearch/hermes-agent" title="Hermes Agent"><img src="docs/assets/harnesses/hermes.png" height="36" alt="Hermes Agent" /></a><br /><sub><b>Hermes Agent</b></sub></td>
|
||
</tr>
|
||
</table>
|
||
</p>
|
||
|
||
```bash
|
||
bsk install-skill
|
||
```
|
||
|
||
用 <kbd>Space</kbd> 选择需要安装的 Agent harness，然后按 <kbd>Enter</kbd> 安装 skill。运行 `bsk install-skill --list` 可查看 internal 变体及安装路径。
|
||
|
||
其他支持 Shell 的 Agent harness 也可使用 BrowserSkill，但需手动将 [`skill/SKILL.md`](skill/SKILL.md) 复制到对应 skills 目录下的 `browser-skill/SKILL.md`。DeepSeek Harness 走独立插件，见 [DeepSeek Harness 插件](#deepseek-harness-插件)。
|
||
|
||
</details>
|
||
|
||
启动一个新的 Agent 会话，写一条需要使用浏览器的 prompt，例如：
|
||
|
||
```text
|
||
/browser-skill open example.com and summarize what is on the page.
|
||
```
|
||
|
||
## DeepSeek Harness 插件
|
||
|
||
在用 [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness)（`dsh`）？BrowserSkill 提供了官方 dsh 插件，已发布到 npm：[`@wxg-prc-cpg/browser-skill-dsh-plugin`](https://www.npmjs.com/package/@wxg-prc-cpg/browser-skill-dsh-plugin)。它会注入原生 `browser_*` 工具（无需再通过 Shell 调用 `bsk`），并在 Web UI 中实时观察每个 Agent Window。
|
||
|
||
把它装进某个 dsh profile，然后启动该 profile：
|
||
|
||
```sh
|
||
dsh plugin --profile web add @wxg-prc-cpg/browser-skill-dsh-plugin
|
||
dsh --profile web
|
||
```
|
||
|
||
插件自带 skill，所以在 dsh 下无需执行 `bsk install-skill`；但 `bsk` CLI 和浏览器扩展仍是前置条件。工具清单、配置项与观察浮层见[插件 README](packages/dsh-plugin-browserskill/README.md)。
|
||
|
||
## 工作原理
|
||
|
||
BrowserSkill 是 Agent 运行时与浏览器之间的本地桥接层。
|
||
|
||
```mermaid
|
||
flowchart TB
|
||
subgraph Harness["Agent 运行时"]
|
||
Agent["Cursor / Claude Code / Codex / OpenClaw"]
|
||
end
|
||
|
||
subgraph Local["本机"]
|
||
CLI["bsk CLI"]
|
||
Daemon["bsk daemon"]
|
||
Extension["BrowserSkill 扩展"]
|
||
end
|
||
|
||
subgraph Browser["浏览器配置文件"]
|
||
AgentWindow["Agent Window"]
|
||
UserWindows["你的常规浏览器窗口"]
|
||
end
|
||
|
||
Agent -->|"shell: bsk ..."| CLI
|
||
CLI -->|"本地 IPC"| Daemon
|
||
Daemon -->|"127.0.0.1 WebSocket"| Extension
|
||
Extension -->|"自动化"| AgentWindow
|
||
Extension -.->|"仅在请求时借用标签"| UserWindows
|
||
|
||
style AgentWindow fill:#fff4e6,stroke:#f59e0b,stroke-width:2px,color:#111827
|
||
style UserWindows fill:#f8fafc,stroke:#cbd5e1,color:#334155
|
||
```
|
||
|
||
Agent 不直接与浏览器通信。它通过 `bsk` CLI 下发浏览器任务；本地 daemon 把请求路由到扩展；扩展在 Agent Window 中执行。DeepSeek Harness 走同一条链路，只是经由 [插件](#deepseek-harness-插件)：Agent 调用注入的 `browser_*` 工具，由插件代为执行 `bsk`。
|
||
|
||
## 面向开发者
|
||
|
||
本仓库是 Cargo + pnpm workspace：
|
||
|
||
- `crates/bsk-cli` — `bsk` CLI 与本地 daemon
|
||
- `crates/bsk-protocol` — 共享协议类型与 JSON Schema
|
||
- `apps/extension` — 浏览器扩展
|
||
- `packages/ui` 和 `packages/i18n` — 扩展 UI 共享支持
|
||
- `packages/dsh-plugin-browserskill` — DeepSeek Harness 插件（`@wxg-prc-cpg/browser-skill-dsh-plugin`）
|
||
|
||
## 许可证
|
||
|
||
MIT
|