Chrome-extensionify is a pre-configured project scaffold for developing Chrome extensions using browserify and commonJS/npm. This allows you to write modular, node-style code using commonJS 'require' statements for dependency management and package it for the front-end. No more ordering of <script src> tags, no more vendor or lib folder, and no more global namespacing! Simply require your favorite libraries and frameworks.
Chrome-extensionify produces a valid Chrome extension out of the box, try it!
- Grunt for task running and building.
- nodejs/npm for module dependency resolution.
- Browserify for module and dependency bundling.
- Handlebars for HTML templating and precompilation.
- Less for CSS preprocessing and generally making CSS suck less.
- JSHint for code quality and static analysis.
- Jasmine for writing tests.
- Karma and PhantomJS for running tests.
This project assumes that you have node.js with npm installed. If you don't, install them from nodejs.org.
-
Clone this repository to your project directory.
-
If you do not already have Grunt globally installed via npm, install it with
npm install -g grunt. -
While in the project directory root, run
npm installto install project dependencies.
Two Grunt build tasks have been provided by default, build:bundle and build:debug. The primary difference between the two is that build:bundle will exit after it has built, bundled, and tested the app, while build:debug goes into watch mode and will rebuild and retest when files it is watching are changed.
You can load your extension project in Chrome by typing chrome://extensions in the URL bar. Check the box for "developer mode", then choose to "Load unpacked extension...". Choose the dist folder, which is the generated output of a build.
Read the Getting Started documentation provided by Google, it is quite good.
chrome-extensionify is distributed under the MIT license so feel free to use or modify without limitation.