Extensionizr — шаблонизатор дополнений для хрома

Привет читатели!
Увидев мой проект в блоге компании Zfort Group (тут ^[1]) я решил поделится с вами обзором про проект и его реализацией.

Идея: быстро создать базовый шаблон для дополнений хрома, включая конфиг в manifest.json.
Extensionizr.com ^[2] построен как веб-приложение, и на выходе генерирует zip архив.
Всё происходит на стороне клиента с помощью Javascript, включая архивацию.

Если нет, построй :

Решив, что пора написать новый пост на моем блоге (alexw.me), я зашeл в WordPress и начал думать, что писать.
Пока я решал что написать, я подумал что мне нужен новый плагин для некоторых функций WordPress, и я отправилася на поиски в Интернете.
После того как я нашел подходящий плагин, мне надо было его скачать а потом залить на мой сайт, и я захотел автоматизировать етот процесс.
Решив что могу написать для этого простенькое расширение для хрома, я начал планирование етого расширения.
Спустя 5 минут, я понял, что все расширения которые я когда либо писал, не находятся на этом компе. И мне не откуда скопировать файлы и изменить их по надобности, надо все писать заново.

Лампочка включилась!

И тут меня осенило, что если бы был проект как Initializr.com ^[3] от Johnatan Verrecchia, чтобы помочь мне получить шаблон для хром расширения, мне не надо было бы писать все с начала.
12 часов спустя, extensionizr.com родился!

Развитие прогресса

Сначала я пытался найти проект шаблонов для расширения хрома, и я действительно нашел пару, здесь ^[4] и здесь ^[5].
Я вспомнил, что Initializr является проектом с открытым кодом, и понял, что мой проект является своего рода похож, поэтому я пошел на разведку.
Как оказалось, Initializr не так прост, он имеет кроме сайта, код на стороне сервера, на Java!
Я ненавижу Java, так что я даже не пытался посмотреть, что там происходит, вместо этого, будучи энтузиастом client-sid, я начал думать, может ли это быть построеным только с помощью HTML и JavaScript.
В конце концов, это 2012 год, и я могу наплевать на IE, потому что я могу только предположить, что у тех, кто хотят построить расширение для хрома, хром будет установлен.

Google I / O и Zip.js

Я вспомнил речь "html5 can ^[6]" от Эрика Бидельмана, где было демо работы с файловой системой (filesystem API), в котором можно было создать и скачать файлы при помощи Javascript.
К сожалению, в его проекте нельзя скачать файлы, а только загрузить и создать. А мне на исходе генерации нужен был zip-архив.
К счастью супер-талантливый Gildas Lormeau ^[7] написал библиотеку Zip.js ^[8], который делала именно то, что мне было нужно!
Библиотека имеет 2 основные части. ZIP.js и ZIP-fs.js, причем последняя используется для прохода по структуре файлов и каталогов внутри архива.

Все что осталось ето изучить основну API (демо были очень полезны, так как и тестовые файлы внутри файла zip.js), остальное было легко.

Как все это работает

Очень просто.
Я подготовил архив на основе тех двух шаблонов, в котором находятся все файлы и настройки, упомянутые в Extensionizr.
Потому как архив подготовлен заранее, из него надо стирать те вещи которые не нужны будут пользователю.
Как только Extensionizr загружается, я сразу же подгружаю архив при помощи zip.js.

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

После того как пользователь выбирает несколько вариантов, Extensionizr собирает создает список свойств для добавления и удаления из архива.

После того как все параметры собраны, и пользователь нажимает на кнопку скачивание файла, Extensionizr редактирует архив, удаляя не нужные больше файлы и редактирует manifest.json, и после того, генерирует Base64 етого архива, и вставляет его в параметр href тага <а>.

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;
			});

Чтоб инициировать диалог скачивания, в хроме существует параметр Довольно просто нет?

Что дальше?

Весь проект занял немного больше чем 12 часов, и еще несколько часов ушло на документацию (можно поводить курсором над каждым параметром и посмотреть что он делает, или нажать на линк, который ведет на доукементацию гугл.)

Далее я планирую добавить возможность редактировать структуру файла, так как в настоящее время, структура основана на моих предпочтениях, и это не самый лучший вариант для всех

Проект является открытым на Github ^[9], и я собираюсь его поддерживать, и будет очень рад, если он поможет любому разработчику сокротать время, даже минутку.

Буду рад услышать что вы думаете, и как можно более улудшить этот проект.

Автор: altryne

Источник ^[10]