[TOC]

ai浏览器插件nanobrowser分析

界面

需要做options、sidePanel两个页面，并在background代码中进行消息通讯监听，插件事件控制等。

可以选择框架wxt

整体逻辑

通过监听回调，获取页签信息，注入buildDomTree必要函数，连接监听器执行具体操作等。按照一定流程（langchain）调用对应智能体进行对话信息的预处理与处理以及工具的调用。

重要技术puppeteer（puppeteer-core）、langchain、browser-use。

构建dom树

buildDomTree.js 是关键方法，摘抄自browser-use这个项目，描述页面元素使大模型具有“视觉”。

智能体 agents

通过langchain构建智能体执行器

提示词 prompts

• 基础提示词（定义抽象基类，方便对继承的子集进行约束）
• 驾驶器
• 导航器
• 验证器

动作 actions

提前定义JSON格式的schema，描述可以执行的动作，如跳转页面，滚动翻页，点击元素等。在builder中定义封装后的操作与schemas对应，构建出可以使用的工具方法。

消息 messages

消息封装管理

事件 event

事件封装管理

浏览器操作 browser

抽象浏览器对象收集浏览器信息及页签集合，并构建与页签对应的page对象，结合puppeteer封装页面操作，暴露给agents调用。

dom操作 dom

通过执行脚本的方式操作dom，比如使用buildDomTree构建出的dom树，获取滚动条信息，移除buildDomTree中的高亮。抽象dom元素。暴露给page使用，方便puppeteer操作。注意有不少未使用到的方法。