浏览器代理(browser-agent)-browser-agent

### 什么是 Browser Agent？

一个使用 AI 帮助你自动化浏览器任务的 Chrome 扩展。

### 功能特性

- 与 AI 对话讨论网页内容
- 自动化浏览器任务
- 从网站提取内容
- **文件管理系统**
- 预览和编辑 CSV 文件
- 查看 HTML 文件
- 搜索和过滤文件
- 下载和管理生成的文件
### Features

- Chat with AI about web pages
- Automate browser tasks
- Extract content from websites
- **File Management System**
- Preview and edit CSV files
- View HTML files
- Search and filter files
- Download and manage generated files

Browser Agent 项目实现

1. 项目概述
Browser Agent 是一个 AI 驱动的 Chrome 浏览器扩展，通过自然语言指令自动执行网页操作，如搜索、点击、信息提取等。
2. 核心架构
技术栈：

- Chrome Extension (Manifest V3)
- TypeScript / JavaScript
- LLM API 集成 (OpenAI/DeepSeek)
主要组件：

popup.html/js/css - 插件主界面
content.js - 页面内容脚本，执行 DOM 操作
background.js - 后台服务，处理任务状态
agent.js - AI Agent 核心逻辑
file-manager.js - 文件管理（CSV/HTML 生成）
llm-client.js - LLM API 客户端

3. 核心功能实现
3.1 AI Agent 循环
用户输入 → LLM 分析 → 生成动作 → 执行动作 → 获取页面状态 → 循环

3.2 页面元素识别

- AOM (Accessibility Object Model) 快照
- 语义化元素标记（按钮、链接、输入框等）
- Ref 引用系统定位元素
3.3 支持的动作

- navigate(url) - 导航到页面
- search(text) - 自动搜索
- click(ref) - 点击元素
- fill(ref, text) - 填写输入框
- snapshot() - 获取页面结构
- getText(ref) - 提取文本
- finished(result) - 完成任务
4. 文件结构
chrome-extension/
popup.html - 主界面
popup.js - 界面逻辑
popup.css - 样式
content.js - 页面操作
background.js - 后台服务
agent.js - AI Agent
file-manager.js - 文件管理
llm-client.js - API 客户端
manifest.json - 扩展配置
5. 使用方法
6. 安装扩展并配置 API Key
7. 输入任务指令（如：在 B站搜索 Python 教程）
8. Agent 自动执行并返回结果
9. 特性
- 自然语言控制浏览器
- 支持多网站（B站、百度等）
- 自动生成 CSV/HTML 报告
- 文件管理（预览、下载、删除）
- 任务进度追踪
- 循环检测防止死循环