企业官网建设流程全解析

Nanobrowser完整教程：3条路线装好免费的AI网页自动化助手

【免费下载链接】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 网页自动化 Chrome 扩展，用多智能体协作帮你自动浏览、点击、提取网页信息，全程免费、用你自己的 API Key。问题来了：装完之后，你的第一个自动化任务打算交给它做什么？

项目速览：一个免费的 OpenAI Operator 替代品

Nanobrowser 是什么？一句话：跑在你本地浏览器里的 AI 网页操作员。你说一句自然语言指令，它内部的"规划者"拆解任务、"导航员"执行点击和输入，自动帮你逛网页、找信息、填表格。

它解决的核心痛点有三个：

• 价格：商用 AI 浏览器代理动辄每月上百美元，Nanobrowser 完全免费，只花你自己的 API 费用
• 隐私：一切在你本地浏览器中运行，账号密钥不经过任何第三方云服务
• 可控：代码全开源，没有黑盒，你还能给不同智能体分配不同模型来平衡效果与成本

官方完整支持Chrome 和 Edge，其他 Chromium 系浏览器（Opera、Arc 等）可能可用但不保证。

选一条路线开始：商店版、本地版还是源码版

三条路线按"省事程度"排序，先判断你是哪类用户，只跟对应路线走：

路线一｜商店一键安装：普通用户的最短路径

1. 在 Chrome Web Store 中搜索Nanobrowser
2. 打开项目页面，点击"添加到 Chrome"，确认安装
3. 点工具栏右侧的"拼图"图标，把 Nanobrowser 固定到工具栏，方便随时唤起

⚠️ 注意：商店版要经过审核流程，版本可能滞后于最新代码。如果你发现某个新功能商店版里没有，说明它还没过审，切到路线二即可。

路线二｜本地加载：尝到最新版的快速方法

适合等不及商店审核、想用最新发布包的用户：

1. 从项目仓库的 Release 页面下载最新的nanobrowser.zip，解压到固定目录（比如"文档/Nanobrowser"）
2. 在地址栏输入chrome://extensions/，打开右上角的开发者模式开关
3. 点左上角的"加载已解压的扩展程序"，选中刚解压的nanobrowser文件夹
4. 看到 Nanobrowser 卡片出现在列表里就成功了

以后升级也是同样的循环：下载新包、覆盖旧文件夹、回到扩展页点刷新图标。

路线三｜源码构建：开发者专属

前提是装好Node.js v22.12.0+和pnpm v9.15.1+，然后：

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

构建产物在dist目录，按路线二的"加载已解压"方式装进浏览器即可。日常开发用热重载：

pnpm dev

改完代码自动刷新，不用反复重装。想了解架构的话，智能体核心逻辑在 chrome-extension/src/background/agent/，多智能体分工（Planner、Navigator）的提示词模板在 chrome-extension/src/background/agent/prompts/。

接通 AI 大脑：配置密钥与智能体模型分配

三条路线装完后的配置步骤完全相同：

1. 点工具栏的 Nanobrowser 图标打开侧边栏
2. 点右上角的Settings（设置）图标
3. 在LLM Providers选项卡中添加 API 密钥——支持 OpenAI、Anthropic、Gemini、DeepSeek、Groq、Ollama、OpenRouter 等，也兼容任意 OpenAI 格式的服务

密钥填好后，关键一步是给每个智能体指定模型。Nanobrowser 是双智能体架构：

想省钱可以换轻量组合：Planner 用 GPT-4o 级别、Navigator 用 Gemini Flash / GPT-4o-mini，效果会打点折扣但成本低很多。极致隐私用户则可用 Ollama 跑本地模型（如 Qwen3-30B），零 API 费用、数据不出机器，但指令要写得具体清晰。

这些配置项的读写逻辑可以在 packages/storage/lib/settings/llmProviders.ts 和 pages/options/src/components/ModelSettings.tsx 中查看，改设置面板时直接看这两个文件最快。

跑通第一个任务：从一句指令到看到结果

配置完成后，用最小闭环验证整条链路是否通了：

1. 打开任意信息密集的页面，比如 GitHub Trending
2. 在侧边栏输入："提取当前页面前 5 个项目的名称和简介"
3. 发送，然后"旁观"——你能实时看到 Planner 拆解任务、Navigator 逐个执行的动作流

如果几秒内页面元素被高亮定位、任务完成后侧边栏给出整理好的结果，恭喜，整条流水线已经跑通。之后就可以上难度了：让它汇总新闻网站的头条、调研某商品的规格价格、抓取列表页数据。任务完成后再追问细节，它也支持带上下文的连续对话。

遇到问题怎么办：三个最高频卡点

1. 扩展加载失败或图标不出现

大概率是路径问题。确认加载的是解压后的nanobrowser文件夹（而不是 zip 文件本身），且文件夹里没有再套一层目录；开发者模式开关一定要开着。然后重启浏览器重新加载一次。

2. 智能体没有响应、侧边栏卡住

按顺序排查：API 密钥是否填对且账户有余额 → 网络能否正常访问对应服务 → 该模型名是否在所选服务商的支持列表里。三者都对上后仍无响应，换一个服务商的密钥再试，能快速定位是密钥问题还是配置问题。

3. 任务执行到一半失败或跑偏

先做减法：把一句话指令拆成更具体的步骤，比如"找到登录按钮"比"帮我登录"更容易成功。另外如果目标网站有访问限制（验证码、反爬），自动化本身就会被拦，换个目标验证流程是否正常。对敏感操作不放心的话，可以在设置里了解任务防火墙相关选项，相关代码在 chrome-extension/src/background/services/guardrails/。

下一步：三条深入路径

到这里，你已经在本地浏览器里拥有了一个免费、可控、开源的 AI 网页操作员。接下来挑一条继续走：

• 深入原理：阅读 chrome-extension/src/background/agent/agents/ 中 Planner 与 Navigator 的协作实现
• 二次开发：按路线三搭好开发环境，用pnpm dev边改边看
• 社区贡献：参考 CONTRIBUTING.md 提交代码、反馈问题或分享你的提示词用法

<输出文章>

【免费下载链接】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