Привет читатели!
Увидев мой проект в блоге компании Zfort Group (тут) я решил поделится с вами обзором про проект и его реализацией.
Идея: быстро создать базовый шаблон для дополнений хрома, включая конфиг в manifest.json.
Extensionizr.com построен как веб-приложение, и на выходе генерирует zip архив.
Всё происходит на стороне клиента с помощью Javascript, включая архивацию.
Если нет, построй :
Решив, что пора написать новый пост на моем блоге (alexw.me), я зашeл в WordPress и начал думать, что писать.
Пока я решал что написать, я подумал что мне нужен новый плагин для некоторых функций WordPress, и я отправилася на поиски в Интернете.
После того как я нашел подходящий плагин, мне надо было его скачать а потом залить на мой сайт, и я захотел автоматизировать етот процесс.
Решив что могу написать для этого простенькое расширение для хрома, я начал планирование етого расширения.
Спустя 5 минут, я понял, что все расширения которые я когда либо писал, не находятся на этом компе. И мне не откуда скопировать файлы и изменить их по надобности, надо все писать заново.
Лампочка включилась!
И тут меня осенило, что если бы был проект как Initializr.com от Johnatan Verrecchia, чтобы помочь мне получить шаблон для хром расширения, мне не надо было бы писать все с начала.
12 часов спустя, extensionizr.com родился!
Развитие прогресса
Сначала я пытался найти проект шаблонов для расширения хрома, и я действительно нашел пару, здесь и здесь.
Я вспомнил, что Initializr является проектом с открытым кодом, и понял, что мой проект является своего рода похож, поэтому я пошел на разведку.
Как оказалось, Initializr не так прост, он имеет кроме сайта, код на стороне сервера, на Java!
Я ненавижу Java, так что я даже не пытался посмотреть, что там происходит, вместо этого, будучи энтузиастом client-sid, я начал думать, может ли это быть построеным только с помощью HTML и JavaScript.
В конце концов, это 2012 год, и я могу наплевать на IE, потому что я могу только предположить, что у тех, кто хотят построить расширение для хрома, хром будет установлен.
Google I / O и Zip.js
Я вспомнил речь "html5 can" от Эрика Бидельмана, где было демо работы с файловой системой (filesystem API), в котором можно было создать и скачать файлы при помощи Javascript.
К сожалению, в его проекте нельзя скачать файлы, а только загрузить и создать. А мне на исходе генерации нужен был zip-архив.
К счастью супер-талантливый Gildas Lormeau написал библиотеку Zip.js, который делала именно то, что мне было нужно!
Библиотека имеет 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, и я собираюсь его поддерживать, и будет очень рад, если он поможет любому разработчику сокротать время, даже минутку.
Буду рад услышать что вы думаете, и как можно более улудшить этот проект.
Автор: altryne
