GlooSoftware Research Lab

Создаем первый Add-on для Firefox в Windows

// 25 октября 2014 // Firefox Add-on, Программирование

Привет тем, кто решил прочитать данную статью! Ранее я выкладывал результат моего изучения разработки расширений для браузера Mozilla Firefox и что получилось можете посмотреть ЗДЕСЬ. Сегодня я расскажу как это расширение я создавал, пошагово и с пояснениями, для новичков, как и я, но начнем с Hello World дополнения ;-). Надеюсь данная статья поможет новичкам быстрее начать писать эддоны для любимого браузера. Поехали!

Для написания Add-on’ов для Firefox есть два подхода: при помощи XUL или с использованием “нового” легковесного JS SDK. Мы рассмотрим второй подход, к тому же он рекомендуется большинством разработчиков и более прост в понимании.

Устанавливаем SDK для разработки расширения для Firefox

Для разработки и тестирования расширений будем использовать Jetpack Add-on SDK Mozilla Firefox, на момент написания статьи версии 1.17, качаем его ЗДЕСЬ. Я распаковал его в папку “C:\addon-sdk-1.17\”. SDK не заведется без Python’a, подойдут версии 2.5, 2.6, 2.7, я скачал версию 2.7.8 ЗДЕСЬ и установил его в папку “C:\Python27\”.

Практически всё готово, что бы работать с SDK запускаем консоль CMD, переходим в папку с Jetpack, в моем случае “cd C:\addon-sdk-1.17\bin\” и активируем SDK “activate”, на что увидим победоносное приветствие “Welcome to the Add-on SDK…” и консоль взаимодействия со средствами разработки дополнений для Firefox. Для просмотра справки выполните команду “cfx”.

Создаем первый свой Hello World для FireFox

Проделав все манипуляции из последнего пункта мы оказались в консоли SDK Jetapck для разработки эддонов к Firefox. Создаем папку для нашего первого проекта и создаем в ней автоматом скелет проекта:

cd ..
mkdir helloworld
cd helloworld
cfx init

После последней команды создаться скелет проекта для дополнения Firefox в папке helloworld, Вы увидите в консоли несколько строк о создании папок и файлов и финальную строчку “Your sample add-on is now ready”. Консоль не закрывая, сворачиваем, она нам скоро понадобится. Для работы с файлами проекта идем в “Проводнике” в созданную папку эддона, где увидим примерно такую картину:

В корне мы видим файл package.json, откройте его в любом редакторе – это файл с параметрами проекта, такими как, название, описание, версия, автор, иконка и т.д., изменять данный файл можете как угодно, на нем останавливаться не будем. Папка data пригодится нам в будущем для различных сопутствующих дополнению файлов, картинки, скрипты, стили, база данных – все можно смело складывать сюда.  Нам сейчас нужна папка lib, в ней мы найдем основной стартовый файл проекта main.js, именно с него и начинается проект. Открываем файл main.js и пишем код нашего Hello World:

var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");
 
var button = buttons.ActionButton //создаем кнопку на панели файрфокса
(
  {
    id: "mozilla-link",
    label: "Say Hello",
    icon: {
       "16": "./icon-16.png",
       "32": "./icon-32.png",
       "64": "./icon-64.png"
    },
    onClick: handleClick
  }
);
 
function handleClick(state) //событие нажатия на кнопку
{
    tabs.open("//www2.latech.edu/~acm/HelloWorld.shtml"); //открытие вкладки и сайта в ней
}

Как видно из комментариев в коде, дополнение создает кнопку на панели со своей иконкой, по нажатию на кнопку происходит создание новой вкладки и открытие сайта Hello World! Финальный штрих перед запуском к тестированию, положите эти три иконки в папку data:

Как вы видите, имена у этих иконок те самые, что указаны для нашей кнопки в коде.

Возвращаемся в предусмотрительно не закрытую ранее консоль, если закрыли, то просто вновь откройте cmd пройдите в папку SDK bin активируйте его active и пройдите снова в папку с нашим эддоном helloworld. Собираем и запускаем проект командой cfx run . Пробежит несколько строчек и откроется Firefox, в правом верхнем углу, возле иконки “Домой” мы увидим и нашу кнопку, нажимаем, радуемся положительному результату!

После того, как мы написали наш Add-on и готовы его паковать к распространению и установке в браузер выполняем в консоли SDK команду cfx xpi, чем создаем в корневой папке проекта helloworld.xpi файл – это билд нашего дополнения, готовый к установке. Проверьте его, просто перетащите файл в окно браузера и отпустите – Firefox подхватит установку и проведет инсталляцию дополнения. Если захотим удалить расширение, идем в “Инструменты” -> “Дополнения” -> “Расширения” и тут найдем наш “helloworld”. Результат того, что мы с вами построили сегодня можно Скачать.

Всем спасибо. Пишите, если интересно видеть статьи по теме разработки расширений для браузера Firefox.