DEV Community

Jack Steam
Jack Steam

Posted on • Edited on

7 2

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

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
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.

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!

crxjs logo

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (5)

Collapse
 
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 :)

Collapse
 
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.

Collapse
 
dodobird profile image
Caven

Very nice

Collapse
 
moshontongit profile image
Muslimin Ontong

How to add a background script?

Collapse
 
playguitar_coder_q profile image
coder_Q

cool !!! 👍

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay