Gemma Gem：在浏览器里跑 AI Agent 的 Chrome 扩展

想象一下：你打开任何一个网页，然后对浏览器说「帮我填这个表格」「帮我点击这个按钮」「帮我总结一下这个页面的内容」——不需要切换到 ChatGPT，不需要复制粘贴，AI 助手就「住」在你正在看的页面里，随时听候差遣。这就是 Gemma Gem 正在做的事情。

Gemma Gem 是由独立开发者 kessler 构建的一个 Chrome 浏览器扩展，它的核心创新在于：把 Google 最新发布的 Gemma 4 大语言模型直接跑在你的浏览器里，通过 WebGPU API 调用本地 GPU 资源进行推理，全程不需要任何 API Key，不需要联网调用云端服务，你的数据永远不会离开你的电脑。

背景：为什么要在浏览器里跑大模型？

2024 年，随着 WebGPU API 在主流浏览器中逐步落地，一个新的可能性出现了：把机器学习推理从服务器端搬到客户端。Google 随后发布了 Gemma 4 系列模型的 ONNX 优化版本（由 onnx-community 社区导出），使得在资源受限的浏览器环境中运行 20 亿参数模型成为现实。

Gemma Gem 正是踩在这个技术交叉点上的产物。作者 kessler 的设计哲学很明确：隐私优先、零依赖、本地运行。他不想让用户为了用 AI 助手而把网页内容发送给第三方 API——那些内容可能包含密码、个人信息、商业机密。于是他选择了一条更难的路：在浏览器里把模型跑起来。

技术架构：Chrome 扩展 + WebGPU + ONNX Runtime

Gemma Gem 的架构清晰地体现了 Chrome 扩展的多进程模型，总共涉及三个主要执行上下文：

1. Content Script（内容脚本，chat-overlay.ts）

这是用户最直接感受到的部分——一个悬浮在页面右下角的深紫色风格聊天面板。聊天 UI 通过 Shadow DOM 实现完全样式隔离，底部有一个 380×500px 的固定浮层，带有输入框、设置菜单（思考开关、最大迭代次数）和模型选择下拉框。

核心渲染逻辑使用了 marked 库将模型输出的 Markdown 文本实时渲染为 HTML，支持代码高亮、换行等格式。面板颜色主题为 #0f0f19 背景配合 #8b5cf6（紫色）强调色，视觉风格偏暗系科技感。

聊天面板通过 chrome.runtime.onMessage 与扩展其他部分通信，用户发送消息时触发 chat:send 事件，关闭面板时发送 chat:stop。

2. Background Service Worker（后台服务，message-router.ts + offscreen-manager.ts）

Background script 扮演路由中枢的角色。它监听来自 content script 的消息，并根据类型分发：chat:send（转发用户消息和页面上下文给 Agent）、chat:open（初始化 Offscreen Document 并加载模型）、settings:update（同步设置变更）。

Gemma Gem 使用了 Chrome 的 Offscreen API（chrome.offscreen.createDocument）来创建隐藏的离屏文档，这个 Offscreen Document 才是真正运行 ONNX 推理的地方。Chrome Offscreen API 设计允许在没有活动标签页的情况下维持长时间的推理会话。

3. Offscreen（离屏文档，Agent 推理核心）

Offscreen Document 是整个扩展的「大脑」，负责：加载 Gemma 4 ONNX 模型、调度 Agent 循环（ReAct 风格的 Tool Use）、管理推理会话状态。

推理运行时使用的是 ONNX Runtime Web（onnxruntime-web），通过 WASM + SIMD 方案在浏览器中高效执行 ONNX 模型。构建时 WXT 工具自动将 ort-wasm-simd-threaded.asyncify.mjs 和对应的 .wasm 文件复制到 public/ort/ 目录，作为扩展的内联资源。

Agent 框架：@kessler/gemma-agent

Agent 核心逻辑封装在 @kessler/gemma-agent 包中（作者自己发布的 npm 包）。从 tool-executors.ts 可以看出，Agent 具备以下工具能力：

• read_page_content：读取当前页面指定 CSS 选择器的内容（支持 text/html 两种格式）
• take_screenshot：截取当前可见页面
• click_element：点击指定 CSS 选择器对应的页面元素
• type_text：向输入框写入文本，并触发 input 和 change 事件
• scroll_page：上下滚动页面
• get_datetime：获取当前日期时间
• evaluate_javascript：在页面上下文中执行任意 JavaScript 代码

这些工具通过 ToolCall / ToolResponse 接口标准化后，由 Agent 框架调度。Agent 采用迭代式推理（默认最多 10 轮），每一轮模型根据当前状态决定调用哪个工具，直到任务完成或达到迭代上限。

模型配置定义在 shared/models.ts 中：

默认使用 E2B（20亿参数）模型，适合大多数设备；E4B（40亿参数）需要更充足的内存和 GPU 资源。

部署方式：需要一点动手能力

Gemma Gem 目前没有上架 Chrome Web Store，需要用户手动加载：

1. 克隆仓库后，pnpm install && pnpm build 编译扩展
2. 打开 chrome://extensions，开启「开发者模式」
3. 点击「加载已解压的扩展程序」，选择 dist/chrome-mv3-prod 目录
4. 在 chrome://flags/#enable-unsafe-webgpu 中启用 WebGPU（部分 Chrome 版本需要）
5. 首次打开扩展时会自动从 HuggingFace Hub 下载模型权重

构建系统使用 WXT（一个专门为浏览器扩展设计的构建工具，基于 Vite）。pnpm build:firefox 构建 Firefox 版，pnpm zip 打包分发。

隐私意义：数据主权的一次实践

Gemma Gem 的最大价值不在于技术本身（类似的浏览器 AI 工具已经存在），而在于它对隐私问题的直接回应。当你在 ChatGPT 的网页上使用 AI 助手分析工作文档时，这些内容会经过第三方服务器。Gemma Gem 则完全不同——模型跑在你的机器上，HuggingFace 的模型权重通过去中心化分发下载到本地，Agent 推理过程完全在浏览器沙箱内完成。

对于需要处理敏感信息（内部系统、合同、客户数据）的用户来说，这提供了一种不需要任何第三方信任的 AI 辅助方案。当然，代价是：你的设备需要足够强的 GPU 来运行 WebGPU 推理，模型的能力上限也受限于 2B/4B 的参数规模。

局限与挑战

1. WebGPU 支持有限：截至 2026 年，WebGPU 在桌面 Chrome 中已稳定，但 macOS Safari 和移动端浏览器支持度参差不齐
2. 模型能力上限：2B/4B 参数的 Gemma 模型远小于 GPT-4o 等云端大模型，在复杂推理任务上存在明显差距
3. 内存占用：E4B 模型加上 ONNX Runtime Web 的 WASM 运行时，需要 ~2GB+ 浏览器内存
4. 首次加载慢：首次运行时需要从 HuggingFace 下载 ~500MB-1.5GB 的模型文件

行业意义

Gemma Gem 代表了 AI 助手从「云端集中式」向「客户端分布式」演进的一个切面。随着 WebGPU 的成熟和端侧模型的优化，未来会有更多「零云依赖」的 AI 应用出现在浏览器端。Gemma Gem 以 931 Stars（分析时）证明了这个方向确实有人在认真探索。