Content Preact

!Powered by Extension.js

Preact Content Script Example

Shows an overlay UI on web pages and an options page that moves it from right to left.

What you'll see: A small Preact UI injected into any web page, isolated in a Shadow DOM so site styles don't bleed through. It carries an Open options button, and the options page behind it has one checkbox that moves the overlay between the right and left edge of the page, live.

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

The manifest also registers an options_ui page bundled from src/options/, a second Preact app. It reads and writes one setting, badgePosition, through chrome.storage.sync, which is why the manifest asks for the storage permission. The value is right by default and left when the box is ticked. The content script reads the same key on load and subscribes to chrome.storage.onChanged, so ticking the checkbox slides the overlay to the other edge on every open page without a reload. That listener is removed in the cleanup function the framework calls on teardown.

A content script cannot open the options page on its own, because chrome.runtime.openOptionsPage lives on the extension side. The Open options button sends a message to the background worker, and the worker opens the page. The options page is also reachable from the extension's entry in the browser's extensions page.

Try it locally

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

A fresh browser window opens with the extension already loaded.

Project layout

src/
├── content/
│   ├── ContentApp.tsx
│   ├── scripts.tsx
│   └── styles.css
├── images/
│   ├── chromeWindow.png
│   ├── icon.png
│   ├── preact.png
│   ├── tailwind_bg.png
│   ├── tailwind.png
│   └── typescript.png
├── options/
│   ├── OptionsApp.tsx
│   ├── index.html
│   ├── scripts.tsx
│   └── styles.css
├── background.ts
└── 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