Chrome extensions scaffolding

Today I’m going to talk about a great Yeoman generator focused on Chrome extensions scaffolding. The idea behind Yeoman, for the people who don’t know what it is, is to deploy a project with its file/folder structure, technologies, and so on, ready to start developing. Yeoman has a large amount of tools of generators (or plugins) to create bootstrap projects, client-side webs,…, but in this post, I will focus on a Google Chrome Extensions ready-to-develop generator called generator-chrome-extension.

As I said before, Yeoman helps you to kickstart a new project, prescribing good practices and a ecosystem to define a faster developing. Usually developers spend a little time defining tools, technologies, and searching how to work among them. For example, to define a Google Chrome extension, we need to create a particular file/folder structure, such as, a manifest.json, background.js, popup.js, etc. It’s a waste of time to define on every project this structure or use a template and adapt it for each one.

Another issue is the non-standardization of projects structure and technologies used. This is a handicap if you need to understand third parties developments. If you have a similar manner to develop a chrome extension, it will be more understandable, and probably widely extensible or shareable.

The third advantage of using this tools is the tool ecosystem generated to develop. The generator-chrome-extension define some task to easy test, deploy, watch code changes, code reviewing, packaging, etc. In the current version 0.5.1, it defines some Gulp tasks to:

  • trans-compile ES2015 (the new ECMAScript standard) to javascript supported by Google Chrome. It uses Babel ES2015.
  • watch changes in your code and update automatically your extension in your browser. Using this idea, you don’t need to care about reloading your chrome extension during development.
  • build and package your extension ready-to-deploy in the Chrome Store.
  • code linting using ESLint to standardizase your javascript code.
  • css preprocessing using Sass syntax.
  • and much more.

In general those tools help a lot during our Chrome Extensions development, but also they help to improve our development skills, standardization, etc.

In conclusion, I talked about generator-chrome-extension, that is a powerful yeoman app scaffolding project, but there are a lot of great plugins that I recommend to give them a try.