Пишемо своє розширення для браузера Mozilla Firefox
Отже, після оновлення Firefox до 19 версії, повністю відвалилося улюблене розширення Яндекс.Бар. Не забуду нагадати, що Яндекс.Бар був замінений на Яндекс.Елементи, які сподобалися трохи більше, ніж нікому, тому й отримали свої заслужені 2 бали з 5ти.
Насамперед вирішено було не створювати свій велосипед і воскресити Яндекс.Бар, який не хотів працювати у 19 версії браузера. В інтернеті підказали, що розширення – це звичайний zip архів. Відкрили, подивилися, жахнулися та закрили. Воскресити не вдалося, навіть за всього бажання.
Білдер включає 3 розділи: це розділ зі скриптами (Lib), розділ із завантажуваним контентом (картинки, стилі та скрипти) і розділ з готовими бібліотеками (Libraries)
До речі, документація: addons.mozilla.org/en-US/developers/docs/sdk/latest/, добротно написана. Старт розширення починається із завантаження файлуmain.js. Викликається функція:exports.main.
Приклад файлу main.js:
Що ж за магія відбувається у цьому коді?
Гаразд, давайте щось складніше зробимо. Додамо свою кнопку у верхній бар! Знову ж таки, не будуватимемо велосипеди, а з чистою совістю візьмемо вже готову бібліотеку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 поки перебуває на перевірці. Вихідники, у них багато чого корисного.
Якщо комусь не сподобається, що використовую «їхні» картинки, бренд чи т.п. - пишіть.