news 2026/4/16 20:13:58

【Nanobrowser源码分析2】架构篇: 探究 Nanobrowser 的核心组件与通信模型

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
【Nanobrowser源码分析2】架构篇: 探究 Nanobrowser 的核心组件与通信模型

欢迎来到《Nanobrowser 源码分析》系列的第二篇文章。在上一篇中,我们对 Nanobrowser 的基本功能和安装进行了快速上手。今天,我们将深入底层,剖析其多智能体(Multi-Agent)架构通信模型

作为一款开源的 AI 浏览器自动化工具,Nanobrowser 的精妙之处在于它并非简单的“提示词转发器”,而是一个运行在浏览器侧边栏中的微型操作系统


一、 整体架构概览

Nanobrowser 采用了典型的Chrome Extension V3架构,并在此基础上构建了一套复杂的智能体协作逻辑。其核心设计哲学是Local-first(本地优先):所有的逻辑调度、状态管理和 DOM 操作都在用户的本地浏览器中完成。

1.1 三层逻辑架构

从逻辑上看,Nanobrowser 可以分为以下三层:

  • UI 层 (Sidebar & Options):提供用户交互界面,负责任务输入、实时状态展示及配置管理(如 LLM API Key)。

  • 调度层 (Agent Core):整个系统的“大脑”。负责将复杂任务拆解,并驱动智能体进行“思考-行动-观察”的循环。

  • 执行层 (Content Scripts):注入到目标网页的脚本,负责真实的 DOM 读取、点击、输入等操作。


二、 核心组件:多智能体协作模型

Nanobrowser 的核心竞争力在于其Planner-Navigator-Validator(规划者-执行者-验证者)模型。这种分工避免了单个 LLM 调用在处理复杂长链路任务时的“幻觉”和失控。

1.Planner (规划者)

  • 职责:任务分解。

  • 逻辑:当用户输入“在京东搜索并购买最便宜的机械键盘”时,Planner 会将其拆解为:1. 导航至京东;2. 搜索关键词;3. 筛选并排序;4. 识别目标商品并点击。

2.Navigator (导航/执行者)

  • 职责:环境感知与动作执行。

  • 逻辑:它是唯一直接与网页结构打交道的智能体。它会获取当前页面的Accessibility Tree (无障碍树)简化信息,决定点击哪个选择器(Selector)。

3.Validator (验证者)

  • 职责:质量控制。

  • 逻辑:在每个关键动作结束后,Validator 会检查当前页面状态是否符合预期(例如:登录是否成功?搜索结果是否加载?)。如果失败,它会触发重试或反馈给 Planner 调整策略。


三、 通信模型:消息传递机制

由于 Chrome 扩展的沙箱机制,Sidebar(侧边栏)、Background Service Worker(后台脚本)和 Content Script(页面脚本)运行在不同的环境中。Nanobrowser 构建了一套高效的通信链路。

3.1 内部消息总线 (Chrome Message Passing)

Nanobrowser 使用chrome.runtimeAPI 进行跨环境协作:

发起方接收方目的
SidebarBackground启动任务,传递用户指令。
BackgroundContent Script执行具体的clicktype动作。
Content ScriptBackground返回当前页面的 DOM 结构和执行结果。
BackgroundSidebar实时推送 Agent 的思考状态和日志。

3.2 外部通信 (LLM & MCP)

  • LLM API:Nanobrowser 支持 OpenAI、Claude、Gemini 以及通过 Ollama 运行的本地模型。它通过标准的 HTTPS 请求与这些 API 通信,关键的System Prompt会在 Background 阶段完成组装。

  • MCP (Model Context Protocol):Nanobrowser 正在引入 MCP 支持,这允许 Agent 调用外部工具(如本地文件读写、数据库查询),将浏览器自动化的边界扩展到操作系统层面。


四、 核心工作流:从 Prompt 到 Action

一个典型的自动化循环如下:

  1. 感知 (Observe):Content Script 提取当前页面的 DOM/无障碍树,并进行“瘦身”处理(减少 Token 消耗)。

  2. 决策 (Think):调度层将页面信息 + 用户目标发送给 Navigator。

  3. 行动 (Act):Navigator 生成特定指令(如click("#buy-btn")),通过消息总线发送至 Content Script 执行。

  4. 校验 (Validate):Validator 观察行动后的页面变化,决定进入下一步还是重试。


五、 源码中的关键路径

如果你想深入代码库,可以重点关注以下目录:

  • src/agents/: 包含各智能体的 Prompt 定义和逻辑逻辑。

  • src/background/: 负责扩展的生命周期管理和消息中转。

  • src/content/: 实现具体的浏览器操作(模拟点击、滚动、表单填充)。


结语

Nanobrowser 的架构展示了如何通过模块化智能体高效的浏览器消息机制,在有限的扩展环境中实现强大的 AI 自动化。这种“分而治之”的设计,不仅提升了任务的成功率,也极大地降低了开发者二次开发的难度。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/16 11:00:52

安卓应用安全分析利器:apk2url快速提取网络端点终极指南

安卓应用安全分析利器:apk2url快速提取网络端点终极指南 【免费下载链接】apk2url A tool to quickly extract IP and URL endpoints from APKs by disassembling and decompiling 项目地址: https://gitcode.com/gh_mirrors/ap/apk2url 在移动应用安全测试和…

作者头像 李华
网站建设 2026/4/16 11:42:22

嵌入式开发环境搭建终极指南:从零到一的完整配置方案

嵌入式开发环境搭建终极指南:从零到一的完整配置方案 【免费下载链接】docs-2k0300 2k0300 平台板卡的产品规格书,用户手册等文档 项目地址: https://gitcode.com/open-loongarch/docs-2k0300 想要快速上手嵌入式开发却苦于环境配置复杂&#xff…

作者头像 李华
网站建设 2026/4/16 10:53:18

使用SSH X11转发显示TensorFlow图像输出

使用SSH X11转发显示TensorFlow图像输出 在深度学习项目中,算法工程师常常面临一个看似简单却令人头疼的问题:如何在没有显示器的远程服务器上运行包含图像展示的代码?比如你正在调试一个卷积神经网络,想看看某一层的特征图长什么…

作者头像 李华
网站建设 2026/4/16 10:58:16

Legion Go 手柄失灵?10 秒组合键重置技巧,游戏党必存!

作为拯救者系列的热门掌机,Legion Go 凭借出色的性能和便携设计,成为很多玩家随时随地开黑的首选。但在长时间高强度游戏、频繁插拔使用,或者偶尔出现的系统兼容问题中,不少玩家会遇到手柄 “罢工” 的糟心情况:摇杆漂…

作者头像 李华
网站建设 2026/4/15 15:23:48

为什么选择TensorFlow-v2.9镜像进行大模型训练?优势全面剖析

为什么选择TensorFlow-v2.9镜像进行大模型训练?优势全面剖析 在当前深度学习项目日益复杂、模型规模持续膨胀的背景下,一个稳定、高效且开箱即用的开发环境,往往比算法调优更能决定项目的成败。尤其是在大模型训练场景中,动辄数十…

作者头像 李华
网站建设 2026/4/16 10:17:45

Jupyter自动保存设置防止TensorFlow代码意外丢失

Jupyter自动保存设置防止TensorFlow代码意外丢失 在深度学习项目开发中,最让人沮丧的场景之一莫过于:连续编写了几个小时的模型代码,正准备训练时浏览器崩溃、网络中断,或者不小心刷新了页面——而你,忘了手动保存。 …

作者头像 李华