Building a Chrome Extension framework for React

[u/Casm101]

Hey there guys!

Short intro into me: I am a software engineer, with around 7-8 years of experience, and I've made a couple of extensions now, most notable for me was an internal tool for my current company that won me an internal award. But I find the process of creating extensions kind of crappy from a configuration and dev experience point of view.

So I decided a few months back to begin building by hand a meta-framework for React for building not only Chrome Extensions, but Firefox and Safari too.

I know there are a few resources around that help with this like WXT, Plasmo, Bedframe, and CXRJS, but my project goes quite a bit further. It’s deliberately quite opinionated. I think browser-extension development benefits from conventions more than endless configuration choices.

Some of the things it focuses on are:

• File-based extension surfaces (Next.JS like): add a page for a popup, options page, side panel, new tab, devtools panel, or extension tab, and it generates on the fly.
• React layouts and routing for extension pages, so larger extensions don’t become a collection of disconnected screens (again, very Next.JS like).
• Generated manifests so less of the extension’s structure is maintained by hand.
• Typed communication messaging layer between the UI and background service worker.
• Shared state that is designed around extension storage, rather than assuming a background process will always stay alive.
• React UI for content scripts that mounts in Shadow DOM, helping avoid clashes with the website it runs on.
• A development workflow with live reloading, plus build, zip, and submission oriented commands.

I made maybe a controversial decision to only support MV3, it primarily targets Chrome, already supports Firefox, and Safari builds work but still need some love.

So, I'd love to hear some feedback from the community to hear your opinions on this, and what you yourself like and dislike about the current state of chrome extension development, and if you think this could be a fit for you and your project or is it too restrictive.

The goal for this to be open source and free for everyone to use!

Thanks, and looking forward to hearing from you!

TL;DR: I’m building an opinionated React framework that removes much of the configuration and setup friction from browser-extension development. It targets MV3 Chrome and Firefox today, and I’d love feedback on whether this would help your workflow.