Hugging Face 近日发布了一份技术蓝图，旨在指导开发者如何利用 Transformers.js 库，将本地人工智能功能集成到 Chrome 浏览器扩展中。
这份由开发者 Nico Martin 编写的指南，详细阐述了一款基于 Gemma 4 E2B 模型开发的浏览器扩展背后的架构设计。该项目为开发者提供了一个参考范例，展示了如何在 Chrome Manifest V3 运行时环境的限制下，实现 AI 功能的本地化运行。
根据技术文档，该方案采用了一种三层架构系统：用于托管模型的后台 Service Worker（服务工作线程）、用于聊天交互的侧边栏（Side Panel），以及用于与网页进行交互的内容脚本（Content Script）。
针对 Manifest V3 的优化方案
在浏览器环境中实现 AI 功能，需要严格的职责划分，以兼顾性能与安全性。指南指出，后台 Service Worker 充当“控制平面（control plane）”，负责管理智能体（Agent）的生命周期、模型初始化以及工具调用。
这一设计决策的核心在于：在避免重复加载模型带来的巨大资源消耗的同时，确保用户界面的响应速度。其中，侧边栏作为交互层，负责处理聊天的输入与输出；而内容脚本则充当桥梁，负责网页 DOM 提取和页面高亮显示。
“设计的关键在于将繁重的编排工作留在后台，而让 UI 和页面逻辑保持轻量化，”Martin 在技术报告中写道。
由于各运行时环境相互独立，因此需要一套稳健的消息传递机制来促进通信。在演示项目中，后台 Service Worker 负责保存对话历史。当用户与 UI 交互时，侧边栏会向后台发送诸如“AGENT_GENERATE_TEXT”之类的事件，随后后台执行推理并将更新结果传回界面。
该架构专门针对 Manifest V3 的局限性进行了优化，例如解决了 Service Worker 生命周期管理严格、内存管理受限等问题。通过将 Transformers.js 引擎集中在后台脚本中，即使侧边栏被关闭，该扩展程序仍能保持持久的 AI 处理能力。
