Transformers.js Gemma 4 浏览器助手

关于此扩展

这是一个完全在浏览器中运行的端侧（On-device）AI 助手，利用 WebGPU 和 Transformers.js 提供支持。该 Chrome 扩展提供了一个智能代理，能够理解自然语言指令，并通过一系列专用工具与你的浏览器进行交互。

所有处理过程均在本地设备上完成。没有任何数据会被发送到外部服务器，确保了完全的隐私性。

它能做什么？

该 AI 代理可以使用多种工具来帮助你控制和导航浏览器：

标签页管理

代理可以通过自然语言管理你的浏览器标签页：

get_open_tabs：列出所有打开的标签页及其标题、URL 和描述
go_to_tab：通过 ID 切换到特定标签页
open_url：在后台或前台标签页打开新 URL
close_tab：关闭指定标签页

网页交互 (RAG)

该扩展使用检索增强生成（RAG）技术来理解并与网页内容进行交互：

ask_website：利用语义相似度搜索并提取当前网页的相关信息。内容脚本（Content Script）负责提取结构化内容（标题、段落、列表），使用 all-MiniLM-L6-v2 生成嵌入（Embeddings），并根据你的查询返回最相关的部分。
highlight_website_element：在页面上直观地高亮显示特定元素。代理可以通过高亮显示并滚动到相关部分来引导你的注意力。

历史记录向量数据库

该扩展维护了一个支持语义搜索的历史记录数据库：

find_history：使用自然语言查询而不是精确关键字来搜索你的浏览历史。系统将页面标题、描述和 URL 的向量嵌入存储在 IndexedDB 中，从而实现支持时间过滤的语义搜索。

安装指南

前置条件

支持 WebGPU 的 Chrome 浏览器（Chrome 113+）
支持 WebGPU 功能的现代 GPU

设置步骤

克隆仓库：

git clone 
cd tfjs-agentgemma-extension

安装依赖：

pnpm install

构建扩展：

pnpm run build

在 Chrome 中加载：
- 打开 chrome://extensions/
- 启用“开发者模式”
- 点击“加载已解压的扩展程序”
- 选择 dist 文件夹

开发模式

用于自动重新构建的开发模式：

pnpm run dev

使用方法

点击扩展图标打开侧边栏面板
首次使用时，模型将自动下载（仅需一次）
加载完成后，即可通过聊天界面与 AI 代理进行交互

权限说明

该扩展需要以下权限：

sidePanel：显示聊天界面
activeTab：访问当前标签页内容
storage：保存设置和模型缓存
scripting：注入内容脚本
tabs：读取标签页 URL 所需
host_permissions：访问所有网页的网页内容

Gemma 4

本扩展使用了来自 Hugging Face 的 onnx-community/gemma-4-E2B-it-ONNX 指令微调模型：

模型卡片：https://huggingface.co/onnx-community/gemma-4-E2B-it-ONNX
格式：ONNX（针对使用 Transformers.js + WebGPU 的浏览器推理进行了优化）

扩展架构

本扩展展示了一种将 Transformers.js 集成到浏览器扩展中的有效架构。该设计将关注点分离为三个关键组件，每个组件都针对特定任务进行了优化。

后台脚本 (Background Script)：AI 引擎

后台 Service Worker 托管 Transformers.js 模型，作为中心化的 AI 引擎。

为何这种设计有效：

持久化模型加载：模型只加载一次，并在所有标签页、侧边面板和内容脚本之间共享。这一点至关重要，因为重复加载数 GB 的模型是不切实际的。
Service Worker 生命周期：Service Worker 可以在进行机器学习处理时保持活跃，这对于可能耗时几秒的推理任务必不可少。
中心化处理：多个组件可以将推理请求发送到单个后台 worker，从而实现资源的高效共享与协调。
处理繁重工作负载：机器学习推理是计算密集型任务。后台上下文的设计初衷就是处理此类工作负载，而不会阻塞用户的交互操作。

功能：加载模型、处理推理、执行工具、执行特征提取。

侧边栏 (Side Panel)：用户界面

侧边面板提供了一个持久的聊天界面，用于与代理进行交互。