Extension Boilerplate

A foundation for building cross browser extensions for Chrome, Firefox & Opera from a single code base.

View on Github →

Features

Write once and deploy to Chrome, Opera & Firefox

Based on WebExtensions. It also includes a tiny polyfill to bring uniformity to the APIs exposed by different browsers.

Preview your changes instantly (live-reload)

Your changes to CSS, HTML & JS files will be relayed instantly without having to manually reload the extension. This ends up saving a lot of time and improving the developer experience.

Sensible starting point

Extension Boilerplate converts modern ES6 JavaScript and SCSS to JS/CSS. Scripts are transpiled using Babel and bundled using Browserify. Sourcemaps are available for both JS and SCSS.

Sketch (.sketch) assets for icons and promo images

A .sketch file is included in the resources directory. This has all the icons and promo images that will be needed while uploading the extensions to the app stores.

Easily configurable and extendable

This comes with a Gulp-based workflow for building and managing your code. The Gulpfile is easily understandable and configurable. If you want to add additional tasks or remove un-used ones, you can easily tweak that file to suit your needs.

Platform specific & Environment specific variables.

You might need to specify different data variables (e.g: API endpoints) based on your environment (development, staging or production) or based on the browser. You can specify such data in the json files inside config directory

I have extracted this boilerplate from the browser extensions that I built for my side project, Email This. If you are looking for a simpler alternative to bookmarking tools like Pocket & Instapaper, I would encourage you to give it a try →

Getting Started

Installation

git clone https://github.com/EmailThis/extension-boilerplate.git
cd extension-boilerplate
npm install
npm run build

Load the extension in Chrome & Opera

Open Chrome/Opera browser and navigate to chrome://extensions
Select "Developer Mode" and then click "Load unpacked extension..."
From the file browser, choose the location where you have downloaded this boilerplate.

Load the add-on in Firefox

Open Firefox browser and navigate to about://debugging
Click "Load Temporary Add-on" and choose the location where you have downloaded this boilerplate.

Developing

The following tasks can be used when you want to start developing the extension and want to enable live reload

npm run chrome-watch
npm run opera-watch
npm run firefox-watch

Production

The following comman creates a zipped, production-ready extension for each browser.

npm run dist

Icons & Promos

The accompanying Sketch file has templates for creating store icons & banner images based on the sizes recommended by each app store.

Create cross browser extensions and add-ons with ease

View on Github

If you have any questions, comments or suggestions, feel free to ping me on twitter @bharani91 or open an issue on github.