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

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

2173-1-200x150-cПривет тем, кто решил прочитать данную статью! Ранее я выкладывал результат моего изучения разработки расширений для браузера 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». Консоль не закрывая, сворачиваем, она нам скоро понадобится. Для работы с файлами проекта идем в «Проводнике» в созданную папку эддона, где увидим примерно такую картину:

helloworld

В корне мы видим файл 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("http://www2.latech.edu/~acm/HelloWorld.shtml"); //открытие вкладки и сайта в ней
}

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

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

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

result

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

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

VN:F [1.9.22_1171]
Голосуй!
Rating: 4.7/5 (13 votes cast)
Создаем первый Add-on для Firefox в Windows, 4.7 out of 5 based on 13 ratings

3 комментария to “Создаем первый Add-on для Firefox в Windows”

  1. Спасибо тебе большое за такое подробное обьяснение

  2. V:

    Спасибо. то что нужно для первого знакомства.

  3. Иван:

    Спасибо.

    Ответьте пожалуйста на вопрос: как назначить scope при привязке события к tab-у?
    См. строки:
    // тут потеряли scope. this == tabs, а нужен текущий контейнер
    // тут this === zimMain.sdk.tabs

    console.log(‘main.js’, ‘BEG’);

    var zimMain = {
    /**
    * Контейнер для инклуда элементов SDK
    */
    sdk : {
    tabs : require(‘sdk/tabs’),
    contextMenu : require(‘context-menu’),
    buttons : require(‘sdk/ui/button/action’),
    simpleStorage : require(‘simple-storage’),
    pageMod : require(‘page-mod’),
    querystring : require(‘api-utils/querystring’)
    },
    application : {
    /**
    * Код, обслуживающий главное меню.
    */
    menu : {
    run : function() {
    console.log(‘main.js’, ‘zimMain/menu/run’, this);
    }
    },
    /**
    * Код, обслуживающий панель инструментов.
    */
    panel : {
    buttons : {
    visitMozilla : {
    item : null,
    handler : function() {
    console.log(‘main.js’, ‘zimMain/handlerButtonClick’, this);
    //tabs.open(‘https://www.mozilla.org/’);
    }
    }
    },
    createMenu : function() {
    console.log(‘main.js’, ‘zimMain/panel/createMenu’, this);
    this.buttons.visitMozilla.item = zimMain.sdk.buttons.ActionButton({
    id : ‘mozilla-link’,
    label : ‘Visit Mozilla’,
    icon : {
    ’16’ : ‘./icon-16.png’,
    ’32’ : ‘./icon-32.png’,
    ’64’ : ‘./icon-64.png’
    },
    onClick : this.buttons.visitMozilla.handler
    });
    },
    run : function() {
    console.log(‘main.js’, ‘zimMain/run’, this);
    this.createMenu();
    }
    },
    tabs : {
    handlers : {
    tab : {
    pageshow : function (tab) {
    console.log(tab.url + ‘ is loaded’);
    },
    activate : function (tab) {
    console.log(tab.url + ‘ is activated’);
    },
    deactivate : function(tab) {
    console.log(tab.url + ‘ is deactivated’);
    },
    close : function(tab) {
    console.log(tab.url + ‘ is closed’);
    },
    },
    open : function(tab) {
    // тут потеряли scope. this == tabs, а нужен текущий контейнер
    var scope = this;
    console.log(tab.url + ‘ is open’, scope, this);
    tab.on(‘pageshow’, this.tab.pageshow);
    tab.on(‘activate’, this.tab.activate);
    tab.on(‘deactivate’, this.tab.deactivate);
    tab.on(‘close’, this.tab.close);
    }
    },
    run : function() {
    // тут this === zimMain.sdk.tabs
    zimMain.sdk.tabs.on(‘open’, this.handlers.open);
    }
    }
    },
    run : function() {
    console.log(‘main.js/’, ‘zimMain/run’, this);
    this.application.panel.run();
    this.application.tabs.run();
    }
    }
    zimMain.run();

    console.log(‘main.js’, ‘END’);

Оставить комментарий