Написване на собствено разширение за браузъра Mozilla Firefox

И така, след актуализиране на Firefox до версия 19, любимото разширение Yandex.Bar напълно отпадна. Няма да забравя да ви напомня, че Yandex.Bar беше заменен от Yandex.Elements, който харесваше малко повече от всеки друг и затова получи своите заслужени 2 точки от 5.

Първата стъпка беше решена да не създавате свой собствен мотор и да възкресите Yandex.Bar, който не искаше да работи във версията на 19 на браузъра. Интернет предположи, че разширението е обикновен zip архив. Те се отвориха, погледнаха, бяха ужасени и затворени. Не беше възможно да се възкреси, дори с цялото желание.

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

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

Примерен файл main.js:

Каква е магията, която се случва в този код?

Добре, нека направим нещо по-сложно. Нека добавим нашия бутон в горната лента!
Отново няма да строим велосипеди, но с чиста съвест ще вземем готова библиотека. Бутонът на лентата с инструменти завършен.

  • гъвкав, но по-лек (със стилове)
  • не много гъвкав, но не толкова прост като първия (с помощта на платно)

Вторият метод обаче е намерен чрез проникване в Интернет. Но взех първата.
Знаем, че горната лента е същият набор от елементи със собствени класове, идентификатори, свойства и начини за работа с тях.

Чрез въвеждане на метод:

беше установено, че методите са абсолютно същите като тези, които обикновено използваме при работа с елементи на сайта. Но отбелязвам, че по стандарт браузърът не знае какво е нито едното, нито другото документ, нито прозорец в разширения (и все още има разлики).

Имайте предвид, че разработката на строителя не стои неподвижно и ако по-рано начинът за получаване на активния прозорец беше следният:

но сега всичко е много по-лесно (дадох пример по-горе).

Е, след като поговорим малко за функциите, ще се върна към добавянето на брояч за бутона.
Умните хора предполагат, че стандартният полеви стил етикет бутонът има дисплей: няма;, така че по някакъв начин беше необходимо да приложите вашия css код към лентата. Решението, както се оказа, не е трудно (съветвам ви да го увиете във файл, който ще бъде включен при необходимост):

И във функцията exprorts.main добавете нещо като (въпреки че можете да добавите навсякъде):

като не забравяме да създадем файл в съдържанието stylesheet.css.

Моят файл съдържа нещо като следното:

Защо крием иконата и добавяме фон? Това е така, защото ако не направите това, блоковете винаги се показват като дисплей: блок, каквито и стойности да задам (между другото, може ли някой да знае по тази тема?) Следователно трябва да бъда толкова хитър.

Също така се натъкна на проблема с изтеглянето на съдържание от други сайтове и анализирането на xml.
Бързо разбрах първата, не е нужно да ходите далеч: Заявка
Но трябваше да се забъркам с втория.

Както знаем, вземете dom xml документ, използващ няколко функции:

  • XMLHttpRequest - отпадна, защото даде грешка при заявка за междудомейн (може би правех нещо нередно?)
  • DOMParser - но тук също трябваше да повожа

Каква е действителната суматоха: както и получаването прозорец, така че тук:

Ето как създаването на разширения за Firefox не се различава от създаването на приставки за jQuery:)

Между другото, окончателното създаване и до днес: CustomYandexBar, все още се тества. Изходни кодове, те имат много полезни неща.

Ако някой не харесва, че използвам "техни" снимки, марка или други подобни. - пиши.