The bundler configuration for a Chrome Extension can be pretty complex. This plugin makes it simple.

Use manifest.json as the input. Every file in the manifest will be bundled or copied to the output folder.

RPCE simplifies project config and supports many of Vite's features in the Chrome Extension environment, including HMR.

Vite support is in beta! Check out this 90 second getting started guide.

npm i rollup-plugin-chrome-extension@beta -D

// vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { chromeExtension } from 'rollup-plugin-chrome-extension'

export default defineConfig({
  plugins: [react(), chromeExtension()],
})

Just add new features to your manifest, and RPCE does the rest.

We have v3 boilerplates for React JavaScript, React TypeScript and Svelte, as well as instructions for setting up your project.

See the documentation for usage and how to get started.

Your help is super welcome!

🎯 Ongoing development is for v4+ only.

👀 Be sure to take a look at the issues before starting to work on a new feature.

🙏 Please update the tests to cover bug fixes or new features.

📕 Documentation for v4 has not yet begun, but you can open an issue for help.

✨ If you enjoy using RPCE, please help spread the word!

Our preferred package manager is pnpm, but npm or Yarn should work.

If you're using VSCode, you can run the default build task (Ctrl+Shift+B or ⇧⌘B for Mac) to start building and type checking.