Nanobrowser：免费开源的 AI 网页自动化扩展，支持多代理系统与本地运行

一、Nanobrowser是什么

Nanobrowser是一款开源的AI网页自动化工具，以浏览器扩展程序的形式运行，旨在为用户提供高效、灵活且隐私安全的网页自动化解决方案。作为OpenAI Operator的免费替代方案，它打破了传统网页自动化工具的局限，通过创新的多代理系统和灵活的大语言模型（LLM）集成，让复杂的网页任务自动化变得简单可行。

该项目完全开源，所有代码和工作流程都保持透明，用户可以清晰了解自动化过程的每一个环节，不存在任何黑箱操作或隐藏流程。与许多依赖云服务的自动化工具不同，Nanobrowser坚持隐私优先的原则，所有操作均在用户的本地浏览器中完成，用户的凭证和数据不会被共享给任何云服务提供商，极大地保障了用户的信息安全。

Nanobrowser采用monorepo（单仓库多项目）架构，使用Turbo进行构建编排和pnpm workspaces管理项目依赖，确保了项目结构的清晰性和维护的便捷性。无论是普通用户还是开发人员，都能从这款工具中获益——普通用户可以轻松实现网页任务的自动化，开发人员则可以基于开源代码进行二次开发和定制。

二、功能特色

Nanobrowser凭借其独特的设计理念和丰富的功能，在众多网页自动化工具中脱颖而出。以下是其主要功能特色的详细介绍：

1. 完全免费与成本透明

Nanobrowser遵循开源免费的原则，没有任何订阅费用或隐藏成本。用户只需使用自己的API密钥，仅为实际使用的LLM服务支付费用，无需为工具本身支付额外成本。这种模式让用户能够精确控制开支，避免了传统商业工具的固定成本负担。

2. 隐私优先的本地运行

隐私保护是Nanobrowser的核心设计原则之一。所有操作，包括AI模型的调用处理、网页交互数据和用户凭证，都在用户的本地浏览器中进行，不会上传到任何第三方服务器或云服务。这种本地运行模式从根本上杜绝了数据泄露的风险，特别适合处理涉及敏感信息的网页自动化任务。

3. 灵活的LLM选项

Nanobrowser支持连接多种主流的LLM提供商，用户可以根据自己的需求和偏好选择合适的模型。更重要的是，它允许为不同的代理配置不同的模型，实现了模型的精细化应用。例如，用户可以为规划代理选择推理能力强的模型，为导航代理选择对网页结构理解更优的模型，从而在性能和成本之间取得最佳平衡。

4. 创新的多代理系统

Nanobrowser采用专门的AI代理协作机制来完成复杂的网页工作流，主要包括以下几种代理：

• 规划器代理：负责理解用户需求，制定详细的任务执行计划，分解复杂任务为可执行的步骤。

• 导航器代理：专注于网页导航，负责在不同网页之间切换、查找特定元素和执行点击、输入等操作。

• 验证器代理：对任务执行结果进行检查和验证，确保自动化操作达到预期效果，必要时还能进行修正。

这些代理各司其职又相互协作，共同完成复杂的网页自动化任务，大大提高了自动化的可靠性和效率。

5. 直观的交互式侧边栏

Nanobrowser提供了一个用户友好的聊天界面作为主要交互方式，集成在浏览器侧边栏中。用户可以通过自然语言向AI代理下达指令，实时查看任务执行状态和进度更新。这种直观的交互方式降低了使用门槛，即使是没有编程经验的用户也能轻松上手。

6. 强大的任务自动化能力

无论是单一网站的重复操作，还是跨多个网站的复杂工作流，Nanobrowser都能轻松应对。它支持各种常见的网页操作，如表单填写、按钮点击、数据提取、页面导航等，并能按照用户设定的逻辑自动执行这些操作，极大地节省了用户的时间和精力。

7. 上下文相关的后续问题

在任务执行完成后，用户可以就已完成的任务提出上下文相关的后续问题。Nanobrowser能够理解任务的上下文信息，给出准确、相关的回答，实现了任务执行与结果交互的无缝衔接。

8. 完整的对话历史管理

Nanobrowser会自动记录用户与AI代理的所有交互历史，包括下达的指令、执行的步骤和得到的结果。用户可以方便地查阅、搜索和管理这些历史记录，便于跟踪任务执行情况、重复使用之前的指令或进行问题排查。

9. 浏览器兼容性

目前Nanobrowser对主流浏览器的支持情况如下表所示：

三、技术细节

Nanobrowser采用了现代化的技术栈和架构设计，确保了项目的可扩展性、可维护性和性能优化。以下是其主要技术细节的介绍：

1. 项目架构

Nanobrowser是一个基于monorepo架构的项目，使用Turbo进行构建编排和pnpm workspaces管理工作区，主要包含以下几个部分：

• 核心扩展（chrome-extension/）：这是项目的核心部分，包含主Chrome扩展清单（manifest.json）、背景脚本、背景服务工作线程和多代理系统的实现。其中，AI代理的核心逻辑、浏览器自动化功能和DOM操作方法都集中在这里。

• UI页面（pages/）：包含用户界面相关的代码，主要有：

• 侧边栏：作为主聊天界面，采用React + TypeScript + Tailwind CSS开发，提供直观的用户交互体验。

• 选项页面：用于扩展的设置配置，如API密钥管理、模型选择等。

• 内容脚本：负责将必要的代码注入到网页中，实现与网页内容的交互。

• 共享包（packages/）：包含多个共享的功能模块，供项目的其他部分使用，主要有：

• 共享工具和类型定义

• 存储抽象层，统一处理数据存储逻辑

• 共享React组件，保证UI的一致性

• 验证模式，用于数据验证和格式检查

• 国际化相关模块，支持多语言

2. 构建系统

• Turbo：用于管理任务依赖和构建缓存，能够显著提高构建效率，确保在大型项目中也能保持快速的构建速度。

• Vite：作为前端构建工具，为每个工作区提供独立的打包能力，支持快速的热模块替换（HMR），提升开发体验。

• TypeScript：全项目采用严格配置的TypeScript，提供静态类型检查，减少运行时错误，提高代码质量和可维护性。

• 代码质量保障：集成了ESLint和Prettier，通过自动化的代码检查和格式化，确保代码风格的一致性和代码质量。

• 配置管理：每个工作区都有自己独立的vite.config.mts和tsconfig.json配置文件，允许针对不同模块进行个性化配置，同时通过基础配置文件保持整体一致性。

3. 核心技术实现

• 浏览器扩展技术：基于Chrome扩展开发规范，利用service worker作为后台运行环境，通过content script实现与网页内容的交互，使用chrome API实现浏览器级别的功能调用。

• 多代理协作机制：通过消息传递机制实现不同代理之间的通信和协作，每个代理专注于特定的任务，通过明确的接口定义实现松耦合的架构。

• LLM集成：设计了统一的LLM接口抽象，能够适配不同的LLM提供商（如OpenAI、Anthropic等），通过配置文件轻松切换和管理不同的模型。

• DOM操作与自动化：封装了一系列DOM操作工具，能够识别网页元素、模拟用户操作（点击、输入、滚动等），实现网页自动化的核心功能。

• 状态管理：使用现代化的状态管理方案，管理用户会话、任务状态、代理状态等复杂状态，确保UI与数据的同步。

四、应用场景

Nanobrowser的多功能性使其能够应用于各种不同的场景，无论是个人用户还是企业用户，都能找到适合自己的使用方式。以下是一些常见的应用场景：

1. 数据收集与整理

在需要从多个网页收集信息并进行整理的场景中，Nanobrowser可以大显身手。例如：

• 市场研究人员可以使用它自动从不同的电商网站收集特定产品的价格、评价等信息，并整理成结构化的数据。

• 内容创作者可以通过它从多个来源收集素材和参考资料，自动提取关键信息，节省大量的筛选和整理时间。

• 学术研究者能够利用其自动化能力，从各类学术数据库中收集相关文献的元数据，辅助文献综述工作。

2. 重复性网页任务自动化

许多日常工作中包含大量重复的网页操作，Nanobrowser可以将用户从这些繁琐的任务中解放出来：

• 社交媒体运营人员可以通过它自动发布内容到多个平台，定时更新状态，回复常见问题等。

• 客服人员可以利用其自动填写表单、查询信息的功能，提高工作效率，减少手动操作错误。

• 人力资源专员能够使用它自动在多个招聘网站发布职位信息，收集和初步筛选简历。

3. 账户与订阅管理

对于需要管理多个在线账户和订阅服务的用户，Nanobrowser提供了便捷的解决方案：

• 自动登录不同的账户，检查账户状态、账单信息等。

• 监控订阅服务的到期时间，提前发送提醒。

• 批量更新多个账户的个人信息或偏好设置。

4. 价格与库存监控

购物爱好者和电商从业者可以利用Nanobrowser进行价格和库存监控：

• 跟踪特定商品的价格变化，当价格降至目标值时自动发送通知。

• 监控热门商品的库存状态，在补货时及时提醒。

• 比较不同电商平台的价格，找到最优惠的购买渠道。

5. 内容监控与跟踪

对于需要关注特定内容更新的用户，Nanobrowser可以提供自动化的监控服务：

• 跟踪新闻网站、博客或论坛的特定主题，当有新内容发布时及时通知。

• 监控竞争对手的网站更新，及时了解其产品、价格或促销活动的变化。

• 跟踪政府、机构发布的公告和政策变化，确保及时获取相关信息。

6. 教育与学习辅助

学生和研究者可以利用Nanobrowser辅助学习和研究工作：

• 自动从教育平台收集学习资料，整理课程大纲和重点内容。

• 监控学术期刊的新发表论文，根据关键词筛选相关研究。

• 辅助在线课程的学习，自动记录学习进度，提醒作业截止日期。

五、使用方法

Nanobrowser的使用方法简单直观，即使是没有技术背景的用户也能快速上手。以下是详细的使用步骤：

1. 安装扩展

方法一：从Chrome应用商店安装（推荐）

1. 打开Chrome浏览器，访问Chrome应用商店。(或从文末链接直接下载)

2. 在搜索栏中输入"Nanobrowser"，找到对应的扩展程序。

3. 点击"添加至Chrome"按钮，在弹出的确认对话框中点击"添加扩展程序"。

4. 等待安装完成，安装成功后，浏览器工具栏会出现Nanobrowser的图标。

方法二：手动安装最新版本

如果需要体验最新功能，可以从GitHub发布页面下载最新版本手动安装：

1. 访问Nanobrowser的GitHub仓库发布页面（具体链接见本文第七部分）。

2. 下载最新版本的扩展包（通常是一个.zip文件）。

3. 打开Chrome或Edge浏览器，在地址栏输入"chrome://extensions/"（Chrome）或"edge://extensions/"（Edge）并回车。

4. 在扩展页面右上角开启"开发者模式"。

5. 点击"加载已解压的扩展程序"按钮，选择下载并解压后的扩展文件夹。

6. 扩展将被安装，工具栏会出现Nanobrowser的图标。

2. 初始配置

首次使用Nanobrowser需要进行简单的配置：

1. 点击浏览器工具栏中的Nanobrowser图标，打开侧边栏。

2. 在侧边栏界面中，点击右上角的设置图标（通常是齿轮形状）。

3. 在设置页面中，找到"API密钥"部分，点击"添加API密钥"。

4. 选择你要使用的LLM提供商（如OpenAI、Anthropic等），输入对应的API密钥。

5. （可选）在"模型设置"部分，为不同的代理（规划器、导航器、验证器）选择合适的模型。如果不进行特别设置，系统会使用默认模型。

6. 完成设置后，点击"保存"按钮。

3. 基本使用流程

使用Nanobrowser完成网页自动化任务的基本流程如下：

1. 打开你需要进行自动化操作的网页。

2. 点击浏览器工具栏中的Nanobrowser图标，打开侧边栏。

3. 在侧边栏的输入框中，用自然语言描述你想要完成的任务。例如："从这个页面收集所有产品的名称和价格，并保存为表格"或"自动填写这个表单，姓名为张三，邮箱为zhangsan@example.com"。

4. 点击发送按钮，提交你的指令。

5. 观察侧边栏中的实时状态更新，了解任务的执行进度。你可以看到AI代理如何规划任务、执行操作和验证结果。

6. 任务完成后，查看执行结果。如果需要进一步操作，可以直接在侧边栏中输入后续指令，例如："将收集到的价格按从低到高排序"。

7. 你可以在侧边栏的"历史记录"标签中查看之前的任务和对话记录。

4. 高级使用技巧

• 使用精确指令：为了获得更准确的结果，尽量使用具体、明确的指令。例如，与其说"帮我处理这个页面"，不如说"从这个页面提取所有文章的标题、发布日期和作者，并保存为CSV格式"。

• 分步执行复杂任务：对于非常复杂的任务，可以将其分解为多个步骤，逐步执行。每完成一步后，检查结果是否符合预期，再进行下一步。

• 利用后续问题功能：任务完成后，充分利用后续问题功能深入挖掘结果。例如，在收集完产品信息后，可以问"哪个产品的评分最高？"或"计算这些产品的平均价格"。

• 调整模型设置：如果对任务执行结果不满意，可以尝试更换不同的模型。对于需要精确理解网页结构的任务，选择对HTML和CSS理解能力强的模型可能会获得更好的效果。

六、常见问题解答

1. Nanobrowser支持哪些浏览器？

目前Nanobrowser完全支持Chrome和Edge浏览器。Firefox、Safari和其他Chromium变体（如Opera、Arc等）暂时不支持，可能会出现功能异常或无法安装的情况。

2. 使用Nanobrowser需要支付费用吗？

Nanobrowser本身是完全免费的开源软件，没有任何订阅费用。但由于它需要调用LLM服务，用户需要自行提供API密钥，并根据实际使用量向LLM提供商支付费用。

3. 我的数据会被Nanobrowser收集或分享吗？

不会。Nanobrowser坚持隐私优先的设计原则，所有操作都在本地浏览器中进行，不会会将你的数据、凭证或操作历史发送给任何第三方，包括Nanobrowser的开发团队。

4. 为什么我的任务执行失败了？

任务执行失败可能有多种原因：

• 指令不够明确，导致AI代理无法正确理解任务目标。

• 网页结构复杂或动态加载内容较多，AI代理难以准确识别元素。

• 选择的模型不适合当前任务，导致理解或执行能力不足。

• 网页有反自动化机制，阻止了脚本操作。

解决方法：尝试优化指令的清晰度，分解复杂任务，更换更适合的模型，或手动协助完成部分关键步骤。

5. 我可以自定义AI代理的行为吗？

对于普通用户，可以通过设置不同的模型和调整指令来影响AI代理的行为。对于开发人员，可以通过修改源代码来自定义代理的逻辑和行为，具体可参考项目的开发文档。

6. Nanobrowser会自动更新吗？

如果是从Chrome应用商店安装的版本，会自动接收更新。手动安装的版本需要定期查看GitHub发布页面，下载并重新安装最新版本。

7. 如何备份享我的自动化任务给其他人？

目前Nanobrowser暂不支持直接导出或分享任务，但你可以将任务指令复制给他人，他们可以在自己的Nanobrowser中执行相同的指令（前提是他们有相应的访问权限）。

8. 遇到果解决网页加载缓慢导致的自动化失败问题？

可以尝试以下方法：

• 在指令中加入等待时间，例如"等待页面完全加载后再执行操作"。

• 手动刷新页面后再启动自动化任务。

• 在设置中调整页面加载超时时间。

9. Nanobrowser支持多语言吗？

是的，Nanobrowser支持多种语言的指令输入和结果显示。你可以用自己熟悉的语言下达指令，AI代理会自动识别并处理。

10. 如果遇到bug或有功能建议，应该如何反馈？

可以通过GitHub仓库的Issuesssues页面提交bug报告或功能建议，开发团队会定期查看并处理。在提交时，请尽量详细地描述问题或建议，包括复现步骤、错误截图等信息，以便更快地解决问题。

七、相关链接

• GitHub仓库：https://github.com/nanobrowser/nanobrowser

• 官网地址：https://nanobrowser.ai/

八、总结

Nanobrowser作为一款开源的AI网页自动化工具，通过创新的多代理系统、灵活的LLM集成和隐私优先的设计理念，为用户提供了高效、安全且成本透明的网页自动化解决方案。它支持多种复杂的网页任务自动化，拥有直观的用户界面和丰富的功能，适用于数据收集、重复性任务处理、价格监控等多种场景，无论是普通用户还是开发人员都能从中获益。其开源特性不仅保证了透明度和安全性，也为持续改进和定制化开发提供了可能，是网页自动化领域的一个值得关注和尝试的工具。