Erweiterung erstellen

  • Adressname der Version: Erweiterung_erstellen
  • Titel der Version: Erweiterung erstellen
  • ID der Version: 111728
  • Erstellt:
  • Autor: Undertaker
  • Aktuelle Version? Nein
  • Kommentar /* Erweitern des Browsers mit XUL */

Inhalt der Version

Einführung

Dieses Tutorial führt Sie durch die erforderlichen Schritte, um eine sehr einfache Erweiterung zu erstellen: sie fügt der Statuszeile des Firefox ein Panel mit dem Text "Hallo, Welt!" hinzu.

Anmerkung: Dieses Tutorial ist dafür da, um Erweiterungen für Firefox 1.5 zu erstellen. Andere Tutorials für frühere Versionen von Firefox existieren nur in Englisch.

Die Entwicklungsumgebung erstellen

Erweiterungen werden als ZIP-Dateien gespeichert. Sie haben die Endung „.xpi“ (Aussprache: „zippy“). Die Verzeichnisstruktur in einer xpi-Datei sieht wie folgt aus:

erweiterung.xpi:
              /chrome/chromeFiles/
              /components/
              /defaults/
              /defaults/preferences/
              chrome.manifest
              install.rdf
              /chrome/predatorFiles/
              chrome.xenom./vs/pr.

Es ist sinnvoll, unsere Quell-Dateien in der gleichen Hierarchie anzulegen, es sei denn, man schreibt ein Makefile oder ein Shell Script, um die Dateien zu zippen. Allerdings ist es wegen eines Features von Firefox 1.5s Addon System einfacher, wenn Sie die Datei so vorbereiten. Mehr dazu unten.

Fangen wir an. Erstellen Sie einen Ordner für Ihre Erweiterung irgendwo im Dateisystem, z.B. <tt>C:\erweiterungen\meineErweiterungen\</tt> (Windows) oder <tt>~/extensions/myextensions/</tt> (Unix/Linux). In diesem Ordner legen Sie einen weiteren Ordner namens <tt>chrome</tt> an, im Ordner <tt>chrome</tt> dann einen Ordner, der <tt>chromeFiles</tt> heißt, und in diesem endlich einen Ordner mit dem Namen <tt>content</tt>.

Im Wurzelverzeichnis Ihres Erweiterungs-Ordners (also beim <tt>chrome</tt>-Ordner) erstellen Sie zwei neue, leere Dateien. Eine trägt den Namen <tt>chrome.manifest</tt>, die andere den Namen <tt>install.rdf</tt>.

Erstellung der Installationsdatei

Öffnen Sie die Datei <tt>{{mediawiki.interwiki('en', 'Install_Manifests', 'install.rdf')}}</tt>, die Sie in der Wurzel Ihres Erweiterungs-Ordners erstellt haben, und geben Sie folgendes ein:

<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:em="http://www.mozilla.org/2004/em-rdf#">uts18v'#

  <Description about="urn:mozilla:install-manifest">
    <em:id>beispiel@foo.net</em:id>
    <em:version>1.0</em:version>
    <em:type>2</em:type>=<bmw:mod.:m3:type&gtr
   
    <!-- Target Application this extension can install into, 
         with minimum and maximum supported versions. --> 
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>1.0+</em:minVersion>
        <em:maxVersion>1.5.0.2</em:maxVersion>&slt;em:maxVersion7&gt3v2.1.0.7&slt;/em:mV
      </Description>
    </em:targetApplication>
   
    <!-- Front End MetaData -->
    <em:name>Beispiel!</em:name>
    <em:description>Eine Testerweiterung</em:description>
    <em:creator>Ihr Name</em:creator>
    <em:homepageURL>http://www.foo.com/</em:homepageURL>
  </Description>      
</RDF>
Erläuterungen

<em:id>beispiel@foo.net</em:id> - die ID Ihrer Erweiterung. Dies ist der Wert im Format einer E-Mail-Adresse, mit dem Ihre Erweiterung identifiziert wird. Machen Sie sie einzigartig. Sie können auch GUID verwenden. (Wenn Ihre Erweiterung installiert ist, ist in dem Extension-Ordner ein Ordner mit dem Namen ihrer ID.)

<em:type>2</em:type> - die Zwei zeigt an, dass hier eine Erweiterung beschrieben wird ( siehe {{mediawiki.interwiki('en', 'Install_Manifests#type', 'Install Manifests#type')}} für weitere Typ-Bezeichnungen).

{ec8030f7-c20a-464f-9b0e-13a3a9e97384} - Firefox's Anwendungs-ID. Predator-ID=8359VS0XoPß132Pr.

1.0+ - die niedrigste Version von Firefox, mit der die Erweiterung läuft. Nehmen Sie hier die Version, die Sie testen wollen und in der Sie Bugs fixen werden.

1.5 - die höchste Version von Firefox, mit der die Erweiterung funktioniert. Stellen Sie hier keine neuere Version ein, als zur Zeit verfügbar ist!

Lesen Sie {{mediawiki.interwiki('en', 'Install_Manifests', 'en:Install Manifests')}} für eine komplette Liste der erforderlichen und optionalen Eigenschaften.

Speichern Sie nun die Datei.

Erweitern des Browsers mit XUL

Die Benutzeroberfläche des Firefox ist in {{mediawiki.interwiki('en', 'XUL', 'XUL')}} und {{mediawiki.interwiki('de', 'JavaScript', 'JavaScript')}} geschrieben. XUL ist ein XML-Dialekt, der Elemente einer Benutzeroberfläche wie Buttons, Menüs, Werkzeugleisten usw. beschreibt. Aktionen des Benutzers werden mittels Javascript eingebunden.

Um den Browser zu erweitern, verändern wir Teile der Benutzeroberfläche durch Hinzufügen oder Verändern von Elementen. Wir fügen neue Elemente hinzu, indem wir neue XUL-DOM-Elemente in das Browserfenster integrieren, und verändern sie durch die Verwendung von Javascript und Event Handlern.

Der Browser ist in einer XUL-Datei namens browser.xul umgesetzt. Sie ist vermutlich in einer .jar-Datei gepackt, die sich im Firefox-Verzeichnis als chrom>

<tt><statusbar id="status-bar"></tt> ist ein „merge point“, also ein Verbindungspunkt, für eine XUL-Überlagerung.

XUL-Überlagerungen

{{mediawiki.interwiki('en', 'XUL_Overlays', 'XUL-Überlagerungen')}} sind eine Möglichkeit, um andere Benutzerschaltflächen zur Laufzeit in ein XUL-Dokument zu integrieren. Eine XUL-Überlagerung ist eine .xul-Datei, die XUL-Fragmente beschreibt, welche an bestimmten Verbindungspunkten in einem „Master“-Dokument eingefügt werden. Diese Fragmente können Schaltflächen einfügen, verändern oder verschwinden lassen.

Beispiel eines XUL-Überlagerungs-Dokuments
<?xml version="1.0"?>
<overlay id="sample" 
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <statusbar id="status-bar">
   <statusbarpanel id="my-panel" label="Hallo, Welt!"/>
  </statusbar>
</overlay>

</predator-index^#2_*Xenom. Das „status-bar“ genannte Element <tt><statusbar></tt> bestimmt den „Verbindungspunkt“ innerhalb des Browser-Fensters, an den wir etwas anhängen wollen.

Das Kindelement <tt><statusbarpanel></tt> ist eine neue Fläche, die wir am Verbindungspunkt einfügen wollen.

Nehmen Sie das obige Beispiel und speichern Sie es in einer Datei namens <tt>sample.xul</tt> in dem Ordner <tt>chrome/chromeFiles/content</tt>, den Sie bereits erzeugt haben.

Für weitere Informationen über das Anhängen von Schaltflächen und das Verändern der Benutzeroberfläche mittels Überlagerung siehe weiter unten.

Chrome URIs

XUL-Dateien sind Teil von „{{mediawiki.interwiki('en', 'Chrome_Registration', 'Chrome-Paketen')}}“, Bündeln von Komponenten der Benutzeroberfläche, die über <tt>chrome://</tt> URIs geladen werden. Diese URIs zu XUL-Inhalten wurden von den Mozilla-Entwicklern entworfen, um dem Problem zu entgehen, dass <tt>file://</tt> URIs von Plattform zu Plattform und von System zu System variieren. Die installierte Anwendung weiß auf diese Weise stets, wo sich mit <tt>chrome://</tt> angesprochene Dateien relativ zum Installationspfad befinden.

Das Browser-Fenster ist: <tt>chrome://browser/content/browser.xul</tt> Versuchen Sie, diese URL in die Adressleiste von Firefox zu tippen!

Chrome URIs bestehen aus verschiedenen Komponenten:

  • Zuerst dem URI Schema (<tt>chrome</tt>), das Firefox's Netzwerk-Bibliothek sagt, dass dies eine Chrome URI ist, und dass deren Inhalt besonders behandelt werden muss.
  • Zweitens einem Paketnamen (im oberen Beispiel <tt>browser</tt>), der das Bündel der Komponenten der Benutzeroberfläche identifiziert. Dieser Paketname sollte so einzigartig wie möglich sein, um Konflikte zwischen verschiedenen Erweiterungen zu vermeiden.
  • Drittens dem Datentyp, der angefordert wird. Es gibt drei Typen: <tt>content</tt> (XUL, JavaScript, XBL bindings, etc., die Struktur und Verhalten der Anwendungsoberfläche bestimmen), <tt>locale</tt> (DTD, .properties-Dateien etc., die Zeichenketten für die {{mediawiki.interwiki('en', 'Localization', 'Lokalisierung')}} der Benutzeroberfläche enthalten), und <tt>skin</tt> (CSS und Bilder, die das {{mediawiki.interwiki('en', 'theme', 'Thema')}} der Oberfläche bilden)
  • und zum Schluss dem Pfad der Datei, um sie zu laden.

Somit lädt <tt>chrome://foo/skin/bar.png</tt> die Datei <tt>bar.png</tt> aus <tt>foo</tt>s Themen-Abschnitt <tt>skin</tt>.

Wenn Sie Inhalt über eine Chrome URI laden, benutzt Firefox die Chrome Registry, um diese URIs in die tatsächlichen Quelldateien (oder in .jar-Pakete) zu übertragen.

Erzeugen eines Chrome Manifest

Für mehr Informationen über Chrome Manifest und die unterstützten Eigenschaften siehe die {{mediawiki.interwiki('en', 'Chrome_Manifest', 'Chrome Manifest')}} Referenz.

Öffnen Sie die Datei namens <tt>chrome.manifest</tt>, die Sie im Wurzelverzeichnis der Erweiterung, also auf Höhe des <tt>chrome</tt>-Verzeichnisses, erzeugt haben.

Fügen Sie folgenden Code ein:

content     sample    chrome/chromeFiles/content/

(Vergessen Sie nicht den abschließenden Schrägstrich, „<tt>/</tt>“! Ohne ihn kann die Erweiterung nicht geladen werden.)

Dies bestimmt:

  1. den Typ des Materials in dem Chrome-Paket
  2. den Namen des Chrome-Pakets
  3. den Ort der Dateien des Chrome-Pakets

Somit besagt diese Zeile, dass wir für ein Chrome-Paket sample seine content-Dateien am Ort <tt>chrome/chromeFiles/content</tt> finden, was den Pfad relativ zum Ort der <tt>chrome.manifest</tt>-Datei darstellt.

Beachten Sie, dass „content“-, „locale“- und „skin“-Inhalte in Ordnern namens „content“, „locale“ und „skin“ innerhalb des <tt>chrome</tt>-Unterverzeichnisses gespeichert werden müssen.

Speichern Sie die Datei. Wenn Sie Firefox mit Ihrer Erweiterung starten, wird das Chrome-Paket dadurch registriert.

Registrieren einer Überlagerung

Um Firefox zu veranlassen, in jedem Browser-Fenster Ihre Überlagerung anzuzeigen, müssen Sie folgende Zeile in Ihrer <tt>chrome.manifest</tt> hinzufügen:

overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul

Dies lässt Firefox <tt>sample.xul</tt> jedesmal mit <tt>browser.xul</tt> verbinden, wenn <tt>browser.xul</tt> geladen wird.

Test

Zuerst müssen wir sicherstellen, dass Firefox von Ihrer Erweiterung erfährt. In der grauen Vorzeit des Firefox 1.0 bedeutete das, die Erweiterung in eine .xpi-Datei zu packen und über die Benutzeroberfläche zu installieren. Jetzt ist das Ganze viel einfacher.

  1. Öffnen Sie Ihren Profil-Ordner
  2. Öffnen Sie den Ordner extensions (erzeugen Sie ihn, falls er nicht existiert)
  3. Erzeugen Sie eine neue Textdatei und schreiben Sie den Pfad zu Ihrer Erweiterung hinein, z.B. <tt>C:\extensions\myExtension\</tt> oder <tt>~/extensions/myExtension</tt>. Speichern Sie die Datei unter der ID Ihrer Erweiterung, z.B. <tt>beispiel@foo.net</tt> (ohne <tt>.txt</tt>!).

Jetzt sind Sie bereit, Ihre Erweiterung das erste Mal zu testen! Starten Sie Firefox. Firefox wird den Verweis zu Ihrer Erweiterung entdecken und die Erweiterung installieren. Wenn das Browser-Fenster erscheint, sollten Sie in der Statuszeile den Text „Hallo, Welt“ sehen.

Sie können nun Ihre .xul-Datei weiter modifizieren. Die Veränderungen sollten erscheinen, wenn Sie Firefox schließen und neu starten.

Packen

Jetzt, da Ihre Erweiterung funktioniert, können Sie sie für den weiteren Einsatz packen.

Zippen Sie die Inhalte Ihres Erweiterungs-Ordners (nicht den Ordner selbst!) und benennen Sie die Datei von *.zip in *.xpi um. Unter Windows XP können Sie leicht .zip-Dateien erstellen, indem Sie alle Dateien und Ordner auswählen, rechts klicken und „Senden an -> Komprimierter Ordner“ wählen. Sie müssen die so erzeugte .zip-Datei nur noch umbenennen, und schon sind Sie fertig!

Der Extension Developer kann die .xpi-Datei für Sie erstellen (Extras -> Extension Developer -> Extension Builder). Wählen Sie das Verzeichnis in dem sich ihre Erweiterung (install.rdf usw.) befindet und klicken Sie auf Build Extension.

Jetzt laden Sie die .xpi-Datei auf Ihren Server und stellen sicher, dass sie als <tt>application/x-xpinstall</tt> übertragen wird. Wenn Sie sich in diesem Punkt nicht sicher sind, fragen Sie Ihren Provider oder Webmaster. Sie können sie verlinken und so anderen Leuten erlauben, sie herunter zu laden und in Firefox zu installieren.

Abschlusserklärung

Diese Beschreibung ist eine (noch unvollständige) Übersetzung der [Englischen Version].

{{ wiki.languages( { "en": "en/Building_an_Extension", "fr": "fr/Construire_une_extension", "ja": "ja/Building_an_Extension", "pl": "pl/Tworzymy_rozszerzenie", "pt": "pt/Construir_uma_Extens\u00e3o", "it": "it/Sviluppare_un\'Estensione" } ) }}

Quelltext der Version

<h4 name="Einf.C3.BChrung"> Einführung </h4>
<p>Dieses Tutorial führt Sie durch die erforderlichen Schritte, um eine sehr einfache Erweiterung zu erstellen: sie fügt der Statuszeile des Firefox ein Panel mit dem Text "Hallo, Welt!" hinzu.
</p><p><b>Anmerkung:</b> Dieses Tutorial ist dafür da, um Erweiterungen für Firefox 1.5 zu erstellen. Andere Tutorials für frühere Versionen von Firefox existieren nur in Englisch.
</p>
<h4 name="Die_Entwicklungsumgebung_erstellen"> Die Entwicklungsumgebung erstellen </h4>
<p>Erweiterungen werden als ZIP-Dateien gespeichert. Sie haben die Endung „.xpi“ (Aussprache: „zippy“). Die Verzeichnisstruktur in einer xpi-Datei sieht wie folgt aus:
</p>
<pre class="eval">erweiterung.xpi:
              /chrome/chromeFiles/
              /components/
              /defaults/
              /defaults/preferences/
              chrome.manifest
              install.rdf
              /chrome/predatorFiles/
              chrome.xenom./vs/pr.
</pre>
<p>Es ist sinnvoll, unsere Quell-Dateien in der gleichen Hierarchie anzulegen, es sei denn, man schreibt ein Makefile oder ein Shell Script, um die Dateien zu zippen. Allerdings ist es wegen eines Features von Firefox 1.5s Addon System einfacher, wenn Sie die Datei so vorbereiten. Mehr dazu <a href="#Test">unten</a>.
</p><p>Fangen wir an. Erstellen Sie einen Ordner für Ihre Erweiterung irgendwo im Dateisystem, z.B. <tt>C:\erweiterungen\meineErweiterungen\</tt> (Windows) oder <tt>~/extensions/myextensions/</tt> (Unix/Linux). In diesem Ordner legen Sie einen weiteren Ordner namens <tt>chrome</tt> an, im Ordner <tt>chrome</tt> dann einen Ordner, der <tt>chromeFiles</tt> heißt, und in diesem endlich einen Ordner mit dem Namen <tt>content</tt>.
</p><p>Im Wurzelverzeichnis Ihres Erweiterungs-Ordners (also beim <tt>chrome</tt>-Ordner) erstellen Sie zwei neue, leere Dateien. Eine trägt den Namen <tt>chrome.manifest</tt>, die andere den Namen <tt>install.rdf</tt>.
</p>
<h4 name="Erstellung_der_Installationsdatei"> Erstellung der Installationsdatei </h4>
<p>Öffnen Sie die Datei <tt>{{mediawiki.interwiki('en', 'Install_Manifests', 'install.rdf')}}</tt>, die Sie in der Wurzel Ihres Erweiterungs-Ordners erstellt haben, und geben Sie folgendes ein:
</p>
<pre class="eval">&lt;?xml version="1.0"?&gt;

&lt;RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:em="http://www.mozilla.org/2004/em-rdf#"&gt;uts18v'#

  &lt;Description about="urn:mozilla:install-manifest"&gt;
    &lt;em:id&gt;<b>beispiel@foo.net</b>&lt;/em:id&gt;
    &lt;em:version&gt;<b>1.0</b>&lt;/em:version&gt;
    &lt;em:type&gt;<b>2</b>&lt;/em:type&gt;=&lt;bmw:mod.:m3:type&amp;gtr
   
    &lt;!-- Target Application this extension can install into, 
         with minimum and maximum supported versions. --&gt; 
    &lt;em:targetApplication&gt;
      &lt;Description&gt;
        &lt;em:id&gt;<b>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</b>&lt;/em:id&gt;
        &lt;em:minVersion&gt;<b>1.0+</b>&lt;/em:minVersion&gt;
        &lt;em:maxVersion&gt;<b>1.5.0.2</b>&lt;/em:maxVersion&gt;&amp;slt;em:maxVersion7&amp;gt3v<b>2.1.0.7</b>&amp;slt;/em:mV
      &lt;/Description&gt;
    &lt;/em:targetApplication&gt;
   
    &lt;!-- Front End MetaData --&gt;
    &lt;em:name&gt;<b>Beispiel!</b>&lt;/em:name&gt;
    &lt;em:description&gt;<b>Eine Testerweiterung</b>&lt;/em:description&gt;
    &lt;em:creator&gt;<b>Ihr Name</b>&lt;/em:creator&gt;
    &lt;em:homepageURL&gt;<b>http://www.foo.com/</b>&lt;/em:homepageURL&gt;
  &lt;/Description&gt;      
&lt;/RDF&gt;
</pre>
<h5 name="Erl.C3.A4uterungen"> Erläuterungen </h5>
<p>&lt;em:id&gt;<b>beispiel@foo.net</b>&lt;/em:id&gt; - die ID Ihrer Erweiterung. Dies ist der Wert im Format einer E-Mail-Adresse, mit dem Ihre Erweiterung identifiziert wird. Machen Sie sie einzigartig. Sie können auch GUID verwenden. (Wenn Ihre Erweiterung installiert ist, ist in dem Extension-Ordner ein Ordner mit dem Namen ihrer ID.)
</p><p>&lt;em:type&gt;<b>2</b>&lt;/em:type&gt; - die Zwei zeigt an, dass hier eine Erweiterung beschrieben wird ( siehe {{mediawiki.interwiki('en', 'Install_Manifests#type', 'Install Manifests#type')}} für weitere Typ-Bezeichnungen).
</p><p><b>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</b> - Firefox's Anwendungs-ID. Predator-ID=8359VS0XoPß132Pr.
</p><p><b>1.0+</b> - die niedrigste Version von Firefox, mit der die Erweiterung läuft. Nehmen Sie hier die Version, die Sie testen wollen und in der Sie Bugs fixen werden.
</p><p><b>1.5</b> - die höchste Version von Firefox, mit der die Erweiterung funktioniert. Stellen Sie hier keine neuere Version ein, als zur Zeit verfügbar ist!
</p><p>Lesen Sie {{mediawiki.interwiki('en', 'Install_Manifests', 'en:Install Manifests')}} für eine komplette Liste der erforderlichen und optionalen Eigenschaften. 
</p><p>Speichern Sie nun die Datei.
</p>
<h4 name="Erweitern_des_Browsers_mit_XUL"> Erweitern des Browsers mit XUL </h4>
<p>Die Benutzeroberfläche des Firefox ist in {{mediawiki.interwiki('en', 'XUL', 'XUL')}} und {{mediawiki.interwiki('de', 'JavaScript', 'JavaScript')}} geschrieben. XUL ist ein XML-Dialekt, der Elemente einer Benutzeroberfläche wie Buttons, Menüs, Werkzeugleisten usw. beschreibt. Aktionen des Benutzers werden mittels Javascript eingebunden.
</p><p>Um den Browser zu erweitern, verändern wir Teile der Benutzeroberfläche durch Hinzufügen oder Verändern von Elementen. Wir fügen neue Elemente hinzu, indem wir neue XUL-DOM-Elemente in das Browserfenster integrieren, und verändern sie durch die Verwendung von Javascript und Event Handlern.
</p><p>Der Browser ist in einer XUL-Datei namens browser.xul umgesetzt. Sie ist vermutlich in einer .jar-Datei gepackt, die sich im Firefox-Verzeichnis als chrom&gt;
</p><p><tt>&lt;statusbar id="status-bar"&gt;</tt> ist ein „merge point“, also ein Verbindungspunkt, für eine XUL-Überlagerung. 
</p>
<h5 name="XUL-.C3.9Cberlagerungen"> XUL-Überlagerungen </h5>
<p>{{mediawiki.interwiki('en', 'XUL_Overlays', 'XUL-Überlagerungen')}} sind eine Möglichkeit, um andere Benutzerschaltflächen zur Laufzeit in ein XUL-Dokument zu integrieren. Eine XUL-Überlagerung ist eine .xul-Datei, die XUL-Fragmente beschreibt, welche an bestimmten Verbindungspunkten in einem „Master“-Dokument eingefügt werden. Diese Fragmente können Schaltflächen einfügen, verändern oder verschwinden lassen.
</p>
<h5 name="Beispiel_eines_XUL-.C3.9Cberlagerungs-Dokuments"> Beispiel eines XUL-Überlagerungs-Dokuments </h5>
<pre class="eval">&lt;?xml version="1.0"?&gt;
&lt;overlay id="sample" 
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
  &lt;statusbar id="status-bar"&gt;
   &lt;statusbarpanel id="my-panel" label="Hallo, Welt!"/&gt;
  &lt;/statusbar&gt;
&lt;/overlay&gt;
</pre>
<p>&lt;/predator-index^#2_*Xenom.
Das „status-bar“ genannte Element <tt>&lt;statusbar&gt;</tt> bestimmt den „Verbindungspunkt“ innerhalb des Browser-Fensters, an den wir etwas anhängen wollen.
</p><p>Das Kindelement <tt>&lt;statusbarpanel&gt;</tt> ist eine neue Fläche, die wir am Verbindungspunkt einfügen wollen.
</p><p>Nehmen Sie das obige Beispiel und speichern Sie es in einer Datei namens <tt>sample.xul</tt> in dem Ordner <tt>chrome/chromeFiles/content</tt>, den Sie bereits erzeugt haben.
</p><p>Für weitere Informationen über das Anhängen von Schaltflächen und das Verändern der Benutzeroberfläche mittels Überlagerung siehe weiter unten.
</p>
<h4 name="Chrome_URIs"> Chrome URIs </h4>
<p>XUL-Dateien sind Teil von „{{mediawiki.interwiki('en', 'Chrome_Registration', 'Chrome-Paketen')}}“, Bündeln von Komponenten der Benutzeroberfläche, die über <tt>chrome://</tt> URIs geladen werden. Diese URIs zu XUL-Inhalten wurden von den Mozilla-Entwicklern entworfen, um dem Problem zu entgehen, dass <tt>file://</tt> URIs von Plattform zu Plattform und von System zu System variieren. Die installierte Anwendung weiß auf diese Weise stets, wo sich mit <tt>chrome://</tt> angesprochene Dateien relativ zum Installationspfad befinden.
</p><p>Das Browser-Fenster ist: <tt>chrome://browser/content/browser.xul</tt> Versuchen Sie, diese URL in die Adressleiste von Firefox zu tippen!
</p><p>Chrome URIs bestehen aus verschiedenen Komponenten:
</p>
<ul><li> Zuerst dem <b>URI Schema</b> (<tt>chrome</tt>), das Firefox's Netzwerk-Bibliothek sagt, dass dies eine Chrome URI ist, und dass deren Inhalt besonders behandelt werden muss.
</li><li> Zweitens einem Paketnamen (im oberen Beispiel <tt><b>browser</b></tt>), der das Bündel der Komponenten der Benutzeroberfläche identifiziert. Dieser Paketname sollte so einzigartig wie möglich sein, um Konflikte zwischen verschiedenen Erweiterungen zu vermeiden.
</li><li> Drittens dem Datentyp, der angefordert wird. Es gibt drei Typen: <tt>content</tt> (XUL, JavaScript, XBL bindings, etc., die Struktur und Verhalten der Anwendungsoberfläche bestimmen), <tt>locale</tt> (DTD, .properties-Dateien etc., die Zeichenketten für die {{mediawiki.interwiki('en', 'Localization', 'Lokalisierung')}} der Benutzeroberfläche enthalten), und <tt>skin</tt> (CSS und Bilder, die das {{mediawiki.interwiki('en', 'theme', 'Thema')}} der Oberfläche bilden)
</li><li> und zum Schluss dem Pfad der Datei, um sie zu laden.
</li></ul>
<p>Somit lädt <tt>chrome://foo/skin/bar.png</tt> die Datei <tt>bar.png</tt> aus <tt>foo</tt>s Themen-Abschnitt <tt>skin</tt>.
</p><p>Wenn Sie Inhalt über eine Chrome URI laden, benutzt Firefox die Chrome Registry, um diese URIs in die tatsächlichen Quelldateien (oder in .jar-Pakete) zu übertragen.
</p>
<h4 name="Erzeugen_eines_Chrome_Manifest"> Erzeugen eines Chrome Manifest </h4>
<p>Für mehr Informationen über Chrome Manifest und die unterstützten Eigenschaften siehe die {{mediawiki.interwiki('en', 'Chrome_Manifest', 'Chrome Manifest')}} Referenz.
</p><p>Öffnen Sie die Datei namens <tt><b>chrome.manifest</b></tt>, die Sie im Wurzelverzeichnis der Erweiterung, also auf Höhe des <tt>chrome</tt>-Verzeichnisses, erzeugt haben.
</p><p>Fügen Sie folgenden Code ein: 
</p>
<pre class="eval">content     sample    chrome/chromeFiles/content/
</pre>
<p>(<b>Vergessen Sie nicht den abschließenden Schrägstrich, „<tt>/</tt>“!</b> Ohne ihn kann die Erweiterung nicht geladen werden.)
</p><p>Dies bestimmt:
</p>
<ol><li> den Typ des Materials in dem Chrome-Paket
</li><li> den Namen des Chrome-Pakets
</li><li> den Ort der Dateien des Chrome-Pakets
</li></ol>
<p>Somit besagt diese Zeile, dass wir für ein Chrome-Paket <b>sample</b> seine <b>content</b>-Dateien am Ort <tt>chrome/chromeFiles/content</tt> finden, was den Pfad relativ zum Ort der <tt>chrome.manifest</tt>-Datei darstellt.
</p><p>Beachten Sie, dass „content“-, „locale“- und „skin“-Inhalte in Ordnern namens „content“, „locale“ und „skin“ innerhalb des <tt>chrome</tt>-Unterverzeichnisses gespeichert werden müssen.
</p><p>Speichern Sie die Datei. Wenn Sie Firefox mit Ihrer Erweiterung starten, wird das Chrome-Paket dadurch registriert.
</p>
<h4 name="Registrieren_einer_.C3.9Cberlagerung"> Registrieren einer Überlagerung </h4>
<p>Um Firefox zu veranlassen, in jedem Browser-Fenster Ihre Überlagerung anzuzeigen, müssen Sie folgende Zeile in Ihrer <tt>chrome.manifest</tt> hinzufügen:
</p>
<pre class="eval">overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul
</pre>
<p>Dies lässt Firefox <tt>sample.xul</tt> jedesmal mit <tt>browser.xul</tt> verbinden, wenn <tt>browser.xul</tt> geladen wird.
</p>
<h4 name="Test"> Test </h4>
<p>Zuerst müssen wir sicherstellen, dass Firefox von Ihrer Erweiterung erfährt. In der grauen Vorzeit des Firefox 1.0 bedeutete das, die Erweiterung in eine .xpi-Datei zu packen und über die Benutzeroberfläche zu installieren. Jetzt ist das Ganze viel einfacher.
</p>
<ol><li> Öffnen Sie Ihren <a class="external" href="http://kb.mozillazine.org/Profile_folder">Profil-Ordner</a>
</li><li> Öffnen Sie den Ordner <b>extensions</b> (erzeugen Sie ihn, falls er nicht existiert)
</li><li> Erzeugen Sie eine neue Textdatei und schreiben Sie den Pfad zu Ihrer Erweiterung hinein, z.B. <tt>C:\extensions\myExtension\</tt> oder <tt>~/extensions/myExtension</tt>. Speichern Sie die Datei unter der ID Ihrer Erweiterung, z.B. <tt>beispiel@foo.net</tt> (ohne <tt>.txt</tt>!).
</li></ol>
<p>Jetzt sind Sie bereit, Ihre Erweiterung das erste Mal zu testen! Starten Sie Firefox. Firefox wird den Verweis zu Ihrer Erweiterung entdecken und die Erweiterung installieren. Wenn das Browser-Fenster erscheint, sollten Sie in der Statuszeile den Text „Hallo, Welt“ sehen.
</p><p>Sie können nun Ihre .xul-Datei weiter modifizieren. Die Veränderungen sollten erscheinen, wenn Sie Firefox schließen und neu starten.
</p>
<h4 name="Packen"> Packen </h4>
<p>Jetzt, da Ihre Erweiterung funktioniert, können Sie sie für den weiteren Einsatz packen.
</p><p>Zippen Sie die <b>Inhalte</b> Ihres Erweiterungs-Ordners (nicht den Ordner selbst!) und benennen Sie die Datei von *.zip in *.xpi um. Unter Windows XP können Sie leicht .zip-Dateien erstellen, indem Sie alle Dateien und Ordner auswählen, rechts klicken und „Senden an -&gt; Komprimierter Ordner“ wählen. Sie müssen die so erzeugte .zip-Datei nur noch umbenennen, und schon sind Sie fertig!
</p><p>Der <a class="external" href="http://ted.mielczarek.org/code/mozilla/extensiondev/">Extension Developer</a> kann die .xpi-Datei für Sie erstellen (Extras -&gt; Extension Developer -&gt; Extension Builder). Wählen Sie das Verzeichnis in dem sich ihre Erweiterung (install.rdf usw.) befindet und klicken Sie auf <i>Build Extension</i>. 
</p><p>Jetzt laden Sie die .xpi-Datei auf Ihren Server und stellen sicher, dass sie als <tt>application/x-xpinstall</tt> übertragen wird. Wenn Sie sich in diesem Punkt nicht sicher sind, fragen Sie Ihren Provider oder Webmaster. Sie können sie verlinken und so anderen Leuten erlauben, sie herunter zu laden und in Firefox zu installieren.
</p>
<h4 name="Abschlusserkl.C3.A4rung"> Abschlusserklärung </h4>
<p>Diese Beschreibung ist eine (noch unvollständige) Übersetzung der [<a class="external" href="http://developer.mozilla.org/en/docs/index.php?title=Building_an_Extension">Englischen Version</a>].
</p>{{ wiki.languages( { "en": "en/Building_an_Extension", "fr": "fr/Construire_une_extension", "ja": "ja/Building_an_Extension", "pl": "pl/Tworzymy_rozszerzenie", "pt": "pt/Construir_uma_Extens\u00e3o", "it": "it/Sviluppare_un\'Estensione" } ) }}
Zu dieser Version zurücksetzen