Nanobrowser 完整上手指南：从安装部署到跑通首个网页自动化任务-二趣网

Nanobrowser 完整上手指南：从安装部署到跑通首个网页自动化任务

【免费下载链接】nanobrowserOpen-Source Chrome extension for AI-powered web automation. Run multi-agent workflows using your own LLM API key. Alternative to OpenAI Operator.项目地址: https://gitcode.com/GitHub_Trending/na/nanobrowser

每天花十几分钟手动打开网页、复制信息、再整理进表格，这类重复操作会不断切碎整块工作时间。Nanobrowser 是一款开源的 AI 网页自动化浏览器扩展，通过多智能体系统（多个 AI 角色分工协作）代替用户完成浏览、点击与信息提取。它运行在本地浏览器中，使用你自己的大模型 API 密钥，不经过额外云端服务。本文以 Chrome 为例，演示如何在 10 分钟内完成安装与配置，并跑通第一个任务。

下图是 Nanobrowser 的主视觉界面：

🎯 一、核心能力速览

网页任务自动化：一句自然语言指令，即可驱动浏览器完成打开页面、点击元素、提取信息
多智能体协作：内置规划者、导航员、校验者三个角色，分工处理复杂任务
模型自由配置：支持 OpenAI、Anthropic、Gemini、Ollama 等供应商，不同角色可分配不同模型
会话历史与追问：侧边栏保留任务记录，可对已完成任务继续提问
能力边界：面向网页端操作，不支持 Firefox 与 Safari，不处理桌面端应用

多智能体逻辑运行在扩展的背景服务（Manifest V3 后台脚本）中，架构细节见第五章。

🚀 二、部署与准备

本文以 Chrome 浏览器为例，Edge 同样完整支持。环境要求：Chrome 或 Edge 最新版、稳定网络；源码构建另需 Node.js v22.12.0 与 pnpm v9.15.1 以上版本。

主线：从商店安装

打开浏览器扩展商店，搜索 Nanobrowser，确认扩展名称与开发者
点击"添加到 Chrome"，在弹窗中确认安装
点击工具栏的拼图图标，将 Nanobrowser 固定到工具栏

验证方式：工具栏出现 Nanobrowser 图标，点击后右侧滑出侧边栏。

备选：源码构建（开发者）

clone 仓库后执行安装与构建，产物在 dist 目录，按"加载已解压的扩展程序"方式载入浏览器：

git clone https://gitcode.com/GitHub_Trending/na/nanobrowser cd nanobrowser && pnpm install && pnpm build

若商店版本功能滞后，也可下载最新发布压缩包，在 chrome://extensions/ 开启开发者模式后加载。

⚙️ 三、接入AI能力

打开设置页

点击工具栏的 Nanobrowser 图标打开侧边栏，再点击右上角的设置图标，进入设置页的 LLM Providers 标签。此时应能看到各供应商的密钥输入区域。

填写密钥并选择模型

在 LLM Providers 中填入对应供应商的 API 密钥。当前支持范围：OpenAI、Anthropic、Google Gemini、Ollama、自定义 OpenAI 兼容接口。随后在模型下拉框中分别为 Navigator 和 Planner 指定模型，保存设置。保存成功后，对应条目显示为已配置状态。

角色分工建议

三个角色的职责一句话概括：Planner（规划者）制定任务策略与步骤；Navigator（导航员）执行页面导航和元素交互；Validator（校验者）核对任务是否完成。推荐配置为 Planner 使用 Claude Sonnet 4、Navigator 使用 Claude Haiku 3.5，兼顾推理质量与调用成本。

🧪 四、跑通第一个任务

打开页面：访问一个信息列表页，例如 GitHub Trending 页面
输入指令：在侧边栏输入框中输入：提取当前页面前5个项目的名称、描述和星标数
观察执行：点击发送。侧边栏会实时显示智能体的思考步骤：先由规划者拆解任务，再由导航员读取页面内容，每一步都有状态提示
查看结果：任务结束后，侧边栏汇总前 5 个项目的信息，可直接对结果继续追问

若指令涉及跳转，导航员会在当前标签页内完成访问，全程可在浏览器中直接看到操作轨迹。

五、多智能体协作

输入"对比 A 和 B 两个方案"时，流程如下：规划者先拆解任务，再让导航员分别访问两个页面收集信息，最后校验者核对结果并汇总输出。

角色	模型建议	职责
规划者	Sonnet 4	拆解任务、制定步骤
导航员	Haiku 3.5	页面导航、元素交互
校验者	—	核对任务完成度

❓ 六、常见问题速查

扩展图标不显示

→ 检查是否已固定到工具栏 → 在 chrome://extensions/ 确认扩展状态为已启用 → 重启浏览器

智能体无响应或报鉴权错误

→ 检查 API 密钥是否填写正确 → 确认所选模型服务当前可用 → 更换供应商或模型重试

任务执行到一半中断

→ 检查目标网站是否有验证码或访问限制 → 简化指令措辞后重试 → 把任务拆成更小步骤分次执行

七、进阶方向

可关注 chrome-extension/src/background/agent/ 目录，了解规划者与导航员的提示词和输出结构
可在设置中通过 Ollama 接入本地模型，进一步降低调用成本
配合 packages/hmr 热更新机制，在 pnpm dev 开发模式下快速调试扩展
参与贡献前可先阅读 CONTRIBUTING.md，从文档改进或 bug 修复入手

跑通首个任务后，这套多智能体流程即可复用到日常的信息收集与表单操作上。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

企业官网建设流程全解析