Создание дополнений к Firefox с помощью JetPack

Казалось бы, все, что можно сказать по поводу создания дополнений к популярному браузеру со страниц газеты, уже сказано... Оказывается, все-таки сказано ещё не все. Поэтому сегодня мы говорим о JetPack - весьма интересном, с точки зрения создателя дополнений к Mozilla Firefox, инструменте.

Общие слова

Думаю, мы достаточно подробно говорили о создании расширений к Mozilla Firefox - по крайней мере, достаточно подробно, чтобы можно было сделать выводы о том, что создание таких расширений - занятие, по своей сложности в корне отличающееся от пляжного отдыха. Несмотря на существование разнообразных инструментов, которые облегчают разработку расширений и их отладку, нельзя сказать, чтобы ситуация в корне менялась. Конечно, глядя на количество существующих сейчас расширений для Mozilla Firefox (а их уже создано, скажем прямо, немало), можно придти к выводу, что эта проблема не такая уж и актуальная для сообщества разработчиков, а потому и говорить о ней столь подробно не имеет совершенно никакого смысла. На самом деле это не совсем так, и проблема имеет место быть. Это прямо и косвенно подтверждается существованием специализированного инструмента от самих разработчиков из Mozilla, призванного сделать процесс разработки расширений для Firefox (равно как, впрочем, и для других программных продуктов Mozilla) более простым и приятным для тех, кто на это отважится.

JetPack (а именно так называется инструмент, о котором мы с вами сейчас будем вести речь) появился сравнительно недавно, около года назад. Нужно сказать, что появление JetPack действительно привело к всплеску интереса со стороны разработчиков к созданию расширений для браузера Firefox, потому что этот пакет смог предоставить программные интерфейсы (API), которые для большинства разработчиков были более привычны, нежели "классические" для продуктов Mozilla технологии, такие, как XUL, о котором мы с вами не так давно говорили. Впрочем, наверное, лучше перейти к рассказу о самом пакете JetPack.

JetPack как он есть

JetPack - это SDK для разработки расширений к программным продуктам производства Mozilla, прежде всего, к браузеру Firefox. Найти этот SDK в Сети чрезвычайно просто, достаточно зайти на его официальный сайт https://jetpack.mozillalabs.com. Там можно, само собой, обнаружить и документацию по всему пакету - к слову, достаточно полную и позволяющую действительно быстро разобраться в создании расширений с его помощью. Помимо самого SDK, для разработки расширений с использованием его наиболее актуальной версии вам понадобятся Python 2.5 (или более новый) и, на выбор, рабочая версия Firefox или Thunderbird, либо же XULRunner SDK с поддержкой Gecko 1.9.2 или новее.

Первоначально в проекте JetPack разработчикам предлагался только API, который имел следующие возможности: поддержка работы со строкой статуса, табами, управление анимацией, привязка скриптов к контенту и т.д.; поддержка подключения расширяющих API внешних библиотек (например, Twitter); поддержка библиотеки jQuery; поддержка отладки расширений с использованием Firebug. С тех пор утекло уже немало воды (согласитесь, за год можно написать достаточно много программного кода, и не только написать, но и отладить, так что в том, что сегодня JetPack уже совсем другой, чем год назад, на мой взгляд, нет совершенно ничего удивительного). Сейчас JetPack SDK включает в себя поддержку написания не только расширений для Firefox, но и "отдельно стоящих" web-приложений. Помимо, собственно, библиотек, SDK также включает ряд утилит командной строки, предназначенных для упаковки разработанного программного кода в пакеты, пригодные к распространению через Интернет. И, самое главное, в SDK есть собственная IDE для разработки расширений - пока она доступна только в предварительной тестовой версии и вряд ли может быть полноценно использована для разработки расширений, да и список возможностей IDE, говоря откровенно, не слишком поражает воображение... Но, в целом, наличие специализированной IDE в состоянии активной разработки не может не радовать.

Технологии

Что ж, общий обзор JetPack'а мы с вами вполне себе успешно сделали. Теперь можно подойти к пакету поближе и узнать, для начала, в чем, собственно говоря, состоит технология разработки расширений браузера с его использованием.

Технологически JetPack дает возможность вести разработку с использованием привычных для каждого web-разработчика (ну или, во всяком случае, для подавляющего большинства) технологий, а именно - HTML, CSS и JavaScript. Правда, технологии, используемые в JetPack'е, не сказать чтобы такие уж передовые - например, из спецификации HTML 5 не поддерживается практически ничего. Что касается версии JavaScript, то её номер - 1.8.1. В общем-то, именно в программировании на JavaScript и заключается создание расширений с использованием JetPack. В отличие от "обычных" расширений Mozilla Firefox, где все, по большому счету, основывается так или иначе на XML (потому что тот же XUL - это тоже XML), в JetPack данные записываются с помощью JSON. Выглядит это таким образом, как представлено в листинге.

{
 "description": "This package adds a context-menu item.",
 "author": "Me (http://me.org)",
 "dependencies": ["jetpack-core"]
}

Как видите, JSON делает данные достаточно прозрачными и удобными как для чтения, так и для редактирования. Конкретно приведенный фрагмент JSON-документа - это пример "заглавного" файла для пакета с расширением package.json. Давайте теперь посмотрим на код на JavaScript'е, который как раз и реализует обещанное в JSON'е добавление пункта в контекстное меню браузера. Вы можете увидеть его в листинге.

exports.main = function(options, callbacks) {
 var contextMenu = require("context-menu");
 // Create a new context menu item.
 var menuItem = contextMenu.Item({
  label: "Search with Google",
  // A CSS selector. Matching on this selector triggers
  // the display of our context menu.
  context: "a[href]",
  // When the context menu item is clicked,
  // perform a Googlesearch for the link text.
  onClick: function (contextObj, item) {
   var anchor = contextObj.node;
   console.log("searching for " + anchor.textContent);
   var searchUrl = "http://www.google.com/search?q=" +
    anchor.textContent;
   contextObj.window.location.href = searchUrl;
  }
 });
 // Add the new menu item to the application's context menu.
 contextMenu.add(menuItem);
};

Сразу хочу сказать, что этот код позаимствован мною из примеров к библиотеке JetPack, и, соответственно, копирайт на него принадлежит разработчикам этой библиотеки. Хотя код в листинге снабжен достаточно подробными комментариями, мы с вами поговорим более подробно о том, что именно в нём вы можете увидеть.

Приведенная функция на JavaScript'е - это в некотором роде аналог функции main, знакомой каждому, кто хотя бы раз что-нибудь писал на Си. Как видите, начинается наша функция с того, что мы декларируем свою "причастность" к контекстному меню браузера. Затем добавляем (хотя добавим мы на самом деле его несколько ниже) в контекстное меню новый пункт путем создания нового экземпляра соответствующего объекта, который заполняем нужными свойствами, начиная с подписи пункта "Search with Google" и заканчивая обработчиком события, происходящего при клике по этому пункту меню. Что касается собственно обработчика, то, как легко увидеть, он как раз и реализует поиск с помощью Google путем формирования URL поискового запроса, начинающегося с "http://www.google.com/search?q=", и переходу по этому URL в текущем окне браузера. Ну а в самом конце осуществляем непосредственную "состыковку" этого нашего свежеиспеченного пункта меню и контекстного меню браузера.

Конечно, можно возразить, что ничего здесь нет такого, что нельзя было бы легко реализовать и с использованием XUL'а, но не будем забывать, что этот пример из разряда "Hello, world!", а реальные расширения несколько, скажем прямо, отличаются по своей сложности от этого примера. Кроме того, не будем забывать о том, что XUL нам как бы нужно учить с нуля практически каждому, кто берется за создание расширения для Firefox, в то время как в случае с JavaScript'ом и JSON'ом многие разработчики смогут работать со знакомыми технологиями, с которыми они, образно говоря, знакомы уже всю свою сознательную жизнь. И с этим нельзя не считаться.

Подводя итоги...

...можно сказать, что JetPack'у, конечно, ещё есть куда расти. И дело не только в том, что среда разработки ещё с трудом тянет даже на звание "беты", и даже не в том, что пока что сами создатели пакета предупреждают о том, что текущая версия носит статус тестовой... Просто сама библиотека недостаточно "обкатана" на большом количестве расширений, как "классическая" технология их создания на основе XUL. Ведь на её основе создано уже огромное количество самых разных расширений, а вот на основе JetPack'а, к сожалению, пока расширений разработано не так уж и много. Впрочем, все впереди, и частично даже в наших с вами в руках. Так что не бойтесь этого пакета - может быть, как раз вы сможете сделать его намного лучше, чем он есть сейчас.

Вадим СТАНКЕВИЧ,
dreamdrusch@tut.by