I use several browser extensions in my daily work. One of the most useful one is youtube-playback-speed-co it is so simple yet so powerful and saved me a lot of time on adjusting the playback speed of youtube videos. Then I wonder how it works and if I can make one myself. So I did some research and here is what I found.

The official document

As chrome together with chrominium is domainted the browser market like 80%, I will focus on chrome extension. The official documen has everything that you need to know to build an extension except that it is not easy to follow and it lacks examples on how to build with modern frameworks like react or vue.

you can build a hello word following the get started and get a extension which you can popup a window. It uses all the basic elements like html, css and javascript. It’s cool if you are used to it. But as I’m already spoiled by the modern frameworks like react and vue, I want to use them to build my extension. In theory it is possible, we only need to solve the issue of building a react or vue into the desired format with webpack or other bundlers. But should I start from scratch?

The boilerplate

The answer is not. As always, I turned to github repos and searched chrome extension with react. surely there are quite a few repos on this. e.g. this one uses webpack and this one uses vite. I tried both and I think vite is quicker on building and refreshing. However webpack is more mature and has more plugins.

But generally speaking, both are good to use. Compared to React, Vue has very few boilerplates and the repos are generally not active. So React is a safe choice if you expects more support from the community.

The framework

As I tried something with free boilerplates I’m wondering if there is a framework that supports all browsers and all mainstream UI framewords. Then I found plasmo It supports react vue and others and it has features like refreshing manifest.json and auto reload. I tried and found it’s very smooth to use. It has free version and enterprise version. But if you are building somehting majorly for yourself, the free version is enough.

I decided to use plasmo to build my extension and as they said it’s a bit like nextjs for extension development. I’m satisfied with it so far.

The book

With all the tools in hand I somehow still am confused on these concepts like background page, content script, popup page, manifest.json, etc. Then I found this book Building Browser Extension It explains all the concepts and best practices much better than the official document. e.g. I finally got that you shouldn’t put everything in popup page, the backgroud service and content.js are where magic happens. Also other useful instructions and tips make it a worth read.

The extension

Yes I didn’t stop at the hello world after all the research… I have been building an extension on assisting my blog writing with a bit help of OpenAI. I will share more about it in future posts.