Registry / devops / rollup-plugin-chrome-extension

rollup-plugin-chrome-extension

library3.6.15jsnpmunverified

rollup-plugin-chrome-extension (RPCE) is a Rollup plugin designed to simplify the development and bundling of Chrome Extensions. It functions by using the `manifest.json` file as its primary input, automatically processing and bundling all declared assets into the output directory. As of version 3.6.15, the plugin is actively maintained within the `crxjs` monorepo, which also includes a `vite-plugin-chrome-extension`. RPCE provides crucial features like Hot Module Replacement (HMR) for a rapid development cycle, seamless integration with Manifest V3, and automatic handling of web-accessible resources. Its key differentiators include the manifest-first configuration approach, which abstracts away complex build setups, and its ability to bring modern bundler features to the extension development environment. It receives regular updates, mostly patch releases, and provides boilerplates for popular frameworks like React and Svelte.

devops web-framework

npm install rollup-plugin-chrome-extension

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · ROLLUP-PLUGIN-CHRO

rollup-plugin-chrome-extension

devopsjavascriptv3.6.15

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–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

chromeExtension

✓ import chromeExtension from 'rollup-plugin-chrome-extension'

✗ const chromeExtension = require('rollup-plugin-chrome-extension')

The plugin is typically imported as a default export in Rollup configuration files, which are commonly written in ESM (`.mjs` or `type: 'module'` in `package.json`) since Rollup v3.

defineManifest

✓ import { defineManifest } from '@crxjs/vite-plugin'

✗ import { defineManifest } from 'rollup-plugin-chrome-extension'

While `defineManifest` is used to define extension manifests, it's provided by the related `@crxjs/vite-plugin` package, not `rollup-plugin-chrome-extension` itself. It's often used alongside to provide type safety for manifest definitions in the broader `crxjs` ecosystem.

* as ChromeExtensionTypes

✓ import type * as ChromeExtensionTypes from 'rollup-plugin-chrome-extension'

The package ships TypeScript types. Importing namespace as types allows access to internal types if needed for advanced configuration or extending functionality.

This quickstart demonstrates a basic `rollup.config.ts` setup for building a Chrome Extension using `rollup-plugin-chrome-extension`. It imports the plugin, uses a `manifest.json` as input, and includes common Rollup plugins for TypeScript, CommonJS, and Node module resolution. The `output.format` is set to ESM, which is recommended for Manifest V3 extensions.

import { defineConfig } from 'rollup'; import { resolve } from 'path'; import chromeExtension from 'rollup-plugin-chrome-extension'; import manifest from './manifest.json'; import commonjs from '@rollup/plugin-commonjs'; import { nodeResolve } from '@rollup/plugin-node-resolve'; import typescript from '@rollup/plugin-typescript'; export default defineConfig({ input: 'src/index.ts', // or your main entry point output: { dir: 'dist', format: 'esm', // Manifest V3 and Rollup multi-file inputs generally prefer ESM chunkFileNames: 'chunks/[name]-[hash].js', entryFileNames: '[name].js', assetFileNames: '[name].[ext]' }, plugins: [ chromeExtension({ manifest: { ...manifest, name: manifest.name + (process.env.NODE_ENV === 'development' ? ' Dev' : '') }, }), nodeResolve(), commonjs(), typescript(), ], // Ensure manifest.json is part of the bundle process watch: { include: ['manifest.json', 'src/**'] } });

Debug

Known issues

breakingMigration to Manifest V3 (MV3) requires significant changes, including the removal of remotely hosted code and the deprecation of the blocking `webRequest` API in favor of `declarativeNetRequest`. Users must adapt their extension logic to comply with MV3's stricter security and privacy policies.

fix

Review Chrome's Manifest V3 migration guide. Ensure all code is bundled within the extension, refactor `webRequest` API usage, and update content security policies (CSP) in `manifest.json`.

affects: >=3.0.0

breakingWhen upgrading Rollup itself to v3, some older Rollup plugins might become incompatible due to changes in Rollup's plugin interface or peer dependency requirements. This can lead to `ERESOLVE` or build errors.

fix

Ensure all Rollup plugins used in conjunction with `rollup-plugin-chrome-extension` are compatible with Rollup v3 or later. Update or replace outdated plugins as necessary. The `crxjs` monorepo generally keeps its plugins up-to-date with current Rollup versions.

affects: >=3.0.0

gotchaHot Module Replacement (HMR) for 'main world' content scripts declared directly from the manifest may not function as expected during development. These scripts might not receive HMR updates, requiring a manual refresh.

fix

For scripts requiring frequent HMR, consider alternative injection methods or accept that main world content scripts might need manual reloading. The plugin provides warnings during development for detected main world scripts.

affects: >=3.0.0

gotchaModern Chrome Extensions, especially those leveraging multiple files and modules with Rollup, are best built with an ESM output format. Using CommonJS (`cjs`) for extension scripts can lead to compatibility issues or prevent advanced features.

fix

Always set `output.format: 'esm'` in your `rollup.config.js`. Ensure all your source code and dependencies are compatible with ESM, and use `import` statements over `require()`.

affects: >=3.0.0

Errors

Common errors & fixes

Refused to execute inline script because it violates the following Content Security Policy directive...

Manifest V3 prohibits inline scripts for security reasons, and legacy CSPs may be too permissive or restrictive.

fix

Remove all inline scripts (e.g., `<script>alert('hi')</script>`). Move script logic to external `.js` files. Update `manifest.json` to define a strict `content_security_policy` without `'unsafe-inline'`.

Error: Cannot use import statement outside a module

Rollup's output format is CommonJS, but the browser or extension environment expects ESM, or Node is attempting to load an ESM file as CJS.

fix

In `rollup.config.js`, set `output.format: 'esm'`. Ensure your Rollup configuration file itself is treated as an ES Module (e.g., `.mjs` extension or `"type": "module"` in `package.json`).

Error: 'manifest.json' is not a valid entry point. Use an object for multi-entry builds.

The `manifest.json` is not correctly passed as the input to the `chromeExtension` plugin, or Rollup's `input` property is misconfigured.

fix

Ensure `input` in `rollup.config.js` is set to your primary application entry (e.g., `src/popup/index.ts`) or `src/index.ts`, and that the `chromeExtension` plugin is correctly configured with `manifest: require('./manifest.json')` or `manifest: manifest` if imported.

Upgrade

Version history

3.6.15latest on npm

Audit

Dependencies

rolluprequiredCore peer dependency as this is a Rollup plugin.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/crxjs/chrome-extension-tools ↗

packagehttps://www.npmjs.com/package/rollup-plugin-chrome-extension ↗

homepagehttps://www.extend-chrome.dev/rollup-plugin ↗