How I Built My First Browser Extension

How I Built My First Browser Extension

Peter Thaleikis

Peter Thaleikis

Engineer. Maker. Open Source Fan. Backpacker

by Peter Thaleikis

It's been a regular day: Client work is keeping me busy as most days. I'm working on several things at once. I'm coming back to this site. I'm signed out again. Okay, no big trouble. Just click the login link and I'm back in the game. The little popup comes with three social media logins: Google, Facebook and Twitter. I remember vaguely that I used one of these — but I'm not sure which one. I click on Facebook and it takes only seconds to realize "Damn, I created another account". Annoyed at myself I browse around the setting to find the delete button. Back to square one.

Like this I've created a number of accounts. Whenever this happened I get it fixed (deleted the account) and get back to work. That worked and all that's left is probably some data in a database and my frustration. I usually put it off as "I'm the only one being to unable to remember."

(insert facepalm image)

A few weeks ago I stumbled across this tweet by @JamesIvings:

James Tweet

Now unbelievable, but back then I couldn't believe it: I had found a second person with this issue. I send out a tweet to see if there are more people getting frustrated by this:

My research tweet

Thanks to @IndieHackers retweeting my tweet I got a lot of responses 😍️ In the replies I researched my issue individually — I asked indirectly because I wanted an unbiased feeling for the size of the issue. The results were clear: A overwhelming number of people use social logins in a fixed or hard defined way. They aren't my target group as they wouldn't profit from it. But around 5% faced my issue and forget which login they used.

That was enough for me to give it a try. I've decided to build a solution for it and learn how to build a browser extension along the way. The same night I started by adopting examples Mozilla provided. JavaScript wasn't the issue, but getting the access to the browser right was an uphill battle first. The next day I showed it to Thomas Petracco, who is working from the same co-working space atm. We chatted about the idea and tried it on a few more sites. We noticed that some sites aren't working — we talked more and thought about a better algorithm.

After two more rewrites the extension was working well and stable. It's now checking the last pages accessed while you surf. If a sign-in is recognized it adds the name of the network (Twitter, Facebook, Google or GitHub) to the page. No data is sent to my server, ever. Everything stays in the local storage 🔐️

A few sites aren't working — and can't work because of the way they are built 😐️ This is solved by having the option to manually add a network to any site you are visiting. This ensures you can get still remember which login you used last time.

Keen to see more? Head over to and check it out! I'm keen to hear your feedback 🙏️

Did you like this article?

Besides tones of crap, the web also has lots interesting open-source libraries, actually innovative side-projects and awesome free knowledge. Once in a while, I share these awesome web-findings via email. If this sounds like something you are into, subscribe below:

Subscribe today and get insights soon:

Published under the following tags: