My Go-To Tools for Building Chrome Extensions
Building Chrome extensions can feel overwhelming at first, especially when you’re not sure what tools to use. After working on several freelance projects and building my own extensions, I’ve found a reliable set of tools that make development faster, easier, and way less frustrating. In this post, I’ll share the tools I personally use to build Chrome extensions for both clients and personal projects.
1. WXT – Next-gen Web Extension Framework
If you’re still using crxjs or manually setting up your manifest, it’s time to look at WXT. It’s a modern framework built specifically for Chrome extension development, and it comes with everything you need out of the box. Hot Module Reloading, manifest v3 support, Vite integration, and smart defaults.
WXT removes a lot of the boilerplate and lets me focus on actually building the extension. It works great with React and makes the dev experience smooth, especially when dealing with different extension contexts like background, content scripts, and popups.
2. React + Vite
I usually use the WXT template that comes with React + Vite. React helps me structure my UI better, especially for complex extensions with popup or options pages. And Vite makes everything load fast—it’s just a no-brainer combo.
For example, in one extension I built for a freelance client, I used React to manage a multi-step form inside the popup. Without it, managing state and UI updates would’ve been a mess.
3. Tailwind CSS
Tailwind is my go-to styling solution for almost everything I build—including Chrome extensions. It helps me move fast and keep the design consistent without writing custom CSS from scratch.
Even though it’s just an extension UI, I still want it to look clean and professional. Tailwind gives me that with utility-first classes and no need to open a separate CSS file. It also plays well with React and WXT, which is a big win.
Sending messages between background scripts, content scripts, and popups in Chrome extensions used to drive me nuts. I’d lose time debugging chrome.runtime.sendMessage and wondering why the listener didn’t fire.
Then I found @webext-core/messaging, and it changed everything.
This library makes messaging feel like calling functions—super clean and readable. It supports TypeScript out of the box, so you get autocomplete and type safety. Installing it is easy, and once you use it, you won’t go back to the native messaging API.
5. Supabase – For Auth and Database
A lot of my freelance projects need some kind of backend—usually for user authentication, saving settings, or storing user data. Supabase is my go-to for that.
It’s like Firebase, but with a SQL-based database (PostgreSQL) and a much better dev experience. I use Supabase for handling user auth (with magic links or OAuth) and for storing any extension-related data securely.
Because freelance work often comes with tight deadlines, I need tools that are fast to set up, reliable, and secure. Supabase checks all those boxes.
These are the core tools I rely on when building Chrome extensions, both for myself and freelance clients. They help me build faster, avoid common bugs, and create extensions that actually work well and look good.
If you’re diving into Chrome extension development, I highly recommend trying some (or all) of these tools. They’ve saved me time and frustration—and hopefully, they’ll do the same for you.
Got a Chrome extension idea and need a developer to bring it to life? I’m available for freelance work. Whether it’s building from scratch or improving an existing extension, I’d love to help reach out to my email: dwidarma101@gmail.com or connect with me on LinkedIn.
