Content scripts with Sass modules

!Powered by Extension.js

JavaScript Content Script Example

Injects a small styled badge into every web page you visit, with a Sass modules options page that moves it to the left or right edge.

What you'll see: A small UI injected into any web page, isolated in a Shadow DOM so site styles don't bleed through, carrying an Open options button. The options page has one checkbox, and ticking it sends the badge to the left edge of the page straight away.

How it works: A content script mounts a JavaScript UI inside a Shadow DOM and applies scoped styles so the host page can't bleed through. Styles flow through Sass + CSS Modules.

The manifest also registers an options_ui page bundled from src/options/. The options page reads the setting with chrome.storage.sync.get on load and writes it with chrome.storage.sync.set on change. The content script reads the same key and subscribes to chrome.storage.onChanged, so the badge slides to the other edge live rather than waiting for the next page load. It removes that listener in the cleanup function Extension.js calls on teardown.

A content script cannot open the options page itself, because openOptionsPage lives on the extension side. So the badge's button posts a message and the background worker opens the page. That relay is the part worth copying.

The options page runs on the same pipeline, from src/options/styles.module.scss, so it wears hashed class names too and its script assigns them. The edge the badge sits on is a modifier class, and the content script toggles the imported name rather than the name as authored, because the authored name never reaches the browser.

Sass-flavored CSS Modules. Combines .module.scss files with class-name hashing for fully isolated, nested styles.

Try it locally

npx extension@latest create my-content-sass-modules --template content-sass-modules
cd my-content-sass-modules
npm install
npm run dev

A fresh browser window opens with the extension already loaded.

Project layout

src/
├── content/
│   ├── scripts.js
│   └── styles.module.scss
├── images/
│   └── icon.png
├── options/
│   ├── index.html
│   ├── scripts.js
│   └── styles.module.scss
├── background.js
└── manifest.json

Commands

Cloned 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.

dev

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=firefox

build

Build for production:

npx extension@latest build .                # Chromium (default)
npx extension@latest build . --browser=firefox
npx extension@latest build . --browser=edge

preview

Preview the production build with the bundled browser:

npx extension@latest preview .

Tests

This template ships an end-to-end check (template.spec.ts) validated by the examples-repo CI on every commit.

Learn more

• Extension.js docs
• Templates index
• GitHub: extension-js/extension.js