My First Browser Extension: show-my-ip

Since Chrome and Firefox are mostly programmed in C++, most people would expect add-ons to also be in C++. At least, that’s what I thought before I actually created one myself.

Creating a plugin for browser nowadays is significantly easier than you’d think since it’s in JavaScript, HTML, and CSS.

I have a habit of finding a goal before wanting to dive into something new. For instance, to learn Spring Boot and React, I gave myself the goal of completely redoing my website. Likewise, to learn Angular, I gave myself the goal of making a website for my wife.

And so, back in mid-April 2018, I decided that I’d make a plugin because there was no simple, lightweight extension to display my IP. There were some, but they weren’t open source.

So I decided to make one. I was willing to learn whatever language was required for it, but to my surprise, it was in JavaScript, HTML, and CSS.

At first, I was a little surprised, because well, there aren’t that many extensions available in each browser stores (Chrome & Firefox) despite the hundreds of millions of daily users. Well, it turns out that people just have the misconception of how complicated it really is.

The most important part of the application is the manifest:

[FETCH]https://raw.githubusercontent.com/TwiN/show-my-ip/master/manifest.json[/FETCH]

The manifest file is the configuration of your extension, including the name, the current version, some information, the icons, the main html file, as well as the permissions.

Skipping over the self-explanatory parameters, the permissions parameter is probably the most important to note here, because not only does it unblock some features, it also tells your user that your extension will be using those features.

For instance

"permissions": [
    "https://twin.sh/api/v1/ip",
    "webRequest"
]

Will allow web requests to be made to https://twin.sh/api/v1/ip.

If you don’t include that in your permissions, you won’t be able to send web requests to the aforementioned link.

I personally think that this is amazing, because it allows users to have an idea of what an extension is doing. While it’s not as precise as being explained word for word what the application is doing in the background, it beats not knowing at all. Even if it was explained word by word, people would probably not read it, just like nobody reads the ToS of any websites they sign up on.

On each extensions on Mozilla Firefox’s add-ons store, you can see a list of all permissions required:

What saddens me is that not many people actually take the time to look at it, and just install add-ons without looking at it.

Access your data for all websites

Some extensions that do hardly anything have permissions completely outside of the scope of what the extension actually does. In fact, a lot of them require permissions for all websites:

Now, don’t misunderstand, some extensions might need access to all websites, e.g. a password manager needs access to the forms of each websites to automatically fill the inputs. Likewise, an ad blocker needs access to all websites too to do its job properly. That’s understandable, but looking at extensions like Amazon Quick Search by Quick-Buttons who has 69,247 users as of 2018-05-13, I really don’t understand why it needs:

  • Access your data for all websites
  • Exchange messages with programs other than Firefox
  • Access browser tabs
  • Access browser activity during navigation

Mind you, having access to all websites means that they could collect your login information, your chat logs, your browsing activity, etc.

Even though there are humans that approve/verify extensions before they are released for GA, you should still be careful about what extensions you install.

In my extension’s case, it needs both access to https://twin.sh/api/v1/ip, and http://ip-api.com/line?fields=query, though the second website is only used in case my website goes down/is being updated.

Back to the manifest, The default_popup parameter is essentially the popup you see when you click the extension.

It’s just like a normal HTML page. You can include scripts as well as stylesheets:

[FETCH]https://raw.githubusercontent.com/TwiN/show-my-ip/master/data/index.html[/FETCH]

And honestly, that’s all there is to it. If you can make a website, you can definitely make an extension. It’s cross-browser compatible too!

Once you’re done making your application, you can build it by using the handle web-ext build command that can be installed from https://github.com/mozilla/web-ext

If you want to see the full source code, you can see it on the show-my-ip GitHub repository.

You also install show-my-ip extension for Firefox and show-my-ip extension for Chrome