DEV Community

Jack Steam
Jack Steam

Posted on • Updated on

RPCE is moving Vite support to @crxjs/vite-plugin


Since RPCE is no longer a Rollup plugin, it's getting a new name: @crxjs/vite-plugin.

If you are using rollup-plugin-chrome-extension with Vite, you can migrate your existing project using this codemod:

npx @crxjs/migrate
Enter fullscreen mode Exit fullscreen mode

If you're already using @crxjs/vite-plugin, you don't need to read this article.

RPCE is growing up

There's still a lot to do in terms of features and robustness, but the initial feature set is complete:

  • HMR for React and Vue in extension pages and content scripts
  • No-config dynamic content scripts
  • Vite-style static asset imports in content scripts

Thank you to every developer who took the time to test Vite support in RPCE and create an issue. Building Chrome Extensions isn't easy! Your time and patience are vital in building a better DX for Chrome Extensions.

RPCE gets a new name

My original plan was to make an actual Rollup plugin that supported Vite and Rollup. Unfortunately, that turned out to be a monumental task. Every feature and use case increases the complexity of a project, and RPCE was no exception. I finally had to compromise and remove Rollup support to progress towards the Vite-style experience we wanted.

That leaves us with a small problem. rollup-plugin-chrome-extension isn't a Rollup plugin, so we're taking the opportunity to rebrand to @crxjs/vite-plugin.

Migration instructions

I've published a codemod to make it easy to migrate. Execute this package in your project root folder:

npx @crxjs/migrate
Enter fullscreen mode Exit fullscreen mode

The script will ask if you want to remove rollup-plugin-chrome-extension, then it will install @crxjs/vite-plugin and replace the import name in your Vite config.

codemod gif

OFC, you can do this yourself:

npm rm rollup-plugin-chrome-extension
npm i -D @crxjs/vite-plugin
Enter fullscreen mode Exit fullscreen mode
// vite.config.js

-- import { chromeExtension } from 'rollup-plugin-chrome-extension'
++ import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'

export default {
--  plugins: [chromeExtension({ manifest })]
++  plugins: [crx({ manifest })]
Enter fullscreen mode Exit fullscreen mode

The plugin API options will remain the same. The export crx is just an alias for chromeExtension. You can import either chromeExtension or crx, but I will use crx in future examples for brevity.


Thanks for giving RPCE a try while it was still in beta! In the coming months, you can look forward to better docs, better Vue support, and even Svelte support.

If this plugin is valuable to you or your business, please consider sponsoring me on GitHub. Chrome Extensions are an evolving and poorly understood space in the web development world, and I'd like to continue improving your developer experience. Your contributions and sponsorship will go a long way to making this happen.

Here's our new logo!

crxjs logo

Top comments (5)

thetarnav profile image
Damian Tarnawski • Edited

Would there be a problem with using this plugin to build a SolidJS extension? Probably won't be able to benefit from HMR, but are there any further incompatibilities?

Edit: It is actually working pretty well, HMR too :)

jacksteamdev profile image
Jack Steam

That's amazing! So happy that HMR works for SolidJS! AFAIK, this plugin should build anything that Vite supports. HMR for a new framework might require some work.

dodobird profile image

Very nice

moshontongit profile image
Muslimin Ontong

How to add a background script?

playguitar_coder_q profile image

cool !!! πŸ‘