How to Use Transformers.js in a Chrome Extension

Summary

The guide explains how to build a Chrome extension that runs local AI with Transformers.js under Manifest V3, using a browser assistant as the reference architecture. It assigns model orchestration, lifecycle management, tool execution, and conversation state to a background service worker, while a side panel handles chat and a content script handles page extraction and highlighting. The implementation uses Gemma 4 E2B in q4f16 for text generation and all-MiniLM-L6-v2 in fp32 for embeddings, with WebGPU, DynamicCache-based KV caching, explicit download progress, and reusable pipelines. Typed message contracts, model-output parsing, and separate internal and UI transcripts support a deterministic tool loop, while chrome.storage.local, IndexedDB, and background caches place data according to lifecycle and access needs; the guide concludes that separating these runtimes keeps the UI responsive and avoids duplicate model loads.

Takeaways

1. 1

   The background service worker is the single coordinator for model execution, agent state, and tool calls, while the side panel and content script act as focused clients for interaction and page access.

2. 2

   Gemma 4 E2B uses q4f16 text generation with WebGPU and DynamicCache-based KV caching; all-MiniLM-L6-v2 uses fp32 feature extraction with vector normalization for semantic search.

3. 3

   Conversation history stays in background memory, tool preferences use chrome.storage.local, semantic history vectors use IndexedDB, and extracted page content uses a URL-keyed background cache.