企业官网建设流程全解析

• 人工智能
• AI Agent
• 浏览器控制
• AI 应用

Nanobrowser 是一款完全开源、运行在浏览器本地的 AI Web 自动化 Chrome 扩展，是 OpenAI Operator 的免费替代方案。它采用 Planner（规划）与 Navigator（执行）分工协作的多智能体架构，支持接入 OpenAI、Anthropic、Gemini、Ollama 及任意兼容 OpenAI 的自定义供应商，并允许为不同智能体分配不同模型以平衡成本与性能。本文基于官方西班牙语文档（README-es.md）并结合仓库源码，完整讲解其核心特性、安装配置、模型选型策略、从源码编译方法与典型实战场景。

为什么选择 Nanobrowser

Nanobrowser 以 Chrome 扩展形态提供企业级的浏览器自动化能力，同时让用户始终掌握完全的控制权，其核心理念体现在四个方向：

• 100% 免费：无订阅费、无隐藏成本。安装后使用你自己的 API Key，只为实际消耗付费。
• 隐私优先：所有推理与自动化都在本地浏览器中完成，API 凭据始终保留在你手中，绝不与任何云服务共享。
• 灵活的 LLM 选项：连接你偏好的 LLM 供应商，并自由地为不同智能体选择不同模型。
• 完全开源：浏览器如何被自动化全程透明可见，没有黑箱，也没有隐藏进程。

支持范围：当前支持 OpenAI、Anthropic、Gemini、Ollama 以及兼容 OpenAI 协议的自定义供应商，更多供应商正在规划中。

核心功能一览

• 多智能体系统：多个专业化的 AI 智能体协作，完成复杂的浏览器工作流；
• 交互式侧边面板：直觉化的聊天界面，实时呈现任务状态更新；
• 任务自动化：在各类网站上无缝自动化重复性 Web 任务；
• 追问能力：任务完成后可就已完成的工作继续提问；
• 会话历史：轻松访问与管理你和 AI 智能体的历史交互；
• 多 LLM 支持：连接偏好的 LLM 供应商，并为不同智能体指派不同模型。

快速开始

从 Chrome 应用商店安装（稳定版）

1. 访问 Nanobrowser 的 Chrome Web Store 页面；
2. 点击“添加至 Chrome”按钮；
3. 按提示确认安装。

重要提示：由于 Chrome Web Store 审核流程可能导致版本滞后，如需体验最新功能，请使用下文的“手动安装最新版本”方式。

配置智能体模型

1. 点击工具栏中的 Nanobrowser 图标打开侧边面板；
2. 点击右上角的Settings（设置）图标；
3. 添加你的 LLM API Key；
4. 为不同智能体（Navigator、Planner）选择各自使用的模型。

从源码看，这一步实际写入两类本地存储：packages/storage/lib/settings/llmProviders.ts中的llmProviderStore负责保存供应商配置（apiKey、baseUrl、modelNames 等，存储键为llm-api-keys），而packages/storage/lib/settings/agentModels.ts中的agentModelStore负责为每个智能体指定{ provider, modelName, parameters }（存储键为agent-models）。侧边面板在每次变为可见或获得焦点时都会重新校验是否至少配置了一个智能体模型（参见 SidePanel.tsx）。

手动安装最新版本

当需要体验最新特性时，可通过以下步骤安装最新版本：

1. 下载：从官方 GitHub 发布页 下载最新的nanobrowser.zip文件；
2. 安装：
   • 解压nanobrowser.zip；
   • 在 Chrome 中打开chrome://extensions/；
   • 在右上角启用“开发者模式”；
   • 点击左上角的“加载已解压的扩展程序”；
   • 选择解压后的nanobrowser文件夹；
3. 配置智能体模型：同“快速开始”中的设置步骤；
4. 升级：从发布页下载最新的nanobrowser.zip，解压并替换原有 Nanobrowser 文件，然后回到chrome://extensions/，点击 Nanobrowser 卡片上的刷新图标。

从源码编译

如果希望自行编译 Nanobrowser，请按以下步骤操作：

1. 前置要求：

   • Node.js（v22.12.0 或更高）
   • pnpm（v9.15.1 或更高）

2. 克隆仓库：

   git clone https://github.com/nanobrowser/nanobrowser.git cd nanobrowser

3. 安装依赖：

   pnpm install

4. 编译扩展：

   pnpm build

5. 加载扩展：编译产物位于dist目录，参照“手动安装最新版本”中的加载步骤将其装入浏览器。

6. 开发模式（可选）：

   pnpm dev

仓库采用 pnpm workspace + turbo 的 monorepo 结构（参见 pnpm-workspace.yaml 与 turbo.json），核心扩展位于chrome-extension/，侧边面板位于pages/side-panel/，共享存储逻辑封装在packages/storage/中。

如何选择你的模型

Nanobrowser 允许为每个智能体配置不同的 LLM 模型，以在成本与性能之间取得平衡。官方推荐配置如下：

更佳性能配置

• Planner：Claude Sonnet 4 —— 拥有更强的推理与规划能力；
• Navigator：Claude Haiku 3.5 —— 高效处理网页导航任务，性能与成本平衡良好。

经济型配置

• Planner：Claude Haiku 或 GPT-4o —— 以较低成本获得合理表现，复杂任务可能需要更多迭代；
• Navigator：Gemini 2.5 Flash 或 GPT-4o-mini —— 轻量且经济，适合基础导航任务。

本地模型

• 配置方式：使用 Ollama 或其他兼容 OpenAI 的自定义供应商在本地运行模型，零 API 成本、完全隐私，数据不离开你的机器；
• 推荐模型：
  • Qwen3-30B-A3B-Instruct-2507
  • Falcon3 10B
  • Qwen 2.5 Coder 14B
  • Mistral Small 24B
  • 欢迎在 Discord 社区分享你使用其他本地模型的经验；
• 提示词工程建议：本地模型需要更具体、更清晰的提示词；避免高层级、含糊的命令；将复杂任务拆解为清晰、详细的步骤；提供明确的上下文与约束条件。

注意：经济型配置可能产生较不稳定的输出，复杂任务需要更多迭代。

提示：尽管大胆尝试你自己的模型组合！发现优秀组合后，欢迎在 Discord 分享以帮助其他用户优化配置。

从源码结构看，供应商与模型的默认参数表维护在packages/storage/lib/settings/types.ts：例如 OpenAI 供应商下，Planner 默认temperature: 0.7, topP: 0.9，Navigator 默认temperature: 0.3, topP: 0.85；而 Anthropic 下 Planner 默认temperature: 0.3, topP: 0.6、Navigator 默认temperature: 0.2, topP: 0.5。用户在设置中选择模型后，这些默认参数会与自定义参数自动合并（见 agentModels.ts）。

多智能体架构与执行流程

Nanobrowser 的核心是 Planner 与 Navigator 两个智能体协作的循环执行模型：

• PlannerAgent（planner.ts）：负责观察当前页面状态、识别挑战、判断任务是否完成，并输出下一步指令或最终答案。其输出使用 Zod schema（plannerOutputSchema）约束为observation、challenges、done、next_steps、final_answer、reasoning、web_task等结构化字段，其中done与web_task支持布尔值与字符串的自动转换。
• NavigatorAgent（navigator.ts）：通过NavigatorActionRegistry动态注册可执行动作（如点击、输入、滚动、提取内容等），每步根据浏览器状态生成动作数组并顺序执行；它还会记录交互过的 DOM 元素（interactedElement），以便在“回放历史任务”时通过HistoryTreeProcessor重新定位元素索引（updateActionIndices）。
• 执行调度：Executor（executor.ts）将两者编排进同一任务循环——Navigator 执行动作后，Planner 评估结果并决定继续或结束；当 Planner 判定done时输出final_answer作为最终回复。任务循环支持新任务（new_task）与追问（follow_up_task）两种入口，侧边面板通过chrome.runtime.connect建立side-panel-connection长连接接收实时事件（参见 SidePanel.tsx）。

实战：一句话完成的典型任务

以下任务仅需输入一句话即可完成：

1. 新闻摘要

   "前往 TechCrunch，提取最近 24 小时的前 10 条头条新闻"

2. GitHub 研究

   "在 GitHub 上查找 star 最多的 Python 趋势仓库"

3. 购物调研

   "在 Amazon 上找一款便携式蓝牙音箱：防水设计、低于 50 美元、电池续航至少 10 小时"

路线图、贡献与安全

• 路线图：项目正在积极开发中，详细路线图与即将推出的特性见官方 GitHub Discussions 讨论帖；
• 贡献：项目欢迎各类贡献——分享提示词与使用案例、反馈使用体验或提交代码（含 bug 修复、新功能与文档改进，代码贡献请先阅读 CONTRIBUTING.md）；
• 安全：如发现安全漏洞，请不要通过 issues、pull requests 或讨论区公开披露，而应创建 GitHub Security Advisory 进行负责任地上报。

许可证

Nanobrowser 采用 Apache License 2.0 授权，详见 LICENSE 文件。

• 人工智能
• AI Agent
• 浏览器控制
• AI 应用