How to Use Transformers.js in a Chrome Extension
We ran into several practical observations about Manifest V3 runtimes, model loading, and messaging that are worth sharing.
Who this is for
This guide is for developers who want to run local AI features in a Chrome extension with Transformers.js under Manifest V3 constraints.
By the end, you will have the same architecture used in this project: a background service worker that hosts models, a side panel chat UI, and a content script for page-level actions.
What we will build
- Live extension: Chrome Web Store
- Source code: github.com/nico-martin/gemma4-browser-extension
- End result: a background-hosted Transformers.js engine, a side panel chat UI, and a content script for page extraction and highlighting.
1) Chrome extension architecture (MV3)
Before diving in, a quick scope note: I will not go deep on the React UI layer or Vite build configuration. The focus here is the high-level architecture decisions: what runs in each Chrome runtime and how those pieces are orchestrated.
If Manifest V3 is new to you, read this short overview first: What is Manifest V3?
1.1 Runtime contexts and entry points
background.service_worker = background.js
, built from
src/background/background.ts
.
side_panel.default_path = sidebar.html
, built from
src/sidebar/index.html
.
content_scripts[].js = content.js
with
matches: http(s)://*/*
and
run_at: document_idle
, built from
src/content/content.ts
.
The background service worker also handles
chrome.action.onClicked
to open the side panel for the active tab. Related entry point to know: a popup can be defined with
action.default_popup
and works well for quick actions. This project uses a side panel for persistent chat, but the orchestration pattern is the same.
1.2 What runs where
- Background (src/background/background.ts): the control plane: agent lifecycle, model initialization, tool execution, and shared services like feature extraction.
- Sid
It seems that the last line of your text was cut off. The full content should continue here. Is there a specific section or detail you want to add or modify?Source Read original →Stay ahead of AI. Get the most important stories delivered to your inbox — no spam, no noise.
