Content Preact

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

Runs on Chrome, Edge, Firefox · Manifest V3 · Surfaces: content script, options page, background service worker · Styling: CSS · Level: beginner · Framework: preact

Create this project

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

What it is for

  • An on-page UI written in Preact and isolated in a Shadow DOM
  • One setting shared between an options page and a content script
  • Starting point for Preact extensions that need preferences

First steps

  • Run npm run dev to launch the extension
  • Click Open options on the overlay injected into the page
  • Tick the setting and watch the overlay move to the left edge

Permissions it asks for

  • storage

Source on GitHubDocumentation

extension.devDocumentation for extension.dev