boilerplate extension github personal project

This is the first part of the two-post series where I’ll show how to create a WebExtension for Chrome and Firefox which shows for how long a page has been opened:

Creating a new extension

Creating a new WebExtension is simple. The minimum for the browser to recognize a WebExtension is a file called manifest.json. That’s where the most important settings are stored (e.g., descriptions, paths, resources, permissions).

But an extension with just that file is not useful because you wouldn’t be able to do anything with it but install/uninstall. For the extension to have some actions, commands, buttons, etc, you will need a file/folder structure, some JavaScript/HTML/CSS code, images and other things.

As I’ve already created many extensions, I’ve noticed that the processes of analyzing, deciding and setting up their initial structures/files/settings before I could start coding always took some precious time and was painful in some degree. For that reason I created a minimalistic WebExtension boilerplate with only the basics of a WebExtension so I could quickly create and start coding a new extension in seconds and with the least effort possible.

A minimalistic WebExtension boilerplate

The minimalistic WebExtension boilerplate is an open source project available at GitHub. It has no dependencies nor pre-requisities and its basic structure is given in the following way:

└── boilerplate/
    ├── img/
    │   ├── icon-16.png
    │   ├── icon-24.png
    │   ├── icon-32.png
    │   ├── icon-48.png
    │   └── icon-128.png
    ├── pages/
    │   └── popup/
    │       ├── index.html
    │       └── style.css
    │       └── script.js
    └── manifest.json

This is where the boilerplate files are stored.

Contains the extension’s icons. You can put any other images here.

Contains all extension’s inner pages and their JS/CSS files: popup page, configuration page, or any other HTML page.

manifest.json is the main file for an extension and it is where you set all configurations read by the browser (e.g., name, permissions, resources, etc).

Without any further, to start our extension which shows for how long a page has been opened, we will use that boilerplate instead of creating everything from scratch.

Usage / Download

You have 2 options to get the boilerplate:

1) Manually download and extract the zip file containing the boilerplate;

2) Use git to clone the repository:

git clone

After you clone/download the boilerplate you already have a working extension. The WebExtension and its files are inside the boilerplate folder.

Being a minimalistic boilerplate, it has nothing more than the necessary configuration, folders and files. Installing an extension on Chrome or Firefox is simple:

After installation you’ll see a blue square near the address bar - that’s the boilerplate extension: A minimalistic WebExtension boilerplate

Coding a WebExtension

All you need to create a WebExtension is this boilerplate and you’re ready to start.

PS: give the boilerplate folder a semantic name (e.g. the name of your project) and don’t forget to reinstall the extension.

We’ll use that minimalistic boilerplate to code an extension in the second post of this series (available in the next days):
Creating an extension - Part 2: Coding an extension for Chrome and Firefox