Bexf — Фрэймворк для создания расширений

Недавно мне пришлось доточить одно расширение Оперы под себя, раньше я ими совершенно не занимался. Открываю код, о ужас! Куча непонятных цепочек пространств имен (window.opera.extension.tabs, window.opera.contexts.toolbar, window.opera.extension.broadcastMessage) которые с первого взгляда и не пойми что таят (я и не ждал легкого пути). Пришлось открыть dev.opera.com для дальнейшего изучения. Расширение я все-таки доточил и решил заодним написать фрэймворк, который значительно упрощает разработку расширений для Оперы.


Рассмотрим код (index.html), который приходится писать до Bexf:

window.addEventListener('load', function () {
    // Создаем кнопку
    var button = opera.contexts.toolbar.createItem({
        disabled: false,
        title: "Bexf Button Example",
        icon: "icon.png",
        popup: {
            href: "popup_1.html"
        },
        badge: {}
    });
    // Обновляем параметры попапа
    button.popup.href = "popup.html";
    button.popup.width = 400;
    button.popup.height = 150;
    // Обновляем тайтл кнопки
    button.title = 'Bexf Button Example\nTitle Updated via attr' + widget.preferences.getItem('some_option');
    // Вешаем событие "Клик"
    button.addEventListener('click', function () {
        // Открываем таб
        var tab = opera.extension.tabs.create({url: 'https://www.google.com/', focused: true});
        // Меняем текст в бедже
        button.badge.textContent = ~~(Math.random() * 10);
        // Можно закрыть таб
        // tab.close();
    }, false);
    // Вешаем событие "Кнопку убрали с панели"
    button.addEventListener('remove', function () {
        // Создаем новый таб
        opera.extension.tabs.create({url: 'http://www.ya.ru/', focused: true});
    }, false);
    // Добавялем на панель
    opera.contexts.toolbar.addItem(button);
    
    window.setTimeout(function () {
        // Через 10 секунд убираем кнопку с панели
        opera.contexts.toolbar.removeItem(button);
    }, 10000);
}, false);

С комментариями все вроде-бы ясно, а если убрать, то появляется куча непонятных пространств имен, свойств и методов:

• window.opera.extension.tabs
• window.opera.contexts.toolbar
• button.popup.href
• button.badge.textContent
• window.widget.preferences.setItem|.getItem

И двувариантные подходы: window.opera.extension.broadcastMessage или window.postMessage (хотя тут все верно)
Вобщем с первого взгляда с расширениями без бутылки не разобраться. На помощь приходит Bexf.

Рассмотрим тот же код (index.html), после Bexf:

$.ready(function () {
    // Создаем кнопку
    var button = $.createButton({
        disabled: false,
        title: "Bexf Button Example",
        icon: "icon.png",
        popup: {
            href: "popup_1.html"
        }
    })
    // Обновляем параметры попапа
    .attr({
        href: "popup.html",
        width: 400,
        height: 150
    })
    // Обновляем тайтл кнопки
    .attr('title', 'Bexf Button Example\nTitle Updated via attr' + $.opt('some_option'))
    // Вешаем событие "Клик"
    .click(function () {
        // Открываем таб
        var tab = $.createTab({url: 'https://www.google.com/', focused: true});
        // Меняем текст в бедже
        button.text(~~(Math.random() * 10));
        // Можно закрыть таб
        // tab.close();
    })
    // Вешаем событие "Кнопку убрали с панели"
    .remove(function () {
        // Создаем новый таб
        $.createTab({url: 'http://www.ya.ru/', focused: true});
    })
    // Добавляем на панель
    .addToPanel();

    window.setTimeout(function () {
        // Через 10 секунд убираем кнопку с панели
        button.removeFromPanel();
    }, 10000);
});

Совсем другое дело, правда?

Мы избавляемся от кучи пространств имен и приводим все к удобочитаемому виду, который знаком всем разработчикам jQuery (цепочки, названия методов, события и хелперы, сеттер-геттер). Получаем простые и понятные методы и классы:

• Button
• Tab
• Window
• .attr()
• .bind()
• $.createButton()
• Button.addToPanel()
• .click()
• .remove()
• $.ajax()
• $.opt()

И исключаем двувариантрый подход broadcastMessage/postMessage, теперь он заменен одни методом $.postMessage который вызывает тот или иной вариант в зависимости от места нахождения Bexf (popup или index).

Файлы и ссылки

Проект доступен на гуглокоде code.google.com/p/browser-extensions-framework
Код фрэймворка с комментариями (16.2 Кб) browser-extensions-framework.googlecode.com/files/Bexf-1.0.js
Минимизированный код (4.9 Кб) browser-extensions-framework.googlecode.com/files/Bexf-1.0.min.js

Пример Bexf расширения (proof of concept): browser-extensions-framework.googlecode.com/files/bexf-example.oex
Сразу опишу не явное поведение расширения: создает кнопку на панели и по таймеру меняет значение беджа кнопки, как только значение доходит до 0 удаляет кнопку, открывает таб с google.com через 5 секунд закрывает этот таб и открывает новый с ya.ru

PS кроме тестовых расширений было создано одно «живое» расширение Habra Meter (думаю из названия понятно, что оно делает). Оно пока не прошло модерацию. Если кого-то заинтересовал Bexf или процесс написания расширений для Оперы я могу написать статью об создании и публикации Habra Meter с нуля (что там: красивая архитектура расширения, bexf, динамические иконки на кнопке через canvas).