Отже, після оновлення 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. поки знаходиться на перевірці. Вихідні тексти. в них багато чого корисного.
Якщо кому-небудь не сподобається, що використовую «їх» картинки, бренд або т.п. - пишіть.