Using Chrome Extension Generator for the first time

May 7, 2016 0 By addshore

Chrome Extension Generator by yeoman is an npm package that can be used to very easily scaffold out a Chrome extension. Over the past year I have poked and prodded at a few chrome extensions, and ended up publishing one to display download counts on GitHub. I highly recommend this generator, it creates everything you need out of the box and also enables easy set-up of permissions, actions as well as auto rebuild and reload into Chrome for testing.

Once you have npm installed simply install the extension generator and dependencies by doing:

npm install --global yo gulp bower
npm install -g generator-chrome-extension

Then head into an empty directory that you will use for your extension and simply type:

yo chrome-extension

After you answer a few questions this will create a scaffold including babel / i18n support, other npm package dependencies, test structure and extension manifest.

You can go ahead and develop your extension in the app folder, and load this directory as an unpacked chrome extension. Running ‘gulp watch‘ will watch your changes, rebuild your files and also reload the extension in Chrome itself! (A super useful feature that saves lots of tab switching and button clicking).

When you want to make a build of your extension simply run ‘gulp build‘ which will create a dist directory with a final build of your extension.

Conveniently a .gitignore file is also generated so adding your code to a git repo is super easy, an example of which can be seen here for my GitHub download count extension.

For more details take a look at the README:

https://github.com/yeoman/generator-chrome-extension/blob/master/readme.md