A foundation for building cross browser extensions for Chrome, Firefox & Opera from a single code base.
Based on WebExtensions. It also includes a tiny polyfill to bring uniformity to the APIs exposed by different browsers.
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.
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.
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.
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
git clone https://github.com/EmailThis/extension-boilerplate.git cd extension-boilerplate npm install npm run build
"Developer Mode"and then click
"Load unpacked extension..."
"Load Temporary Add-on"and choose the location where you have downloaded this boilerplate.
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
The following comman creates a zipped, production-ready extension for each browser.
npm run dist
The accompanying Sketch file has templates for creating store icons & banner images based on the sizes recommended by each app store.