Adds a sidebar panel that classifies the active page or your selected text with on-device AI models.
npx extension@latest create my-transformers-js --template transformers-js
cd my-transformers-js
npm install
npm run dev!Powered by Extension.js
Adds a sidebar panel that classifies the active page or your selected text with on-device AI models.
What you'll see: A side panel that runs 🤗 Transformers in your browser: type in the text box and the classification appears below it as you type.
How it works: The same demo as the Transformers.js browser extension sample, built with Extension.js: a service worker loads a text-classification pipeline once, the panel sends it text over runtime.sendMessage, and the result prints as JSON. The panel adds what an extension needs on top of that sample: a button that classifies the active page text or your selection (read by the content script and relayed by the service worker), a right-click menu that classifies selected text, and model settings persisted in storage.sync, one cached pipeline per configuration.
Runs Transformers.js pipelines with no server and no API key: the model and tokenizer are loaded from the Hugging Face Hub on first run, and inference happens locally via WebGPU/WASM. One manifest builds for Chrome, Edge and Firefox, where chromium: and firefox: prefixed keys pick the side panel surface and manifest version for each browser. The production build ships the onnxruntime WebAssembly core (about 21 MiB) at the output root, so extension.config.js declares runtime and service-worker budgets sized for the model runtime and extension build finishes without a performance warning.
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/
├── content/
│ └── scripts.js
├── images/
│ ├── icon-128.png
│ ├── icon-16.png
│ ├── icon-32.png
│ ├── icon-48.png
│ ├── icon-64.png
│ └── icon.png
├── sidebar/
│ ├── index.html
│ ├── sakura.css
│ ├── scripts.js
│ ├── SidebarApp.js
│ └── styles.css
├── background.js
├── constants.js
└── manifest.jsonCloned this repo instead? The examples ship without npm scripts, so run Extension.js directly from the example directory. Run npm install first when the example declares dependencies.
Run the extension in development mode. Target a browser with --browser:
npx extension@latest dev . # Chromium (default)
npx extension@latest dev . --browser=chrome
npx extension@latest dev . --browser=edge
npx extension@latest dev . --browser=firefoxBuild for production:
npx extension@latest build . # Chromium (default)
npx extension@latest build . --browser=firefox
npx extension@latest build . --browser=edgePreview the production build with the bundled browser:
npx extension@latest preview .This template ships an end-to-end check (template.spec.ts) validated by the examples-repo CI on every commit.