vite-plugin-webext

A Vite plugin to generate cross-browser web extensions, available for Chrome, Edge, Firefox, Opera etc...

With this plugin, you can build a browser extension compatible with all browsers with modern technologies like typescript, tailwind and react.

Features

• Supports manifest v3 & v2
• ES-module-based extension
• HTML and static assets handling
• HMR support in shadow-dom
• CSS compiling
• Support for sass, tailwind and more

Getting started

Create a Vite project and install the package

npm install vite-plugin-webext

update the vite.config.ts like this

1// vite.config.ts
2
3import { defineConfig } from 'vite'
4import webExtension from 'vite-plugin-webext'
5import manifest from './manifest'
6
7export default return defineConfig({
8  ...
9  plugins: [
10    webExtension({ manifest: manifest }),
11  ],
12})

Typescript Support

Create an env.d.ts file, and add the following type reference to define the plugin-specific import.meta variables

// env.d.ts
/// <reference types="vite-plugin-webext/client" />

Browser Support

The following requirements must be met by the browser:

• Must support dynamic module imports made by web extension content scripts.
• Must support import.meta.url

The plugin will automatically default to Vite's build.target config option to these minimum browser versions if not already defined by the user.

For dev mode support in Manifest V3, the Chromium version must be at least 110.

How it works

The plugin will take the provided manifest, generate rollup input scripts for supported manifest properties, and then output an ES module-based web extension.

This includes:

• Generating and using a dynamic import wrapper script in place of original content scripts. Also adds the scripts to web_accessible_resources so they are accessible from content-scripts. This is because content scripts are not able to be loaded directly as ES modules.
• This may expose your extension to fingerprinting by other extensions or websites. Manifest V3 supports a use_dynamic_url property that will mitigate this. This option is set for manifest V3 web-accessible resources generated by this plugin.
• Modifying Vite's static asset handling to maintain import.meta.url usages instead of rewriting to self.location for wider browser support.
• Modifying Vite's HMR client to add support for targeting specific elements as style injection locations. Needed to support HMR styles in shadow DOM rendered content.