Building a Modern React Chrome Extension with a New Framework

stefàn — Tue, 31 May 2022 13:59:14 +0000

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