Plugin Configuration Options

import { defineConfig } from "vite";
import webExtension from "vite-plugin-web-extension";

export default defineConfig({
  plugins: [
    webExtension({
      // place options here
    }),
  ],
});

import { defineConfig } from "vite";
import webExtension from "vite-plugin-web-extension";

export default defineConfig({
  plugins: [
    webExtension({
      // place options here
    }),
  ],
});

additionalInputs

additionalInputs?: string[]

additionalInputs?: string[]

An array of paths relative to Vite's root directory that should be built along with the inputs listed in your manifest.

This generally involves additional HTML files not listed in your manifest but which you still want to display, such as an onboarding page. It also accepts stylesheets (CSS, SCSS, Stylus, etc.) and scripts (JS or TS) - basically, anything that Vite can build.

Depending on the type of file provided, it will be built at different stages:

• HTML files are built in the same step alongside the other HTML files listed in the manifest.
• JS files are bundled individually in the order specified.
• CSS files are also bundled individually in the order given.

browser

browser?: string

browser?: string

When using {{browser}}. prefixes in your manifest template, defining this field ensures that only matching tags are included in the <outDir>/manifest.json.

Refer to Multibrowser Support for more details on how to use this option with manifest templates.

disableAutoLaunch

disableAutoLaunch?: boolean;

disableAutoLaunch?: boolean;

Setting this to true prevents the browser from launching when starting the development server or running the extension in watch mode.

This is useful in setups where opening the browser isn't possible, such as in WSL/WSL2. In these scenarios, the Linux shell can't communicate with the Windows browser, leading to crashes. Setting disableAutoLaunch: true will trigger rebuilds when you save a file, and you can manually open and install the extension.

htmlViteConfig

htmlViteConfig?: import('vite').InlineConfig

htmlViteConfig?: import('vite').InlineConfig

You can supply additional Vite configuration to the HTML multipage build step here.

WARNING

Exercise caution with this option. Not every one of Vite's build options have been tested for compatibility. If something doesn't work for you, please open an issue.

manifest

manifest?: string | (() => any) | (() => Promise<any>)

manifest?: string | (() => any) | (() => Promise<any>)

The manifest can be:

• A path relative to Vite's root directory pointing to a file containing a manifest template.
• An absolute path pointing to a file containing a manifest template.
• A function returning the manifest template as a JSON object.

When not provided, it defaults to "manifest.json", and the plugin searches for a template at <viteRoot>/manifest.json.

Refer to Multibrowser Support for more information on how to use manifest templates.

printSummary

printSummary?: boolean

printSummary?: boolean

Defaults to true. When set to true, the plugin will provide a summary of what files are being built and in what order.

scriptViteConfig

scriptViteConfig?: import('vite').InlineConfig

scriptViteConfig?: import('vite').InlineConfig

You can provide additional Vite config to individually bundled JS files here.

WARNING

Exercise caution with this option. Not every one of Vite's build options have been tested for compatibility. If something doesn't work for you, please open an issue.

skipManifestValidation

skipManifestValidation?: boolean

skipManifestValidation?: boolean

By default, the <outDir>/manifest.json undergoes validation against Google's JSON schema at https://json.schemastore.org/chrome-manifest.

Setting this to true skips the validation step.

The validation process downloads the schema from the given URL. If you are working offline, this step will automatically be skipped.

transformManifest

Since v3.1.0

transformManifest?: (manifest: WebExtensionManifest) => WebExtensionManifest | Promise<WebExtensionManifest>

transformManifest?: (manifest: WebExtensionManifest) => WebExtensionManifest | Promise<WebExtensionManifest>

A hook that lets you manipulate the manifest before it is written to the output directory by returning a new manifest.

Example

Here, transformManifest is used to remove all the CSS files from the content scripts.

webExtension({
  transformManifest(manifest) {
    manifest.content_scripts.forEach((script) => {
      delete script.css;
    });
    return manifest;
  },
});

webExtension({
  transformManifest(manifest) {
    manifest.content_scripts.forEach((script) => {
      delete script.css;
    });
    return manifest;
  },
});

watchFilePaths

watchFilePaths?: string[]

watchFilePaths?: string[]

An array of paths relative to Vite's root directory that triggers a complete rebuild of the extension during development. When one of these files is saved, the browser will be closed, the manifest regenerated, and the browser will relaunch.

If the manifest field was a string, it will be automatically added to this list. If the manifest field is a function, you should add any files used to generate the manifest (like package.json).

webExtConfig

webExtConfig?: any

webExtConfig?: any

This option allows you to pass configuration into web-ext when launching the browser. For more details, refer to Browser Startup Configuration.

bundleInfoJsonPath

bundleInfoJsonPath?: string

bundleInfoJsonPath?: string

If set, the plugin will write a JSON file containing information about the built bundles to the specified path in the output directory. This can for example be useful for dynamically injecting content scripts/styles from background scripts.

onBundleReady

onBundleReady?: () => void | Promise<void>

onBundleReady?: () => void | Promise<void>

This callback is invoked after the main (parent) build completes, but not for child builds triggered by different entry points. Use it to perform additional actions when the main extension bundle is ready in both development (serve) and production (build) modes.