Using Libraries

WebExtend supports lots of frontend frameworks or libraries, which benefits from Rsbuild's features. This chapter covers most commonly used cases.

UI Libraries

React

To create a project with WebExtend and React, just run the following command.

npx web-extend@latest init --template react

To use React in an existing WebExtend project, you need to register the Rsbuild React plugin.

rsbuild.config.ts

import { defineConfig } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";
import { pluginWebExtend } from "@web-extend/rsbuild-plugin";

export default defineConfig({
  plugins: [pluginReact(), pluginWebExtend()],
});

Vue

To create a project with WebExtend and Vue, just run the following command.

npx web-extend@latest init --template vue

To use Vue in an existing WebExtend project, you need to register the Rsbuild Vue plugin.

rsbuild.config.ts

import { defineConfig } from "@rsbuild/core";
import { pluginVue } from "@rsbuild/plugin-vue";
import { pluginWebExtend } from "@web-extend/rsbuild-plugin";

export default defineConfig({
  plugins: [pluginVue(), pluginWebExtend()],
  output: {
    // https://github.com/web-infra-dev/rsbuild/issues/3217
    sourceMap: {
      js: false,
    },
  },
});

Svelte

To create a project with WebExtend and Svelte, just run the following command.

npx web-extend@latest init --template svelte

To use Svelte in an existing WebExtend project, you need to register the Rsbuild Svelte plugin.

rsbuild.config.ts

import { defineConfig } from "@rsbuild/core";
import { pluginSvelte } from "@rsbuild/plugin-svelte";
import { pluginWebExtend } from "@web-extend/rsbuild-plugin";

export default defineConfig({
  plugins: [pluginSvelte(), pluginWebExtend()],
});

Solid

To create a project with WebExtend and Solid, just run the following command.

npx web-extend@latest init --template solid

To use Solid in an existing WebExtend project, you need to register the Rsbuild Solid plugin.

rsbuild.config.ts

import { defineConfig } from "@rsbuild/core";
import { pluginBabel } from "@rsbuild/plugin-babel";
import { pluginSolid } from "@rsbuild/plugin-solid";
import { pluginWebExtend } from "@web-extend/rsbuild-plugin";

export default defineConfig({
  plugins: [
    pluginBabel({
      include: /\.(?:jsx|tsx)$/,
    }),
    pluginSolid(),
    pluginWebExtend(),
  ],
});

CSS Libraries

CSS Modules

You can directly use CSS Modules in a WebExtend project. Files ending with .module.(css|less|sass|scss|styl|stylus) are considered CSS Modules.

For example.

button.module.css

.red {
  background: red;
}

src/popup/Button.tsx

import styles from "./button.module.css";

export default () => {
  return <button className={styles.red}>Button</button>;
};

CSS Preprocessors

You can use CSS preprocessors in a WebExtend project, including Sass, Less and Stylus. To use one of them, you need to register the corresponding Rsbuild plugin.

• Sass Plugin
• Less Plugin
• Stylus Plugin

Sass

// rsbuild.config.ts
import { pluginSass } from "@rsbuild/plugin-sass";

export default {
  plugins: [pluginSass()],
};

Less

// rsbuild.config.ts
import { pluginLess } from "@rsbuild/plugin-less";

export default {
  plugins: [pluginLess()],
};

Stylus

// rsbuild.config.ts
import { pluginStylus } from "@rsbuild/plugin-stylus";

export default {
  plugins: [pluginStylus()],
};

Tailwind CSS

To use Tailwind CSS in a WebExtend project, you can integrate it with PostCSS, which is built-in supported in Rsbuild.

Install the following dependencies.

npm

npm add tailwindcss @tailwindcss/postcss -D

pnpm

pnpm add tailwindcss @tailwindcss/postcss -D

yarn

yarn add tailwindcss @tailwindcss/postcss -D

Register the Tailwind CSS PostCSS plugin through postcss.config.js.

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Import Tailwind CSS to your CSS entry file.

src/popup/index.css

@import "tailwindcss";

Now you can use Tailwind CSS in your components or HTML.

<h1 class="text-3xl font-bold underline">Hello world!</h1>

UnoCSS

To use UnoCSS in a WebExtend project, you can integrate it with PostCSS, which is built-in supported in Rsbuild.

Install the following dependencies.

npm

npm add unocss @unocss/postcss -D

pnpm

pnpm add unocss @unocss/postcss -D

yarn

yarn add unocss @unocss/postcss -D

Register the UnoCSS PostCSS plugin through postcss.config.js.

postcss.config.mjs

import UnoCSS from "@unocss/postcss";

export default {
  plugins: [UnoCSS()],
};

Add UnoCSS configuration through uno.config.ts.

uno.config.ts

import { defineConfig, presetWind3 } from "unocss";

export default defineConfig({
  content: {
    filesystem: [
      "**/*.{html,js,ts,jsx,tsx,vue,svelte,astro}",
      "!src/**/*.d.ts",
    ],
  },
  presets: [presetWind3()],
});

Import UnoCSS to your CSS entry file.

src/popup/index.css

@unocss;

Now you can use UnoCSS in your components or HTML.

<div class="m-1">>Hello world!</div>

Auto Imports

unplugin-auto-import is a library for auto importing APIs on-demand. To use it in a WebExtend project, you need to register the corresponding plugin.

For example.

rsbuild.config.ts

import { defineConfig } from "@rsbuild/core";
import AutoImport from "unplugin-auto-import/rspack";

export default defineConfig({
  tools: {
    rspack: {
      plugins: [
        AutoImport({
          imports: [
            "vue",
            {
              "webextension-polyfill": [["=", "browser"]],
            },
          ],
          dts: "./src/auto-imports.d.ts",
        }),
      ],
    },
  },
});

Now you can directly use browser and Vue Composition API without importing, which will be automatically injected in the build time.

src/popup/Popup.vue

<script setup lang="ts">
// import { ref } from 'vue';
// import browser from "webextension-polyfill";

const count = ref(1);

function openOptionsPage() {
  browser.runtime.openOptionsPage();
}
</script>

<template>
  <main>
    <div>Popup</div>
    <button @click="count++">{{ count }}</button>
    <button @click="openOptionsPage">Open Options</button>
  </main>
</template>

Linting & Formatting

ESLint

ESLint is a lint tool that helps you find and fix problems in JavaScript code.

Use ESLint.

Prettier

Prettier is an opinionated code formatter that helps you style code.

Use Prettier.

Biome

Biome is one toolchain that helps you format and lint your code, which can be considered a combination of ESLint and Prettier.

Use Biome.