Go back to the main page

Developing a Chrome extension with Yeoman

 

 

The official Yeoman Chrome extension generator does not support SASS and Coffeescript pre-compilation under its grunt watch task. Therefore, I forked it and came up with a solution. I did submit a pull request but closed it as the maintainer wanted a solution that didn't include the generated CSS and Javascript files in the app/styles and app/scripts directories.

Until the official generator comes up with a cleaner solution you can use my fork to develop your extensions leveraging the power of SASS and Coffeescript. To get around the generated files issue make sure to add app/styles/main.css and app/scripts/*.js to .gitignore.

Below is an abbreviated asciicast, please view the screencast above to receive additional content and explanations.
  1. Install the latest versions of Nodejs, npm, and then yo (Yeoman)
  2. Create a directory for testing and switch into it.
    3.   $ mkdir -p ~/chrome-extensions/dummy-ext && cd $_
  3. Install my fork of the Yeoman Chrome extension generator.
    4.   $ npm install -g git+ssh://git@github.com:minimul/generator-chrome-extension.git
  4. Double check that the npm package is correctly linked to my fork.
    5.   $ npm ls -g generator-chrome-extension
  /usr/local/lib
  └── generator-chrome-extension@0.2.6  (git+ssh://git@github.com:minimul/generator-chrome-extension.git#20cc98c8618477c17598af52a1d1fc33af2c932d)
  5. Install the Yeoman Chrome extension scaffolding.
    6.   $ yo chrome-extension
  6. Load unpacked extension pointing to the Yeoman generated /app directory.
    7. Follow the steps to load up the extension.
  7. Run grunt watch.
  8. Add Hello World! to app/popup.html.
    9. Or optionally, "Hallo, Hallo".
  9. Modify app/styles/main.scss changing the background color to lightgray.
    10. After saving main.scss we can see that grunt watch kicked off compiling into app/styles/main.css.
  10. Go to Chrome and click on the extension icon to test.
    11. Working and notice that background is lightgray.
  11. Let's add a Coffeescript file app/scripts/popup.coffee.
    12. After saving app/scripts/popup.coffee, grunt watch compiling to app/scripts/popup.js.
    If grunt watch doesn't kickoff when saving a newly created SASS or Coffeescript file, you must stop and start grunt watch.
  12. Lastly, test this change by going back to Chrome and clicking on the extension icon.
    13. The Coffeescript compilation worked as we see the Javascript alert.

Get even more content on the screencast.

I cover additional topics such as:

  • How grunt watch works with multiple SASS and Coffeescript files.
  • "Release" version of the extension using grunt build.
  • More on grunt watch troubleshooting.

  • Pushed on 01/18/2014 by Christian