Как написать дополнение для firefox

• 1.5 — минимальная версия Firefox, с которой будет работать ваше приложение. Обратите внимание, что указать здесь какой-либо номер не значит автоматически сделать расширение работающим с этой версией. Это лишь означает, что вы, как разработчик, утверждаете, что расширение будет работать с ней, а вот будет ли так, зависит только от вас.

• 2.0.0.* — максимальный номер версии Firefox. * означает, что включаются все версии, имеющие вид 2.0.0.x, где x — любое число.

Расширение браузера с помощью XUL

Интерфейс Firefox написан на XUL и JavaScript. XUL — это язык, основанный на XML. Он отвечает за визуальную часть интерфейса. JavaScript реализует функциональность через привязку к действиям пользователя.

Так как визуально браузер строится на XUL, то, следовательно, он весь представляется в виде XML-файла. Вы можете посмотреть на него (это будет полезно для четкого понимания своих дальнейших действий). Зайдите в папку установки Firefox, откройте там папку chrome. В ней будет browser.jar . Несмотря на расширение, этот файл — обычный zip-архив. Внутри него вы найдете файл content/browser/browser.xul . Открыв его, можно полюбоваться на общую структуру визуальной части браузера. Пусть вас не смущает большое количество непонятных пока строк — во всем разберетесь позже. Собственно, корневым узлом этого XML-файла являетcя элемент window , содержащиеся в нем узлы — это отдельные элементы интерфейса. Например, вы можете найти кнопку обновления страницы (поищите узел с id=»reload-button» ) или пункт меню «Правка» ( id=»edit-menu» ).

Так вот, суть расширения интерфейса браузера состоит в том, что мы берем некий узел из браузера, описываем его в своем файле с необходимыми нам изменениями, например, добавляя к нему новые дочерние узлы. Таким образом можно добавить новые кнопки в панель инструментов (или создать новую панель и поместить ее в нужное место), добавить новый пункт меню (как рядом со «Справкой» так и в подменю, скажем, «Инструменты» (Tools)). Это технология называется en:XUL Overlays.

В нашем случае мы добавим новый элемент в строку статуса. В файле browser.xul можно найти узел с id=»status-bar» . Это и есть строка статуса. В этом узле есть несколько дочерних узлов. Добавим к ним наш, который будет описывать новую панель. Создайте файл, назовите его, скажем, sample.xul и поместите в папку chrome/content . Внесите туда такой код:

Здесь с id=»status-bar» является «точкой склейки» (merge point), т.е. узлом, который мы намереваемся изменить. — новый виджет, который мы добавляем в .

URI Chrome

XUL-файлы (вроде того, который мы только что создали) загружаются через URI протокола chrome://. Вместо того, чтобы каждый раз определять место установки Firefox’а и загружать файлы через file:// , можно загружать их через chrome:// , не беспокоясь об их истинном положении на диске.

Так, окно браузера, которое мы недавно просматривали, находится по адресу chrome://browser/content/browser.xul . Можете попробовать ввести его в адресную строку и посмотреть на результат.

URI хрома состоит из нескольких частей:

• протокол chrome говорит, что необходимо классифицировать и обработать содежимое файла как хром.
• название пакета (в данном случае, это browser ), указывающий на «сверток» (bundle) компонентов интерфейса. Это название уникально для каждого приложения/расширения.
• тип запрашиваемых данных. Есть три типа: content (XUL, JavaScript, XBL Bindings и др., т.е. компоненты, формирующие вид и поведение интерфейса), locale (DTD, файлы propeties и т.п., производящие локализацию интерфейса) и skin (CSS и изображения для формирования темы интерфейса).
• файл для загрузки.

Так, например, chrome://foo/skin/bar.png загружает файл bar.png из секции skin пакета foo .

Создание манифеста chrome

Для хорошего понимания манифеста просмотрите статью en:Chrome Manifest

Откройте chrome.manifest , созданный нами ранее и добавьте в него следующее:

Не забудьте завершающий слеш.

1. тип данных в пакете chrome,
2. название пакета (используйте лишь строчные буквы),
3. путь к файлам пакета.

Таким образом, здесь мы говорим, что файлы типа content для пакета sample можно найти в chrome/content (путь относительно местоположения chrome.manifest ).

Сохраните файл. Позже, при запуске Firefox, пакет chrome вашего расширения будет зарегистрирован с помощью этого файла.

Регистрация оверлея

Для того, чтобы Firefox понял, что у нас есть оверлей и мы хотим наложить его на окно браузера, необходимо зарегистрировать оверлей через все тот же chrome.manifest. Добавляем в него строку

Это говорит Firefox’у, что нужно объединить sample.xul и browser.xul

Тестирование

Для начала необходимо уведомить Firefox о нашем расширении. Раньше (еще во времена Firefox 1.0) необходимо было упаковать расширение как en:XPI и установить через интерфейс браузера. Теперь же достаточно просто указать Firefox’у, где находится папка с вашим расширением — и он будет подключать его каждый раз при загрузке.

1. Найдите папку с вашим профилем. Если вы не создавали его специально, браузер использует профиль по умолчанию.
   Как найти папку с профилем.
2. Откройте папку extensions . Если ее нет, создайте ее.
3. Создайте новый текстовый файл и поместите в него лишь путь к вашему расширению (напр., C:\extensions\my_extension\ для Windows или

/extensions/my_extension/ для Unix/Linux). Сохраните файл под именем, одинаковым с id вашего расширения.

• Не забудьте завершающий слеш.
• Возможно возникновение проблем из-за знаков нижнего подчеркивания в названии; если так вышло измените его.

Теперь вы готовы к тестированию вашего расширения. Запустите Firefox. Он увидит ссылку к вашему расширению и установит его. Если все прошло успешно, вы увидите надпись «Hello, World!» в строке статуса справа. Для внесения изменений достаточно править xul -файлы и перезапустить Firefox.

Упаковка расширения

Теперь можно упаковать расширение для его дальнейшего распространиения и установки.

Создайте zip-архив из содержания корневой папки вашего расширения (но не архивируйте саму папку). Переименуйте файл, чтобы он имел расширение «.xpi» . Вот и все. Для установки достаточно перетащить файл на окно браузера.

Установка с веб-страницы

Есть несколько способов это сделать. Можно разместить прямую ссылку на xpi -файл. Однако предпочтительным является InstallTrigger method, как более удобный для пользователей.

Сайт расширений addons.mozilla.org

Сайт расширений Mozilla (http://addons.mozilla.org) является местом, где вы можете бесплатно разместить свое расширение. Сайт является надежным и удобным местом для распространения своих расширений: достаточно лишь зарегистрироваться — и вы сможете загружать свои файлы на сервер.

Регистрирование расширения в реестре Windows

В Windows информация о расширении может быть добавлена в реестр. Это дает дополнительный возможности при установке расширений. Поробнее об этом читайте здесь.

Узнайте больше об оверлеях XUL

В настоящем руководстве была затронута лишь крохотная часть всех возможностей модифицирования интерфейса с помощью XUL. Чтобы узнать больше, смотрите документацию XUL.

Локализация

Для поддержки более чем одного языка необходимо отделить локализуемые строки от основного содержания с помощью сущностей (entities) и «свертков строк» (string bundles). Гораздо проще делать это в течение разработки расширения, чем после.

Информация о локализации хранится в подпапке locale папки chrome (т.е. рядос с папкой content ). В этой папке необходимо разместить столько папок, сколько локализаций вы намерены сделать. Обычной практикой является называть папки стандартными названиями локалей: скажем, папку с английской локализацией — en-US , русской — ru-RU и т.п., что, впрочем, не является обязательным. Теперь создайте в каждой из папок файл somename.ent (или anothername.dtd ) (имя одинаково во всех папках локализаций) и заполните его соответствующим образом (показано ниже).

Локализуем наше расширение на русский и английский языки. После создания 2 папок (назовем их ru-RU и en-US ), создаем в каждой из них файл (пусть myStatusBar.ent ) Поместите в тот файл, который в папке с английской локализацией, следующую строку:

А в тот, который будет локализовать на русский язык, соответственно

Сохраните оба файла. Теперь необходимо зарегистрировать локализации. Для этого добавим в chrome.manifest следующие строки:

Теперь для использования локализации достаточно добавить в начало (однако после xml -объявления) xul -файла строку

где window — это названия корневого элемента xul -документа (в нашем случае это overlay ).

Для использования сущностей измените ваш xul -файл так, чтобы атрибут label у новой statusbarpanel был равен «&statusbarpanel.label;» .

Исследование браузера

Гораздо более простым (и эффективным) способом исследования браузера является использование DOM Inspector’а. Он позволяет полностью изучить структуру документа, загруженного в браузер. Так, например, можно загрузить вышеописанным способом browser.xul , просмотреть все его узлы и найти подходящий для наложения оверлея. Или же можно просматривать структуру своего расширения.

Отладка расширений

Инструменты для анализа расширений

Источник статьи: http://developer.mozilla.org/ru/docs/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D1%80%D0%B0%D1%81%D1%88%D0%B8%D1%80%D0%B5%D0%BD%D0%B8%D1%8F

Пишем своё расширение для браузера Mozilla Firefox

Итак, после обновления Firefox до 19 версии, полностью отвалилось горячо любимое расширение Яндекс.Бар. Не забуду напомнить, что Яндекс.Бар был заменен Яндекс.Элементами, которые понравились чуть больше, чем никому, поэтому и получили свои заслуженные 2 бала из 5ти.

Почему не понравились? Заменили адресную строку, стало неудобно просматривать почту, заменили закладки и убрали корректор адресной строки (под предлогом установки Punto Switcher, который может и хорош для обычного работника, но никак не для программиста. Поэтому и был удален почти сразу же, как установлен. Да и если можно было бы настроить, то всё равно желание пропало).

Немного погодя было решено создать свое подобное расширение, которое будет включать в себя такие плюшки, как просмотр почты и корректор адресной строки. Чтож, раз не ты, так кто другой?

Первым делом решено было не создавать свой велосипед и воскресить Яндекс.Бар, который не хотел работать в 19 версии браузера. В интернете подсказали, что расширение — это обычный zip архив. Открыли, посмотрели, ужаснулись и закрыли. Воскресить не удалось, даже при всем желании.

Тогда заходим в центр разработчика: builder.addons.mozilla.org. Я предпочел орудовать в веб-редакторе, хоть местами он иногда не очень гладко работал. Посмотрев на другие расширения, позаимствовав код и немного поняв весь смысл сея устройства, началось сначала всё со стенобитной машины и закончилось надфилем.

Билдер включает в себя 3 раздела: это раздел со скриптами (Lib), раздел с загружаемым контентом (картинки, стили и скрипты) и раздел с готовыми библиотеками (Libraries)

Кстати, вот документация: addons.mozilla.org/en-US/developers/docs/sdk/latest, добротно написанная.
Старт расширения начинается с загрузки файла main.js.
Вызывается функция: exports.main.

Что же за магия происходит в этом коде?

Первым делом подключается модуль tabs.
В данном случае он служит для того, чтобы можно было добавлять свой JavaScript код в страницу браузера.
Т.е. что у нас: при событии документа onready происходит добавление любого JavaScript кода в тело документа. В данном примере добавляется обработчик ссылок, у которых адрес начинается с mailto.

Ладно, давайте что-нибудь посложнее сделаем. Добавим-ка свою кнопку в верхний бар!
Опять же, не будем строить велосипеды, а с чистой совестью возьмем уже готовую библиотеку Toolbar Button Complete.

В ней же есть пример добавления кнопки в бар браузера. Я думаю, не стоит его сюда вываливать, т.к. там многоватенько кода.
Итак, кнопка есть, иконку поставили, всё вроде хорошо, но не очень. Как же у нас в Яндекс.Баре было? Ах да, напротив иконки еще и счетчик непрочитанных сообщений был.
Тут я разузнал несколько путей добавления счетчика:

• универсальный, но более легкий (с помощью стилей)
• не слишком универсальный, но не такой простой, как первый (с помощью canvas)

Второй способ, правда, нашелся методом тыка в интернет. Но я взял первый.
Нам известно, что верхний бар — это такой же набор элементов со своими классами, идентификаторами, свойствами и способами работы с ними.

Методом тыка типа:
было обнаружено, что методы в точности совпадают с теми, что мы обычно используем при работе с элементами сайта. Но замечу, что по стандарту браузер не знает, что такое ни document, ни window в расширениях (да и еще есть отличия).

Замечу, что разработка билдера не стоит на месте и если раньше способ получения активного окна был таким:
то сейчас всё намного легче (пример я выше привел).

Чтож, немного рассказав о особенностях, вернусь к добавлению счетчика для кнопки.
Умные люди подсказали, что по стандарту стиль поля label у кнопки равен display: none;, поэтому как-то нужно было внедрить свой css код в бар. Решение, как оказалось, не сложное (советую завернуть в файл, который будет инклюдится по мере надобности):

И в функцию exprorts.main добавляем что-то вроде (хотя добавлять можете куда угодно):

не забыв создать в контенте файл stylesheet.css.

У меня файл содержит примерно следующее:

Почему мы скрываем иконку и добавляем фон? Всё потому, что если этого не сделать, то блоки всегда отображаются как display: block, какие бы значения я не выставлял (кстати, может кто знает по этой теме?) Поэтому и приходится так хитрить.

Также столкнулся с вопросом загрузки контента с других сайтов и парсинг xml.
С первым быстро разобрался, далеко ходить не надо: Request
А вот со вторым пришлось повозиться.

Как мы знаем, получить dom xml документа можно с помощью нескольких функций:

• XMLHttpRequest — отпал, т.к. выдало ошибку кроссдоменного запроса (может я не так что-то делал?)
• DOMParser — но тут тоже пришлось повозиться

В чем собственно возня: как и с получением window, так и тут:

Вот так создание расширений для Firefox ничем не отличается от создания плагинов для jQuery 🙂

Кстати, конечное творение на сей день: CustomYandexBar, пока находится на проверке. Исходники, в них много чего полезного.

Если кому-нибудь не понравится, что использую «их» картинки, бренд или т.п. — пишите.

Источник статьи: http://habr.com/ru/post/171517/