When I first started building Chrome extensions, I was so annoyed with the boilerplate.
It was frustrating to configure the manifest.json
, pointing it to the correct files. You had to read at least 4 blog posts to figure out how to do it correctly. The annoyance compounded if you tried to use modern JavaScript frameworks like React. Now you needed to deal with Webpack, and figure out how that played into the manifest.json
story.
We decided to tackle this problem by building a framework for browser extension development called Plasmo. It's a different way of thinking about browser extensions, and if you're used to building extensions, some things might look a bit weird.
If you want to follow along, run:
pnpm dlx plasmo init
Looking at the directory plasmo init
generated, you might notice there is no manifest.json
.
This is one of the key features of the Plasmo Framework -- we auto-generate the manifest.json
so you can focus on building cool stuff rather than caring about where to point content_scripts
to, and what the schema format should look like.
The idea is simple: you add a file called popup.tsx
exporting a React component, and Plasmo will understand it's a popup page. It'll register it in the manifest and write the code to automatically mount the component into your popup view.
The same is true for content.ts
, background.ts
, and options.tsx
. The framework understands what these files are, and automatically builds the manifest with them in mind.
If you have multiple scripts, you can use contents/
, options/
, and popups/
directories to get the same effect.
Key Principles:
No manifest.json file
We strongly believe the manifest.json file is a leaky abstraction. That's why we built the framework to generate as much of the manifest as possible.
We've still got a bit of a way to go, but we've automated a large chunk of it out.
It's good to have opinions
This framework is not for everybody, and that's completely okay. Our goal is not to make a framework that caters to everyone's needs. Instead, we're focusing on people who want to build production-grade extenisons using React quickly.
If someone wanted to build a minimalist extension that used vanilla Javascript, this framework would not be for them.
MV3 Only
Manifest version 3 is the future. Let's embrace it and build good tooling around it to enable people to build amazing products.
Docs
Check out our docs to see other cool features we have. We're constantly iterating and improving, so if you have feedback, would love to hear it!
Top comments (3)
looks nice, i will test it in a side project :D
can we use Javascript instead of Typescript like you should provide an option for it
all hail plasmo