I’m happy to share with you my latest weekend project. Extensionizr.com

Extensionizr allows you to download a chrome extension boilerplate, with simple configuration of the manifest.json file.

The webapp is 100% client-side, and it’s on github

The idea phase went something like this : 

I decided it’s time to write a new blogpost, so I logged in to wordpress and started thinking what to write. I then decided that I need a new plugin for some custom wordpress functionality, and I went to search the web.
I had this idea to help this procedure with chrome  extension, and so I started planning the chrome extension.
After 5 brief minutes, I realised that I don’t have any of my chrome extension directories on this computer, and I don’t have anywhere to copy-paste from.

Tada! 

And then it hit me, that if there was something helpful like the awesome Initializr.com by Jonathan Verrecchia, to help me get my chrome extension up and running, without diving into chrome extension docs and finding out why chrome doesn’t want to load my manifest file.

12 hours later, extensionizr.com was born! And I couldn’t be prouder (actually I could, when I complete the tons of features that I have planned)

Development progress

At first I went and tried to find a boilerplate project for chrome extensions, and I actually found a couple, here and here.
The I remembered that Initializr is an open source project, and I figured that my project is kinda similar, so I went on to investigate.

As it turns out, Initializr is not so simple, it has a front-end and a back-end, the latter is written in Java!

I hate Java, so I didn’t even try to see what’s going on there, instead, being the front-end passionist I am, I started thinking if this could be built with html and javascript only.
After all, it’s 2012, and I can care less about IE because I can only assume that whoever want’s to build a chrome extension, will have chrome installed.

Google I/O and Zip.js

I remembered the talk “the web can do that” by Eric Bidelman, had a file system API demo, with files, and downloading and creating. So exited about the solution I arrived at this filesystem API demo , and was said to find out, that while I can load file into that editor, I can download them all together.

I needed a zip file, and luckily the super-talented Gildas Lormeau wrote a Zip.js library which did exactly what I needed!

The library has 2 main parts. zip.js and zip-fs.js , the latter being used to traverse the file structure and directories inside any given zip.

Once I got the basic api (the demos were SUPER helpful, as the test files inside the zip.js file) the rest was a piece of cake.

How the whole thing works

It’s very simple actually. I have prepared a zip file based on the two boilerplates I’ve found, and In that file I have ALL the stuff mentioned in Extensionizr. It’s ALL there.
I thought that customising by elimination would be more elegant. 
The site loads, and immediately, zip.js imports that pre-made zip file.
Once the user selects some options, Extensionizr collects all of those inputs and creates a list of properties to add and remove from the zip.
The removing is done twice, as some of the properties are manifest entries (omnibox permission) , some are plain files (jquery) and some are both (page action).

After all of the settings got collected, and the user clicks the download file, Extensionizr runs through the properties, edits the zip file, removing the unnesesary files and updating the manifest.json, and after it’s done, it spits the Base64 blob into an anchor element.

Using chrome’s a[download] property, the file then get’s downloaded to the users machine.

Pretty simple no?

What next?

This project was super fast, in fact, the whole process took about 12 hours, from the idea part to building, purchasing a domain, and adding analytics and share/tweet buttons (which took longer then some features!)

Next I’m planning to add tooltips for each option to explain what each one does.  DONE

Also I wanted to add links to the google chrome documentation site for each of the options. DONE

And there has to be an option to edit the file structure, as currently, the structure is based on my preferences, and it’s not the best 🙂 

Lemme know what you think!

The project is public, and I want it to be used, and will be very glad if it saves any developer even a minute.

So lemme know what you think, if you have any ideas, put them in the comments below