Creating a Browser Extension using React and Typescript - with the Plasmo Framework

I started another side project yet again! This time, I wanted to explore browser extensions - and how to create them using React. And after some research, I found Plasmo - a React framework for browser extensions.

With it, we get the power of developing, testing and publishing browser extensions. And we also get some nifty features like Hot-Reload while developing, which is pretty handy.

They have a pretty nice tagline - It's like Next.js for browser extensions. And I got to say, that expectation was fulfilled.

With no experience creating browser extensions, I was able to onboard pretty quickly, and have an extension working on my Chrome browser.

They also have a lot of nice pre-built examples showcasing how Plasmo can be used.

So, let's get started creating a browser extension with React and Typescript.

Getting Started

To get started, we'd want to create the project by running:

yarn create plasmo

# or

npm create plasmo

One thing to keep in mind, while creating the project is having 16.14.x > as the Node.JS version - I didn't realize that earlier - and that threw me off for a while.

And once we've have the project setup, we can get started running. To run the extension, we run the command:

yarn dev

# or
npm run dev

The above command will build a bundle of our extension into the directory: build/chrome-mv3-dev

And to get our extension running on Chrome, head over to chrome://extensions and turn on Developer mode.


And then, we want to load the extension into Chrome, by clicking on the Load unpacked button, and then navigating to our extension build/chrome-mv3-dev directory, and voila, we get our extension running on Chrome.


Next Steps

Plasmo has an extensive guide on the available features of the Browser extension SDK. For example, I used the Content Script guide for logging to the console.

The End

Using Plasmo as my framework of choice when creating a browser extension was a delight - with great developer experience packaged in every step of the way.

I haven't gotten to that step yet, but they also have a guide on publishing the browser extension - which is pretty nice.

If you want to checkout my side-project (which I hope to have completed one-day 😂), here's the Github repository:


Edwards Moses - Web & Mobile — React & React Native Consultant

Edwards Moses
Web & Mobile — React & React Native Consultant

I'm Edwards, based in Lagos, Nigeria.
Freelancer Software Developer — collaborating with teams to craft extraordinary products.

From conception through to completion, I find immense joy in witnessing the evolution of an idea into a fully realized product in the hands of users. Check out my projects and articles to see what I've been up to lately.

Ready to bring your ideas to life? Let's connect.