Jak napisać dodatek do Firefoxa?

Jak napisać dodatek do Firefoxa, gdzie jest dokumentacja jak wygląda proces zatwierdzania dodatku i pliki oraz struktura dodatku? Dowiesz się o tym z poniższego wpisu.

Dodatek Quizy dla Firefox wylądowała już w piaskownicy i aby wydostała się do głównego katalogu potrzebuje Waszych ocen. Dlatego zapraszam do wypróbowania. Dodatek jest bardzo prosta – dodaje przycisk do przeglądarki, po kliknięciu którego wyświetla się losowy quiz do wypełnienia. Dodatek można pobrać i ocenić tutaj: https://addons.mozilla.org/pl/firefox/addon/247576/ z góry dziękuję za rzetelne oceny.

Quizy w Firefox

Dodatek jest dostępna na otwartej licencji, na dole strony z dodatkiem możecie podejrzeć jej źródło.

Jak napisać plugin, a właściwie jak napisać dodatek (roszerzenie) do Firefoxa? Zupełnie inaczej niż w Operze i Chrome. To na pewno.

Galeria dodatków Firefoxa ma dwa typy rozszerzeń: publiczne i w piaskownicy. Publiczne  są zweryfikowane przez ekipę Firefoxa i spełniają pewne normy m.in. liczby pozytywnych ocen i zainstalowanych egzemplarzy, natomiast w piaskownicy można umieścić każdą swój dodatek. W odróżnieniu od planów Chrome, Mozilla nie przewiduje stworzenia sklepu z dodatkami. Za to każdy autor może prosić na stronie dodatku o dotację na jej rozwój, a nawet określić cel jaki spełni za określoną, zebraną kwotę. Do obsługi dotacji trzeba mieć konto na PayPal.

Jak napisać plugin do Firefoxa

Najważniejsze linki:

Galeria rozszerzeń [PL]

Dokumentacja [PL]

Pierwsze kroki [PL]

Kreator prostego rozszerzenia [PL]

Tester dodatku [PL]

Zasady [PL]

Mozilla jest wyjątkową firmą ponieważ przetłumaczyła część materiałów na język polski. Podobne podejście obserwowałem tylko w dokumentacji Microsoftu, ale dotyczył tylko ułamka materiałów.

Czytaj podobne  Opera robi mi pod górkę z rozszerzeniem

Firefox ma ogromne możliwości w porównaniu do Chrome i Opery. Dlatego też dokumentacja jest o wiele bardziej obszerna. Albo nawet mimo to, dlatego, że istnieje wiele poradników i pełna dokumentacja API, środowiska i języka XUL, kiedy w Chrome i Operze wielu rzeczy trzeba domyślić się samemu.

Dodawanie dodatków do Firefoxa jest darmowe (w odróżnieniu od Chrome, które wymaga jednorazowej opłaty 5 dolarów od developera).

W momencie pisania tekstu w dziale Rozrywka znajdowało się 47 publicznych dodatków.

Jak napisać wtyczkę do Firefoxa?

A teraz coś dla programistów.

Budowa dodatków do Firefoxa wymaga większej inwestycji czasu na początku niż do Opery i Chrome. Podobnie jak w nich dodatek to spakowany plik ZIP ale tym razem ze zmienionym rozszerzeniem na XPI.

Do programowania stosuje się języka JavaScript, plików CSS i XUL. XUL jest podobny do HTML. Przykłady stosowane na stronie Mozilli mają często kodowanie ASCII więc kiedy robicie polskie dodatki pamiętajcie, żeby to naprawić i zmienić na UTF-8, bo inaczej przeglądarka nie zainstaluje dodatki i zgłosi mylący głos o niezgodności z wersją przeglądarki.

W dokumentacji i przykładach Mozilla wspiera kilka dobrych praktyk, co widać w strukturze dodatków w przykładach. Dodatek posiada zazwyczaj 3 foldery:

  • content
  • skin
  • locale

Folder content zawiera pliki JS które są kontrolerami i pliku XUL, które są widokami.

Folder skin zawiera grafikę i CSS. Można także tworzyć wiele skórek i używać ich w zależności od systemu operacyjnego na którym działa przeglądarka.

Folder locale zawiera zlokalizowane treści zawarte w dodatkach. Może zawierać wiele wersji językowych.

Wszystkie powyższe elementy spaja plik  chrome.manifest. Co zawiera?:

content   quizy                 chrome/content/
skin      quizy   classic/1.0   chrome/skin/

overlay   chrome://browser/content/browser.xul   chrome://quizy/content/ff-overlay.xul
style chrome://global/content/customizeToolbar.xul chrome://quizy/skin/overlay.css

Pierwsza linia wskazuje położenie foldera z treścią. Druga linia wskazuje skórkę, w następnych dwóch mamy zgłoszenia nakładek. O co chodzi z nakładkami?

Czytaj podobne  Chrome Store: kości zostały rzucone

Każdy element przeglądarki Firefox to element systemu chrome. Pamiętacie jak mówiłem o podziale na kontrolery i widoki XUL? Przeglądarka Firefox też została tak napisana. W efekcie każdy element przeglądarki czyli np. paski górne, pasek stopki, menu, elementy menu, a nawet okno przeglądania czy całe okno przeglądarki to odpowiedni widok XUL. Każdy widok XUL ma swój unikalny adres “URL”  gdzie zamiast http:// stosuje się chrome://. Jeżeli jeszcze nie jest to jasne to wpiszcie sobie w pasek adresu “chrome://browser/content/browser.xul”.

No i właśnie wracając do linii:

overlay   chrome://browser/content/browser.xul   chrome://quizy/content/ff-overlay.xul

Mówi ona, żeby nałożyć na widok przeglądarki widok ff-overlay.xul znajdujący się w dodatku. Nie powoduje to oczywiście zastąpienia całej przeglądarki. Chodzi o to, żeby dodać nowe elementy do przeglądarki. Na przykład:

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE overlay SYSTEM “chrome://quizy/locale/overlay.dtd”>
<overlay id=”quizy-overlay” xmlns=”http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”>
<script src=”overlay.js”/>
<menupopup id=”menu_ToolsPopup”>
<menuitem id=”quizy-hello” label=”Quizy”
oncommand=”quizy.zrobCosPozytecznego();”/>
</menupopup>
</overlay>

Powyższy XUL dodaje do przeglądarki pozycję menu “Quizy” i oprócz tego podpina kontroler overlay.js, gdzie będzie funkcja zrobCosPozytecznego:

var quizy = {
onLoad: function() {
this.initialized = true;
zrobCosPozytecznego: function(e) {
alert(“Witaj świecie”);
},
};

Dlaczego obiekty? Dla odizolowania się od przestrzeni nazw Firefoxa i zabezpieczenia się od kolizji nazw z innymi dodatkami. Najlepiej by było jeszcze jakby obiekt quizy posiadał bardziej unikalną nazwę np. z prefixem.

Ostatni i najważniejszy plik do publikacji to install.rdf, który posiada manifest dodatku. To odpowiednik config.xml w Operze i manifest.json w Operze:

<?xml version=”1.0″ encoding=”UTF-8″?>
<RDF xmlns=”http://www.w3.org/1999/02/22-rdf-syntax-ns#” xmlns:em=”http://www.mozilla.org/2004/em-rdf#”>
<Description about=”urn:mozilla:install-manifest”>
<em:id>quizy@quiz.pl</em:id>
<em:type>2</em:type>
<em:name>Quizy</em:name>
<em:description>Spędzaj miło czas ze znajomymi wypełniając zabawne quizy i dowiadując się więcej o sobie nawzajem</em:description>
<em:version>1.0</em:version>
<em:creator>Polishwords</em:creator>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!– Firefox –>
<em:minVersion>3.5</em:minVersion>
<em:maxVersion>4.0b8pre</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>

Czytaj podobne  Pierwsze rozszerzenie do Opery 11

W skrócie: ważne jest em:id: powinno składać się z nazwy dodatku małpy i domeny jakiejś. Chodzi o to, żeby było unikalne od identyfikatorów innych developerów.

Dalej mamy standardowo nazwę, opis (uwaga na zmianę na UTF-8 przed pisaniem), wersję dodatku i twórcę.

Ostatni fragment określa wersje dla jakich dodatek jest poprawna. Oprócz Firefoxa możemy pisać przecież dodatki do innych aplikacji Mozilli w bardzo podobny sposób, do Thunderbirda, Sunbirda, SeaMonkey i Firefox Mobile. Drobne różnie objaśnione są w dokumentacji.

Kiedy stworzycie dodatek możecie ją dodać do katalogu. Kreatory przygotowane przez Mozillę są bardzo dobre i zawierają wiele testów, które sprawdzają automatycznie czy dodatek  jest dobry i radzą co poprawić. Oprócz tego opisy tekstowe w dodatku można dodawać w wielu językach, a także na etapie dodawania dodatku można określić domyślny język przez co pojawi się w odpowiednim miejscu w katalogu.

Zachęcam Was do pisania dodatków i wrzucania ich w komentarze do wpisu!

Update: Zmieniłem “wtyczka” na “dodatek”, chociaż mogłoby być “rozszerzenie”. Ale nie “plugin” 🙂 Ściśle 😉

Jak napisał Michael wtyczki służą wyświetlaniu nowych rzeczy w przeglądarce, a rozszerzenia dodają do przeglądarki nowe funkcjonalności.

Przeczytaj też

Opera robi mi pod górkę z rozszerzeniem Bez dwóch zdań - Opera robi mi pod górę z rozszerzeniem, które dodałem do ich katalogu. Nie ma go na liście języka polskiego, nowa wersja została odrz...
Chrome Store: kości zostały rzucone Po miesiącach niecierpliwego wyczekiwania, Google uruchomiło Chrome Web Store.... tylko dla amerykańskich programistów. Zagraniczni programiści nieste...
Jak napisać wtyczkę do Google Chrome? Quizy to 55 polska wtyczka do przeglądarki Google Chrome. Opisuję materiały dostępne dla programistów, na co warto zwracać uwagę podczas pisania wtycz...
Pierwsze rozszerzenie do Opery 11 W kolejce moderacji czeka wtyczka z Quizami do opublikowanej dwa dni temu rewolucyjnej wersji alfa Opery 11 z obsługą rozszerzeń. Jednak możesz tą wty...
Napisano w Przeglądarki Tagi: , , , , ,
2 comments on “Jak napisać dodatek do Firefoxa?
  1. dex pisze:

    Plugin czy wtyczka to zupełnie co innego. Wpisz sobie w pasku adresu about:plugins, to dostaniesz ich listę. To, co ty napisałeś, nazywa się rozszerzenie.