Skip to main content

Documentation Index

Fetch the complete documentation index at: https://extension.js.org/llms.txt

Use this file to discover all available pages before exploring further.

Use Less CSS across browser extension pages and UI components with a single pipeline that also supports module-scoped styles. Extension.js detects Less usage, configures the preprocessors in the Rspack build, and supports both .less and .module.less files in browser extensions.

​
When Less is a good fit

  • You are migrating an existing Less-based web codebase.
  • You want variables and nesting with low migration cost.
  • You need module-scoped styles while keeping Less conventions.

​
Template examples

​
new-less

new-less template screenshot Start a new-tab extension with Less support already configured. 
npx extension@latest create my-extension --template=new-less
Repository: extension-js/examples/new-less

​
Usage with an existing extension

Add Less to an existing extension with the steps below.

​
Installation

Install the required dependencies:

​
Example usage in an HTML file

In extension pages (popup/options/new tab), import Less through your script entry: 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>New Extension</title>
    <script src="./main.ts"></script>
  </head>
  <body>
    <h1 class="title">Hello, Extension.</h1>
  </body>
</html>

import "./styles/globals.less";

console.log("Less loaded");

​
In a content_script file

import "./styles/content.less";

console.log("Content styles loaded");

​
Less modules in browser extensions

Scope class names locally with Less modules, just like CSS modules. This prevents global style conflicts by default, which matters in extensions because content scripts run inside a host page’s CSS scope.

​
content-less-modules

content-less-modules template screenshot Use Less modules in content scripts when you need scoped styles on injected UI. 
npx extension@latest create my-extension --template=content-less-modules
Repository: extension-js/examples/content-less-modules

​
Using Less modules in an existing extension

To enable Less modules, rename your .less files to include .module.less. This enables automatic local scoping of class names. 
- myStyles.less
+ myStyles.module.less

​
Example usage

After renaming your Less file, you can import it into your scripts: 
import styles from "./styles/myStyles.module.less";

const element = document.createElement("h1");
element.className = styles.primary;
element.innerText = "Hello, Extension!";
document.body.appendChild(element);

​
React/Preact example usage

To use Less modules in React or Preact, import your Less module and apply styles as you would in any component: 
import styles from "./styles/myStyles.module.less";

export default function MyComponent() {
  return <h1 className={styles.primary}>Hello, Extension!</h1>;
}

​
Vue example usage

In Vue, prefer single-file component (SFC) styles with lang="less" and module: 
<template>
  <h1 :class="$style.primary">Hello, Extension!</h1>
</template>

<style lang="less" module>
@import "./styles/myStyles.module.less";
</style>

​
Svelte example usage

In Svelte, import Less module mappings and apply classes: 
<script>
  import styles from "./styles/myStyles.module.less";
</script>

<h1 class={styles.primary}>Hello, Extension!</h1>

​
Behavior notes

  • In extension page contexts, .module.less exports class maps as expected.
  • In content scripts, Extension.js emits styles as CSS assets and injects them as stylesheets into the page.
  • If your project lacks Less tooling, Extension.js installs the optional dependencies and asks for a restart.

​
Next steps

​
Video walkthrough