Вчера ночью мне не спалось, и я решил сделать что-то полезное (в кои-то веки). Поскольку приносить пользу окружающим можно лишь принося пользу себе, я попытался облегчить себе жизнь: создать плагин, мониторящий изменение некоторых чисел на одной странице (нечто вроде «количества непрочитанных комментариев в топиках, за которыми следишь» и «количества писем», если больше нуля — повод пойти и прочитать эти новые комментарии. Эти числа выводятся на двух известных коллективных блогах вверху страницы, но узнать об их изменении их состояния можно лишь обновив эту страницу — никакого механизма почты-rss-и т.п. не предусмотрено. Ну, надеюсь, понятно объяснил). Через полтора часа была готова более-менее стабильная версия плагина, и я буду рад рассказать вам о том, как повторить мой подвиг в любое время года.
Итак, на повестке дня: Создаем плагины для FireFox быстро и чисто.
Сразу хочу предупредить: я не профи и не гуру в этом деле, раньше мои плагинные опыты заключались в скриптах для GreaseMonkey (ну, вы все видели мой ХабраХакер — штуковину для удобного редактирования комментариев). Однако плагин вроде как написал, и он даже работает ;)
Мне понадобились:
Начал я с раздумий о том, с чего же, собственно, начать. Поискав в гугле туториалы, я нашел парочку, но как-то мне они не приглянулись — наверное, в 3 часа ночи не до чтений таких опусов ;) Оглядев свой интерфейс, я обнаружил очень похожий на задуманный плагин — Хабраголик. Он тоже выводит числа — разве не то, что нужно? ;)
Без особых нравственных преград я скачал его дистрибутив на жёсткий диск и, памятуя о том, что все плагины в формате XPI — не что иное, как ZIP-архивы с кучей разных фаилов, поменял ему расширение: habraholic-0.2.zip. Разархивировав его куда-то и применив пункт 5ый инвентаря, я составил опись вещей:
* — это такой XML-based язык, описывающий интерфейсы. Поддерживает JS, похож на XHTML — ну все дела. На нем и будет написан плагин.
Начал я с фаила install.rdf. Открыв его, я в раздумьях пробежался по строкам:
Следующим на очереди был фаил chrome.manifest. В нем я поменял только путь к фаилу panel.xul: заменил habraholic на свое название.
Заглянув в /defaults/preferences/defaults.js, я обнаружил, что там только переменные, настраиваемые пользователем. Их я закомментировал ( // ).
Потом я удалил фаил /chrome/content/prefs.xul за ненадобностью (у нас же больше нет настроек, так?) и заменил /chrome/content/habr.ico своей иконкой.
Настало время дизайна и верстки: /chrome/content/panel.xul. Первое, что я сделал, это поменял все ID элементов и надписи: заменил «habraholic» и «Карма» на разные другие слова. Убрал из меню (описывается внутри элемента ) пункт настройки и разделитель (Menuseparator) и из текста первого пункта слово «карму». Поменял пути к иконке и к скрипту ( и <script ...>) и переименовал вызываемые javascript-функции в onclick='' и oncommand=''.
Тут можно немного поиграться: добавить еще пару иконок, пару label и другие элементы. Но поиграться можно всегда, а я перейду к кодовой части программы: /chrome/content/script.js.
Начал я с переименования всех функций (убирал habraholic из имен и так далее). После чего оглядел их все:
Ой. Кажется, написал. Теперь я запаковал все фаилы в plugin.zip и переименовал его в plugin.xpi, после чего перетащил его на браузер. Тот предложил его установить, а я и рад — жму на кнопку, а потом перезапускаю браузер.
Браузер не упал и даже показал панель. Панель, разумеется, показывала всё не то и не так, как надо, но после некоторой отладки (функция alert отлично работала) и раздумий я все привел к нормальному виду (для этого я каждый раз перезапаковывал плагин, переименовывал и перетаскивал на окно браузера — сомнительное развлечение ;). Ура!
Дело было за малым: я поменял версию в /chrome/content/prefs.xul на гордое 0.2 и пошел заливать на addons.mozilla.org. Там пришлось много чего вводить, но в конце концов я получил свою собственную плагин-страничку там, разумеется, не замедлив опубликовать ссылку на нее в местах скопления предполагаемых пользователей. После долгого исправления быстро найденных ошибок я стал счастливым автором хорошего и работающего плагина. А ты, хабрачеловек?
Итак, на повестке дня: Создаем плагины для FireFox быстро и чисто.
Сразу хочу предупредить: я не профи и не гуру в этом деле, раньше мои плагинные опыты заключались в скриптах для GreaseMonkey (ну, вы все видели мой ХабраХакер — штуковину для удобного редактирования комментариев). Однако плагин вроде как написал, и он даже работает ;)
Мне понадобились:
- Firefox. У меня, например, стоит 3-яя версияс (minefield).
- Firefox Portable. Может, он, конечно, и не нужен, но я поставил: для легкого и быстрого прогона плагина по второй версии.
- Редактор. Я выбираю Notepad++. Вам советую его же — он очень быстрый, легкий, удобный и с огромным количеством функций, да еще и подсвечивает всё что угодно. Ну, если он вам не нравится — возьмите любой, желательно, чтобы умел подсвечивать JavaScript и XML.
- Познания в JavaScript. Как ни странно, они тоже понадобятся.
- Немного смекалки и воображения. Уж не знаю, зачем.
Начал я с раздумий о том, с чего же, собственно, начать. Поискав в гугле туториалы, я нашел парочку, но как-то мне они не приглянулись — наверное, в 3 часа ночи не до чтений таких опусов ;) Оглядев свой интерфейс, я обнаружил очень похожий на задуманный плагин — Хабраголик. Он тоже выводит числа — разве не то, что нужно? ;)
Без особых нравственных преград я скачал его дистрибутив на жёсткий диск и, памятуя о том, что все плагины в формате XPI — не что иное, как ZIP-архивы с кучей разных фаилов, поменял ему расширение: habraholic-0.2.zip. Разархивировав его куда-то и применив пункт 5ый инвентаря, я составил опись вещей:
+ chrome
+ content
- panel.xul //тело нашего плагина. XUL*-описание панельки
- script.js //а это уже душа. ну, точнее разум... инстинкты. короче, весь исполняемый код на языке javascript
- prefs.xul //описывает окошко настроек
- habr.ico //странная картинка с большой буквой H. вероятно, символизирует хабрахабр
+ defaults
+ preferences
- defaults.js //там -- дефолтные значения переменных, которые плагин сохраняет в браузере навечно. обычно там настройки
- install.rdf //странный XML фаил, описывающий плагин
- chrome.manifest //судя по всему, говорит браузеру о том, какой XUL фаил подключать при загрузке браузера
* — это такой XML-based язык, описывающий интерфейсы. Поддерживает JS, похож на XHTML — ну все дела. На нем и будет написан плагин.
Начал я с фаила install.rdf. Открыв его, я в раздумьях пробежался по строкам:
Я так и не понял, что имеется в виду, да и не старался: просто перед собачкой поставил название плагина латиницей, а после собачки — свои имя и фамилию.<em:id>habraholic@vladislav.semenov</em:id>
Версия. На всякий случай поставил 0.1<em:version>0.2</em:version>
Я только потом узнал, что это (тип: скин, плугин или еще что-то. ну как-то так), а тогда решил не трогать. мой плагин вряд ли сильно будет отличаться — ну и не буду менять.<em:type>2</em:type>
chrome:// это как бы ссылка на каталог со всем содержимым каталогов /chrome/ из плагинов. Этот будет указывать на фаил /chrome/contents/prefs.xul. Мой плагин настроек не имел, поэтому я эту строку закомментировал ()<em:optionsURL>chrome://habraholic/content/prefs.xul</em:optionsURL>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>2.0.0.*</em:maxVersion>
</Description>
</em:targetApplication>Ну с ними всё и так понятно. Поменял, сохранил и закрыл фаил.<em:name>Хабраголик</em:name> и другие
Следующим на очереди был фаил chrome.manifest. В нем я поменял только путь к фаилу panel.xul: заменил habraholic на свое название.
Заглянув в /defaults/preferences/defaults.js, я обнаружил, что там только переменные, настраиваемые пользователем. Их я закомментировал ( // ).
Потом я удалил фаил /chrome/content/prefs.xul за ненадобностью (у нас же больше нет настроек, так?) и заменил /chrome/content/habr.ico своей иконкой.
Настало время дизайна и верстки: /chrome/content/panel.xul. Первое, что я сделал, это поменял все ID элементов и надписи: заменил «habraholic» и «Карма» на разные другие слова. Убрал из меню (описывается внутри элемента ) пункт настройки и разделитель (Menuseparator) и из текста первого пункта слово «карму». Поменял пути к иконке и к скрипту ( и <script ...>) и переименовал вызываемые javascript-функции в onclick='' и oncommand=''.
Тут можно немного поиграться: добавить еще пару иконок, пару label и другие элементы. Но поиграться можно всегда, а я перейду к кодовой части программы: /chrome/content/script.js.
Начал я с переименования всех функций (убирал habraholic из имен и так далее). После чего оглядел их все:
- просто код — выполняется, как обычно, как только появляется. Тут он только присваивал обработчик события к загрузке браузера — ну я и оставил как есть, поменяв имя обработчика.
- habraholicLoad — как раз этот обработчик. Он запускает функцию, которая будет каждые 5 минут обновлять карму. Обработчик не менял, поменял название запускаемой функции.
- habraholicLeftClick — обрабатывает клик. Если username заполнен в настройках, вызывает обновляльщик кармы. Если нет — вызывает функцию, открывающую настройки. Я убрал весь IF, оставив первое ветвление: теперь только обновлялось.
- habraholicUpdateKarma — сам апдейтор. Если настройки настроены — создает XMLHttpRequest к хабра-апи. Если не настроены — меняет содержимое label'ов так, чтобы юзер понял, что пора всё настраивать. Оставил только создание объекта, убрав все проверки, и поменял URL, к которому идет обращение.
- habraholicUpdateKarmaRepeatedly — та самая функция, вызываемая habraholicLoad'ом и каждые 10 минут вызывающая habraholicUpdateKarma(). Я поменял временной интервал (он в миллисекундах) и имена собственные (названия функций).
- habraholicSetKarma — каллбэк от того XMLHttpRequest'а. Работает так: создает переменные с дефолтовыми значениями, потом в try{} пытается вычленить значения кармы и хабрасилы из ответа сервера и заменить ими те переменные. Поскольку мне никакой XML не светил, я просто вытащил в переменную весь HTML-код полученной страницы и пробежался по нему регулярками:
var html = httpRequest.responseText; mythings = /<li id="things"><a href="\/my\/"><span><em>мои вещи (.+?)<\/em>/.exec(html); if (mythings) mythings = mythings[1]; else mythings = '';
- habraholicShowPrefs — показывает окно настройки. Удалил.
- habraholicGetUsername, habraholicIsRatingPositionHidden — получают перманентно сохраненные настройки. Удалил.
- habraholicLoadProfile — открывает профиль пользователя. Модифицировал для своих целей.
- habraholicLoadPage — офигенно полезная штука: открывает страницу (таб) с нужным нам адресом. Отлично дружит с кликом колёсиком («открыть в новой вкладке»). Переименовал и больше не трогал.
Ой. Кажется, написал. Теперь я запаковал все фаилы в plugin.zip и переименовал его в plugin.xpi, после чего перетащил его на браузер. Тот предложил его установить, а я и рад — жму на кнопку, а потом перезапускаю браузер.
Браузер не упал и даже показал панель. Панель, разумеется, показывала всё не то и не так, как надо, но после некоторой отладки (функция alert отлично работала) и раздумий я все привел к нормальному виду (для этого я каждый раз перезапаковывал плагин, переименовывал и перетаскивал на окно браузера — сомнительное развлечение ;). Ура!
Дело было за малым: я поменял версию в /chrome/content/prefs.xul на гордое 0.2 и пошел заливать на addons.mozilla.org. Там пришлось много чего вводить, но в конце концов я получил свою собственную плагин-страничку там, разумеется, не замедлив опубликовать ссылку на нее в местах скопления предполагаемых пользователей. После долгого исправления быстро найденных ошибок я стал счастливым автором хорошего и работающего плагина. А ты, хабрачеловек?
