Transformers.js Chrome Extension Architecture Guide

A technical guide details how to integrate Transformers.js into a Chrome extension under Manifest V3 (MV3) constraints. The architecture splits responsibilities across three runtimes: a background service worker hosts AI models and orchestrates tool execution, a side panel provides the chat UI, and a content script handles DOM extraction and highlighting. The background runs all inference—text generation via Gemma 4 (onnx-community/gemma-4-E2B-it-ONNX) and embeddings via MiniLM (onnx-community/all-MiniLM-L6-v2-ONNX)—to avoid duplicate model loads and keep the UI responsive. Messaging is typed through enums, with the background as the single coordinator. State is distributed: conversation history stays in background memory, tool preferences use chrome.storage.local, semantic history vectors use IndexedDB, and extracted page content is cached per URL. The tool-calling loop separates internal model messages from UI-facing chat messages, parsing model output for tool calls and executing them deterministically. Build setup uses Vite with multi-entry outputs for each runtime. The guide emphasizes clear separation of concerns and practical MV3 lifecycle considerations, such as service worker suspension and model cache management.