Show HN：一个在 Chrome 侧边栏运行的 Web Browser Agent

Show HN: A web browser agent in your Chrome side panel

Source | HN Comments

BrowserBee 是一个 AI 驱动的 Chrome 浏览器助手，以开源形式提供。它允许用户通过自然语言控制浏览器，利用 LLM 解析指令并结合 Playwright 实现自动化。主要功能包括：支持多种 LLM 提供商、跟踪 token 使用量、访问浏览器工具、记忆功能等。用户可以通过下载、源码构建或 Chrome Web Store 安装。BrowserBee 可用于社交媒体管理、新闻聚合、个人助理、研究等场景。文章还探讨了 Playwright 在浏览器中的应用、LLM 在网页交互中的挑战，以及隐私优先的 AI 工具的重要性。

parsaghaffari/browserbee

main Branches Tags

Go to file Code

Folders and files

Name | Name | Last commit message | Last commit date ---|---|---|---

Latest commit

History

Repository files navigation

BrowserBee 🐝

你的浏览器内AI助手。用自然语言控制网络。

BrowserBee.mp4

BrowserBee 是一个注重隐私的开源 Chrome 扩展，它允许你使用自然语言控制你的浏览器。它结合了 LLM 的指令解析和规划能力，以及 Playwright 强大的浏览器自动化功能来完成任务。

由于 BrowserBee 完全在你的浏览器中运行（除了 LLM），它可以安全地与已登录的网站（如你的社交媒体帐户或电子邮件）交互，而不会损害安全性或需要后端基础设施。这使得它比其他“浏览器使用”类型的产品更方便个人使用。

🎲 Features

支持主要的 LLM 提供商，例如 Anthropic，OpenAI，Gemini和 Ollama，未来还将支持更多。
跟踪 token 使用量 和价格，因此你可以知道在每个任务上花费了多少。
可以访问各种 🕹️ 浏览器工具（如下所列），用于交互和理解浏览器状态。
在后台使用 Playwright，这是一个强大的浏览器自动化工具。
memory 功能捕获有用的工具使用序列，并将它们本地存储，以提高未来使用的效率。
agent 知道何时要求用户 approval，例如，用于购买或在社交媒体上发布更新。

🕹️ Supported tools

Navigation Tools

browser_navigate
- 将浏览器导航到特定的 URL。输入必须是完整的 URL，例如 https://example.com
browser_wait_for_navigation
- 等待直到网络空闲 (Playwright)。
browser_navigate_back
- 返回到上一页 (history.back())。没有输入。
browser_navigate_forward
- 前进到下一页 (history.forward())。没有输入。

Tab Context Tools

browser_get_active_tab
- 返回有关当前活动选项卡的信息，包括其索引，URL 和标题。
browser_navigate_tab
- 将特定选项卡导航到 URL。输入格式：'tabIndex|url'（例如，'1|https://example.com'）
browser_screenshot_tab
- 按索引截取特定选项卡的屏幕截图。输入格式：'tabIndex[,flags]'（例如，'1,full'）

Interaction Tools

browser_click
- 单击一个元素。输入可以是 CSS 选择器或要在页面上匹配的文字文本。
browser_type
- 输入文字。格式：selector|text（例如，input[name="q"]|hello）
browser_handle_dialog
- 接受或取消最近的 alert/confirm/prompt 对话框。输入 accept 或 dismiss。对于 prompt 对话框，您可以附加 |text 来提供回复文本。

Observation Tools

browser_get_title
- 返回当前页面标题。
browser_snapshot_dom
- 捕获当前页面的 DOM 快照，可以选择 selector、clean、structure 和 limit。
browser_query
- 为你提供的 CSS 选择器最多返回 10 个 outerHTML 代码段。
browser_accessible_tree
- 返回 AX 可访问性树 JSON（默认：interesting‑only）。输入 'all' 以转储完整的树。
browser_read_text
- 返回页面上所有可见文本，并按 DOM 顺序连接。
browser_screenshot
- 截取当前页面的屏幕截图，可以选择完整页面捕获。

Mouse Tools

browser_move_mouse
- 将鼠标光标移动到绝对屏幕坐标。输入格式：x|y（示例：250|380）
browser_click_xy
- 在绝对坐标处左键单击。输入格式：x|y（示例：250|380）
browser_drag
- 使用左键拖放。输入格式：startX|startY|endX|endY（示例：100|200|300|400）

Keyboard Tools

browser_press_key
- 按下一个键。输入是键名（例如 Enter，ArrowLeft，a）。
browser_keyboard_type
- 在当前焦点位置输入任意文本。输入是要输入的文字文本。使用 \n 表示换行符。

Tab Tools

browser_tab_list
- 返回打开选项卡的列表，其中包含其索引和 URL。
browser_tab_new
- 打开一个新标签页。可选输入 = 要导航到的 URL（否则为空白标签页）。
browser_tab_select
- 通过索引将焦点切换到标签页。输入 = 来自 browser_tab_list 的整数索引。
browser_tab_close
- 关闭一个标签页。输入 = 要关闭的索引（如果为空，则默认为当前标签页）。

Memory Tools

save_memory
- 保存关于如何在网站上完成特定任务的记忆。当你想记住一个有用的操作序列以供将来参考时，可以使用此功能。
lookup_memories
- 查找特定网站域的存储记忆。在网站上开始任务时，请首先使用此功能，以检查是否有任何可以重用的已保存模式。
get_all_memories
- 检索所有域的所有存储记忆。当你想查看所有可用的记忆时，可以使用此功能。
delete_memory
- 按 ID 删除特定的记忆。当记忆不再有用或不准确时，可以使用此功能。
clear_all_memories
- 清除所有存储的记忆。使用此功能时要小心，因为它会删除所有域的所有记忆。

✅ Use Cases

Social media butler: 检查你的社交媒体帐户，总结通知和消息，并帮助你回复。
News curator: 从你喜欢的新闻来源和博客中收集和总结最新的头条新闻，为你提供快速、个性化的简报。
Personal assistant: 帮助处理日常任务，例如阅读和发送电子邮件和消息、预订航班、查找产品等等。
Research assistant: 通过收集和组织信息来协助深入研究公司、职位列表、市场趋势和学术出版物等主题。
Knowledge bookmarking & summarization: 快速总结文章，提取关键信息，并保存有用的见解以供以后参考。
Chat with any website: 提出问题，生成摘要，填写表格等。

🛫 Roadmap

请参考 ROADMAP.md 获取我们计划添加到 BrowserBee 的最新功能列表。

支持保存和重播会话（宏）
能够根据需要记忆关键信息（在你的本地 Chrome 实例中使用 [IndexedDB](https://github.com/parsaghaffari/</https:/developer.chrome.com/docs/devtools/storage/indexeddb>）
计划任务执行（例如，每天早上检查新闻和社交媒体）

如果你有兴趣贡献构建这些功能中的任何一个，或者以任何方式改进 BrowserBee，请前往 CONTRIBUTING.md。

▶️ Installation

你有三种安装 BrowserBee 的选择：

Option 1: Download the latest release (Recommended)

从 GitHub Releases 下载最新版本
解压缩下载的文件
在 Chrome 中加载扩展：
- 转到 chrome://extensions/
- 启用 “开发者模式”（在右上角切换）
- 单击 “加载未打包的扩展程序” 并选择解压缩的目录
- 在弹出的选项页面中设置你的 LLM API 密钥（对于 Anthropic、OpenAI、Gemini）和/或配置 Ollama。

Option 2: Build from source

克隆此存储库
使用 npm install 或 pnpm install 安装依赖项（这需要约 3 分钟）
使用 npm run build 或 pnpm build 构建扩展
在 Chrome 中加载扩展：
- 转到 chrome://extensions/
- 启用 “开发者模式”
- 单击 “加载未打包的扩展程序” 并选择 dist 目录
- 在弹出的选项页面中设置你的 LLM API 密钥（对于 Anthropic、OpenAI、Gemini）和/或配置 Ollama。

Option 3: Chrome Web Store (Coming Soon)

BrowserBee 很快将在 Chrome Web Store 上可用，等待审核。获得批准后，你将能够通过单击一下直接从商店安装它。

🏃‍♂️ Usage

单击 Chrome 工具栏中的 BrowserBee 图标，或按 Alt+Shift+B，以打开侧面板
输入你的指令（例如，“转到 Google，搜索 Cicero，然后单击第一个结果”）
按 Enter 并观看 BrowserBee 开始工作 🐝

Note:

由于 BrowserBee 使用 Chrome DevTools Protocol (CDP) 连接到选项卡，因此最好将其连接到一个基本选项卡，该选项卡在整个会话中保持打开状态（如果需要，BrowserBee 可以打开新选项卡）。如果你关闭了连接的选项卡，请使用按钮重新连接到新选项卡。
每个 Chrome 窗口可以运行一个 BrowserBee 实例，并且这些实例将彼此隔离工作。
BrowserBee 无法连接到没有 URL 的选项卡（例如，新选项卡），或 URL 以 “chrome://” 或 “chrome-extension://” 开头的选项卡。

🫂 Acknowledgements

BrowserBee 是使用这些出色的开源项目构建的：

Cline 使我们能够 vibe-code BrowserBee 的第一个版本，并激发了我构建 “Web 的 Cline” 的灵感。
@ruifigueira 的 playwright-crx 用于在浏览器中使用 Playwright
playwright-mcp 用于浏览器工具的实现
daisyUI 🌼 用于 ~~花粉和花蜜~~ UI 组件 :)

💡 Learnings & what's worth stealing

Running Playwright in the browser. Playwright 为 LLM 提供了一个强大而标准的接口，用于与现代网站和 Web 应用程序交互。我遇到的大多数 “浏览器使用” 方法（例如 Browser Use 和 Playwright MCP）主要设计用于以后端服务浏览器的方式远程控制浏览器，这对于企业自动化来说非常强大，而 @ruifigueira 已经表明，我们可以使用浏览器扩展整齐地包装 Playwright，并降低最终用户用例的复杂性。
"Reflect and learn" memory pattern. 某些设置在 AI agent 的反馈方面非常丰富。这是其中之一，agent 不仅具有广泛的工具来与环境交互，而且还具有强大的观察能力来了解其行为对环境的影响。例如，如果 agent 的任务是完成产品购买，那里很可能通过使用不同的工具（例如鼠标和键盘交互）强行实现最终目标，通常可以通过定期截取屏幕截图来判断其是否已成功完成任务。这里对 agent 来说是一个有价值的学习信号，通过调用 agent 来编码和记忆这些学习内容，我们可以增强未来的性能并提高类似任务的效率，尤其是对于较小的、功能较弱的模型。在我有限的测试中，如果我们记住最佳工具序列，有时可以将任务所需的 token 数量（以及成本）减少 5 倍或更多。
Interacting with web pages remains a hard task for LLM-powered agents. DOM 和屏幕截图是复杂、低信息密度的模式，对于 LLM 来说处理速度慢、成本高且具有挑战性。例如，将网页与一段代码进行比较：一段代码中的每个 token 平均比 HTML 页面中的 token 或屏幕截图中的像素携带更多信息。因此，我们需要巧妙简化的表示形式以及更便宜/更快的模型，才能使此类产品完全可行。
Why use an LLM at all?. 在这种情况下，LLM agent 可以提供的核心价值在于发现完成任务的路径或操作序列，然后可以将其编码为一组工具调用，或者实际上是纯 JavaScript（请参阅 Playwright Codegen）；一旦知道序列，遵循它就很简单 - 不需要 LLM。
Privacy-first personal AI tools are the way to go. 毫无疑问，我们大多数人将来都会拥有某种形式的永久在线 AI 仆人，而且我认为我们能够安全地实现这一目标的唯一方法是通过与我们的数据和 LLM 透明交互的开源软件。构建这种类型的软件和支持它的商业模式（例如，提供托管版本）有很多空间，所以我真的希望看到和使用更多强大的开源 AI 助手。

📜 License

Apache 2.0

About

🐝 AI驱动的浏览器助手 ("Web浏览的 Cline")

Languages

TypeScript 99.7%
Other 0.3%

Footer

Footer navigation

Terms
Privacy
Security
Status
Docs
Contact
Manage cookies
Do not share my personal information

You can’t perform that action at this time.