Browser extensions are always a hot topic in the web development community. And of course, just like React and Vue in the web development world, there are also two popular frameworks for browser extension development: WXT and Plasmo. In this post, I will compare these two frameworks and help you choose the best one for your next browser extension project.
Table of contents
Open Table of contents
What is WXT
WXT is a free and open source framework for building web extensions in an conventional, intuitive, and safe way for all browsers.
Features
- Generated manifest: Based on your project’s file structure
- Entrypoint configuration: Configure entrypoints from the same file they’re declare in
- Type-safety is a priority: Out-of-the-box TypeScript support with improved browser API typing
- Simple output file structure: Output file paths minimize the path at runtime
What is Plasmo
Plasmo is an all-in-one platform that makes it easy for browser extension developers to create, test, and publish amazing extensions.
Features
- First-class React + Typescript Support
- Declarative Development
- Content Scripts UI
- Tab Pages
- Live-reloading + React HMR
.env*files- Storage API
- Messaging API
- Remote code bundling (e.g., for Google Analytics)
- Targeting multiple browser and manifest pairs
- Automated deployment via BPP
- Optional support for Svelte and Vue
Comparison
Both of them are great frameworks for browser extension development, but they have their own pros and cons. Here are some key points to consider when choosing between WXT and Plasmo:
Frontend Framework Support
WXT supports all the frontend frameworks while Plasmo only supports React, Vue and Svelte. If you are using other frontend frameworks like Angular or Ember, WXT is the best choice for you.
But if you’re using React, Vue or Svelte, Plasmo is a great choice because it has first-class support for these frameworks. For example, WXT doesn’t support your file as a .vue or .svelte file, but Plasmo does.
Messaging API
WXT has no built-in support for the messaging API yet since it’s still in the early stage of development. But Plasmo has built-in support for the messaging API, which makes it easier to communicate between different parts of your extension.
Automatic Publishing
Plasmo has built-in support for automated deployment via BPP, which makes it easier to publish your extension to the Chrome Web Store, Firefox Add-ons, and other platforms. WXT doesn’t have built-in support for automated deployment yet, but it’s on the roadmap.
Another Option for Starting with a Boilerplate
Besides WXT and Plasmo, you can also start with a boilerplate. I’ve created one open-source boilerplate for browser extension development, which is based on Vite, React, TypeScript and Tailwind CSS. You can use it as a starting point for your next browser extension project. My AI Group Tab is built on top of this boilerplate.
Key Takeways
- WXT and Plasmo are great frameworks for browser extension development
- WXT supports all the frontend frameworks while Plasmo only supports React, Vue and Svelte
- Plasmo has built-in support for the messaging API and automated deployment
- You can also start with a boilerplate for browser extension development