Developing a Chrome extension with Yeoman
The official Yeoman Chrome extension generator does not support SASS and Coffeescript pre-compilation under its
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
- Install the latest versions of
npm, and then
- 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/styles/main.scsschanging the background color to
- Go to Chrome and click on the extension icon to test.
- Let's add a Coffeescript file
- 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://email@example.com:minimul/generator-chrome-extension.git
$ npm ls -g generator-chrome-extension /usr/local/lib └── firstname.lastname@example.org (git+ssh://email@example.com:minimul/generator-chrome-extension.git#20cc98c8618477c17598af52a1d1fc33af2c932d)
$ yo chrome-extension
grunt watchdoesn't kickoff when saving a newly created SASS or Coffeescript file, you must stop and start
Get even more content on the screencast.
I cover additional topics such as:
grunt watchworks with multiple SASS and Coffeescript files.
- "Release" version of the extension using
- More on