generator-browser-modern-extension

Scaffold out a boilerplate for creating a browser extension with up-to-date tools and autoreload of the extension

The boilerplate repo is here.

Features

This project is born because of the lack of browser extension starter kits which aren't from 2013 and don't use bower.

Gulp 4 is used to manage all the tasks and wire the tools together, it was chosen because it's easily hackable and configurable, you can make it fit and scale with your wildest browser extension!

It uses webpack to bundle javascript and SCSS as a preprocessor. Babel transpiles all the future js stuff that hasn't landed in chrome yet, and there are customizable eslint and stylelint config files.

The development mode has autoreload of the chrome extension, meaning that when you change a file, the extension is loaded again in chrome! 🔥

It comes with the webextension-polyfill, which basically lets you write async/await code instead of the callback hell of the chrome extension apis. 💣

It also bundles your extension when you're done, ready to be pusblished to the extension store!

Install

npm install -g yo
npm install -g generator-browser-modern-extension

Usage

First make sure you're in your project folder (mkdir my-awesome-project && cd my-awesome-project/), then run

yo browser-modern-extension

or just

yo

and select Browser Modern Extension.