Registry / devops / vite-plugin-web-extension

vite-plugin-web-extension

library4.5.1jsnpmunverified

Vite plugin (v4.5.1) for building web extensions with Vite, supporting all major browsers. It automatically builds inputs from manifest.json, enables HMR in dev mode, validates manifests, and integrates with frontend frameworks like React, Vue, or Svelte. Published weekly with active maintenance. Differentiators: zero-config manifest-based setup, built-in dev server launching and extension reloading, and comprehensive TypeScript types.

devops web-framework http-networking

npm install vite-plugin-web-extension

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-WEB-EX

vite-plugin-web-extension

devopsjavascriptv4.5.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

webExtension

✓ import webExtension from 'vite-plugin-web-extension'

✗ import { webExtension } from 'vite-plugin-web-extension'

Default export, not named.

WebExtConfig

✓ import type { WebExtConfig } from 'vite-plugin-web-extension'

✗ import { WebExtConfig } from 'vite-plugin-web-extension'

Type only import v4.1+.

webExtendConfig

✓ import { webExtendConfig } from 'vite-plugin-web-extension'

Named export for extending manifest config.

defineConfig

✓ import { defineConfig } from 'vite'

✗ import { defineConfig } from 'vite-plugin-web-extension'

defineConfig is from Vite, not this plugin.

Basic setup with TypeScript, specifying manifest path and browser target.

// vite.config.ts import { defineConfig } from 'vite'; import webExtension from 'vite-plugin-web-extension'; export default defineConfig({ plugins: [ webExtension({ // optional: specify manifest path, defaults to 'manifest.json' manifest: 'src/manifest.json', // optional: web-ext options, e.g., browser, firefox webExtConfig: { browser: 'chromium', }, }), ], });

Debug

Known issues

deprecated'firefox' option is deprecated. Use 'webExtConfig' instead.

fix

Replace 'firefox: { ... }' with 'webExtConfig: { firefox: ... }'.

affects: >=4.4.1

gotchamanifest must be valid JSON or the build will fail silently.

fix

Run a JSON linter on manifest.json before building.

affects: all

breakingVite 4 support removed; requires Vite 5+.

fix

Upgrade Vite to version 5 or later.

affects: >=4.4.2

gotchaContent scripts must be listed in manifest.json to be processed.

fix

Ensure content_scripts are defined in manifest.json, not just as separate entry points.

affects: all

Errors

Common errors & fixes

Error: The 'webExtendConfig' function is used as a plugin but is not a valid Vite plugin.

Incorrect usage of webExtendConfig as a plugin instead of importing webExtension.

fix

Use import webExtension from 'vite-plugin-web-extension' as the plugin.

TypeError: Cannot read properties of undefined (reading 'plugins')

Missing or misconfigured manifest.json in the project root.

fix

Ensure manifest.json exists at the project root or provide the 'manifest' option.

Module '"vite-plugin-web-extension"' does not export a named export 'plugin'.

Named import 'plugin' does not exist; the default export is used.

fix

Use 'import webExtension from 'vite-plugin-web-extension''.

Upgrade

Version history

4.5.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

19 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/aklinker1/vite-plugin-web-extension ↗

packagehttps://www.npmjs.com/package/vite-plugin-web-extension ↗

homepagehttps://vite-plugin-web-extension.aklinker1.io ↗