Недавно мне пришлось доточить одно расширение Оперы под себя, раньше я ими совершенно не занимался. Открываю код, о ужас! Куча непонятных цепочек пространств имен (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
Вобщем с первого взгляда с расширениями без бутылки не разобраться. На помощь приходит 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()
Файлы и ссылки
Проект доступен на гуглокоде 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).