Чуть более сложное расширение для Mozilla Firefox

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

Естественно, тогда я не знал ничего про то, как делать расширения для браузера. Поэтому я просто распотрошил свою находку и начал изучать. Первой мыслью конечно же было — найти участки кода, которые отвечают за получение от провайдера данных об использованном трафике, и заменить их кодом для своего провайдера. Помню, я хотел просто побыстрее увидеть полезные цифры в статус-баре. Надо ли говорить, что эта затея потерпела провал? То расширение получало данные в виде XML, а мой провайдер выдавал их в виде обычной web-странички. То есть, пришлось изучать регулярные выражения. Идея была в том, чтобы получить с использованием xmlHttpRequest исходник страницы и пройтись по нему регулярками. И эта затея потерпела провал. Запрос выдавал кракозябры. Но вместо того, чтобы разобраться, как задать правильную кодировку, я погуглил и нашёл способ, как загрузить страницу в iframe, а потом извлекать из неё данные с помощью evaluate (что-то про XPath, и я до сих пор с трудом понимаю, как это работает). И наконец после пары суток тогда мне казалось титанических, почти героических трудов я смог получить данные. Осталось только вывести их в тултип, и получилась версия 1.0. Она работала только для меня.

Всё было замечательно, но как-то раз мне захотелось повысить себе ЧСВ, и я решил поделиться своим расширением. То есть, потребовалось сделать настройки, где пользователь мог бы выбрать свой тарифный план. А чтобы сделать окно настроек, пришлось изучать XUL и то, как Firefox их хранит. Это заняло очень много времени. XUL сложная вещь. HTML и JavaScript тоже сложны, но по XUL материалов на русском языке почти не существует. То есть, пришлось читать на английском. Читать на английском я конечно умею, но делаю это раз в пять медленнее, чем на родном. Но знаете, ожидание признания, похвал и всяческих «спасибо, чувак», творит чудеса. Поэтому прошло два или три дня, и я выложил своё творение на местный трекер. И были признания, похвала и благодарности. Это грело мне душу. Но я не был спокоен. Потому что, почитав справку по XUL, узнал, что оказывается тултипы могут быть цветными, в них можно вставлять картинки и т.п.

В первых версиях тултип был обычным текстовым. Этого вполне хватало, чтобы отображать всё, что нужно. «Но ведь он может быть красивым», — думал я. «Но ведь тогда придётся изучать CSS», — опять же думал я. «Но ведь он может быть красивым…», — повторял я себе. Наконец, желание творить преодолело лень и тезис «сойдёт для сельской местности», и я приступил. Была добавлена процедура, которая очищала тултип и заново заполняла его элементами row, каждый из которых заполнялся элементами label. К элементам label эта же процедура прикрепляла стили, красивые и, я бы даже сказал, няшные — разноцветные. Прошло три дня. Наконец тултип моего расширения начал выдавать не просто текст, а красивую похожую на таблицу разноцветную совокупность рядов. Я был рад и горд и выложил на трекер версию 2.0. Естественно, некоторые пользователи оказались недовольны и просили вернуть текстовый тултип. Но конечно же я посчитал их просто слишком консервативными (и до сих пор так считаю) и оставил их просьбы без внимания. Итак, я был рад и горд. Но всё ещё неспокоен. Я понял, что оказывается мой код представляет собой кашу, и его можно улучшить, разделив на функции и процедуры.

Мой код был кашей. Где-то внизу длинной портянки ютилась процедура fillTooltip, она была красива, даже прекрасна. А наверху было нагромождение, которое я принялся разгребать. Это заняло у меня четыре дня. Так много, потому что я три раза всё переделывал, пробуя разные варианты организации кода. Получилось несколько модулей, в которые я разложил близкие по функциональности методы. Но каждый из этих модулей был мал. Помню, я даже хотел поместить всё обратно в один скрипт. И я бы так и сделал, если бы не вспомнил про картинки в тултипе. «Да, пользы от них будет мало», — думал я. — «Но это же картинки! Красивые няшные картинки!» Я сел писать процедуру addImagesToTooltip. Но где их хранить, эти картинки? На собственном сайте? Его у меня нет. Помещать в само расширение? Но ведь это как-то не так… картинки мне хотелось как-то обновлять. К тому же мне совсем не хотелось изучать новую для себя технику в разработке расширений — работу с файлами на локальном компьютере. Решение конечно же оказалось простым — надо хранить изображения на местном фотохостинге. На существование API местного фотохостинга я не рассчитывал хотя бы потому, что тогда я с трудом понимал, что такое API вообще. Впрочем, думаю, что его — API местного фотохостинга — вообще нет, что неудивительно, конечно же.

xmlHttpRequest я более или менее знал, с кодировками тоже к тому времени разобрался, регулярными выражения тоже хорошо владел, и через несколько дней моё расширение научилось получать ссылки на изображения и грузить эти изображение в элемент image в тултипе. Версия 3.0 (уже не помню точно) оказалась на местном любимом трекере. А тот факт, что я могу мановением рук сделать так, что все пользователи расширения увидят в тултипе те картинки, которые я захочу им показать, грел мне душу и наполнял ЧСВ. Казалось бы, можно успокоиться. Но тут я узнал, что такое SVN. Наверное, вы не поверите, но до того времени системы управления версиями мне казались чем-то невообразимо сложным (собственно, мало что изменилось). Как бы то ни было, поставил я себе Visual SVN Server, поставил TortoiseSVN, чтобы просто посмотреть. Оказалось, что вещь удобная, но как мне её использовать? Расширение же уже готово и работает. А ничего другого я не делал (и сейчас практически не делаю, такие дела). Вдруг выяснилось, что тот рефакторинг, который я делал раньше, никуда не годится, и надо всё переписывать. Система управления версиями оказалась как нельзя кстати. Вот если бы я знал о ней раньше.

Сделав весь возможный рефакторинг, который сумел, я заскучал. «Всё ж работает», — думал я. — «Нечего больше улучшать, добавлять». Но улучшать и добавлять хотелось, а создавать что-то новое не хотелось совсем. Поэтому, наткнувшись на советы по созданию расширений для Firefox и прочитав что-то вроде «обязательно создавайте свои расширения так, чтобы их можно было легко локализировать», я обрёл цель. Понятно какую — сделать так, чтобы моё расширение было легко локализировать на разные языки мира. Конечно, все мы понимаем, что пользы от этого мало, ведь все пользователи — жители одной страны, даже больше — одного города, и интернационализация не нужна. Наверное, мне просто захотелось сделать всё по правилам. И вот тут я увидел, как легко и просто добавить properties- и dtd-файлы и использовать их, но в то же время, как трудно найти в коде все строчки на русском и заменить их на что-нибудь вроде strbundle.getString(‘menuitem_traffic_table_month_label_adsl’). Тем не менее, работа была выполнена, и возможность локализации расширения на все языки мира внедрена. Чем я не преминул воспользоваться, добавив локализацию для американского английского (не полностью и наверное где-то с ошибками).

Ах да, совсем забыл, до событий с добавлением возможности локализации я сменил провайдера (формально провайдер тот же самый, просто тип подключения изменился). Пришлось написать такую же штуку и для этого случая, что конечно же было проще, чем делать с нуля. То есть, я стал гордым создателем двух расширений, которые постарался максимально унифицировать. И вот совсем недавно, потратив на это три долгих дня, слил их в одно, в процессе чего прошёл через третий крупный рефакторинг всего и вся. А буквально два месяца назад или около того, узнал, что оказывается можно сделать так, чтобы браузер мог обновлять расширение через интернет, и что для этого не нужен сервер с SSL. На самом деле, я и раньше знал, что теоретически это возможно, но конечно же это мне казалось очень трудным в реализации. А оказывается, всего-то нужно добавить в install.rdf пару строчек, разжиться программкой mccoy и использовать, например, Dropbox, в который положить два файла — файл описания обновления и само расширение. Подробнее о том, как это делается, читайте тут. Там всё на английском, правда, но ничего не поделаешь.

Про то, как я нарисовал иконки, напишу только одно: сделать толковую большую иконку так и не получилось. Таким образом, из всего этого можно сделать какие-то выводы. Возможно даже полезные. Само расширение лежит тут. Не то, чтобы очень простое, но гораздо гораздо гораздо проще, чем AdBlockPlus и др., не говоря уже о Firebug, чтобы кто угодно мог в нём разобраться.