Конвертируем UserJS в расширение для Opera

Вступление

Это руководство по быстрому конвертированию UserJS в расширение для Opera. Это очень простой процесс, однако в нём есть несколько подвохов, которые мы с вами обсудим. Статья представляет собой практический пример конвертации.

Процесс

Первым делом, создадим пустую директорию, которая будет выполнять роль корневой директории расширения. Создайте в ней поддиректорию includes и поместите в неё ваш UserJS — расширение будет использовать этот скрипт. Создайте иконку, которую будет использовать расширение и пометите её в поддиректорию (названную, например, icons) в корневой директории.

Создайте конфигурационный файл config.xml и поместите его в корневую директорию.
Выделите весь контент корневой директории, сожмите его с помощью zip и измените расширение архива на .oex.
Теперь у вас есть расширение, которое должно работать корректно, однако вам всё ещё необходимо протестировать и отладить его перед тем, как загружать на сайт расширений для Opera.

Предостережения

Иногда UserJS не работает как расширение по различным причинам. Чаще всего потому, что какой-либо объект (например, location или opera) используется напрямую. Это легко исправить, обращаясь к этим объектам через объект окна (window.location, window.opera и так далее).

Реальный пример

Чтобы показать, как легко происходит конвертация UserJS в расширение для Opera, предоставим пример, который превратит вас в разработчика расширений за несколько минут. Запускайте секундомер!

Шаг 1: Выбираем UserJS

Для этого примера мы будем использовать актуальный HTML5 video UserJS созданный бывшим стажёром Opera, Мартином Роушером (Martin Rauscher). Его скрипт позволят просматривать HTML5 видео в полноэкранном режиме. Само собой разумеется, что вы должны проверить лицензию любого скрипта, который вы собираетесь использовать и повторно опубликовать. В данном случае Мартин любезно дал мне разрешение, но вы могли бы также использовать скрипты выпущенные под любой открытой лицензией.

Шаг 2: Создаём директории

В первую очередь нам необходим дом для нашего расширения, назовём эту директорию VideoFullscreen. Создадим в ней поддиректорию includes и скопируем в неё файл UserJS (VideoFullscreen.js).

Шаг 3: Создаём иконку

Конечно, вы можете любовно создать собственную иконку, но в этом примере мы будем ленивы и отправимся в Open Icon Library. Там доступны сотни иконки, однако предварительно всегда проверяйте лицензию, некоторые из них требуют вознаграждения. Конечно, всегда желательно указать источник и в данном случае благодарность отправляется в проект Tango за их иконку представляющую полноэкранное действие. Давайте использовать версию размером 64х64 пикселя как максимальную для менеджера расширения в Opera.

Шаг 4: Создаём конфигурационный файл

И снова, будучи ленивыми, мы можем спокойно скопировать код указанный ниже в файл config.xml и сохранить его в корневую директорию расширения:

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets">
    <name>VideoFullscreen</name>
    <description>Adds fullscreen capability to every HTML5 video element. Just play the video and then hit SHIFT-ENTER or F11.</description>
    <author href="http://rauscheronline.de/">Martin Rauscher (ported by Daniel Davis)</author>
    <icon src="VideoFullscreen.png"/>
</widget>

Не забудьте изменить все данные, упомянув как и себя, так и автора оригинального UserJS.

Шаг 5: Собираем расширение

Последний шаг для сборки — выбрать директории icons и includes, файл config.xml и упаковать их в zip-архив. После этого поменяем расширение на .oex (VideoFullscreen.zip станет VideoFullscreen.oex) и всё. Расширение готово для установки путём перетаскивания в окно в Opera.

Шаг 6: Настройка и правка багов

Несмотря на то, что оригинальный UserJS работает хорошо, ваше расширение может и не последовать его примеру. Хорошей идеей будет, прежде всего, проверить консоль ошибок, но в большинстве случаев проблема заключается в структуре окружения расширений для Opera, в частности в некоторых используемых объектах. В случае
VideoFullscreen.js метод addEventListener() используется несколько раз, однако не указывать объект, к которому мы привязываем события. Окружение UserJS предполагает, что события привязываются к объекту window, что является верным, однако окружение расширений для Opera несколько более сложное, поэтому нам необходимо явно указать объект windows, как это показано ниже:

window.addEventListener('DOMContentLoaded',init,false);
window.addEventListener('DOMContentLoaded',function(){
	document.getElementsByTagName("body")[0].addEventListener('keydown',keyDownHandler,false);
},false);
window.addEventListener('DOMNodeInserted',init,false);

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

// Измените это:
document.getElementsByTagName("body")[0].addEventListener('keydown',keyDownHandler,false);

// на это:
document.body.addEventListener('keydown',keyDownHandler,false);

У нас есть подробная статья о написании эффективного JavaScript, которая рекомендована к прочтению для повышения производительности не только ваших расширений, но также веб-страниц и веб-приложений.

Шаг 7: Выпускаем на волю

Итак, мы сконвертировали, оттестировали и улучшили расширение. Теперь мы готовы показать его. Можно сделать это, загрузив его на сайт addons.labs.opera.com. Расширение, описанное в этом примере, уже можно найти там, однако вы можете скачать его и по этой ссылке — VideoFullscreen Opera extension. После его установки вы можете попробовать его, найдя страницу с HTML5-видео, например, с этим образовательным видео Брюса Лоусона. Начните проигрывание и нажмите F11. В следующей статье мы будем иметь дело с травмой от просмотра Брюса Лоусона в полноэкранном режиме, а пока мы ждём от вас ваших расширений, как сконвертированных, так и написанных с нуля.