# 策展 · X (Twitter) 🔥🔥🔥🔥

> 作者：Google Gemma (@googlegemma) · 平台：X (Twitter) · 日期：2026-04-27

> 原始來源：https://x.com/googlegemma/status/2048805789788413984

## 中文摘要

完全本地瀏覽器內 Agent，基於 Gemma 4 E2B 和 WebGPU 實現工具呼叫。

開發者 Nico Martin 推出了「Transformers.js Gemma 4 Browser Assistant」Chrome 擴充功能，這是一個完全在裝置端運行的 AI Agent，能透過自然語言命令管理分頁、搜尋瀏覽歷史並互動網頁內容，所有處理皆本地化，無需伺服器確保隱私。Google Gemma 官方轉發並感謝 Nico Martin 建置並開源此專案，強調其在 Chrome 擴充功能中架構 Transformers.js 的創新方式，讓多 GB 模型高效運作。

**核心功能**

此 Agent 透過原生工具呼叫，提供多項瀏覽器控制能力：
- **分頁管理**：包括「get_open_tabs」（列出所有開啟分頁的標題、URL 和描述）、「go_to_tab」（依 ID 切換特定分頁）、「open_url」（在背景或前景開啟新 URL）、「close_tab」（關閉特定分頁）。
- **網頁互動 (RAG)**：「ask_website」使用 Retrieval-Augmented Generation，從當前網頁提取相關資訊，透過 all-MiniLM-L6-v2 生成嵌入向量，基於語意相似度返回標題、段落、列表等最相關區段；「highlight_website_element」視覺化高亮並滾動至特定元素。
- **歷史向量資料庫**：「find_history」支援自然語言查詢瀏覽歷史，而非精確關鍵字，系統在 IndexedDB 儲存頁面標題、描述和 URL 的向量嵌入，並支援時間過濾。

**硬體與安裝需求**

需 Chrome 113+（支援 WebGPU）和具 WebGPU 能力的現代 GPU。安裝步驟精簡：
1. 複製儲存庫：`git clone <repository-url>` 後進入 `tfjs-agentgemma-extension`。
2. 安裝依賴：`pnpm install`。
3. 建置：`pnpm run build`，然後在 `chrome://extensions/` 啟用開發者模式，載入 `dist` 資料夾。
開發模式下用 `pnpm run dev` 自動重建。首次使用時模型自動下載（一次性），點擊圖示開啟側邊欄聊天介面即可互動。

**權限與模型細節**

擴充功能需以下權限：
- `sidePanel`：顯示聊天介面。
- `activeTab`：存取當前分頁內容。
- `storage`：儲存設定與模型快取。
- `scripting`：注入內容腳本。
- `tabs`：讀取分頁 URL。
- `host_permissions`：存取所有 URL 網頁內容。

使用 Hugging Face 的「onnx-community/gemma-4-E2B-it-ONNX」指令微調模型（ONNX 格式，優化 Transformers.js + WebGPU 瀏覽器推論）。

**擴充功能架構**

此設計將 Transformers.js 整合至 Chrome 擴充功能，分離三關鍵元件，各司其職優化效能，作者 Nico Martin 特別強調這是讓其運作的「有趣之處」。

**背景腳本：AI 引擎**

背景服務工作處理核心 AI：
- 模型一次性載入並跨分頁、側邊欄、內容腳本共享，避免重複載入多 GB 模型的低效。
- 服務工作生命週期支援數秒推論任務，不中斷使用者互動。
- 集中處理多元件推論請求，資源共享協調，重負載計算不阻塞 UI。
- 負責載入模型、推論、工具執行、特徵提取。

**側邊欄：使用者介面**

提供持久聊天介面：
- 相較彈出視窗，側邊欄瀏覽全程維持開啟，保留對話脈絡。
- 更多螢幕空間，提升使用者體驗，與網頁並存。
- 透過 `chrome.runtime.sendMessage` 和 `chrome.runtime.onMessage.addListener` 非同步通訊背景腳本。
- 內建 React 聊天介面，傳送訊息、渲染回應與工具結果，維持對話歷史。

**內容腳本：網頁互動**

在網頁脈絡執行，直接存取 DOM：
- 唯一能操縱網頁 DOM 的元件，關鍵於 RAG 功能。
- 隔離脈絡維持瀏覽器安全，同時實現強大互動。
- 每分頁獨立處理提取與高亮。
- 提取結構化內容（標題、段落、列表）、高亮元素、傳送內容至背景生成嵌入，回應使用者互動。

**通訊流程**

```
使用者輸入 (側邊欄)
    ↓
    chrome.runtime.sendMessage
    ↓
背景腳本 (AI Agent)
    ↓
    Transformers.js 處理
    ↓
    執行工具 (如 ask_website)
    ↓
    chrome.tabs.sendMessage
    ↓
內容腳本 (若需)
    ↓
    提取/高亮網頁內容
    ↓
    返回背景
    ↓
    chrome.runtime.sendMessage
    ↓
側邊欄 (顯示回應)
```

**架構優勢**

特別適合瀏覽器 ML 應用：
- 資源效率：模型單次載入，集中推論。
- 響應 UI：ML 重處理不阻塞介面。
- 可擴展：同時處理多分頁請求。
- 安全：維持瀏覽器安全模型，實現強大功能。
- WebGPU 加速：背景腳本利用 WebGPU 快速推論。

**開源資源與社群反應**

GitHub：https://github.com/nico-martin/gemma4-browser-extension  
Chrome Web Store：https://chromewebstore.google.com/detail/transformersjs-gemma-4-br/dhaknnnkcdkjhcclchmnfdhddoehoool（作者 Nico Martin，日期 April 14, 2026）  
Hugging Face 部落格：https://huggingface.co/blog/transformersjs-chrome-extension  

Google Gemma 官方公開感謝 Nico Martin 建置並開源（https://x.com/i/status/2047610640974442839），強調 100% 本地、無伺服器，Chrome 商店描述其轉化瀏覽器為私密 AI 助手，加速工作流程、智慧網頁互動，無資料外洩風險。此趨勢彰顯 Transformers.js 在瀏覽器端 Agent 的潛力，透過精巧架構克服硬體限制，預示更多 on-device AI 工具將挑戰雲端依賴。

## 標籤

Agent, 開源專案, AIGC, Web, Google, Gemma, Transformers.js