My journey to the best Chrome Extension boilerplate

Introduction

I wanted to make a new Chrome extension without knowing much about how to do it. Since I already knew how to use React, I was looking for something that could let me use React for my project. My project was to make a “Pomodoro Timer for Google Calendar” extension. This means I wanted to create a timer that helps people work in short, focused bursts while they are using Google Calendar. To start, I found 3 different starting points (boilerplates) that could help me build my extension.

Boilerplate 1: chrome-extension-boilerplate-react

I started my search with the chrome-extension-boilerplate-react, which I found right at the top when I looked up “Chrome extension boilerplate.” It seemed promising at first glance. Here’s the link to it: chrome-extension-boilerplate-react on GitHub.

However, I stumbled upon a comment on Reddit that led me to an issue posted on their GitHub. It highlighted a significant error that occurs when trying to add a content script to a third-party website using HTTPS. This kind of problem could really affect my project, especially since it relies on working smoothly with Google Calendar, a secure site.

Adding to my concerns was the fact that the last update to the boilerplate was over a year ago. The lack of recent updates made me worry about potential security risks and missing out on newer React features or improvements. So, despite its initial appeal, I decided it wasn’t the right fit for my Pomodoro Timer extension without even testing it myself. The search had to go on, as I needed something reliable and up-to-date for my project.

Boilerplate 2: Plasmo

My journey continued with Plasmo, which turned out to be much more than a simple boilerplate — it’s a comprehensive framework tailored for Chrome extension development. You can find more about it on their website: Plasmo. Unlike the traditional boilerplate, Plasmo provides a structured, convention-based approach with clear documentation, making the development process intuitively easy.

What sets Plasmo apart is its simplicity in adding new features. For instance, if you want to introduce a popup page, you simply create a `popup.tsx` file or a `popup/index.tsx`. Similarly, adding an options page is as straightforward as creating an `options.tsx` or `options/index.tsx`. This simplicity extends to many other aspects of extension development, streamlining the process significantly.

A remarkable feature of Plasmo is how it handles the `manifest.json` file. In a manner reminiscent of how Next.js simplifies page routing and static site generation, Plasmo abstracts away the manifest file. It automatically generates this crucial piece of the extension based on your source files and configurations. This abstraction is a double-edged sword, however.

While the abstraction makes initial development smoother, it introduces complexity when you need to implement more advanced features. For example, when I wanted to add permission to send notifications in the `manifest.json`, it took me considerable time to figure out how. Similarly, crafting a more sophisticated method to inject content into a Google Calendar event wasn’t straightforward. These challenges nudged me towards exploring another option, leading me to the third boilerplate in my search.

Boilerplate 3: chrome-extension-boilerplate-react-vite

The final contender in my search was the chrome-extension-boilerplate-react-vite, which stood out due to its well-maintained codebase and customization ease. It presents an efficient blend of React and Vite, optimizing both development speed and performance. You can check it out here: chrome-extension-boilerplate-react-vite on GitHub.

This boilerplate made it straightforward to implement advanced features, which was a significant advantage for my project. It seemed to have everything I was looking for — except for one critical aspect: documentation.

The main drawback of this boilerplate is its assumption that developers are already familiar with the nuances of Chrome extension development. It lacks comprehensive documentation, which means that at times, I found myself diving into the official Chrome extension documentation to fill in the gaps. While this wasn’t a deal-breaker for me, it’s something potential users should be aware of. If you’re new to Chrome extension development, be prepared to seek additional resources to fully leverage this boilerplate.

Despite this challenge, the chrome-extension-boilerplate-react-vite offered the right balance of maintainability, ease of use, and advanced feature support, making it my chosen starting point for developing the “Pomodoro Timer for Google Calendar” extension. Its ability to facilitate rapid development without sacrificing feature depth ultimately made the extra research worthwhile.

Conclusion

Choosing the right tool for your Chrome extension project comes down to the complexity of your extension and your familiarity with extension development. If you’re working on a simple project and value ease of development, Plasmo is an excellent choice. It simplifies many aspects of development, making it ideal for straightforward extensions.

For more complex projects requiring advanced features and customization, the chrome-extension-boilerplate-react-vite is the better option. Although it assumes you have some knowledge of Chrome extension development, it offers greater flexibility and power for those ready to tackle its learning curve.

Ultimately, whether you go for Plasmo or chrome-extension-boilerplate-react-vite depends on your project needs and development experience. Both provide strong foundations for creating effective Chrome extensions.