Die Grundlagen einer Erweiterung

Die install.rdf Datei

In der letzten Lektion haben wir uns den Inhalt der Hello World Erweiterung angesehen.Jetzt werfen wir einen Blick in diese Dateien und den Code, beginnen wir mit der install.rdf Datei. Sie können diese mit jedem Texteditor öffnen.

Die Datei ist in einem speziellen Dialekt von XML, RDF genannt formatiert. RDF wird eingesetzt als ein zentraler Speichermechanismus für Forefox, aber es ist jetzt durch ein einfacheres Datenbanksystem ersetzt worden. Wir werden später in diesem Tutorial beide Speichersystem besprechen.

Nehmen wir jetzt einen genaueren Blick auf die wichtigen Teile der Datei.

<em:id>[email protected]</em:id>

Dies ist der eindeutige Bezeichner für die Erweiterung. Firefox benötigt diesen für die Unterscheidung eurer Erweiterung von anderen Erweiterungen, aufgrunddessen ist es erforderlich das Sie eine ID haben die eindeutig ist.

Es gibt zwei akzeptierte Standards für Add-on ID`s. Eine ist das E-Mail ähnliche Format in dem Hello World Beispiel, dieses sollte folgendermaßen aufgebaut sein <project-name>@<yourdomain>. Die andere standard Vorgehensweise ist die Verwendung eines erzeugten UUID-Strings, welcher sehr unwahrscheinlich duppliziert ist. UNIX-basierte Systeme haben ein Kommandozeilenprogramm mit dem Namen uuidgen das diese UUID`S erzeugt. Auch gibt es herunterladbare Anwendungen für alle Plattformen die diese gnerieren. Die umschließenden Klammern sind nur ein Teil der Notation und hierbei handelt es sich nur um die gängige Praxis. Solange Ihre ID etwas eindeutiges hat, ist es OK diese in irgendeiner Form zu verwenden.

<em:name>XUL School Hello World</em:name>
<em:description>Welcome to XUL School!</em:description>
<em:version>0.1</em:version>
<em:creator>Appcoast</em:creator>
<em:homepageURL>https://developer.mozilla.org/en-US/docs/XUL_School</em:homepageURL>

<em:localized>
  <Description>
    <em:locale>es-ES</em:locale>
    <em:name>XUL School Hola Mundo</em:name>
    <em:description>Bienvenido a XUL School!</em:description>
  </Description>
</em:localized>

Der es-Es lokale String bedeutet das dies die spanische (es) lokalisierung für Spanien (ES) ist. Sie können soviele <em:localized> Sektionen hinzufügen wie Sie benötigen. Für Friefox 2, ist die lokaliesierungs Datei etwas komplizierter. Wir werden im weiteren die lokalisierung in diesem Kapitel besprechen.

<em:type>2</em:type>

Dies bestimmt, dass das Add-on als eine Erweiterung installiert wird. Sie können die verschieden möglichen Typen in der install.rdf Spezifikation nachlesen.

<em:targetApplication>
  <Description>
    <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
    <em:minVersion>4.0</em:minVersion>
    <em:maxVersion>10.*</em:maxVersion>
  </Description>
</em:targetApplication>

Dieser Knoten spezifiziert die Zielanwendung und die Zielversion für die Erweiterung, in der Regel Firefox von Version 4 bis zu Version 10. Die UUID ist die eindeutige ID von Firefox. Ander Mozilla und Mozillabasierte Anwendenungen wie z.B. Thunderbirf und Seamonkey besitzen ihre eigene. Es ist möglich eine Erweiterung zu besitzen die auf mehreren Anwendungen und Versionen arbeitet. Als Beispiel , wenn Sie eine Firefox-Erweiterung entwickeln, wird es in der Regel wenig Aufwand erfordern diese zu SeaMonkey zu portieren, welches ähnliche Features und Benutzeroberflächen besitzt.

Die min und max Version Angabe spezifiziert den Versionbereich in dem die Erweiterung installiert werden kann. Hier gibt es mehr Informationen über das Versionsformat. Wenn die Anwendung nicht mit dem Versionsbereich übereinstimmt, wird es Ihnen nicht erlaubt sein die Anwendung zu installieren, oder die Erweiterung wird mit einem gesetzten deaktiviert Status installiert. Benutzer können Versionsüberprüfungen über die Einstellungen deaktivieren, oder durch die Installation von Add-on`s wie den Add-on Compatibility Reporter. Mit Anfang des Firefox 11, werden Add-on`s standardmäßig als kompatiel betrachtet und Firefox wird den Versionsbereich weitesgehend ignorieren. Das Testen Ihrer Add-on`s auf allen Firefoxversionen ist immer empfehlenswert.

Diese Informationen werden von Firefox und anderen Mozillaanwendungen benötigt um ein Add-on zu installieren. Jeder Fehler oder fehlende Informationen werden den Installationsprozess zum Scheitern bringen, oder die Erweiterung wird mit einem gesetzten deaktvitiert Status installiert.

The chrome.manifest File

Chrome is the set of user interface elements of the application window that are outside of a window's content area. Toolbars, menu bars, progress bars, and window title bars are all examples of elements that are typically part of the chrome.

Auszug aus der Chrome Registration.

Mit anderen Worten, Chrome ist alles was Sie im Firefox sehen. Alle Firefoxfenster können betrachtet werden als Zusammensetzung zweier Teilbereiche: (1) Chrome und (2) ein möglicher Inhaltsbereich, wie das das in Firefox die Anzeige von Webseiten übernimmt. Fenster wie das Downloadfenster sind ausschließlich Chrome. Der Großteil des Programmcodes einer Erweiterung liegt im Chromeordner, wie bei dem Hello World Beispiel.

Wie wir in der Ordnerstruktur der entpackten Erweiterung gesehen haben, Chrome ist zusammengesetzt aus drei Teilbereichen: content, locale und skin. Diese drei sind notwendig für die meisten Erweiterungen. Wenn wir die chrome.manifest-Datei erneut öffnen (nochmals jeder Texteditor kann hierfür verwendet werden), werden wir diese drei angesprochenen Teilbereiche erkennen können.

content   xulschoolhello              content/
skin      xulschoolhello  classic/1.0 skin/
locale    xulschoolhello  en-US       locale/en-US/

Die chrome.manifest Datei lässt Firefox wissen, wo es nach den Chromedateien zu suchen hat. Der Text ist formatiert so das er dem Aussehen einer Tabelle gleicht, aber dies ist nicht notwendig. Der Parser ignoriert aufeinanderfolgende Leerzeichen.

Das erste Wort in einer Zeile teilt Firefox mit, was angegeben ist (content, skin, locale, oder weiter Angaben, die später erwähnt werden). Das zweite ist der Paketname, was wir demnächst erklären werden.

Darstellungs und lokale Packete besitzen einen dritten Wert, um zu spezifizieren welche lokale oder welche Darstellung sie erweitern. Es können mehrere Darstellungs und lokale Einträge für unterschiedliche Darstellung und lokalisierungs Variablen eingetragen werden. Der häufigste Fall ist es einen Darstellungeintrag für die gloabe Darstellung zu haben , classic/1.0, und mehrere lokale Einträge, einen für jede Übersetzung. Am Ende wird eine Ortsvariable spezifizerit.

Es gibt einige zusätzliche Optionen, die in die Einträge der chrome.manifest Datei eingefügt werden können. Diese sind auf der Chrome Registration Seite dokumentiert. Beachtenswert ist, wir können Einträge erstellen, die Betriebssystem spezifisch sind. Dies ist wichtig, weil das Aussehen des Browsers ist sehr unterschiedlich für jedes Betriebssystem. Wenn es notwendig ist, dass Ihre Erweiterung auf verschieden Systemen unterschiedlich aussieht, könnten wir das Manifest so anpassen, dass es aussieht wie hier:

content   xulschoolhello              content/
skin      xulschoolhello  classic/1.0 skin/unix/
skin      xulschoolhello  classic/1.0 skin/mac/ os=Darwin
skin      xulschoolhello  classic/1.0 skin/win/ os=WinNT
locale    xulschoolhello  en-US       locale/en-US/

Über diesen Weg können wir unterschiedliche Darstellungen für Windows, Mac OS X und Linux (plus anderer unix-ähnlichen Systemen) haben, die jede von ihnen in einer seperaten Ordnerstruktur definiert ist. Seit die meisten anderen System Unix-basiert sind, ist die "unix" Darstellung der Standard ohne weitere Marker.

Chrome

Wie zuvor angesprochen Chrome besteht aus 3 Teilbereichen: content, locale und skin. Der content-Bereich ist der wichtigste Bereich, beinhaltet die Benutzerschnittstelle (XUL) und Skriptdateien (JA). Der Darstellungsbereich beinhaltet die Dateien die das Meiste des Aussehen und Verhalten der UI (mit Einsatz von CSS und Bildern, wie bei Webseiten) definieren. Abschließend enthält der locale Bereich den gesamten in der Erweiterung verwendeten Text, in DTD und die Einstellungsdateien. Diese Aufteilung erlaubt es anderenen Entwicklern Themes zu entwickeln die die Darstellung ersetzen und Übersetzer für andere Sprachen, all das ohne das eine Änderung der Erweiterung oder des Programmcodes notwendig wäre. Dies gibt Firefox Erweiterungen eine großartige Flexibiltät.

Chrome Dateien werden über das Chrome-Protokoll zugewiesen. So sieht eine chrome URI aus:

chrome://packagename/section/path/to/file

Wenn Sie zu viele Dateien im content Bereich habe und Sie diese in Subordner organisieren wollen, gibt es nichts was Sie im chrome.manifest ändern müssen, alles was Sie benötigen ist den richtigen Pfad nach content in die URI hinzuzufügen.

Darstellungs- und Regions-Dateien arbeiten in der selben Art und Weise, und Sie müssen keine Darstellungs- oder Regions -Namen festleggen. Also um auf die DTD-Datei in der Hello Wolrd Erweiterung zuzugreifen, ist der Chromepfad chrome://xulschoolhello/locale/browserOverlay.dtd. Firefox was anschließend nach welcher Region es abrufen muss.

Hier ist ein interesantes Experiment. Öffne ein neues Firefox Tab, tippe chrome://mozapps/content/downloads/downloads.xul in deine Adressleiste und drücke Enter. Überrascht? Sie haben soeben das Downloadfenster in einem Firefoxtab geöffnet! Sie können auf jede Chromedatei zugreifen indem Sie die URI in die Addressleite eintippen. Dies kann nützlich werden, wenn du Skriptdatei untersuchen möchtest, die ein Teil von Firefox, anderen Erweiterungen oder deine eigene sind. Die meisten dieser Dateien werden als Textdatei geöffnet, mit der Ausnahme von XUL-Dateien, diese werden ausgeführt und so dargestellt wie Sie diese normalerweise in einem Fenster sehen würden.

Content

Es gibt 2 Dateien im content Verzeichnis. Sehen wir uns zuerst die XUL-Datei an.

Bei XUL-Dateien handelt es sich um XML-Dateien, die Benutzeroberflächenelemente in Firefox und Firefoxerweiterungen definieren. XUL wurde von HTML inspiriert, von daher werden Sie viele Ähnlichkeiten zwischen den beiden feststellen. Wie auch immer, XUL ist auch eine Verbesserung gegenüber HTML, die aus vielen Fehlern gelernt hat, die bei der Entwickliung von HTML gemacht wurden. XUL erlaubt Ihnen reichere und interaktivere Oberflächen zu erstellen, als mit HTML, oder zumindest macht XUL es einfacher.

XUL-Dateien defineren in der Regel eine von zwei Dingen: Fenster oder Overlays. Die Datei die Sie zuvor geöffnet haben, downloads.xul, beinhaltet den Programmcode der das Downloadfenster definiert. Die XUL-Datei die in der Hello World Erweiterung eingeschlossen ist, ist eine Overlay. Ein Overlay erweitert ein vorhandes Fenster, fügt diesem neue Elemente hinzu oder ersetzt einige der Elemente in ihm. Die Zeile die wir in der chrome.manifest Datei übersprungen haben gibt an das es sich bei dieser XUL-Datei um ein Overlay für das Browserhauptfenster handelt:

overlay chrome://browser/content/browser.xul  chrome://xulschoolhello/content/browserOverlay.xul

<overlay id="xulschoolhello-browser-overlay"  xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

Das Wurzelelement in dieser Datei ist ein Overlay. Andere XUL-Dokumente nutzen den window oder dialog Tag. Das Element besitzt einie eindeutige ID, welche Sie bei den meisten Element in Ihrer XUL vergeben sollten. Das zweite Attribut ist der Namensraum, diesen sollten Sie immer in Ihrem XUL-Wurzelelment definieren. Es sagt aus, dass dieser Knoten und alle Kindknotten XUL-Element sind. Sie brauchen nur änderungen an der Namensraum deklaration vornehmen, wenn Sie verschiedene Arten eines Inhalts in dem gleichen Dokument kombinieren, wie z.B. XUL mit HTML oder SVG.

<script type="application/x-javascript"   src="chrome://xulschoolhello/content/browserOverlay.js" />

Wie in HTML, wird hierdurch eine JavaScript-Datei eingebunden. Sie können soviele Skriptelement in ein XUL-Dokumente einbinden wie Sie benötigen. Wir werden uns diesen Programmcode später noch ansehen.

Wir werden etwas Programmcode übersprinder, der im Regionsbereich behandelt wird, um mit dem wichtigsten Bereich von content fortzufahren.

<menubar id="main-menubar">
  <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;"
    accesskey="&xulschoolhello.helloMenu.accesskey;" insertafter="helpMenu">
    <menupopup>
      <menuitem id="xulschoolhello-hello-menu-item"
        label="&xulschoolhello.hello.label;"
        accesskey="&xulschoolhello.helloItem.accesskey;"
        oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
    </menupopup>
  </menu>
</menubar>

<vbox id="appmenuSecondaryPane">
  <menu id="xulschoolhello-hello-menu-2" label="&xulschoolhello.hello.label;"
    accesskey="&xulschoolhello.helloMenu.accesskey;"
    insertafter="appmenu_addons">
    <menupopup>
      <menuitem id="xulschoolhello-hello-menu-item-2"
        label="&xulschoolhello.hello.label;"
        accesskey="&xulschoolhello.helloItem.accesskey;"
        oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
    </menupopup>
  </menu>
</vbox>

Das ist der Code, der das Hello World-Menü dem Browserfenster hinzufügt.

Darin enthalten sind zwei ähnliche Codeblöcke, dass ist dadurch begründet das in modernen Versionen von Firefox, insbesondere unter Windows, ein einzelner Firefox Menübutton mit vereinfachten Menüoptionen, anstatt einer umfangreichen Menübar dargestellt wird. Der zweite Codeblock bezieht sich auf alle üblichen Buttonprozesse; der erste Codeblock bezieht sich auf alle anderen Prozesse. Setze den Hacken Menüleiste unter dem Optionsmenü im Menübutton, um die Anzeige des klassischen Menüs unter Windows und einigen Linuxdistributionen zu aktivieren.

Um diesen Code zu schreiben, benötigen wir etwas Wissen über den XUL-Code in browser.xul. Wir müssen wissen, dass die ID des rechten Fläche in dem undefinierten Menü appmenuSecondaryPane ist. Wir werden ein eigenes Menü hinzufügen und Firefox mitteilen dieses rechts nachdem Add-on-Element in die Fläche hinzuzufügen. Dies ist die Festlegung des Attributes:

insertafter="appmenu_addons"

appmenu_addons ist die ID des Menüelements, dass mit dem Add-on-Menü im Hauptmenü in verbindung steht. Wir werden später sehen wir die Dinge wie die ID von Browserelementen ermitteln können, aber jetzt sehen wir uns die Elemente aus denen sich das Hello World-Menü zusammensetzt.

Für das klassische Menü, fügen wir das Hello World-Menü rechts in das "Wurzelverzeichnis" der Menüs hinzu, so dass es sehr einfach zu finden ist, aber in der Praxis ist es nicht notwendig. Stellen Sie sich vor was passieren würde, wenn alle Erweiterungen ein Menü im oberen Menü hinzufügen würden; ein paar Erweiterungen zu haben würde es dann außen lassen wie die Kontrollanzeige eines Flugzeuges, voller Knöpfe und Schalter. Im Falle des zusammengesetzen Menüs, sind die Dinge aufgrund von zu wenigen Optionen etwas mehr kompliziert. Wenn dein Menüitem in den Webentwicklerbereich passt empfiehlt es sich es dort zu platzieren. Andererweise ist das Wurzelmenü möglicherweise der einzige sinnvolle Ort.

Ein empfehlenswerter Ort für Menüs in dem Klassikmenü ist unter dem Extrasmenü, von daher sollte der Code in etwa so aussehen:

<menupopup id="menu_ToolsPopup">
  <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;"
    accesskey="&xulschoolhello.helloMenu.accesskey;"
    insertbefore="devToolsEndSeparator">
    <menupopup>
      <menuitem id="xulschoolhello-hello-menu-item"
        label="&xulschoolhello.hello.label;"
        accesskey="&xulschoolhello.helloItem.accesskey;"
        oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
    </menupopup>
  </menu>
</menupopup>

Wir legen das Menü über das tieferlegende in dem XUL-Baum, aber das spielt keine Rolle weil alles was wir benötigen ist die ID des Elements das wir Überblenden wollen. In diesem Fall ist dies das Menüpopup-Element das sich innerhalb des Extras. Dasinsertbefore Attribut teilt Firefox mit das Menü im unteren Bereich des Entwicklerextrasbereich hinzuzufügen, über den abschließenden Seperatoren. Wir werden im späteren des Tutorials über Menüs sprechen.

Nehmen wir jetzt einen Blick auf den  eigentlichen Code:

oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);"

Dieses Attribute beschreibt einen Eventhandler. . Das command event ist das am meisten genutzte in Firefox, da es mit den Hauptaktionen der meisten UI-Elemente kommuniziert. Der Nutzen der Attribute ist der JacaScript-Code der eine Funktion aufruft. Diese Funktion ist in er der JS-Datei definiert, das mit Skript-Tag eingebunden wird. Die JS-Funktion wird aufgerufen wenn der Benutzer auf einen Menüeintrag im Hello World-Menü aufruft. Alle Eventhandler definieren ein spezielles Objekt namens event, welches normalerweise ausreicht um ein Argument an die Funktion zu übergeben. Eventhandler werden im späteren genauer definiert.

Nun werfen wir einen Blick in die JavaScript-Datei und und sehen uns an wenn das Event ausgeführt wird.

/**
 * XULSchoolChrome namespace.
 */
if ("undefined" == typeof(XULSchoolChrome)) {
  var XULSchoolChrome = {};
};

Der XULSchoolChrome Namensraum ist definiert. Alle Objekte und Variablen die wir i JavaScript definieren sind global, das bedeutet das Skripte in Firefox und andere Erweiterungen können diese sehen und mit Ihnen interagieren. Dies bedeudet also dass wenn wir ein Objekt MenuHandler definieren oder einige generische Namen, ist es wahrscheinlich das es mit einem extierenden Objekt in Konflikt steht. Was wir hier machen ist ein einzelnes globales Objekt zu definieren: XULSchoolChrome. Nun wissen dass alle unsere Objekte sind innerhalb dieses Objekts, welches unwahrscheinlich duplliziert oder überschrieben wird von anderen Erweiterungen.

Sie können hier mehr über den typeof operator erfahren. Wenn Sie nicht mit JavaScript oder der besonderen Syntax, ein Objekt mit {} zu intialisieren ist identisch mit es mit new Object() zu intialisieren.

/**
 * Controls the browser overlay for the Hello World extension.
 */
XULSchoolChrome.BrowserOverlay = {

Sclussendlich ist BrowserOverlay unser Objekt. Ein Objekt in solcher langen und ausführlichen Art und Weise zu benennen und refernzieren kann sich am Anfang unkomfirtabel anfühlen, aber es ist den Aufwand wert.

sayHello : function(aEvent) {
  let stringBundle = document.getElementById("xulschoolhello-string-bundle");
  let message = stringBundle.getString("xulschoolhello.greeting.label");

  window.alert(message);
}

Und Schlussendlich ist dass unsere Funktionsdeklaration. Drei Zeilen sind alles was wir benötigen. Die erste Zeile in dem Body der Funktion deklariert eine Variable die das stringbundle-Element beinhaltet, das im Overlay definiert ist. Die Variable ist deklariert durch die Verwendung von let, dass var ähnlich ist aber einen enger begrenzten Bereich besitzt. Hier können Sie mehr über die let deklaration nachlesen.

WIe auch im regulären JS, können wir das DOM (Document Object Model) nutzen um dass XUL-Dokument zu manipulieren.Als erstes bekommen wir eine referenze auf das stringbundle-Element  in dem Dokument. Dies ist ein spezielles Element das es uns erlaubt beschränkte Strings dynamisch zu erhalten, nur durch die bereitstellung eines "key`s" der Den String identifiziert. Das macht die zweite Zeile. Wir rufen die getString Methode des bundle-Elements udn bekommen die begrenzte Meldung angeziegt. Anschließende rufen wir die window.alert-Funktion auf, wie wir das auch in einem HTML-Dokument machen würden.

Locale

Es gibt zwei Arten von locale-Dateien: DTD und Einstellungen, und in diesem Beispiel werden wir beide benutzen. DTD ist der effizenteste Weg um Text in XUL anzuzeigen, von daher sollten Sie es benutzen wann immer es möglich ist. Es ist etwas unflexibel, so kann es nicht für dynamisch erzeugten Text verwendet werden, folglich gibt es eine Notwendigkeit um auf regionale Strings zuzugreifen.

Werfen wir einen Blick zurück auf den Menücode, dort haben Sie unter Umständen einge Attribute wie diese bemerkt:

label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloItem.accesskey;"

Diese Attribute definieren den Text den Sie in den Menüs sehen,  es sind String-keys die in unserer DTD-Datei definiert sind, browserOverlay.dtd. Die DTD-Datei wurd mit folgendem Code in die XUL-Datei eingefügt:

<!DOCTYPE overlay SYSTEM "chrome://xulschoolhello/locale/browserOverlay.dtd" >

Und in der DTD-Datei können Sie die Zuordnung von Keys und regionalen Strings sehen:

<!ENTITY xulschoolhello.hello.label            "Hello World!">
<!ENTITY xulschoolhello.helloMenu.accesskey    "l">
<!ENTITY xulschoolhello.helloItem.accesskey    "H">

Beachte das Sie in den XUL-Dateien den String mit & und ; umschließen, wohingegen sie in eriner DTD-Datei nur den Key spezifizieren. Sie erhalten womöglich sonderbare Fehlermeldungen oder Zuordnungen wenn Sie dass nicht beachten.

Zugangs Key`s sind Shortcuts die es Ihnen erlauben, nur mit der Tastatur schnell durch ein Menü zu navigieren. Sie sind auch der einzige Weg durch die Menüs zu navigieren für Menschen die eine Barrierefreiheit benötigen, durch teilweise oder vollkommene Blindheit oder durch körperliche Eingeschränktheit die, dass nutzen einer Maus sehr schwierig oder unmöglich machen. Sie können die Zugangs-Key`s unter Windows leicht erkennen, weil der Buchstabe der mit dem Zugangs-Key in Verbindung steht unterstrichen ist, wie in der folgenden Abbildung.

DIe meisten Benutzeroberflächen Schaltflächen besitzen ein accesskey Atribut, und Sie sollten es benutzen. Der Wert eines Zugangs-Key`s ist lokal beschränkt, weil er einem Buchstaben im Labeltext entsprechen soll. Sie sollten darauf achten es zu vermeiden Zugangs-Key´s zu wiederholen. Als Beispiel, innerhalb eines Menüs oder Untermenüs sollten Zugangs-Key`s nicht wiederholt werden. In einem Fenster müssen Sie noch vorsichtiger sein bei der Auswahl von Zugang-Key`s weil es dort normalerweise eine größere Anzahl an Schaltflächen gibt. Besonders vorsichtig müssen Sie sein wenn Sie Zugangs-Key`s für eine Overlay auswahlen. In unserem Fall, können wir den Buchstaben "H" nicht als einen Zugangs-Key im Hauptmenü verwenden, weil dieser sich mit dem Zugangs-Key den Hilfemenüs überschneiden würde. Das selbe gilt für das "W" und das Fenstermenü unter Mac OS. Von daher haben wir den Buchstaben "l" zugewiesen.

DTD-Strings werden aufgelöst und gesetzt wenn das Dokument lädt. Wenn Sie den label-Attribute Wert für das Hello World-Menü mit hilfe von DOM abfragen, erhalten Sie den begrenzten String und nicht den String-Key. Sie können nicht dynamischen den Wert von Attributen mit einem neuen DTD-Schlüssel ändern, Sie müssen den neuen Wert direkt setzen.

let helloItem = document.getElementById("xulschoolhello-hello-menu-item");

// The alert will say "Hello World!"
alert(helloItem.getAttribute("label"));
// Wrong
helloItem.setAttribute("label", "&xulschoolhello.hello2.label;");
// Better
helloItem.setAttribute("label", "Alternate message");
// Right!
helloItem.setAttribute("label", someStringBundle.getString("xulschoolhello.hello2.label"));

Das ist der Grund warum DTD-String keine Lösung für alle beschränkten Fälle sind, and der Grund warum wir oft Stringpakete in XUL-Dateien einbinden müssen.

<stringbundleset id="stringbundleset">
  <stringbundle id="xulschoolhello-string-bundle"
    src="chrome://xulschoolhello/locale/browserOverlay.properties" />
</stringbundleset>

Das stringbundleset-Element ist nur ein Container für stringbundle-Elemente. Hiervon sollte eines pro Dokument geben, dies ist auch der Grund warum wir das stringbundleset in der browser.xul überschreiben, daher die sehr generische ID.  Wir fügen keine insertbefore oder insertafter Attribute ein weil die Reihenfolge der Stringpakete keine Rolle spielt. Das Element ist vollständig unsichtbar. Wenn Sie keine Ordnungsattribute in ein Overlay-Element einfügen, wird Firefox Ihr Element als letztes Kindelement des Elternelements betrachten.

Alles was Sie für das Stringpaket benötigen ist eine ID (um später auf das Element zugreifen zu können und den Chrome-Pfad der Einstellungsdatei. Und natürlich die Einstellungsdatei:

xulshoolhello.greeting.label = Hi! How are you?

Die Leerzeichen vor und nach dem Gleichheitszeichen werden ignoriert. Genauso wie in der install.rdf, Kommentare können durch das "#" Zeichen am Anfang einer zeile hinzugefügt werden. Leere Zeilen werden ebenso ignoriert.

Sei werden oft einen dynamischen Inhalt als Teil eines begrenzten Strings einbinden wollen, wie wenn Sie den Nutzer über den Status der Erweiterung informieren wollen. Als Beispiel: "Es wurden 5 der Suchanfrage entprechende Wörter gefunden". Ihre erste Idee ist möglicherweise einfach Strings zu verketten und eine "Found" Eigenschaft und eine weitere "words matching..." Eigenschaft zu verwenden. Dies ist keine Gute Idee. Sie behindert nur in einem großen Maße die Arbeit von Übersetzern und Grammatikregeln der verschieden Sprachen ändern möglicherweise den Aufbau des Satzes. Aus diesem Grund ist es besser Parameter in den Eienschaften zu verwenden.

xulshoolhello.search.label = Found %S words matching the search query!

Wenn Sie den getFormattedString anstatt des getString verwenden um auf den begrenzten String zuzugreifen. Glücklicherweise müssen wir durch dass nicht mehrere Eigenschaften anlegen, hierdurch wird das Leben für Übersetzer einfacher. Sie können mehr über das in dem Text Formatting Bereich des XUL Tutorial nachlesen. Werfen Sie auch einen Blick auf die Plurals and Localization Artikel, die die Lokalisierungsfunktionen behandeln und es Ihnen weiterhin erlauben das letzte Beispiel zu verbessern, um verschiedene Arten von Pluralformen zu verarbeiten die auch Sprachabhängig sind.

Skin

XUL zu gestalten ist dem gestalten von HTML sehr ähnlich. Wir werden uns einige Unterschiede ansehen wenn wir das XUL-Box-Modell und andere fortgeschritten Themen. Es gibt nicht viel was Sie in bei einem minimalen Menü und einer einfachen Warnmeldung gestalten können, da die Hello World ERweiterung nur eine leere CSS-Datei und eine vorgeschriebene globale Skin-Datei beinhaltet:

<?xml-stylesheet type="text/css" href="chrome://global/skin/"  ?>
<?xml-stylesheet type="text/css" 
  href="chrome://xulschoolhello/skin/browserOverlay.css"  ?>

Die globale Skin-CSS-Datei enthält alle standard Styles für alle XUL-Elmente und Fenster. Wenn Sie vergessen diese Datei in ein XUL-Fensterer einzubinden, führt das normalerweise zu intersanten und oft ungewohlten Ergebnissen. In unserem Fall müssen wir diese nicht einbinden, seit wir die Hauptbrowser-XUL-Datei überblenden und diese bindet bereits diese globale CSS-Datei ein. Auf jeden Fall ist es besser sie immer einzubinden. Auf diesem Weg ist es schwieriger Fehler durch ein nicht einbinden zu vermeiden. Sie können den Chrome-Pfad in der Adressleiste eingeben und überprüfen wenn Sie sich unsicher sind.

Dies behandelt alle Dateien der Hello World-Erweiterung. Nun sollten Sie eine Idee haben welche in die Erweiterungsentwicklung involviert sind, nun steigen wir direkt ein und stzen eine Eintwicklungumgebung auf. Aber als erstes eine kleine Übung.

This covers all of the files in the Hello World extension. Now you should have an idea of the basics involved in extension development, so now we'll jump right in and set up a development environment. But first, a little exercise.

Übung

Mache die folgenden Änderungen in der Beispielerweiterung:

• Passe die Willkommensmeldung die im Benachrichtigungsfenster angezeigt wird an.
• Verschiebe das Hello World -menü in das Extras -menü.

Packe die XPI neu. Führe unter Linux oder Mac OS X folgendes Kommando innerhalb des Wurzelverzeichnisses der Erweiterung aus:

zip -r ../xulschoolhello2.xpi * 

Verwende unter Windows ein ZIP-Tool um alle Datei und Unterverzeichnisse innerhalb des Wurzelverzeichnisses der Erweiterung zu packen und setze die Dateierweiterung der Datei auf .xpi.

Installiere die XPI neu. Sie können hierzu die XPI-Datei hierzu einfach in den Browser ziehen und diese wird lokal installiert.

Teste es und überprüfe ob die Änderungen funktionieren. Wenn Sie auf Probleme während der Installation stoßen, ist es wahrscheinlich, dass Sie die XPI-Struktur nicht korrekt nachgebildet haben, möglicherweise durch das hinzufügen unnötiger Ordner.

Beachte, dass das Extramenü standardmäßig in Firefox 4und höher, unter Windows und einige Linuxdistributionen versteckt ist. Setze einen Hacken im Optionsmenü unter dem Firefoxmenüknopf um es zu aktivieren.

Nachdem Sie fertig sind, können Sie sich diese Refernzlösung ansehen: Hello World 2.

This tutorial was kindly donated to Mozilla by Appcoast.