Background

A bit of background at first. All the stuff I know about the Browser Extensions is because I have spent a good 4 months on developing a extension for a startup. And that was their primary product. So there is less margin for experimentations and everything we had to put in place, must be spot on. Still, we have taken some first-of-kind decisions that worked well. Here are the four major things I did there :

• Migrated the entire extension codebase to React using Plasmo (more on that in the later half)
• Implemented Auth and Payment using external web-app and Chrome runtime APIs
• Improved the performance of observers in all the scripts involved
• Added persistent global store that is shared across multiple script environments

Three worlds

To make a browser extension do some complex stuff, we need at least three scripts :

• Content Script
• Background Script
• Popup Script / Sidebar script

Content script is the one which runs on the websites to help user to do some task. Grammarly is perfect example for this. It runs its content script at every text area so that it could help you write more grammatically correct stuff. Every time you load/reload a website, this script gets re-executed.

Popup script is the one you see by clicking on the extension icon on the top bar in your browser. It can also do some cool stuff and it gets re-executed every time you open it.

Background script. I feel this is the most important one, as it never has to re-executed and has the ability to run always(almost). It can do some awesome things that even our usual web apps are not capable of.

So we need to write 3 Javascript files, which has different tasks to do. Cool. But when we give the extension to the browser, how does this understand which script is for which one. Here comes manifest.json file. This is the very first file to be written. Here we give identity and reference to each script (along with other important details about the extension). When we handle our extension package to a extension store like Chrome Store, this is the file the approvers read and analyse.

💡 Note : All the three scripts have their environment which are isolated. We can’t even share declared variables. Only way to update other scripts from one script is to pass a message using chrome.runtime APIs. And if your extension is even slightly complex, then you will end up using the message passing feature

May be a fourth one

There can be fourth script/world. And it can be our own web app, that can go hand in hand with the other three scripts of the extension. Why it is needed?

Well, extension scripts are really capable but still they can’t do stuff like Auth and Payment in a real good way. There can be security risks and the overall implementation can come with limitations.

So to do these basic yet necessary features, we need to put a web app in place which can do Auth and Payment like a breeze and when succeeded/errored, it can communicate that to other scripts using the Runtime API.

Then where is the catch

Yes, as of now everything is looking good. But here starts the later-horror-half. Both content script and popup script needs their respective HTML and CSS to be viable. And managing complex user flow with just HTML and JS can be a mini-hell. So we need a framework. But the extension parser need three scripts and frameworks like React spits only one. So we either write a custom bundler to spit these 3 scripts out of one. Or we can use a framework like Plasmo. I had used Plasmo (in the startup product) and it allowed me to write in React, also some other cool features using abstracts. On the other hand, the pro extension developers from Grammarly used Webpack to go with the bundler way (I have genuine-serious respect for them).

Does any of this is really cared for

Sounds sad? Yes, I know. I have some reasons to say something like this :

• Chrome doesn’t seem like caring for it : 99% of the extensions out there uses some kind of chrome APIs. But chrome doesn’t support or maintain them well. They do the bare minimum to keep the web surfing safe
• You sometime feel helpless : just because you don’t control a majority part of what you just created. Once you chunk out the scripts, you zip it all, send it to chrome store to get approved. Once done, chrome hosts them on their server. You only have the control of your backend. A quick rollback of the scripts? No! you can’t do that

Having said all of that, I still believe that the world of extensions got some real potential. There are still some really great products coming into this world. I would also love to be part of any of these products, if given the chance. But the community and browser developers, both needs to grow and be a bit more serious about this ecosystem.

Thanks for reading this through! ✨