Новости о браузере Firefox, и о Mozilla в частности. http://firefox-me.ru

Пишем первое свое расришение для Firefox на голом HTML5

25th Май 2014 ;)








Забудьте про XUL, теперь FireFox позволяет писать расширения для своего браузера на так называемом HTML5 (это HTML+CSS+JavaScript)

Вот что получится в результате нашего примера:

Это кнопочка, по нажатию которой открывается URL вот и все.

А вот код который я собственноручно скпопипастил с официального сайта. Это так скажем такой Hello World для расширений FireFox на HTML5.








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("http://www.mozilla.org/");
}

Теперь о сложностях жизни при разработки расширений, я перечислю все проблемы с которыми я столкнулся создав это расширение по примеру на сайте https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials

Пояснения к коду

Что такое sdk/ui/button/action и sdk/tabs я не знаю на данный момент, однако тут всем понятно что это какие-то Мозилловские наработки которые позволяют взаимодействовать JavaScript и FireFox. Справочник по ним где-то тут: https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials

В код есть ссылки на картинки, да они есть в примере, расширение без картинки — это будет плохо, а 3 штуки их видимо на всякий случай в разных разрешениях =)

./icon-64.png

По сути сердцем расширения является строка:

tabs.open("http://www.mozilla.org/");

Ясно что она делает и без меня.

Куда класть этот файл и какие файлы еще нужно ?

Как вы возможно знаете нынешняя мода на MVC, какие-то структуры папок теперь присутствует даже в Хеловорлдах. Писали расширения для Хрома, Оперы ? Там тоже самое, нужно создать 100 папок и 100 пустых файлов, манифесты и XMLи. 

FireFox не отличиляс особенно ничем, куча папок и файлов так же нужна, однако Мозилла придумала утилитку, которая по сути одной кнопкой создает для вас всю структуру, вам остается только добавлять картинки и писать само расширение на JavaScript. 

Утилитка кстати написана на Python.Называется она cfx и находится она в  ADD-on SDK =) Поэтому для работы вам нужно будет установить еще Python 2.7 (Как у меня). И не забудьте Питончик занести в пути %PATH% вашей Винды, а то ничего не выйдет.

Что бы начать писать расширение для FireFox вам придется скачать Add-on SDK, запустит там activate.bat и из него уже запускать команду cfx (все описано тут https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Installation )

activate.bat — это утилитка что-то там активирует и становится возможным работать с расширениями через утилитку cfx.

А вот сама cfx — и работает с проектами расширений, т.е. она умеет создать структуру папок и файлов, запустить расширение на отладку, собирать расширение для отправки в Маркет, выводить ошибки и т.п.

Вот все про cfx: https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/cfx

Как создать расширение для FireFox новичку ?

Созданное раширение это гора файлов и папок, что бы передать расширение другу, или в маркет нужно создать .xpi файл (по сути это zip архив)

Для этого наберите команду cfx xpi

После этого в папке расширения появится файлик, который вы можете раздавать и устанавливать.

Как установить созданное расширение в браузер FireFox ?

просто перетаскиваете его в браузер, или открываете его Ctrl+o








Сегодня: 2017.10.22