one more blog

Сразу ссылки:

Chrome Extensins Box on GitHub

Русская документация

Chrome Extensions Box #DEMO –  демонстрационное расширение, которое ничего не делает, но поможет быстро разобраться.

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

Весь присутствующий код написан без использования библиотек (хотя jQuery ветки 2, включен в набор).  В оформлении решил обойтись без twetter bootstrap, т.к. мне он уже набил оскому.

Что внутри:

• хелпер для интернационализации
• хелпер для быстрого создания страницы настроек
• иконки-заглушки всех типоразмеров
• сборщик на python с минификацией и пр.
• каркасы основных страниц
• больше написано в документации

Короткие примеры. Остальное в документации и демо- расширении.

Интернационализация:

В HTML коде используйте {{имя свойства из message.json}} (атрибуты также поддерживаются)

Для такого HTML:

<header>
    <img src=\"img/ext_icons/48.png\" title=\"{{extName}}\">
    <strong>{{extName}}</strong>
</header>

<section>
    <p>{{extDescr}}</p>
</section>

И такого _locale/ru/message.json:

{
    \"extName\": {
        \"message\": \"Мое расширение\",
        \"description\": \"Имя расширения\"
    },
    \"extDescr\": {
        \"message\": \"Это описание расширения\",
        \"description\": \"Короткое описание расширения\"
    }
}

Будет создан такой HTML:

<header>
    <img src=\"img/ext_icons/48.png\" title=\"Мое расширение\">
    <strong>Мое расширение</strong>
</header>

<section>
    <p>Это описание расширения</p>
</section>

Страница настроек

В файл js/storage.js необходимо записать настройки расширения по умолчанию и тип хранилища (local или sync). В файле options.html – связать управляющие элементы и связанные с ними настройки через атрибут data-storage и value

Скрипт хелпера сам отметит нужные чекбоксы, выберет радиокнопки, заполнит текстовые поля input (и тп) в соответствии с данными записанными в хранилище. А также навесит обработчики событий, которые будут писать все изменения в хранилище.

Пример:

В js/storage.js записаны следующие настройки по умолчанию:

var storage = {
    area: chrome.storage.local, // хранилище настроек
    default_options: {
        o_radio: \'r2\'
};

В options.html для связывания группы радиокнопок с записанной в хранилище опцией storage.default_options.o_radio надо написать следующий код:

<input type=\"radio\" name=\"r\" data-storage=\"o_radio\" value=\"r1\"/>
<input type=\"radio\" name=\"r\" data-storage=\"o_radio\" value=\"r2\"/> // будет выбрана эта кнопка
<input type=\"radio\" name=\"r\" data-storage=\"o_radio\" value=\"r3\"/>

Если открыть страницу настроек сразу после установки расширения (именно такое поведение реализовано – см. background.js), то будет выбрана вторая радиокнопка.

Также на эту группу радиокнопок будет повешено событие, которое будет следить за переключением кнопок и записывать изменения в хранилище. Если выбрать первую кнопку, то в хранилище будет записано новое значение – storage.default_options.o_radio: \”r1\”

Поддерживаются input всех типов (кроме type=\”number\”), select (включая multiple), textarea.

Подробности в документации и демо- расширении.

Сборщик расширения

Подготавливает и запаковывает файлы расширения для заливки в Chrome Store.

Что делает в данный момент:

• проверяет manifest.json на существование версии с таким номером
• минификация (она же обфускация) js файлов расширения с помощью UglifyJS (опционально, настройки)
• установка напоминания перед сборкой (опционально)
• метка в changelog файле (опционально)
• упаковка в zip

Сборщик написан на python 3.3

Подробности в документации.