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.
- Install the latest versions of
Nodejs
,npm
, and thenyo
(Yeoman) - Create a directory for testing and switch into it.
- Install my fork of the Yeoman Chrome extension generator.
- Double check that the npm package is correctly linked to my fork.
- Install the Yeoman Chrome extension scaffolding.
- Load unpacked extension pointing to the Yeoman generated
/app
directory. - Run
grunt watch
. - Add
Hello World!
toapp/popup.html
. - Modify
app/styles/main.scss
changing the background color tolightgray
. - Go to Chrome and click on the extension icon to test.
- Let's add a Coffeescript file
app/scripts/popup.coffee
. - Lastly, test this change by going back to Chrome and clicking on the extension icon.
$ mkdir -p ~/chrome-extensions/dummy-ext && cd $_
$ npm install -g git+ssh://git@github.com:minimul/generator-chrome-extension.git
$ 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)
$ yo chrome-extension



main.scss
we can see that grunt watch
kicked off compiling into app/styles/main.css
.
lightgray
.
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
.

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