Content Less Modules

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

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

Create this project

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

What it is for

  • Hashed class names shared by a content script and an options page
  • One position setting shared between an options page and a content script
  • Starting point for CSS Modules extensions that need preferences

First steps

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

Permissions it asks for

  • storage
  • <all_urls>

Source on GitHubDocumentation

extension.devDocumentation for extension.dev