AI Browser：基于用户指令的浏览器自动化系统
简介
本系统实现了智能化浏览器操作引擎，能够根据自然语言指令自动执行网页浏览任务。通过将网页元素结构化表示与AI决策模型相结合，系统能够理解用户意图并转化为具体浏览器操作，实现从简单搜索到复杂工作流（如在线购票）的自动化执行。
网页内容结构化处理
系统核心创新在于将复杂DOM结构转换为AI可理解的文本表示：
DOM标记与提取：
- 注入脚本遍历页面DOM结构
- 识别并标记所有可交互元素（输入框、按钮、链接等）
- 为元素添加可视化高亮标识（如图示）
结构化文本表示：
[Start of page]
[1]<a Gmail >Gmail/>
[2]<a 搜索图片 >图片/>
[3]<div />
[4]<a false;button;Google 应用/>
[5]<a 登录/>
[6]<img />
[7]<div />
[8]<textarea 搜索;false;q;combobox;Google 搜索/>
[9]<div />
[10]<div 按图搜索;button/>
[11]<input button;Google 搜索;btnK;submit/>
[12]<input btnI; 手气不错 ;submit/>
[13]<a English/>
[14]<a Bahasa Melayu/>
[15]<a தமிழ்/>
[16]<a 关于 Google/>
[17]<a 广告/>
[18]<a 商务/>
[19]<a Google 搜索的运作方式/>
[20]<a 隐私权/>
[21]<a 条款/>
[22]<div false;button/>
[23]<div 设置/>
[End of page]
关键特性：
- 保留元素类型、文本内容、交互状态等核心信息
- 索引化组织确保操作精确性（如
[8]对应搜索框） - 精简格式优化AI处理效率
- 支持通过XPath定位页面元素执行操作
系统架构
主要功能模块
| 模块 | 职责描述 | 核心技术 |
|---|---|---|
| Agent | 决策中枢，管理任务上下文，生成操作指令序列 | 状态机管理，LLM指令生成 |
| Controller | 连接AI决策与浏览器操作，解析并执行高级指令 | 指令分发，异常处理 |
| DOM | 网页结构处理与分析 | Playwright, XPath, 跨域通信 |
| Browser | 浏览器实例管理，封装底层操作 | Playwright核心集成 |
模块详解
Agent 决策引擎
- 维护任务执行状态机
- 结合用户目标与页面状态生成下一步指令
- 支持多步骤复杂任务编排（如"预订北京到上海的机票"）
Controller 执行中枢
- 翻译AI指令为具体浏览器操作
- 监控操作执行结果
- 提供操作失败时的回退机制
DOM 处理系统
- buildDomTree.js：注入脚本实现：
- 可交互元素过滤
- 可视化标记渲染
- 元素特征提取
- 提供DOM节点数据模型
- 支持动态页面解析（SPA应用）
- buildDomTree.js：注入脚本实现：
Browser 核心引擎
- 基于Playwright封装：
- 多标签页管理（创建/切换/关闭）
- 智能导航与历史记录跟踪
- 页面截图与PDF生成
- 文件下载处理
- 安全防护机制：
- URL白名单检测
- 跨域操作隔离
- 基于Playwright封装：
操作指令集
系统支持以下浏览器自动化操作：
| Action | Description | Parameters |
|---|---|---|
| done | 完成任务并向用户汇报结果 | success (boolean), text (string), files_to_display (string[] or null) |
| search_google | 在 Google 上搜索 | query (string) |
| go_to_url | 跳转到指定 URL，可选新标签页 | url (string), new_tab (boolean) |
| go_back | 浏览器后退 | — |
| wait | 等待指定秒数 | seconds (integer, default 3) |
| click_element_by_index | 单击当前页中指定索引的可交互元素 | index (integer) |
| input_text | 在指定输入框中输入文字 | index (integer), text (string) |
| upload_file | 在指定上传控件中上传文件 | index (integer), path (string) |
| switch_tab | 切换到指定标签页 | page_id (integer) |
| close_tab | 关闭指定标签页 | page_id (integer) |
| extract_structured_data | 从页面提取结构化信息（可选同时提取链接） | query (string), extract_links (boolean) |
| scroll | 对页面或指定容器滚动 | down (boolean), num_pages (number), index (integer or null) |
| send_keys | 模拟键盘按键 | keys (string, 如 "Enter", "Control+o") |
| scroll_to_text | 滚动页面直到出现指定文本 | text (string) |
| write_file | 写入或追加文件内容 | file_name (string), content (string), append (boolean), leading_newline (boolean), trailing_newline (boolean) |
| replace_file_str | 在文件中替换字符串 | file_name (string), old_str (string), new_str (string) |
| read_file | 读取文件内容 | file_name (string) |
| get_dropdown_options | 获取原生下拉框中的所有选项 | index (integer) |
| select_dropdown_option | 在原生下拉框中按文本选择选项 | index (integer), text (string) |
参数说明：
should_strip_link_urls（内容提取参数）：true：仅保留链接文本（移除URL）false：保留完整链接（文本+URL）
- 坐标参数采用
{x,y}格式对象 - 拖拽操作支持元素定位和坐标定位双模式
AI集成工作流
系统通过智能决策循环实现自动化操作：
graph TD
A[用户指令] --> B{页面分析}
B --> C[DOM转文本表示]
C --> D[AI决策引擎]
D --> E[生成操作指令]
E --> F[执行浏览器操作]
F --> G{任务完成?}
G --否--> B
G --是--> H[返回结果]
执行流程：
- 用户提交自然语言指令（如"查找最近的咖啡店"）
- 系统获取当前页面结构化表示
- AI模型综合以下信息生成操作指令：
- 系统提示词（操作规范）
- 页面元素文本表示
- 用户原始指令
- 历史操作上下文
- Controller执行具体浏览器操作
- 循环直至任务完成，返回最终结果
典型应用场景：
- 跨网站比价购物
- 定期数据采集
- 复杂表单自动填写
- 多步骤工作流执行（机票预订/酒店下单）
- 无障碍网页浏览辅助
本系统通过融合现代浏览器技术与大语言模型能力，实现了真正智能化的网页交互范式，为自动化测试、数据采集、智能助手等领域提供强大基础设施支持。