1. 项目概述：一个运行在你浏览器里的AI自动化副驾驶

如果你经常需要重复性地在网页上查找信息、整理数据或者完成一些固定的操作流程，那么你肯定幻想过有一个“数字助手”能帮你自动完成这些繁琐的工作。市面上的确有这样的工具，比如OpenAI的Operator，但每月200美元的价格标签让很多人望而却步。今天要聊的Nanobrowser，就是一个完全开源、免费、且能运行在你本地浏览器里的AI自动化工具。你可以把它理解为一个“浏览器副驾驶”，通过简单的自然语言指令，它就能指挥多个AI智能体（Agent）协作，帮你完成复杂的网页任务。

它的核心价值在于 控制权回归用户 。你不用再为昂贵的订阅费买单，只需使用自己的大语言模型（LLM）API密钥，按实际使用量付费。更重要的是，所有的操作都在你的浏览器本地进行，你的浏览数据、登录凭证等敏感信息不会上传到任何第三方云端服务器，隐私性得到了最大程度的保障。无论是想快速抓取新闻摘要、对比商品信息，还是研究GitHub上的热门项目，你只需要告诉Nanobrowser“做什么”，它就会规划步骤、执行操作，并把结果清晰地呈现给你。

2. 核心架构与多智能体系统解析

Nanobrowser之所以强大，关键在于其背后精巧的多智能体（Multi-Agent）系统设计。这不同于单一功能的自动化脚本，它模拟了人类处理复杂任务时的分工协作思维。

2.1 双智能体协作模型：规划者与导航员

目前，Nanobrowser主要依赖两个核心智能体协同工作：

规划者（Planner） ： 这是整个系统的“大脑”。它的职责是理解你的自然语言指令，并将其拆解成一系列具体、可执行的原子步骤。例如，当你下达指令“去TechCrunch网站，找出过去24小时内阅读量最高的10条科技新闻标题”，规划者会进行推理，生成类似这样的计划：

1. 打开浏览器，导航至 techcrunch.com 。
2. 在网站首页或新闻板块，定位显示新闻列表的区域。
3. 识别每一条新闻的标题元素和可能的时间戳。
4. 筛选出发布时间在24小时内的新闻条目。
5. 从中提取标题文本，并按某种规则（如预估阅读量）排序。
6. 选取前10条，整理成格式清晰的列表。

规划者需要较强的逻辑推理和任务分解能力，因此通常建议为其配置能力更强的模型，如Claude 3.5 Sonnet或GPT-4o。

导航员（Navigator） ： 这是系统的“手”和“眼睛”。它严格遵循规划者生成的步骤，在真实的浏览器环境中进行实操。这包括：点击按钮、在输入框键入文字、滚动页面、等待元素加载、从指定的DOM节点中提取文本内容等。导航员需要精准理解网页结构，并能稳定地执行低层级操作。考虑到其调用可能非常频繁，为了平衡效果和成本，可以选择响应速度快、成本较低的模型，如Claude 3.5 Haiku或Gemini Flash。

实操心得 ： 这种分工带来了显著的稳定性提升。早期单一的AI智能体在处理复杂任务时，容易在“思考下一步”和“执行当前步”之间混淆，导致动作卡壳或逻辑循环。将规划与执行分离后，导航员变得非常“专注”和“可靠”，只要规划者的指令清晰，它就能准确完成。这也使得调试和优化变得更加容易——如果任务失败了，你可以很快判断是规划逻辑有问题，还是导航执行出了差错。

2.2 系统工作流与自纠正机制

整个系统的工作流是一个动态的闭环：

1. 用户输入 ：你在侧边栏的聊天界面中输入任务指令。
2. 规划阶段 ：Planner分析指令，生成初步步骤序列。
3. 执行与监控 ：Navigator开始执行第一步，并将执行后的页面状态、结果或遇到的异常（如元素未找到、页面跳转意外）反馈给系统。
4. 评估与调整 ：系统（或Planner）根据反馈评估当前进度。如果步骤成功，则继续下一步；如果失败或遇到障碍（例如，需要登录才能访问的页面），Planner会基于新的页面状态 重新规划 后续步骤，或生成一个修正指令（比如“先点击右上角的登录按钮”）。
5. 输出结果 ：所有步骤执行完毕后，系统将收集到的信息整合，以结构化格式（如列表、表格、摘要文本）呈现给你。

这个“执行-反馈-再规划”的循环，是Nanobrowser能够处理动态网页、应对意外情况的关键。从项目展示的GIF中可以看到，Planner在遇到障碍时会智能地自我纠正，并动态指导Navigator调整策略，这一切都实时发生在你的浏览器中。

3. 从安装到上手的完整实操指南

理论说得再多，不如亲手配置一遍来得实在。下面我将以Chrome浏览器为例，带你从零开始，完成Nanobrowser的安装、配置，并运行你的第一个自动化任务。

3.1 安装方式选择与详细步骤

你有两种主要安装方式：从Chrome应用商店安装稳定版，或手动安装开发版以获取最新特性。

方案一：通过Chrome应用商店安装（最简便）

1. 打开Chrome浏览器，访问 Nanobrowser的Chrome应用商店页面 。
2. 点击蓝色的“添加到Chrome”按钮。
3. 在弹出的确认对话框中，点击“添加扩展程序”。
4. 安装成功后，你会在浏览器工具栏的扩展程序区域看到一个Nanobrowser的图标（通常是一个类似原子或浏览器的符号）。

注意 ： Chrome应用商店的版本更新需要经过谷歌的审核流程，因此可能会比GitHub上的最新版本晚几天到一周。如果你急需体验刚发布的新功能，建议使用手动安装方式。

方案二：手动安装最新版本（推荐给喜欢折腾的用户）

1. 获取代码 ： 访问Nanobrowser的 GitHub Releases页面 。找到最新版本，下载 nanobrowser.zip 压缩包。
2. 解压文件 ： 将下载的ZIP包解压到一个你容易找到的文件夹，例如 桌面\nanobrowser 。
3. 开启开发者模式 ： 在Chrome地址栏输入 chrome://extensions/ 并回车，打开扩展程序管理页面。确保右上角的“开发者模式”开关处于 开启 状态。
4. 加载扩展 ： 点击左上角出现的“加载已解压的扩展程序”按钮。
5. 选择文件夹 ： 在弹出的文件选择器中，定位并选中你刚才解压出来的 nanobrowser 文件夹（注意是包含 manifest.json 文件的根目录），然后点击“选择文件夹”。
6. 完成安装 ： 此时，扩展程序列表里应该会出现Nanobrowser，并且工具栏上也会出现其图标。

后续更新手动版本 ： 当有新版本发布时，你只需重复步骤1和2，用新文件覆盖旧的解压文件夹。然后回到 chrome://extensions/ 页面，找到Nanobrowser扩展卡片，点击其下方的“刷新”图标即可完成更新。

3.2 核心配置：关联你的LLM API密钥

安装只是第一步，要让Nanobrowser真正工作起来，你必须为其“注入灵魂”——也就是配置大语言模型的API密钥。这是它能够进行思考和对话的基础。

1. 打开设置面板 ： 点击浏览器工具栏上的Nanobrowser图标，会在浏览器右侧打开一个侧边栏。在侧边栏的右上角，点击齿轮状的“设置”图标。
2. 添加API提供商 ： 在设置页面，你会看到配置不同Agent（Planner, Navigator）的地方。首先，你需要添加至少一个LLM服务提供商。点击“Add Provider”或类似的按钮。
3. 选择并配置 ： 从支持的列表中选择你使用的服务，例如“OpenAI”。
   • API Key ： 填入你在对应平台（如platform.openai.com）申请的API密钥。
   • Base URL ： 对于官方服务，通常保持默认即可。如果你使用第三方兼容OpenAI API的服务（如一些本地部署的模型服务），则需要填写该服务的地址。
   • Model ： 选择该提供商下你想要使用的具体模型，例如 gpt-4o 。
4. 为智能体分配模型 ： 添加好提供商后，你就可以在“Planner”和“Navigator”的下拉菜单中，分别选择刚才配置的模型。 这是进行成本与性能调优的关键一步 。
5. 保存 ： 完成配置后，确保点击保存按钮。

重要安全提醒 ： 你的API密钥是高度敏感信息。Nanobrowser的设计保证了密钥只存储在你的浏览器本地（通过Chrome扩展的存储API），不会发送到Nanobrowser的服务器。但请依然遵循良好的安全实践：使用环境变量或密钥管理工具，避免在公开场合泄露；在OpenAI等平台上为密钥设置使用量限额和预算警报。

3.3 模型选择策略与成本优化实战

如何为Planner和Navigator分配合适的模型，直接影响到任务成功率、速度和你的钱包。下面提供几套经过验证的配置方案。

配置目标	Planner（大脑）推荐模型	Navigator（执行者）推荐模型	核心考量与说明
追求最佳性能	Claude 3.5 Sonnet	Claude 3.5 Haiku	Sonnet长于复杂推理和规划，能生成更精准的步骤。Haiku响应极快、成本低，适合高频执行。这是目前效果最均衡的组合。
高性价比之选	GPT-4o	GPT-4o-mini 或 Gemini 1.5 Flash	GPT-4o综合能力强，成本低于Claude Sonnet。Navigator使用Mini或Flash这类轻量级模型，能大幅降低长流程任务的成本。
极致成本控制	Claude 3.5 Haiku	Gemini 1.5 Flash	全部使用“轻量级”模型。适合简单、模式固定的任务。复杂任务可能需要更多次的重试或更详细的指令。
完全本地隐私	Ollama (Qwen2.5-32B)	Ollama (Qwen2.5-Coder-14B)	零API成本，数据不出本地。需要本地有足够强的GPU资源。Planner需要较强的推理模型，Navigator可选用擅长代码/结构理解的模型。

本地模型部署与调优心得 ： 如果你选择使用Ollama运行本地模型，以下几点至关重要：

• 硬件是门槛 ： 流畅运行70亿参数（7B）以上的模型，建议至少拥有16GB以上内存和一张8GB显存的显卡（如RTX 4070）。32B参数模型则需要更强大的配置。
• 提示词工程 ： 本地模型通常对提示词更敏感。给Planner的指令要尽可能清晰、无歧义。避免使用“帮我找点有趣的东西”这种模糊指令，而应使用“访问GitHub Trending页面，提取今日‘Python’语言分类下，前5个仓库的名字、star数和简短描述”。
• 社区资源 ： 项目Discord社区里有一个由用户维护的 本地模型测试结果列表 ，记录了不同模型在Nanobrowser任务上的实际表现，是选型的宝贵参考。

4. 实战案例：深入拆解复杂自动化任务

了解了原理和配置，我们通过几个具体案例，来看看Nanobrowser如何解决实际问题。我将不仅展示指令，还会剖析其背后的执行逻辑和可能遇到的坑。

4.1 案例一：竞品调研与价格监控

任务 ：“在京东上搜索‘无线降噪耳机’，按销量排序，找出前三名产品，并记录它们的当前价格、品牌和主要卖点（从商品标题中提取）。”

Nanobrowser的潜在执行逻辑拆解 ：

1. 规划阶段 ： Planner会生成步骤：导航至 jd.com -> 在搜索框输入“无线降噪耳机”并回车 -> 等待结果页加载 -> 找到“排序”筛选器并选择“销量” -> 等待页面刷新 -> 定位前三个商品卡片 -> 从每个卡片中提取商品标题、价格、品牌信息。
2. 执行与挑战 ：
   • 页面动态加载 ： 电商网站大量使用JavaScript异步加载内容。Navigator在点击“排序”后，必须加入明确的等待条件，例如“等待商品列表区域更新”，而不是固定等待几秒。
   • 元素定位 ： 商品卡片的CSS选择器可能很复杂。Navigator需要根据Planner的抽象指令（如“第一个商品卡片”），结合当前页面DOM结构，计算出具体的定位路径。这可能因网站改版而失效。
   • 信息提取 ： “品牌”和“卖点”可能没有独立的HTML元素，需要从长标题文本中用正则表达式或简单逻辑分割提取，这对LLM的文本理解能力是一个考验。

实操注意事项 ：

• 指令需尽可能明确 ： 更好的指令可以是：“打开京东首页，在顶部的搜索框内输入‘无线降噪耳机’并按下回车进行搜索。在搜索结果页面，找到‘排序’按钮或下拉菜单，选择‘销量’进行排序。等待排序后的页面完全加载。然后，提取销量排名最靠前的三个商品的信息：1. 商品完整标题；2. 当前价格（数字部分）；3. 尝试从标题开头或品牌专区识别出品牌名。”
• 结果验证 ： 运行后，务必人工检查提取的数据是否准确。由于网页结构复杂，首次尝试可能无法完美抓取所有字段，可能需要调整指令或后续手动清洗数据。

4.2 案例二：技术资讯聚合与摘要

任务 ：“浏览Hacker News首页，获取得分（points）超过100的前5个帖子，并总结每个帖子的标题和链接。”

执行流程深度解析 ：

1. Planner理解任务，知道Hacker News的帖子列表结构，并知道“得分”通常在一个带有 .score 类的元素里。
2. Navigator打开 news.ycombinator.com 。
3. 系统开始循环处理每个帖子条目（通常由 .athing 类标识）： a. 提取帖子标题文本和链接（ <a> 标签）。 b. 尝试定位并提取该帖子的得分。 这里有一个关键点 ：Hacker News的得分元素并不总是紧邻标题。Navigator需要根据页面结构进行相对定位查找。 c. 将提取的得分转换为数字，与阈值100比较。
4. 如果得分大于100，则将该帖子的标题和链接存入结果列表。
5. 继续处理下一个帖子，直到收集满5个符合条件的帖子或遍历完首页所有帖子。
6. 最后，将结果列表格式化输出。

可能遇到的问题及解决思路 ：

• 阈值判断失败 ： 如果得分元素因页面布局变化而定位失败，帖子可能被错误过滤。解决方案是在Planner的指令中提供更稳健的选择器提示，或指示Navigator在找不到分数时跳过该帖子并记录日志。
• “首页”的定义 ： 是指前30个帖子吗？Planner需要明确这一点。更精确的指令可以是：“浏览Hacker News首页（即前30个帖子项）”。
• 动态内容 ： 如果页面需要滚动加载更多帖子，初始指令可能只覆盖第一屏。对于需要深度抓取的任务，指令中可能需要加入“滚动到页面底部以加载更多内容”的步骤。

4.3 案例三：跨平台信息验证

任务 ：“我想了解‘Project IDX’这个谷歌的最新开发工具。请先去它的官方介绍页面（尝试搜索或直接访问 if.google.com），获取其主要功能介绍。然后，去GitHub上搜索是否有相关的开源仓库或讨论，看看社区的热度如何。”

这是一个多步骤、跨站点的复杂任务，充分体现了多智能体的协作优势 。

1. 第一阶段：信息获取 。
   • Planner首先规划搜索任务：“在谷歌中搜索‘Project IDX Google official site’”。
   • Navigator执行搜索，从结果中识别并点击最可能是官方介绍页的链接（通常是第一个结果或标注为官方的链接）。
   • 进入页面后，Planner指示Navigator提取关于“主要功能”的章节内容（通过识别标题如“Features”、“Capabilities”等）。
2. 第二阶段：上下文切换与社区调研 。
   • Planner生成新指令：“现在，导航至 github.com ”。
   • Navigator在新的标签页或同一标签页中打开GitHub。
   • Planner指示：“在GitHub搜索框输入‘Project IDX’，查看搜索结果。”
   • Navigator执行搜索，并尝试提取搜索结果中的关键信息：仓库数量、star数最高的仓库名和简介、是否有官方组织账号等。
3. 第三阶段：整合报告 。
   • 系统将两个阶段获取的信息（官方功能介绍、GitHub社区概况）整合成一份简要报告。

这个案例的难点在于任务间的逻辑衔接和状态管理 。Planner必须清楚，第一阶段获取的信息是第二阶段任务的输入和上下文。优秀的Planner模型（如Claude 3.5 Sonnet）能够很好地维持这种会话状态和任务目标。

5. 高级技巧、常见问题与故障排查

即使配置无误，在实际使用中你仍可能会遇到各种问题。下面是我在深度使用过程中总结的一些经验和解决方案。

5.1 提升任务成功率的提示词工程

给AI智能体下达指令，本质上是一种“提示词工程”。清晰的指令能极大提升成功率。

• 结构化与分步 ： 将复杂任务拆解成明确的、顺序执行的子步骤。使用“首先…然后…接着…最后…”这样的结构。
  • 不佳示例 ：“帮我研究一下电动汽车。”
  • 优秀示例 ：“首先，访问维基百科页面，搜索‘Electric vehicle’并进入其主条目。然后，提取‘History’章节下关于21世纪发展的前三个段落。接着，转到‘Technology’章节，提取关于‘Batteries’和‘Charging’的子章节标题和第一段内容。最后，将提取的信息整理成一份带有小标题的摘要。”
• 明确目标与约束 ： 明确指出你要什么，不要什么。
  • 包含 ：“只提取数字价格，不要货币符号。”“只要文本内容，忽略所有图片和广告。”
  • 排除 ：“跳过任何带有‘赞助’或‘广告’标签的搜索结果。”“如果弹窗出现，点击关闭按钮或忽略它。”
• 提供示例（Few-Shot） ： 对于格式要求严格的任务，可以在指令中给出输出范例。
  • “请将提取的产品信息整理成JSON格式，例如： {"name": "产品名", "price": "100", "brand": "品牌"} ”
• 指定等待与超时 ： 对于加载慢的页面，指示Navigator耐心等待。
  • “点击登录按钮后，等待直到页面URL包含‘dashboard’再执行下一步。”“等待搜索结果的列表区域完全加载（至少出现5个结果项）。”

5.2 典型错误与排查清单

当你发现Nanobrowser任务失败或行为异常时，可以按照以下清单进行排查：

现象	可能原因	排查步骤与解决方案
侧边栏无响应，或点击图标不弹出	1. 扩展未正确加载或已禁用。 2. 与其他浏览器扩展冲突。	1. 访问 chrome://extensions/ ，确认Nanobrowser已启用，并尝试“重新加载”该扩展。 2. 尝试在无痕模式下（默认禁用大部分扩展）运行Nanobrowser，看是否正常。
任务一直显示‘规划中’或‘执行中’，但无进展	1. LLM API请求超时或失败。 2. Planner模型“卡住”，生成了过长或循环的步骤。	1. 检查浏览器开发者工具（F12）的“网络(Network)”标签，查看向LLM API发起的请求是否返回错误（如403、429、500）。 2. 检查API密钥配额是否用尽，或模型是否选择正确。 3. 尝试简化你的任务指令，或更换一个更可靠的Planner模型（如从Haiku切换到Sonnet）。
Navigator点击了错误元素，或找不到元素	1. 页面结构发生变化，元素定位器失效。 2. 页面未完全加载，Navigator提前行动。 3. 指令中对元素的描述过于模糊。	1. 打开浏览器开发者工具（F12），使用元素检查器查看目标元素当前的实际选择器。 2. 在指令中增加明确的等待条件，如“等待‘提交’按钮变成可点击状态（非灰色）”。 3. 使用更精确的元素描述，如“点击那个蓝色背景、写着‘立即购买’的按钮”，而非“点击购买按钮”。
任务中途失败，但之前步骤都成功了	1. 页面状态改变导致后续步骤的上下文丢失。 2. 遇到了需要人工处理的验证（如CAPTCHA）。 3. 网站有反爬虫机制。	1. 查看Nanobrowser侧边栏的执行日志，看在哪一步报错。根据错误信息调整指令。 2. 对于验证码，目前AI智能体通常无法处理。任务设计时应避开此类环节。 3. 过于频繁的请求可能触发网站的防护。在指令中增加“每一步操作后等待2-3秒”的延迟。
提取的信息格式混乱或包含多余内容	1. Navigator提取了过多无关的HTML或文本。 2. LLM在总结或格式化时出现偏差。	1. 在指令中更精确地指定信息所在容器的选择器，例如“提取 <div class=‘product-price’> 这个元素内的文本”。 2. 要求Planner在规划步骤时，明确指定提取后的清洗和格式化规则。

5.3 与现有自动化工具的对比与定位

你可能会问，这和Selenium、Playwright或者浏览器宏录制工具有什么区别？

• 与传统自动化框架（Selenium/Playwright）对比 ：

  • 编程门槛 ： Selenium需要编写代码（Python/Java等），Nanobrowser只需自然语言。前者灵活、强大，适合开发复杂、稳定的自动化流程；后者快速、易上手，适合一次性或快速原型任务。
  • 适应性 ： 传统框架的脚本对页面结构变化非常脆弱，元素定位器一改就失效。Nanobrowser的AI智能体具有一定理解能力，能通过文本语义寻找目标，容错性稍强，但并非完全免疫。
  • 本质 ： 你可以把Nanobrowser看作一个“用自然语言编程的、基于AI的Playwright运行时”。它底层很可能使用了类似的浏览器控制技术，但上层交互是智能的。

• 与宏录制工具对比 ：

  • 灵活性 ： 宏录制是“死”的，严格记录坐标和操作序列。页面布局一变，宏就失效。Nanobrowser是“活”的，它理解操作意图，能适应一定程度的变化。
  • 处理不确定性 ： 宏无法处理“如果出现弹窗就关闭”这种条件逻辑。Nanobrowser的Planner可以根据页面反馈动态调整计划。

因此，Nanobrowser的定位非常清晰 ：它是 面向非开发者的、用于快速实现轻量级、半结构化网页自动化任务的AI工具 。对于程序员来说，它可能是一个快速验证想法或抓取原型的利器；对于运营、市场、研究人员等，它则是一个强大的生产力倍增器。

6. 开源生态、贡献与未来展望

Nanobrowser作为一个开源项目，其生命力来自于社区。项目明确列出了贡献的几种方式，这不仅仅是代码。

非代码贡献的价值巨大 ：

• 分享使用场景和提示词 ： 在Discord社区分享你成功自动化了哪些工作流，并附上你使用的精确指令。这能帮助开发者理解真实需求，优化Agent的行为，也能帮助其他用户快速上手。一个精心打磨的提示词模板，其价值不亚于一段代码。
• 提交详尽的Bug报告 ： 当任务失败时，不要只说“不好用”。提供你的完整指令、目标网址、以及Nanobrowser侧边栏中执行步骤的截图或日志。这能极大帮助开发者复现和修复问题。
• 测试与反馈 ： 尤其是在新版本发布或尝试新的LLM模型组合时，你的测试反馈是项目迭代的宝贵燃料。

技术栈与依赖 ： 从项目仓库可以看出，它基于现代Web技术栈构建，如React、Vite，并集成了 @browser-use 等库来处理浏览器自动化。这意味着对于前端开发者来说，参与代码贡献的门槛相对较低。你可以从修复文档错别字、优化UI交互、增加对新LLM提供商的支持等相对独立的功能点入手。

关于未来的想象 ： 虽然项目路线图由核心团队决定，但社区的声音会影响其方向。目前的多Agent系统（Planner/Navigator）已经非常实用，未来是否会引入更专精的Agent？例如：

• 解析器（Parser）Agent ： 专门负责从混乱的页面内容中，高精度地提取和结构化数据。
• 验证器（Verifier）Agent ： 在任务完成后，自动检查结果是否符合预期，比如数据格式、数量是否正确。
• 支持更多交互模式 ： 如图形界面的流程设计器，让不擅长写提示词的用户也能通过拖拽组装自动化流程。

Nanobrowser代表了AI应用的一个有趣方向：将强大的LLM能力与具体的软件环境（浏览器）深度结合，创造出一种全新的、自然的人机交互界面。它降低了自动化的门槛，让每个人都有可能定制自己的数字助手。当然，它目前还不是万能的，对复杂动态网页的处理、对模糊指令的理解仍有提升空间。但作为一个开源项目，它在快速迭代，而你的每一次使用、反馈和分享，都在为这个未来添砖加瓦。