💡 一个真实的需求场景
你可能遇到过这样的情况：需要在多个招聘网站搜索职位信息，或者定期从不同平台收集数据做对比。这些重复性的浏览器操作既耗时又枯燥。OpenAI 的 Operator 能解决这个问题，但要付费，而且数据要上传到云端。
最近发现了一个开源项目 Nanobrowser，它是一个 Chrome 浏览器扩展，可以用自然语言指挥 AI 自动完成网页操作，关键是完全在本地运行，数据不出你的电脑。
🎯 这个工具能做什么
Nanobrowser 的核心功能是浏览器自动化。简单说，就是你用文字描述想做的事，AI 会自动操作浏览器完成任务。
几个实用场景：
- 自动搜索并整理多个网站的信息
- 批量填写表单或提交数据
- 定期抓取特定网页内容
- 测试网页的交互流程
主要特点：
- 本地运行：所有操作在你的浏览器里执行，API Key 存在本地
- 模型灵活：支持 OpenAI、Claude、Gemini、Ollama 等多种大模型
- 完全免费：代码开源，只需要自己准备 API Key
- 对话交互：用自然语言描述任务，AI 自动执行
🏗️ 技术实现方式
项目基于 Browser Use 和 LangChain 开发，前端用 React + TypeScript，构建工具是 Vite。代码结构采用 Turborepo 管理的 Monorepo 形式，分为扩展核心、共享包和文档站点三部分。
最有意思的是它的多智能体设计。
Nanobrowser 用了两个专门的 AI 智能体协同工作：
Planner（规划者）负责分析任务、制定策略、遇到问题时调整方案。
Navigator（导航者）负责执行具体操作，比如定位页面元素、点击按钮、输入文字。
两个智能体通过消息传递配合完成任务。你甚至可以给它们配置不同的模型——比如用 Claude 做规划推理，用 GPT-4o 快速执行操作。
🚀 如何使用
安装方法有两种：
方法一：从 Chrome 应用商店安装
- 搜索 "Nanobrowser" 直接添加
- 打开扩展设置页面添加 API Key
- 为每个智能体选择使用的模型
方法二：手动安装最新版
- 从 GitHub 下载最新 Release 的 zip 包
- 解压后在 chrome://extensions/ 页面加载
使用示例：
假设你想了解 HuggingFace 上热门的文本生成模型，可以这样输入：
访问 HuggingFace，搜索最热门的文本生成模型，
总结前三个模型的特点
然后 AI 会自动打开网站、输入搜索词、访问模型页面、提取信息并汇总结果。整个过程在侧边栏实时显示，你可以随时干预或追问。
💻 代码实现细节
项目代码应用了多种设计模式：
- 策略模式：适配不同的 LLM 提供商
- 观察者模式：智能体状态变化时通知界面更新
- 责任链模式：任务在智能体之间传递处理
- 工厂模式：动态创建不同类型的智能体
核心算法包括任务分解（Planner 用 LLM 推理拆解复杂任务）、DOM 定位（基于语义理解生成选择器）、上下文管理（高效存储对话历史）。
开发工具链比较现代化：pnpm workspace 管理依赖，Turborepo 构建，ESLint + Prettier 保证代码规范，GitHub Actions 做 CI/CD。
🎨 适合什么场景
- 数据收集：从多个网站自动抓取信息
- 重复操作：批量处理表单等重复性任务
- 自动化测试：测试网页的用户交互流程
- 信息整合：跨网站搜索并汇总结果
- 学习研究：了解 AI Agent 的实现原理
📌 使用注意事项
- 目前只支持 Chrome 和 Edge 浏览器，Firefox 和 Safari 不支持
- 需要自己准备 LLM 的 API Key
- 复杂任务可能需要多次调整提示词
- 项目更新比较快，建议关注 GitHub 动态
🔗 项目地址
GitHub 仓库
https://github.com/nanobrowser/nanobrowser
官方文档
https://nanobrowser.ai/docs
✨ 总结
Nanobrowser 提供了一个本地化的浏览器自动化方案，多智能体架构设计合理，代码质量不错，适合学习和二次开发。如果你对 AI Agent 应用感兴趣，或者有浏览器自动化的需求，可以试试这个工具。
关注《云栈大前端》，分享前端、移动、全栈领域的技术和开源项目！
标签 ：#Nanobrowser #Github #浏览器自动化 #AI智能体 #Chrome扩展 #开源项目 #LangChain
发表于 3 天前
|
查看: 10|
回复: 0
