How to Use Transformers.js in a Chrome Extension

2026-04-02 · Source: Hugging Face - Blog · Field: Technology & Digital — Artificial Intelligence & Machine Learning, Software Development & Engineering · Depth: Intermediate, medium

Summary

This guide details the architecture and implementation of a Chrome extension utilizing Transformers.js and the Gemma 4 E2B model for local AI features under Manifest V3 constraints. Published on April 23, 2026, the project demonstrates how to integrate a background service worker for model hosting, a side panel for chat UI, and a content script for page-level actions. It outlines key design decisions regarding runtime contexts, message contracts, and model responsibilities, using `onnx-community/gemma-4-E2B-it-ONNX` for text generation and `onnx-community/all-MiniLM-L6-v2-ONNX` for vector embeddings. The architecture emphasizes separating heavy orchestration and model inference to the background service worker, ensuring a single model host, shared caching, and responsive UI, while managing model download, caching, and explicit permissions.

Key takeaway

For AI Engineers building Chrome extensions with local inference, you should centralize model loading, inference, and agent orchestration within the background service worker. This approach ensures efficient resource utilization, consistent state management across UI components, and a responsive user experience. Carefully define message contracts between runtimes and request only necessary permissions to maintain user trust and streamline Chrome Web Store review processes.

Key insights

Separate Chrome extension runtimes for orchestration, UI, and page interaction to optimize AI feature performance.

Principles

• Background service worker coordinates all AI logic.
• UI and content scripts act as specialized clients.
• Model inference runs exclusively in background.

Method

Implement a background service worker for model initialization and inference, a side panel for user interaction, and a content script for DOM access, orchestrating communication via typed message enums.

In practice

• Use `gemma-4-E2B-it-ONNX` for text generation.
• Use `all-MiniLM-L6-v2-ONNX` for vector embeddings.
• Cache models under the extension origin for efficiency.

Topics

• Transformers.js
• Chrome Extension Development
• Manifest V3
• Gemma 4 E2B
• Background Service Workers

Code references

• huggingface/blog
• nico-martin/gemma4-browser-extension

Best for: AI Engineer, Machine Learning Engineer, Software Engineer

Related on AIssential

• Transformers.js in 30 seconds #MachineLearning #AI #WebAI — Transformers.js enables direct, client-side machine learning inference in JavaScript using ONNX and ONNX Runtime.
• A Coding Guide to Design and Orchestrate Advanced ReAct-Based Multi-Agent Workflows with AgentScope and OpenAI — Orchestrate specialized ReAct agents with AgentScope for robust, collaborative multi-agent workflows.
• Pushing Local Models With Focus And Polish — Local LLM development needs focused polish on specific configurations to match hosted API user experience.
• Transformers.js v4 Preview: Now Available on NPM! — Transformers.js v4 enhances performance and expands runtime compatibility through a new WebGPU runtime and optimized ONNX exports.
• How Transformers.js Works: AI Models in JavaScript, Explained — Transformers.js unifies local browser-based AI model execution across diverse tasks via a high-level JavaScript API.
• ChromeDevTools / chrome-devtools-mcp — AI agents can control Chrome for advanced debugging, performance analysis, and automation via `chrome-devtools-mcp`.

Open in AIssential →

Editorial summary, takeaway, and curation by AIssential. Original article published by Hugging Face - Blog.