What are browser extensions?

Every mainstream browser has provided add-ons to extend the functionality provided by the core software in the past. These add-ons can perform a multitude of tasks such as change the web page content, analyze and filter network traffic, or add/remove UI elements from the browser window. Add-ons are mini-packages of 3rd party code which are loaded into the browser and executed by the browser on a specific user action or condition.

The WebExtensions API

WebExtensions API is Firefox's implementation of Chrome's way of building add-ons.

.... wait, what?

Around the year 2015 Firefox started migrating from their own way of building extensions to a new API that was close to Chrome's Extension API; They documented it (properly); Provided tooling for easier development; And thought about cross-browser compatibility while doing so. This meant that an extension (or add-on) written for Firefox could be ported to and from Chrome and other Chromium-based browsers like Microsoft Edge and Opera with little to no change in the code. They named this wonderful API the WebExtensions API. WebExtensions is not an official standard (it maybe in the future), but most browsers implement this spec at least partially. There are several inconsistencies; not every feature works in every browser, but now that the basic building blocks for all extensions are the same, we can navigate through them with relative ease. Firefox uses the term "WebExtensions" for browser extensions built on top of the WebExtensions API.

Why browser extensions matter?

Ad-blockers, bookmark and tab managers are perfect examples of add-ons that can augment a user's web browsing experience by adding additional functionality to the browser. A lot of SaaS and online business are based around services not directly related to web browsing but can add value to a user's browsing experience. Such businesses can leverage browser extensions.

Password managers like Bitwarden and LastPass that autofill forms on websites and Grammarly that checks your writing as you type an email are perfect examples. Saving user credentials has nothing to do with web browsing on its own, but most users need passwords when they are visiting websites and need to login. This makes the existence of a browser add-on for saving passwords a very desirable feature for password managers. And that's exactly what most people use them for. On the same lines, Grammarly can check word documents for errors, but more people write professional emails than word documents. If Grammarly can integrate into the browser itself (which they do) and check the text as the user is typing an email, they can target their product at a larger audience.

What functionality does the WebExtensions API provide?

The browser exposes several APIs for the extensions to use. Different browsers have varying levels of support for the WebExtensions API.

WebExtensions can be invoked from:

• a button on a toolbar
• a popup
• a menu
• the browser sidebar
• or run in the background as long the browser is running.

WebExtensions can be used to:

• modify bookmarks, tabs, open browser windows
• monitor, cancel and alter network traffic, cookies and web requests
• change the UI of the browser window
• change the content of a web page
• manage downloads and browsing history... and much much more.

How can I build one?

WebExtensions are built using HTML, CSS and JS. Developing WebExtensions is very similar to front-end web development. This post is the first in a series of posts that cover WebExtension development. We will learn about prototyping, developing, testing and publishing WebExtensions. We will target multiple browsers and localize our WebExtensions for multiple regions. If you're excited about building WebExtensions, follow along.