Rozšírte si Firefox a Thunderbird - sami! - 3

15. 8. 2005 | Matej Gagyi | Programování | 8496×

Váš Firefox sa má dnes na čo tešiť! Napíšete pre neho prvé užitočné rozšírenie, urobíte prvé kroky k pochopeniu JavaScriptu a ak ste si dali námahu riešiť domácu úlohu z minulého dielu, možno si zapíšete do žiackej knižky jednotku.

Každý z nás sa už isto teší na nový tutoriál, pretože som sľúbil, že konečne bude užitočný. Na splnenie tejto úlohy je potrebný JavaScript, takže o ňom začneme malú debatu, ktorá bude mať ešte veľa pokračovaní.

LiveScript, JavaScript, JScript, ECMAScript

JavaScript prvotne vyvíjal Brendan Eich v Netscape Communications Corporation pod menom Mocha, neskôr LiveScript. Meno JavaScript získal v časoch, keď Netscape začleňoval do svojho prehliadača interpreter jazyka Java. JavaScript sa na svetlo sveta dostal v roku 1995 v prehliadači Netscape verzie 2.0B3.

Java a JavaScript sú pritom úplne odlišné jazyky. Zatiaľ čo Java je objektovo orientovaný jazyk, JavaScript je prototypový jazyk, podobný jazyku Self. Jediné, čo majú tieto jazyky spoločné, je podobná syntax, zdedená po jazyku C.

Spoločnosť Microsoft implementovala jazyk JScript, ktorý čiastočne pripomínal jazyk kompatibilný s JavaScriptom. Netscape nechala JavaScript štandardizovať organizáciou ECMA. Výsledkom bol ECMAScript (ECMA-262), ktorý zaručil svojim implementáciám (JavaScriptu a JScriptu) zdarnú budúcnosť.

JavaScript je zaujímavý jazyk, ktorý je neprávom opovrhovaný kvôli svojej nízkej rýchlosti a problémom, ktoré niekedy na internetových stránkach spôsobuje. O tom, že JavaScript nie je, ako sa hovorí "internetový jazyk", si porozprávame nabudúce.

Tutoriál

Tutoriál "Abc3" už obsahuje veľa kódu a do článku by sa nezmestil, preto si musíte stiahnúť súbor abc3tutorial.tar.bz2. Ešte pripomeniem, ako tento balík rozbaliť a nainštalovať:

$ tar -xjvf abc3tutorial.tar
$ cd abc3tutorial/
$ make

V adresári abc3tutoriál nám make vytvorí súbor abc3.xpi, ten otvorte cez Firefox a rozšírenie sa nainštaluje samo. Po inštalácii je potrebný reštart Firefoxu.

Čo to bude robiť?

Rozšírenie dnešného tutoriálu je jednoduchý nástroj užitočný pri navigácii na internete. Rozšírenie vytvorí ikonu pre nástrojovú lištu Firefoxu a nový bočný panel. Ikona na nástrojovom paneli otvára bočný panel, v ktorom sa objavia všetky odkazy na práve prezeranej stránke zoradené podľa abecedného poradia.

Priznám sa, že je to môj prvý bočný panel a chvíľu mi trvalo, kým som pochopil chybu, ktorú vypisuje konzola pre JavaScript. Po jej pochopení som bol dosť prekvapený, ako málo vlastne svoj prehliadač poznám.

Preto som sa rozhodol, dať vám ďalšiu domácu úlohu. Zadanie:

Objavte a pochopte, prípadne vyriešte chybu, ktorú rozšírenie vypisuje do konzoly JavaScriptu.

Riešenie bude základom nasledujúceho tutoriálu.

Ako to funguje?

Zanedbateľné zmeny nastaly v súboroch install.rdf. Pribudol adresár chrome/skin/classic/, do ktorého som premiestnil obrázky a CSS štýly a vytvoril som súborcontents.rdf.

Dôležité sú riadky, ktoré pribudli do súboru abc3overlay.xul. Pribudol nám súbor abc3sidebar.html, ktorý tvorí ľahkú kostru bočného panelu, a súbor abc3.js sa zmenil celý.

install.rdf

V súbore install.rdf sa zmenila položka em:id. Id, čiže identifikátor, má oddeliť rozšírenie od zvyšku sveta, a preto by malo mať jedinečnú hodnotu.

Jedinečné identifikátory ochotne generuje program uuidgen. Vždy, keď ho spustíte, s najvyššou pravdepodobnosťou vypíše taký reťazec, aký ešte nikdy nevypísal. Preto by ste ho nemali spúšťať často, lebo miniete všetky identifikátory sveta :)

Podľa konvencie by sme mali identifikátor vygenerovaný programom uuidgen obaliť do zložených zátvoriek '{' a '}':

$ uuidgen
32f222bc-8290-4cšb-b36c-3de248fa0ešd

Po nainštalovaní rozšírenia sa v profile už nevytvorí adresár abc3tutorial/, ale {32f222bc-8290-4cšb-b36c-3de248fa0ešd}/.

Pridal som nášmu rozšíreniu skin, vďaka ktorému bude vzhľad nášho rozšírenia flexibilnejší.

<em:skin>skin/classic/</em:skin>

contents.rdf

V tutoriáli z minulého dielu manažér nástrojového panelu nezobrazil ikonu nášho rozšírenia správne. Pridal som teda popis prekrytia okna manažéra nástrojového panelu naším CSS štýlom.

Firefox tentokrát všetko pochopí a ikona sa bude zobrazovať správne.

abc3overlay.xul

Teraz sa sústreďte, musíme si vysvetliť, ako funguje broadcaster.

Broadcaster je objekt, ktorý môžu iné objekty sledovať. Tieto objekty nazveme observermi. Objektom je v našom prípade každý XUL element.

Do elementu <broadcaster> môžete zapísať akékoľvek atribúty, ktoré budú jeho observery zdieľať. Pri zmene zdieľaného atribútu na jednom z observerov sa jeho hodnota prenesie na všetkých ostatných observerov.

Navyše broadcaster notifikuje všetkých observerov o zmene vyslaním udalosti. Náš broadcaster okrem zdielaných atribútov obsahuje aj informácie, ktoré potrebuje Firefox na otvorenie bočného panelu:

<broadcasterset id="mainBroadcasterSet">
  <broadcaster id="viewAbc3Sidebar"
   autoCheck="false"
   label="Abc3 - sumarizacia odkazov"
   type="checkbox"
   group="sidebar"
   sidebarurl="chrome://abc3/content/abc3sidebar.html"
   sidebartitle="Abc3 odkazy"
   oncommand="toggleSidebar('viewAbc3Sidebar');"/>
</broadcasterset>

Observermi som učinil položku v menu "View" a ikonu nástrojového panelu, ktorú sme v minulom diele vytvorili. Pridal som im atribút observes a jeho hodnotu nastavil na hodnotu atribútu id broadcastera:

<menupopup id="viewSidebarMenu">
  <menuitem observes="viewAbc3Sidebar"/>
</menupopup>

Kedže broadcaster zdieľa atribút oncommand a ten sa prenáša aj na položku v menu, aj na ikonu nástrojového panelu. Broadcaster je najlepšie použiť vždy, keď potrebujete zvýšiť znovupoužiteľnosť kódu a redukovať jeho neprehľadnosť.

abc3sidebar.html

Tento súbor je obyčajný prázdny HTML súbor, ktorý sa odkazuje na súbor s JavaScriptom abc3.js. Mohol som použiť aj XUL súbor, ale HTML je jednoduchšie. V jednoduchosti je krása.

Zvyšok o tomto súbore vysvetlím v spojení so súborom abc3.js.

abc3.js

V HTML súbore v elemente <body> nájdete atribút onload. Jeho hodnota je JavaScript, ktorý sa spustí hneď po načítaní stránky. V našom prípade sa odkazuje na funkciu init().

function init() {
  Abc3.showLinks();
}

Prototypový model ECMAScriptu

Aby som ukázal "pravú tvár JavaScriptu", vybral som si konkrétny súbor konvencií, pomocou ktorých demonštrujem jeho odlišnosti od objektovo orientovaných jazykov.

Pokúsim sa načrtnúť hranice štandardu a implementácie jazyka. Preto použijem názov ECMAScript všade tam, kde budem hovoriť o rysoch jazyka, nie o implementácii vo Firefoxe.

Ako prvý vytvorím objekt Abc3. ECMAScript nepozná triedy, len objekty.

Abc3 = new Object();

Objekt má bližšie nešpecifikovaný prototyp, ktorý sa počas chodu programu môže meniť. Prototyp je skupina všetkých premenných objektu, ku ktorým sa pristupuje pomocou notácie objekt.premenná, alebo objekt[kľúč].

Aj funkcie sú objekty. Vytvoríme teda jednu premennú objektu Abc3 a nastavíme ju ako funkciu:

Abc3.linkList = function() {
  this.linkAry = null;

  this.create = function(node) {
    var nodes = node.evaluate(".//a", node, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
    this.linkAry = new Array(nodes.snapshotLength);

    for(var i = 0; i < nodes.snapshotLength; i++) {
      var a = nodes.snapshotItem(i);
      this.linkAry[i] = new Object();
      this.linkAry[i].name = a.innerHTML;
      this.linkAry[i].url = a.href;
    }

    this.linkAry.sort(function(a, b) { return b.name - a.name; });
  }
}

Funkcia linkList() je konštruktor. To neznamená v ECMAScripte vlastne nič špeciálne. Konštruktor len vytvára premenné v špeciálnej premennej this. Ak zavoláte konštruktor z funkcie, ktorá patrí nejakému objektu A, premenná this je objekt A. Ak pred volanie konštruktoru vložíte slovo new, this je nový objekt.

Späť k tutoriálu

linkList() môžeme použiť na vytvorenie nového objektu, ktorý obsahuje premennú linkAry a funkciu create(). create() očakáva argument node a ten by mal byť reprezentácia XML elementu, pretože s ním tak narába.

Prvý riadok funkcie create() urobí XPath výber všetkých elementov <a> (odkazov) v XML podstrome premennej node. ďalej vytvorí pole, ktoré má rovnaký počet prvkov ako počet vybraných odkazov, a nakoniec do poľa vloží všetky vybrané odkazy, aby ich mohol zotriediť.

Posledná funkcia showLinks() vytvára obsah HTML stránky. Pretože sme v bočnom paneli, musíme k otvorenému dokumentu pristupovať cez objekt window.content.document. Práve prezeranú stránku predáme funkcii create(), ktorá vytvorí zoradené pole odkazov, a z neho vyskladáme HTML kód do reťazca.

Reťazec vložíme do HTML stránky v bočnom paneli priamo cez objekt document:

Abc3.showLinks = function() {
  var links = new Abc3.linkList();
  var doc = window.content.document;
  links.create(doc);
  var htmlStr = "<dl>";

  for(var i = 0; i < links.linkAry.length; i++) {
    var url = links.linkAry[i].url;
    var name= links.linkAry[i].name;
    htmlStr += "<dt><a style='color: #0000ff;' href='" + url + "'>" + name + "</a></dt>";
    htmlStr += "<dd style='font-family: monospace;'>" + url + "</dd>";
  }

  htmlStr += "</dl>";
  document.write(htmlStr);
}

Záver

Dnes sa mi sumarizácia píše nezvyčajne ťažko. Článok je aj nezvyčajne zložitý. Niet divu, pretože som za tému dňa zvolil JavaScript. Amatérskym dizajnérom internetových stránok nerobí žiadne problémy, ale skúsení programátori, ktorý sa snažia preniknúť do jeho tajov, majú z neho hlavu často v smútku.

Stretol som sa už aj z bizarnejšími jazykmi, ako napríklad Haskell, ale JavaScript u mňa stále zostáva na prvom mieste v originalite a použiteľnosti.

Záver záveru

Konečne máme prvé použiteľné rozšírenie a môžeme sa pustiť do ozajstnej práce. Rozobrali sme len najdôležitejšie časti tutoriálu, pretože sa stáva priveľkým.

Nabudúce by sme si už mali porozprávať o JavaScripte a o jeho prepojeniu s Firefoxom viac, preto tutoriál vynecháme. Najbližší diel série sa bude niesť v ľahšej, no o to príjemnejšej atmosfére. Dúfam, že sa naňho tešíte rovnako ako ja.

       

Komentáře

[petr_p]

Rad bych upozornil, ze pouziti funkce document.write() je ponekud nevhodne, protoze neni dopredne kompatibilni s XML DOM.

Je to tomu tak, protoze document.write() umoznuje vkladat libovolny kod, a tedy v pripade XML vytvorit non-wellformed dokument z dokumentu, ktery byl spravne utvoreny.

Proto byla funkce document.write() v XML modu zrusena a misto ni je nutne pouzvat metody vytvareni DOM uzlu. Ostatne tento novejsi pristup funguje i na klasicke HTML dokumenty. Navic v prave chystane verzi ECMAscriptu se pripravuji nove konstrukce, ktere by mely vyracne zjednodust praci s DOM stromem.

[Yin]

Áno, viem... lenže document.write() pozná zatiaľ viac, ľudí a nechcel som článok veľmi predĺžiť. 5-ty diel bude už opravený.

4-tý diel o ECMAScripte budeme kecať a kecať, tak mi môžete prísť urobiť kritiku :)

[Lukáš Zapletal]

Mohl by autor v příštích dílech udělat rozšíření, které by ve status baru zobrazovalo, jaký server podal daný dokument? Všechna doporučovaná rozšíření, která měla mít tuto funkčnost a byla mi zde doporučena, ji neměla.

[Yin]

Vieme sa dohodnut, ze vyhladam informacie o tom, ako sa to robi a napisem neodladene rozsirenie. To je minimum, co stiham. kontakt ICQ: 320 670 287, Jabber: yin@jabber.sk (len vecer, fw), Mail: yin {aatt} atom {ddoott} sk