Rozšírte si Firefox a Thunderbird - sami!

1. 8. 2005 | Matej Gagyi | Programování | 21624×

Aplikácie z dielne Mozilly sa na celom svete preslávili kvalitou, množstvom funkcií a rozšíriteľnosťou. V nasledujúcej sérii článkov si ukážeme, ako si môžete rozšíriť Firefox a Thunderbird a to úplne sami!

V roku 1998 spoločnosť Netscape uvoľnia zdrojové kódy svojho prehliadača Netscape Navigator ako Open Source softvér. Časť zásluh na tom mala kniha "Katedrála a trhovisko" od Erika Raimonda, zakladateľa hnutia za Open Source Softvér.

Nový produkt dostal meno Mozilla. Hlavným cieľom vývojárov bolo vytvoriť čo možno najmodulárnejšiu aplikáciu, ako sa len bude dať. To sa im aj podarilo. Vďaka tejto modulárnosti sa Mozilla stala integrovaným prehliadačom, mailovým a IRC klientom a ešte viac.

Dnes jej dvaja mladší odľahčení bratia Firefox a Thunderbird slávia svoj veľký úspech a my si ukážeme, ako si z nich urobiť ešte praktickejších pomocníkov.

Už dnes si ukážeme jednoduchý príklad, na jeho pochopenie potrebujete čiastočne ovládať JavaScript a XML.

Pohľad zvonku

Každé rozšírenie je programom Zip zabalené do súboru s príponou "xpi". XPI je skratka "cross-Platform Installer" (multi-platformový inštalátor). Rozšírenia obsahujú nasledovnú minimálnu štruktúru:

 firefox-extension.xpi
  |- install.rdf
  `- chrome/
      `- extension.jar
          `- content/
              |- contents.rdf
              `- extensionOverlay.xul


Súbor install.rdf

V koreňovom adresári balíku sa nachádza súbor install.rdf, ktorý obsahuje všetky dôležité informácie o rozšírení: názov, popis, cieľová aplikácia a informácie o základnej štruktúre rozšírenia. Súbor je vo formáte RDF, skratka "Resource Description Format" (formát pre popisovanie zdrojov). RDF sa používa na popisovanie zdrojov dát na webe.

Komentovanú ukážku súboru install.rdf si ukážeme v tomto článku a neskôr si preberieme jeho syntax podrobnejšie.

Adresár chrome

Adresár chrome je koreňovým adresárom pre väčšinu dát rozšírenia. V súbore install.rdf definujeme všetky cesty k dátom relatívne od tohto adresára.

Súbor extension.jar a jeho obsah

Názov súboru extension.jar, ktorý som zvolil, je len príklad. Zväčša sa tento súbor pomenováva rovnako ako rozšírenie a xpi súbor. Pozor! Názov tohto adresára by nemal obsahovať veľké písmená, pretože ja som s tým mal vždy problémy, tie si rozoberieme v ďalších dieloch článku.

Súbor je komprimovaný programom Zip, ale môže to byť aj normálny adresár. Pri vývoji odporúčam používať adresár, aby ste si zjednodušili prístup k dátam.

Presný názov súboru/adresára a cesty k dátam v ňom uloženým si môžeme špecifikovať v súbore install.rdf. Taktiež môžeme celú adresárovú štruktúru od adresára chrome vypustiť. V tomto prípade jednoducho v súbore install.rdf na miesta, kde normálne píšeme cesty k súborom, nenapíšeme nič.

Adresár content a iné

Do tohto adresára zvyčajne ukladáme všetky súbory typu XUL a JavaScript. V štruktúre som pre jednoduchosť neuviedol adresár skin, v ktorom sa nachádzajú CSS (štýly), obrázky a iné médiá a adresár locale, v ktorom sú lokalizované texty. V ďalších článkoch si ich doplníme.

Súbor contents.rdf

Súbor contents.rdf sa musí nachádzať vo všetkých adresároch, ktoré určíme v súbore install.rdf (zvyčajne content, skin a locale). V tomto súbore špecifikujeme, ktoré súbory explicitne menia správanie a vzhľad cieľovej aplikácie. Jeho komentovanú ukážku si ukážeme dnes a hlbšie si jeho formát preberieme neskôr.

Pohľad z vnútra

Teraz si ukážeme, ako také ukážkové rozšírenie vytvoriť, nainštalovať a upravovať. Úplne na začiatok si však pripravíme prostredie pre bezpečné testovanie rozšírenia. Zo začiatku sa mi často stávalo, že rozšírenia som musel odstraňovať ručne.

Testovacie prostedie

Inštalácia

Pokiaľ máte chuť, skompilujte si Firefox so zapnutým odlaďovaním. Užívateľom Gentoo stačí spustiť emerge nasledovným spôsobom pod užívateľom root:

USE="debug" emerge mozilla-firefox

Kompilácia je zdĺhavá, lenže pokiaľ sa chcete vývoju rozšírení naozaj venovať, Firefox vám poskytne omnoho viacej užitočných hlášok ako bez zapnutého odlaďovania.

Profil

Špeciálne na účely testovania si vytvoríme vo Firefoxovi profil s oddelenými užívateľskými nastaveniami. Spusťte Firefox z konzoly s parametrom -p:

firefox -p

Otvorí sa vám malé okienko manažéra profilov. Vytvorte si nový profil, napríklad "dev" a nastavte mu cestu k užívateľským nastaveniam niekde vo svojom domovskom adresári, napríklad ~/fdev.

Ak nechcete, aby sa vás Firefox stále vypytoval na profil, v ktorom ho chcete spustiť, a nespúšťal sa vám stále v testovacom profile, začiarknite políčko "Don't ask at startup" a v testovacom profile ho spúšťajte z konzoly príkazom:

firefox -p dev

Nástroje

Aby sme nemuseli upravovať konfiguračné súbory, nainštalujeme si do testovacieho profilu rozšírenie "Extension Developer's Extension", ktoré nájdete na stránke Teda Mielczareka.

Pomocou tohto rozšírenia si zapneme voľbu "Toggle debugging prefs".

Odporúčam si toto rozšírenie najprv stiahnúť na disk a až potom inštalovať. Môže sa stať, že v zápale hľadania chyby v rozšírení vymažete celý testovací profil.

Tutoriál AbcLinuxu.cz

Pre jednoduchosť si vytvoríme na disku zjednodušenú adresárovú štruktúru rozšírenia a do súborov vložíme text z nasledujúcich výpisov:

 abc_tutorial-1/
  |- install.rdf
  `- chrome/
      `- content/
          |- contents.rdf
          `- abcTutorialOverlay.xul

install.rdf

<?xml version="1.0"?>

<!-- Hlavička RDF súboru -->
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:em="http://www.mozilla.org/2004/em-rdf#">
 
 <!-- Popis našeho rozšírenia -->
 <Description about="urn:mozilla:install-manifest">
  
  <!-- Identifikátor oddeluje každý balík od ostatných.
   Generuje ho program uuidgen, ale pre naše účely potrebujeme
   jednoduchý názov -->
  <em:id>abc_tutorial</em:id>
  
 <!-- Meno rozšírenia, verzia, popis a autor -->
  <em:name>Abc Tutorial</em:name>
  <em:version>0.0</em:version>
  <em:description>Tutorial z Abclinuxu.cz</em:description>
  <em:creator>Vy</em:creator>
  
  <!-- Teraz určíme, ako vyzerá naše rozšírenie -->
  <em:file>
   <!-- Za poslednou dvojbodkou sa nachádza cesta (relatívne od
    adresára chrome) k '.jar' súboru alebo adresáru s dátami
    rozšírenia, my sme ho vynechali -->
   <Description about="urn:mozilla:extension:file:">
    <!-- Naše rozšírenie obsahuje balík, ktorý sa nachádza
     v adresári content -->
    <em:package>content/</em:package>
   </Description>
  </em:file>
  
  <!-- Ešte musíme povedať, ktorú aplikáciu chceme rozširovať -->
  <em:targetApplication>
   <Description>
    <!-- Toto je ID firefoxu. ID nášho rozšírenia by malo vyzerať
     podobne, len s inými číslami -->
    <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
    
    <!-- Verzie firefoxu, na ktorých naše rozšírenie funguje -->
    <em:minVersion>0.9</em:minVersion>
    <em:maxVersion>1.0+</em:maxVersion>
   </Description>
  </em:targetApplication>
 </Description>
</RDF>

contents.rdf

<?xml version="1.0"?>

<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
 
 <!-- Popis balíku (nie rozšírenia) -->
 <RDF:Description about="urn:mozilla:package:abctutorial"
   chrome:displayName="Abc Tutorial"
   chrome:author="Vy"
   chrome:name="abc_tutorial"
   chrome:extension="true"
   chrome:description="Tutoriál z portálu AbcLinuxu.cz"/>
 
 <!-- Náš balík sa volá 'abctutorial' -->
 <RDF:Seq about="urn:mozilla:package:root">
  <RDF:li resource="urn:mozilla:package:abctutorial"/>
 </RDF:Seq>
 
 <!-- Rozširujeme súbor chrome://browser/content/browser.xul -->
 <RDF:Seq about="urn:mozilla:overlays">
  <RDF:li resource="chrome://browser/content/browser.xul"/>
 </RDF:Seq>
 
 <!-- Súbor browser.xul rozširujeme súborom abcTutorialOverlay.xul -->
 <RDF:Seq about="chrome://browser/content/browser.xul">
 <RDF:li>chrome://abctutorial/content/abcTutorialOverlay.xul</RDF:li>
 </RDF:Seq>
</RDF:RDF>

abcTutorialOverlay.xul

<?xml version="1.0"?>

<overlay id="abc_tutorialOverlay"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
 <!-- Chceme zmenit popup menu, ktore má v aplikácii
   id='contentAreaContextMenu'. To je kontextové menu stránok.-->
 <popup id="contentAreaContextMenu">
  <!-- Pridávame položku z nápisom 'Pozdrav z AbcLinuxu.cz'. -->
  <menuitem id="abc-menuitem"
    label="pozdrav z AbcLinuxu.cz"
    oncommand="alert('Ahoj!');"/>
 </popup>
 
</overlay>

Inštalácia a vývoj

Všetky súbory sú vytvorené a my ich teraz môžeme zbaliť a balík nainštalovať. Z koreňového adresára nášho balíku spustite Zip:

cd abc_tutorial-1/
zip -r ../abc_tutorial-1.xpi .

O adresár vyššie vám Zip vytvorí súbor abc_tutorial-1.xpi. Spusťte Firefox pod testovacím profilom, cez menu, alebo vašim iným obľúbeným spôsobom ho otvorte. Objaví sa okno inštalátora a vy potvrďte inštaláciu. Ak všetko pôjde dobre, po reštarte prehliadača bude rozšírenie kompletne nainštalované a v kontextovom menu sa vám zobrazí nová položka.

Čo sa zmenilo

V adresári, ktorý ste pridelili pre testovací profil, sa po nainštalovaní rozšírenia udiala zmena - pribudol adresár ~/fdev/extensions/abc_tutorial-1. Taktiež sa zmenil súbor ~/fdev/extensions/Extension.rdf, v ňom sa skúste pohrabať, keď sa rozhodnete rozšírenie odinštalovávať ručne. To nie je náplňou dnešného článku, preto si celý postup aj funkčnosť tohto súboru vysvetlíme inokedy.

Ak chcete vykonať zmenu v súbore abcTutorialOverlay.xul a nechce sa vám stále komprimovať, inštalovať a reštartovať, jednoducho zmenu vykonajte priamo v adresári ~/fdev/extensions/abc_tutorial-1/ a z menu rozšírenia na vývoj rozšírení vyberte položku "Reload all chrome".

Nebude na škodu, ak sa v testovacom profile do ďalšieho článku zo série poobzeráte. Skúste pridávať do kontextového menu viacej položiek, stiahnite si z internetu ďalšie rozšírenia a skúmajte ich.

Záver a nabudúce

Dnes sme si ukázali základnú štruktúru xpi balíku, vytvorili testovacie prostredie a jednoduché rozšírenie, ale nevysvetlili sme si, na akom princípe rozšírenia fungujú.

V ďalšom článku svoju chybu napravím a porozprávame si niečo o jazyku XUL, pridáme do nášho rozšírenia ikonu pre nástrojový panel a súbor s JavaScriptom.

To sú podľa mňa pekné predsavzatia na jeden článok, máme sa na čo tešiť.

       

Komentáře

[Lukáš Zapletal]

Docela dlouho už hledám rozšíření, které by na status baru zobrazovalo informaci, jaký web server naservíroval aktuální stránku. Když už bude autor dělat další tutoriály, co třeba realizovat tento nápad? Určitě to bude zajímavé, minimálně pro mě...

[xkesh]

Docela dlouho už hledám rozšíření, které by na status baru zobrazovalo informaci, jaký web server naservíroval aktuální stránku.

neco takoveho?

[Viktor Lieskovsky]

Skus Header Monitor.

[Marcel Šebek]

Ten soubor se jmenuje content.rdf nebo contents.rdf?

[Yin]

contents.rdf

To je častá chyba... hned sa dohodnem s Róbertom, nech to opraví... dik za upozornenie.

[victor8]

Pekny clanok, k dokonalosti mu este chyba:

hned v uvodniku - s/dieľne/dielne/
3. odstavec - s/odľahčený/odľahčení
Pohlad zvnutra -testovacie prostredie - profil - s/konzoli/konzoly
Pohlad zvnutra -testovacie prostredie - nastroje - s/pak/potom
Instalacia a vyvoj - s/spuste/spusťte alebo spustite

[Robert Krátký]

Dík.

[victor8]

Este jedna:
Pohlad zvnutra - testovacie prostredie - profil - 3.odstavec - s/konzoli/konzoly

[Undertaker]

Este jeden preklep hned na zaciatku "V roku 1998 spoločnosť Netscape uvoľnia"

s/uvoľnia/uvoľnila .

[ondrej ivanic]

Toto je ID firefoxu. ID nášho rozšírenia by malo vyzerať podobne, len s inými číslami

podobne cisla celkom rad vygeneruje 'uuidgen', v gentoo je v baliku sys-fs/e2fsprogs

[Yin]

podobne cisla celkom rad vygeneruje 'uuidgen', v gentoo je v baliku sys-fs/e2fsprogs

Napisal som to v tom istom subore:

<!-- Identifikátor oddeluje každý balík od ostatných. Generuje ho program uuidgen, ale pre naše účely potrebujeme jednoduchý názov -->

[Ján Letko]

Kedy bude pokracovanie ? Chcelo by to ukazat ako na nejaku lite aplikaciu a potom sa uvidi.

Skvele, pokracujte, toto mi chybalo

[Yin]

O týždeň... oddelené okná si tak skoro nepreberieme. Ešte sa musíme o Mozille veľa učiť. Ak Vás to veľmi zaujíma, tak xulplanet je asi čo hľadáte... v tejto sérií však budeme robiť zaujímavejšie veci... :)

[Mazarik]

Mozno este czilla.cz a sekcia pre vyvojarov :)

[emilk]

na http://www.xulplanet.com/tutorials/xultu/xulfile.html se pise, ze staci manifest file

[lubos]

Mam maly problemik, ak to tu este niekdeo sleduje kto by mi odpovedal. Tym problemom je windows , neviete ako v nom vytvorim noveho uzivatela vo firefoxe lebo "firefox -p" v prikazovom riadky iba spusti firefox

[orhor]

firefox -profilemanager

[Tronza]

V FF3 + Win jsem si zkusil udělat tento extension, ale nejel mi až jsem změnil v contents.rdf

chrome:name="abc_tutorial" na  chrome:name="abctutorial"

Jméno musí být stejné s částí cesty v RDF:li . Jinak to v FF3 jede, struktura XULU se v tomto nezměnila, změnily se javascripty na vyvolání položek atd.