It is Monday morning and we are already up with the good news. If you are a Chrome Extension/App developer you will love this one. Please allow me to introduce the new and awesome Bootstrap Your Chrome Extension project on GitHub.
We are really good at developing Chrome and Firefox extensions given that our web security testing suite is all client-side and makes use of both platforms. Over time we've learned simple tricks that boost development productivity without adding more layers of indirection.
For example, a common problem that you will encounter all the time is how to automatically reload your extension as you make changes. There isn't a built-in method for this so you have to do it yourself. Well, this is covered in the bootstrap extension. You may wonder how to use technologies such as Jade and CoffeeScript. Well, this is also covered by the bootstrap extension project. It is really simple but it gives you a lot of leverage.
How To Use
Starting is relatively easy. You don't have to install anything. Simply fork/copy the project and add your files into the src folder. This is it. You can use Jade, CoffeeScript, CSS, HTML, JavaScript and it even automatically re-sizes your icons to the predefined icon sizes used by Google Chrome.
Additionally you can put files inside the dev folder if you want to add more development tools or you can edit the Gruntfile to provide additional tasks to manage your extension. As we add updates to the project you can always pull and diff with your extension to get the latest and greatest features. This is it.
Small Example
This is what you need to do get started right away:
git clone https://github.com/websecurify/bootstrap-chrome-extension my-extension # clone the project cd my-extension # cd into your extension folder npm install # install all dependencies such as grunt, make sure that you have grunt installed globally via `npm install grunt -g` grunt run # start the extension
Voila! Now you need to load the extension build folder (ext) and start pouring your code in the src folder. The extension will reload as you make changes so you will be able to see the fruit of your work instantaneously.
Final Words
We recommend to change only the files inside the src folder and leave everything else to future versions of this project. I think that this is the better approach. Additionally you will have version reference if the package.json file is the same for versioning, etc. If you have any suggestions, recommendations or even bug fixes, do not hesitate to <a href="#contact">contact us</a> or just use GitHub.