Local Browser - 设备端AI网页自动化

即将在我们主仓库中启动 runanywhere-web-sdk 支持：请前往查看：https://github.com/RunanywhereAI/runanywhere-sdks

一个使用WebLLM在设备上完全运行AI驱动的网页自动化的Chrome扩展。无需云API，无需API密钥，完全私密。

演示

https://github.com/user-attachments/assets/898cc5c2-db77-4067-96e6-233c5da2bae5

特性

• 设备端AI：使用WebLLM与WebGPU加速进行本地LLM推理
• 多智能体系统：规划器 + 导航器智能体，用于智能任务执行
• 浏览器自动化：导航、点击、输入、从网页提取数据
• 隐私优先：所有AI本地运行，数据不会离开您的设备
• 离线支持：首次下载模型后，可以在离线状态下工作

快速开始

前提条件

• Chrome 124+（需要在Service Worker中使用WebGPU）
• Node.js 18+ 和 npm
• 支持WebGPU的GPU（大多数现代GPU都可以）

安装

1. 克隆并安装依赖：

   root@kitploit:~

   cd local-browser
   npm install
   

2. 构建扩展：

   root@kitploit:~

   npm run build
   

3. 在Chrome中加载：

   • 打开 chrome://extensions
   • 启用“开发者模式”（右上角）
   • 点击“加载已解压的扩展程序”
   • 选择该项目中的 dist 文件夹

4. 首次运行：

   • 点击工具栏中的扩展图标
   • 首次运行将下载AI模型（约1GB）
   • 此后会缓存以便将来使用

使用

1. 导航到任意网页
2. 点击Local Browser扩展图标
3. 输入类似以下的任务：
   • “在维基百科上搜索‘WebGPU’并提取第一段”
   • “前往example.com并告诉我那里有什么”
   • “找到搜索框并搜索‘AI新闻’”
4. 观察AI逐步执行任务

开发

开发模式

npm run dev

这会监听更改并自动重新构建。

项目结构

local-browser/
├── manifest.json           # Chrome扩展清单（MV3）
├── src/
│   ├── background/         # Service Worker
│   │   ├── index.ts        # 入口点与消息处理
│   │   ├── llm-engine.ts   # WebLLM封装
│   │   └── agents/         # AI智能体系统
│   │       ├── base-agent.ts
│   │       ├── planner-agent.ts
│   │       ├── navigator-agent.ts
│   │       └── executor.ts
│   ├── content/            # 内容脚本
│   │   ├── dom-observer.ts # 页面状态提取
│   │   └── action-executor.ts
│   ├── popup/              # React弹出UI
│   │   ├── App.tsx
│   │   └── components/
│   └── shared/             # 共享类型与常量
└── dist/                   # 构建输出

工作原理

1. 用户在弹出UI中输入任务
2. 规划器智能体分析任务并制定高级策略
3. 导航器智能体检查当前页面DOM并决定下一步操作
4. 内容脚本执行操作（点击、输入、提取等）
5. 循环继续，直到任务完成或失败

智能体系统

该扩展采用灵感来自Nanobrowser的双智能体架构：

• PlannerAgent：战略规划，创建步骤化方法
• NavigatorAgent：战术执行，根据页面状态选择具体操作

两个智能体都输出结构化的JSON，供解析和执行。

模型配置

默认模型：Qwen2.5-1.5B-Instruct-q4f16_1-MLC（约1GB）

替代模型（在 src/shared/constants.ts 中配置）：

• Phi-3.5-mini-instruct-q4f16_1-MLC（约2GB，推理能力更强）
• Llama-3.2-1B-Instruct-q4f16_1-MLC（约0.7GB，更小）

故障排除

WebGPU不支持

• 将Chrome更新到124或更高版本
• 检查 chrome://gpu 以验证WebGPU状态
• 某些GPU可能不支持WebGPU

模型加载失败

• 确保有足够的磁盘空间（约2GB空闲）
• 检查浏览器控制台以获取错误信息
• 尝试清除扩展程序的存储并重新加载

操作未执行

• 某些页面会阻止内容脚本（chrome://、扩展页面）
• 尝试在常规网页上操作，如 wikipedia.org

扩展在Chrome更新后无法工作

• 前往 chrome://extensions
• 点击扩展上的刷新按钮

限制

• POC范围：这是一个概念验证，并非生产软件
• 无视觉：仅使用纯文本DOM分析（无截图理解）
• 单标签页：仅适用于当前活动标签页
• 基本操作：支持导航、点击、输入、提取、滚动、等待
• 模型大小：较小的模型可能难以处理复杂任务

技术栈

• WebLLM：使用WebGPU进行设备端LLM推理
• React：弹出UI
• TypeScript：类型安全开发
• Vite + CRXJS：Chrome扩展打包
• Chrome扩展Manifest V3：现代扩展架构

致谢

本项目灵感来源于：

• Nanobrowser - 多智能体网页自动化（MIT许可证）
• WebLLM - 浏览器内LLM推理（Apache-2.0许可证）

依赖许可

许可

MIT许可证 - 详情请见LICENSE文件。