Browser Extensions

Introduction

Now a days people use browsers for a lot of different tasks like reading emails, browsing reddit, online shopping, online cloud storage, etc. Websites are presented to the user as-is, offering precisely what they have been programmed to offer. A great way to deal with this limited functionality are browser extensions.

Browser extensions aresmall software modules that allow users to customize their browsers. They modify/manage the user interface, ads and cookie management, among other things. Usually, browser extensionsadd features, butsome of them focus on removing items from a website, such as ads.According to Google, an extension must fulfill a single purpose that is easily definable and interpretable.Even if the extension has multiple features, they should all point to fulfill the specific purpose

Extensions are usually a single downloadable package that is easily accessible through the current browsers’ extension marketplace (at least in Chrome, Mozilla Firefox and Microsoft Edge, the browsers that will we covered in this document). It’s downloaded and installed, meaning that the extension does not depend on the content from the web.

Google Chrome extensions

While in development, a browser extension is a directory of different files that will later be packaged and added to the corresponding extension store. The most important file in the extension directory will always be the manifest.json file. This file describes the extension, specifies basic information about it and defines its’ basic behavior/commands. Following is an example of the manifest file for google chrome’s sample extension tutorial (all examples in this section will be following this same tutorial):

{
"name":"Hello Extensions",
"description":"Base Level Extension",
"version":"1.0",
"manifest_version":2
}

Most extensions also have an icon displayed in the top bar of the browser that when clicked, will display a drop down menu displaying some information and/or settings. Lots of times there will also be a link directing the user to extension website, which the creator of the extension would’ve had to create previously (meaning it’s not part of the extension).The icon and dropdown menu are defined in the following way:

"browser_action": {"default_popup":"hello.html","default_icon":"hello_extensions.png"}

As is clear here, the files hello.html and hello_extensions.png would have to be included in our extension’s file directory.

It’s worthy to mention that an icon section can also be added to the manifest file. It will let the browser know which icons to use depending on the necessary size. These icons may be displayed in the extension store, in the toolbar, etc.

"icons":{
 "16":"images/get_started16.png",
 "32":"images/get_started32.png",
 "48":"images/get_started48.png",
 "128":"images/get_started128.png"
},

Since a browser extension is meant to addfunctionalityto the browser, it often needs to know what changes are happening in the browser. This can be accomplished by adding a background script that monitors browser activity.The script allows the programmer to add listeners to different types of events which executethe specified function when the specified event occurs. Following is an example of defining a background script in the manifest file and the content of the specified background script:

In manifest.json:

"background":{"scripts":["background.js"],"persistent":false},

In background.js:

  chrome.runtime.onInstalled.addListener(function() {
    chrome.storage.sync.set({color: '#3aa757'}, function() {
      console.log("The color is green.");
    });
  });

Fig 1

Chrome has various APIs available that can be called from the extensions (like storage in this previous example, which allows different extensions to access the same information). These APIs are incredibly useful because they allow the extension to manage many different aspects of the browser. It’s important to note that each API used in the background script have to be given permission to funcion in the manifest file. For example, if the extension needs access to the declarativeContent and storage APIs, the following line will have to be place somewhere in the manifest fle..

"permissions":["declarativeContent","storage"],

Some of the most common and necessary APIs include storage, declarativeContent, activeTab, history, notifications.

Another important piece of an extension are it’s options. Sometimes a user may want to curtomixe the extension a bit, which is why extension options exist. Like with most these extension modules, the options files need to be defined in the manifest file and they need to include an .html file for the formatting and a .js file for the behavior.

In manifest.json:

"options_page":"options.html",

In options.html:

<!DOCTYPE html>
<html>
 <head>
  <style>button{height:30px;width:30px;outline:none;margin:10px;}</style>
 </head>
 <body>
  <div id="buttonDiv"></div>
  <div><p>Choose a different background color!</p></div>
 </body>
 <script src="options.js"></script>
</html>

In options.js:

  let page = document.getElementById('buttonDiv');
  const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];
  function constructOptions(kButtonColors) {
    for (let item of kButtonColors) {
      let button = document.createElement('button');
      button.style.backgroundColor = item;
      button.addEventListener('click', function() {
        chrome.storage.sync.set({color: item}, function() {
          console.log('color is ' + item);
        })
      });
      page.appendChild(button);
    }
  }
  constructOptions(kButtonColors);

These are just the bare basics as to how to create an extension for Google Chrome. The possible extensions that can be created from here are endless.

Other browser extensions

Mozilla Firefox andMicrosoft Edge also use the same system thatGoogle Chromeuses for it’s extensions.They’re all based on the manifest.json format.

Fig 2

The fact that a developer can program an extension for one browser and easily install it on other browsers makes extensions incredibly portable and reusable.

Extension Store

The first place where a user will search for an extension is the extension store. All of the main browsers have their own extension stores that can be accessed through the browser options or settings or by using a search engine to find the extension store. In order to install an extension, it’s enough to click on the “Add to x” (x being the browser name) and the extension will automatically install itself and start working automatically.

Extension approval for the extension store

Once a developer has created an extension, he would logically like to have it published on the extension store so that users can install it onto their browser and start using it. In order for an extension to get accepted into the extension store it has to pass a couple of steps. Following are Chrome’s steps to submit an extension to the extension web store:

Create your app’s zip file
Create a developer account
Upload your app
Pick a payments system
Get app constraints and finish your app’s code
Get the app ID
Get the OAuth token
Finish the app
Provide store content
Pay the developer signup fee
Publish your app

Other browsers have similar procedures. One the extension is approved by the extension store moderators it will become available to the general public.

Malware in Extensions

The amount of permissions and abilities that are granted to extensions is a huge opportunity for hackers to exploit extensions. Extensions have access to browser history, current page information, usernames and passwords, etc. all of these very valuable to hackers. It would be relatively easy tomodify a harmless extension that has been accepted into the extension store and program it so that it saves credit card numbers or informs the hacker of the pages visited by the user, etc.

There are also some reports of companies buying existing extensions and turning them into adware or malware.This was first reported with the extension “Add to Feedly”, where the developer sold his extension for 4 figures and then the buyers turned it into an adware extension. This also happened with the extension “Tweet this page”.

Because of this, browser and extension users have to remember to stay on the lookout and read up on any extensions before they install them.