Extensionizr - chromium add-on template engine

Hi habravchane!
After seeing my project in the company's blog Zfort Group ( here ), I decided to share with you a review of the project and its implementation.

The idea: to quickly create a basic template for chrome add-ons, including the config in manifest.json.
Extensionizr.com is built as a web application, and on output generates a zip archive.
Everything happens on the client side using Javascript, including archiving.

If not, build:

Deciding that it was time to write a new post on my blog, I went to WordPress and began to think about what to write.
While I was deciding what to write, I thought that I needed a new plugin for some of the WordPress features, and I went looking in the Internet.
After I found a suitable plugin, I had to download it and then upload it to my site, and I wanted to automate this process.
Having decided that I can write a simple chrome extension for this, I started planning this extension.
After 5 minutes, I realized that all the extensions I’ve ever written are not on this computer. And I don’t have to copy files from and change them as needed, I have to write everything anew.
')

The light is on!

And it dawned on me that if there was a project like Johnatan Verrecchia's Initializr.com to help me get a chrome extension template, I wouldn't have to write everything from the beginning.
12 hours later, my project was ready!

Process

At first, I tried to find a template project for chrome extension, and I actually found a pair, here and here .
I remembered that Initializr.com is an open source project, and I realized that I could base my idea on it, and I went to explore.
As it turned out, Initializr is not so simple, it has, besides the site, server-side code, in Java!
I don’t know Java, so I didn’t even try to see what was going on there, instead, being a client-side enthusiast, I started wondering if this could only be built using HTML and JavaScript.
In the end, this is 2012, and I can give a damn about IE, because I can only assume that those who want to build an extension for chromium will have chrome installed.

Google I / O and Zip.js

I remembered the speech " html5 can " from Eric Bidelman, where there was a demo of working with the file system (filesystem API), in which it was possible to create and download files using Javascript.
Unfortunately, in his project it is impossible to download files, but only to download and create. And at the end of the generation I needed a zip-archive.
Fortunately, the super-talented Gildas Lormeau wrote the 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 navigate through the structure of files and directories inside the archive.

All that remains is to learn the basis of the API (the demo was very useful, as were the test files inside the zip.js file), the rest was easy.

How it all works

Very simple.
I prepared an archive based on those two templates, which contains all the files and settings mentioned in Extensionizr.
Because the archive is prepared in advance, it is necessary to erase from it those things that the user will not need.
As soon as the Extensionizr is loaded, I immediately load the archive using zip.js.

function importZip(callback){ zipFs.importHttpContent("ext.zip", false, function() { ... }); }, onerror); }; 

After the user selects several options, Extensionizr collects a list of properties to add and remove from the archive.

After all the parameters are collected, and the user clicks on the file download button, Extensionizr edits the archive, deletes unnecessary files and edits manifest.json, and after that, generates the Base64 of this archive, and inserts it into the href tag parameter.

 zipFs.exportData64URI(function (data) { var clickEvent = document.createEvent("MouseEvent"); clickEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); downloadButton.href = data; downloadButton.download = 'extensionizr_custom' + Date.now() + '.zip'; downloadButton.dispatchEvent(clickEvent); event.preventDefault(); return false; }); 

To initiate the download dialog, there is a parameter in chrome
?

?
12 , ( , , .)

, , , .

Github, , , , .

, .


?

?
12 , ( , , .)

, , , .

Github, , , , .

, .


?

?
12 , ( , , .)

, , , .

Github, , , , .

, .