Craft your own browser experience with ease

Today, your browser is more than just a tool to know the latest news or get that new cake recipe. As work from home becomes more common, browsers are now used for all sorts of activities. Business meetings, games, banking, all the way up to running entire companies.

Chrome is so versatile that google created Chrome OS, a complete operating system based on chrome!

But if you are a power user like me, you would had tried to modify your browser's behavior to meet every small use case that you felt necessary. All the effort to give it that personal touch so that you can call your browser, yours . That's where browser extensions come in.

Today, there is a browser extension for almost anything. Need fewer ads on YouTube? There is an extension for that. Need someone to summarize that wiki page for you? There is an extension for that. Need to block distracting social media sites? There is an extension for that.

And as a newbie developer, it's even more fun to try to build an extension myself. Do you know how easy it is to get started? That's the reason why there were 100s of extensions on the chrome store to give Google a dark theme, way before Google announced that they were even "considering" to build the feature themselves (Still waiting for it Google). Just because it is so damn easy to make them.

But with the growing desire to craft the perfect browsing experience comes the headache of managing all these extension.

If you use anything more than 10 extensions, you probably would had experienced the issues that come along with being such a power user.

Albeit, it is sometimes worth it

Understanding an Extension's Anatomy

To understand the problem, one must first have a broad understanding of how an extension actually works. An extension mainly has three parts:

1. Popup page
2. Background Script
3. Content Script

Depending on the use cases, an extension might only have some of these (and sometimes even other parts like the options page) but for the sake of basic understanding, let's say it uses these three.

The popup page is the user interface that you interact with when you click on the extension's icon. This is almost similar to any other basic web page. In most cases, this is the least of our concern The background script, as the name suggests, runs in the background. More on this in a bit. The content script contains the code that runs on an individual web page. For most small extensions out there, the bulk of the logic is written inside content scripts.

To get a better understanding about the different parts of a browser extension read the official documentation provided by Mozilla and Chrome. Mine is in no way an exhaustive explanation! I found this article very useful when I first got started with building browser extensions.

Food for thought: If you use YouTube a lot, you might have some extensions that all try to modify the same site - www.youtube.com. Hence you have multiple content scripts being injected onto the same page. On top of that, some of these might also be talking to their respective background scripts. How much do you think this affects the overall response time of some action performed on YouTube?

So, what's the problem?

The problem is that each and every browser extension requires it's own share of compute time and memory, some more than others.

You might have experienced your browser getting slow after too many extensions. A quick Google search for the solution to this would almost always ask you to either clear the cache of your extensions, or stop the ones that you no longer use, or maybe even remove them entirely to free up memory.

If you want to see the exact numbers and stats from a case study about how much of an impact do popular extensions have on latency and response times, do read this article.

By why would you uninstall the extensions that you clearly need?

Why should one have to make the choice between a personalized browser and a fast browser?

Is there a solution?

After finding myself in this situation a number of times, I started learning more about extensions.

My first reaction was, as suggested, to delete the extensions that I don't use very often. I regretted this decision later because I would eventually find myself reinstalling them.

Once you get used to things being a certain way, there is no going back.

My next approach was to just find lighter extensions for my specific needs. But this backfired, because now I had 3 different extensions doing the job of one. Needless to say, I went back to my slow browser. Hate the compromise!

So after months of overthinking, I finally started building my own extensions. My quest - To make the one extension to rule them all.

Though this was fun in the beginning, it became tiresome to manage the different features I was trying to fit into that one extension.

Also, I later realised I was working way too hard on problems that were already solved.

There were extensions that did the job but the high that I got from building my own version of it was exhilarating. I sometimes even forgot that I was building them to solve my slow browser and not for the joy building stuff for myself.

The smart way around

As I gained a better understanding of how certain extensions work, I realised that around 75% of my use cases did not need a background script. Even amongst these, most were either manipulating browser request to emulate a different behavior or inserting a small script to change the contents of the web page

For example:

I spend a lot of time on YouTube.

Mostly for work, but we all know how smart the YouTube algorithm is. It would recommend me that new trick shot video just when I was about to search for a tutorial to understand a new JavaScript library. How can one possibly focus with such constant distractions?

So I used the extension called DF Tube. It works fine but it wasn't the best at being subtle of the changes it made about the web page. So it made it less distracting, but broke the user experience.

While this was bugging me, I was reminded of the study that I mentioned earlier. I was done settling for extensions that barely met my requirements and also clogged my browser!

After spending a couple minutes trying to understand the solution, it became clear that all that was required was to remove the distracting areas of the web page with a simple remove command. And these 6 lines were all that I needed:

So I had the main logic ready, but now I needed to build an extension to run this scripts after YouTube had loaded. But, I did not build an extension this time!

If you think about it, all I had to do was insert a script after page load. So I used an extension called Requestly. It helps me build Rules to do just about anything with a browser request and also insert scripts into a webpage.

So I made the following two rules and it worked like a charm:

On top of that, if I do want to switch off this focused YouTube appearance at some moment, I just have to turn off that rule, which is as simple as flicking a switch.

That is so cool!

And that is not all, you can do lot with this. Need a site blocker like Block Site? Just create a Block Request Rule targeting the site you want to block.

Do you use an extension like this to set a default account for meetings on google meet? Just change the query parameter authuser to the number corresponding to the account that you want to use. BOOM💥. You built your own mini extension.

And there is a bunch more that you can do. Your knowledge and intuition are your only barrier. Just look at this tweet

I have always wanted to build my own ad blocker. All they do is block the request to specified ad servers and accordingly alter the content of the website. I guess I can make that with Requestly, only need the server IPs (could someone help me with that🥺?)

---

Last food for thought (or should I say,dessert😋): Medium allows anyone to read their articles if the user reaches them from twitter.

I am aware of extensions that already exploit this feature, but would be fun doing it myself using Requestly.