Developing browser extensions

Browser extensions are software applications that add functionality to a website or the browser itself. They are created using HTML, CSS and JavaScript code that is inserted into certain web pages used by the user.

In recent months, we have carried out two projects of this type for our clients: we are fascinated by the potential of browser extensions, and we are passionate about the possibility of building new applications from existing resources.

One of these projects is Selly, an application designed to support the sales force and customer service. We helped our client’s team to design a browser extension for Gmail that can analysing the text of an email to deduce the sender’s personality profile and provide useful suggestions to communicate with them effectively. The extension programming has been delegated, in this specific case, to an external developer.

Browser extensions offer many possibilities: from the simple aesthetic modification of a web page to the addition of complex functions that communicate with third-party services.

One of the most downloaded extensions on the Chrome Web Store are Honey, which helps the user automatically search and apply discount codes available on the net, and AdBlock, which allows you to hide annoying advertising banners and popups. There are also many extensions designed specifically for developers, such as React Developer Tools, which makes it easier to debug web applications.

Technically, a browser extension is made up of three building blocks: the user interface, the content scripts, and the background scripts. Everything is orchestrated by a JSON-formatted metadata file. This file, called manifest.json, includes the name and other information about the extension, including the scripts the browser must perform and any actions the user can take.

Background scripts contain the logic and long-term status, independent of what happens on a specific web page the user is visiting. They are useful, for example, for intercepting events related to user behaviour (such as closing a tab). Content scripts, on the other hand, allow you to access and modify the content of a web page visited by the user: they are code that is executed in the context of a specific page, usually to handle the elements of the DOM.

You can also define the appearance and behaviour of the extension settings pages, and custom buttons to be displayed at the browser level.

The reference API for developing browser extensions – the WebExtensions API – are the result of a joint collaboration between Mozilla, Microsoft and Opera to define common specifications (not yet recognised as web standards). Since these are only partially compatible with the APIs offered by Google Chrome, in Moze we have chosen to use a library called WebExtension Toolbox: a useful tool that allows you to write code with a syntax that is rendered compatible, in the compilation phase, also with other browsers. This does not include Safari (which requires the extension to be packaged in the XCode environment) – Apple’s Safari 14, however, has recently made it possible to automatically convert extensions made for other browsers.

Keep in mind that the use of extensions exposes the user to risks: by installing an extension, special privileges are granted that can pose a security flaw if the extension is compromised. In this sense, it is important for the user to download extensions only from official stores (e.g., Firefox Add-ons, Chrome Web Store). For their part, the developer would be advised to follow the best security practices to protect the application from any vulnerabilities.

We are passionate about the development of browser extensions because of the possibility that they offer to improve or integrate existing resources through the use of web technologies (HTML, CSS, and JavaScript).