Transformers.js demo with a sidebar and a content script: classify the active page or your selection on-device via WebGPU/WASM.
What you'll see: A side panel where you can type text, pull the active page's text, or use your current selection — and run a Transformers.js pipeline on it. A right-click context menu also exposes "Classify selection with Transformers.js".
How it works: The manifest registers a side panel (chromium:side_panel / firefox:sidebar_action) and a content script that listens for getPageContext / getSelection messages. The background service worker relays those requests to the active tab and runs the pipeline; results stream back to the sidebar.
Runs Transformers.js models in the browser via WebGPU/WASM. No server, no API key — the model and tokenizer are loaded from the Hugging Face Hub on first run.
npx extension@latest create my-transformers-js --template transformers-js
cd my-transformers-js
npm install
npm run devA fresh browser window opens with the extension already loaded.
src/
├── images/
│ └── icon.png
├── content/
│ └── scripts.js
├── sidebar/
│ ├── index.html
│ ├── sakura.css
│ ├── scripts.js
│ ├── SidebarApp.js
│ └── styles.css
├── background.js
├── constants.js
└── manifest.json
Run the extension in development mode. Target a browser with --browser:
npm run dev # Chromium (default)
npm run dev -- --browser=chrome
npm run dev -- --browser=edge
npm run dev -- --browser=firefoxBuild for production. Convenience scripts cover each browser:
npm run build # Chrome (default)
npm run build:firefox
npm run build:edgePreview the production build with the bundled browser:
npm run previewThis template ships an end-to-end check (template.spec.ts) validated by the examples-repo CI on every commit.