Следующий пост -

Создание расширения для Firefox

Рубрика: Без категории, Дата: 22 June, 2015, Автор:

add-on sdkЗдорова!

Решил написать плагин для Firefox. Там для этого существует несколько типо инструментов, вроде как щас популярно использовать Add on SDK вот ссылка на то где расписано как его скачать, установить и настроить. https://developer.mozilla.org/ru/Add-ons

1. Установка add-on SDK на виндовс

Пользуемся инструкциями по этой ссылке https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Installation

Мы скачиваем архив с самим add-on zip.архив , разархивирываем его в какую либо папку. Так же нам нужно установит Python версией 2.5, 2.5, или 2.7 , если вы установите версию 3.x то у вас ничего не заработает. Python нужную версию скачиваем отсюда Python.

Дальше заходим в корневую директорию где находится файлы с нашим Add on SDK и в командной строке прописываем следующую команду на выполнение bat файла

bin\activate

и мы как бы попадаем в само SDK от то что у нас происходит, мы наблюдаем на скрине ниже

add-on-sdkЭто означает что add on SDK мы установили успешно. Теперь разберемся как в нем работать.

2. Работа в add on SDK, создание первого расширения

и так разберем простые команды которые есть, там есть команда

cfx

от когда ее вводим у нас выводится информация список ключи и всякая фигня, типо команды которые можно использовать. Можете почитать, я их не знаю и не тестил. От здесь описаны какие то команды можете почитать https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/cfx

Создаем первый Add-on свой, как это делается приведен пример по ссылке https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_started

Для того чтобы создать add-on мы в командной строке прописываем следующие команды

mkdir my-addon
cd my-addon
cfx init

И у нас в командной строке получается следующее

add-on1в нашей папке с SDK создастся папка my-addon1 и там в ней будет папки и файлы

add-on-sdkв папку data добавляются изображения и всякая фигня, в папке lib у нас находится самый главный файл main.js в него мы добавляем следующий код:

var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");

var button = buttons.ActionButton({
  id: "mozilla-link",
  label: "Visit Mozilla",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: handleClick
});

function handleClick(state) {
  tabs.open("https://www.mozilla.org/");
}

дальше сохраняем тир изображения в папку data

icon-16 icon-32 icon-64Соответственно у них названия icon-16.png, icon-32.png, icon-64.png

и в командной строке пишем следующую команду

cfx run

у нас запустится окошко firefox в котором будет кнопочка нашего расширения по клике на которой мы попадем в на страницу http://www.mozilla.org/

add-on-sdk

все это наш первый add-on самый простой, теперь его нужно упаковать.

3. Упаковка расширений в xpi

для того чтобы упаковать мы прописываем в командной строке

cfx xpi

и у нас показывается что все успешно создано

add-on-sdk1в папке my-addon1 у нас появился файл my-addon1.xpi, дальше этот файл добавляется в качестве расширения в firefox, для этого заходим в firefox и нажимаем Ctr-O (команда открытия файла) выбираем наш файл my-addon1.xpi в общем устанавливаем расширение.

Подведем итоги

На этом в принципе все, расширение у нас установлено. Основные команды add on SDK это несколько cfx init, cfx run и cfx xpi . init создает, run выполняет, а xpi делает архив.  и создаем папочку с аддоном это mkdir my-addon.

Кому что не ясно спрашивайте в комментариях. тему дальше я буду развивать. В принципе дальше идет уже видимо программирование создание кода на JavaScript, еще нужно наверно знать архитектуру приложения где что и как находится, что буду дальше делать я сюда буду добавлять. Но это как бы основное как создается расширение для фаерфокс с использованием add on SDK 🙂

[youtube]https://www.youtube.com/watch?v=K_lLqNxyAOw[/youtube]

 

Комментарии:

  • Nix

    Сейчас версия мозиллы 53.*
    на ней работает данный способ?
    у меня на этапе “cfx run”, запускается браузер, но добавленных картинок нет, и в командной строке пишет какие то ошибки но не такие как у вас.
    Плюс нет строки Program terminated successfull, вообщем cmd замирает и больше никаких команд вписать нельзя.


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

Your email address will not be published. Required fields are marked *