tldr;
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
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
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.
OFC, you can do this yourself:
npm rm rollup-plugin-chrome-extension
npm i -D @crxjs/vite-plugin
// 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 })]
}
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.
Contributing
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!
Top comments (5)
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 :)
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.
Very nice
How to add a background script?
cool !!! 👍