Building a cross-browser extension framework: the silent progress of Extension.js
How I built Extension.js, a cross-browser browser extension framework used to ship extensions across Chrome, Firefox, and Edge. Part 1.
Over the past six years I’ve been involved in the development of Extension.js. Extension.js (also known as just “extension”) is an open-source project that developers use to create browser extensions.
The context where browser extensions can run is very broad. You can change the UI, inject scripts, and block calls from any website in the world. You can also access user history and run periodic background checks against any website without alarming the user.
Maybe all that power is the reason why browser vendors don’t seem to care much about extensions: to discourage developers from creating extensions that would increase the chances of a privileged API messing with the brand’s reputation. To this day, there isn’t a tool created or backed by a browser vendor that lets developers produce a package that works everywhere. On the contrary, each major vendor has its own separate platform with different submission guidelines, and you still need a different build and polyfill to generate cross-browser artifacts.
But for developers? A tool that can generate cross-browser artifacts and ease the submission process across multiple vendors sounds like a dream. Browsers have their reasons for not wanting your extension across multiple platforms, but your users definitely want the freedom to enhance their browsing experience using the browser they want and the extension the developer created. These thoughts have been in my head for a while.
Extension.js is my main project outside of work since its first commit back in 2019, and my biggest contribution to open source so far. This post series is a personal reflection on its beginnings, where the project currently is, and my plans for the future.
Cezar meets browser extensions
It was around 2017–2018 when I was first introduced to browser extensions. I was working at Brave Software at the time, and the project was migrating from Electron.js (which Brave had its own fork of) to Chromium. Back then the team was heavily involved in developing the browser internals, and my task was to migrate the built-in ad blocker extension to a fully compatible Chrome extension. Before this task, extensions were one of those things I thought were “just there,” and I never truly realized how they worked until that moment.
If you’re interested, I wrote more about my experience with open source and how I started developing Extension.js in the Maintainers Book (https://maintaine.rs), page 43.
The early years
Since its conception, my goal with Extension.js has been to make the development of cross-browser extensions as easy as possible. Browser extensions are an old technology, but somehow making cross-browser distributions still requires knowledge beyond what building an extension should demand. So far it supports Chrome, Firefox, and Edge, along with “chromium-like” and “firefox-like” browsers, in case you use a custom distribution.
The great debut
The first public commit dates back to October 22, 2020. I initially wanted it to be a “create-react-app for browser extensions,” so the initial support focused on React and Chrome.
The project grew very slowly and, while I wasn’t confident about its quality, I just kept building without sharing much of it. As I figured things out, I did a timid Product Hunt launch, and it wasn’t until April 30, 2023, when I felt confident enough to share it on Hacker News. To my surprise, the project was a hit and stayed on the front page for a day. I was stunned.
A lot of things happened after that exposure, but you’ll have to wait until next week so I can put it all down.