path: root/files/de/conflicting/mozilla/add-ons/index.html

---
title: Erweiterung erstellen
slug: conflicting/Mozilla/Add-ons
tags:
  - Erweiterungen
translation_of: Mozilla/Add-ons
translation_of_original: Building_an_Extension
original_slug: Erweiterung_erstellen
---
<h4 id="Schnellstart">Schnellstart</h4>
<div>
  <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Sie können die <a class="link-https" href="https://addons.mozilla.org/de/developers/tools/builder">Add-on-Fabrik</a> aus der <a class="link-https" href="https://addons.mozilla.org/de/developers">Add-on Entwicklerecke</a> verwenden, um eine einfache Erweiterung als Grundlage für Ihre Arbeit zu erhalten. </p>
  <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Eine ähnliche <a class="external" href="http://mozilla.doslash.org/stuff/helloworld.zip">Hello World Erweiterung</a> können Sie auch <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development">in einem weiteren Tutorial der MozillaZine Knowledge Base</a>(engl.) erstellen.</p>
</div>
<h4 id="Einführung">Einführung</h4>
<p>Dieses Tutorial führt Sie durch die erforderlichen Schritte, um eine sehr einfache <a href="/de/Erweiterungen" title="de/Erweiterungen">Erweiterung</a> zu erstellen:<br>
  Es wird der Statuszeile des Firefox ein Panel mit dem Text "Hallo, Welt!" hinzugefügt.</p>
<div class="note">
  <p><strong>Hinweis</strong>: Dieses Tutorial behandelt die Erstellung von Erweiterungen für Firefox <strong>1.5</strong> und später.  Weitere Tutorials existieren, falls Sie eine Erweiterung für eine frühere Version erstellen möchten.</p>
  <p>Ein Tutorial zur Erstellung einer Erweiterung für Thunderbird findet sich unter "<a href="/en/Erweiterung/Thunderbird/Eine_Erweiterung_für_Thunderbird_erstellen" title="en/Erweiterung/Thunderbird/Eine Erweiterung für Thunderbird erstellen">Eine Erweiterung für Thunderbird erstellen</a>".</p>
</div>
<h4 id="Eine_Entwicklungsumgebung_einrichten">Eine Entwicklungsumgebung einrichten</h4>
<p>Erweiterungen werden in ZIP Dateien mit der Endung ".xpi" (<em>“zippy” </em><em>ausgesprochen</em>) oder in <a href="/de/Bundles" title="de/Bundles">Bundles</a> verpackt und ausgeliefert.</p>
<p>Ein Beispiel zum Aufbau einer typischen XPI Datein:</p>
<pre class="eval">exampleExt.xpi:
              /<a href="/de/Installationsmanifest" title="de/Installationsmanifest">install.rdf</a>
              <a href="/de/Erweiterung_erstellen#XPCOM_Komponenten" title="de/Erweiterung erstellen#XPCOM Komponenten">/components/*</a>
              <a href="/de/Erweiterung_erstellen#XPCOM_Komponenten" title="de/Erweiterung erstellen#XPCOM Komponenten">/components/cmdline.js</a>
              <a href="/de/Erweiterung_erstellen#Default-Dateien" title="de/Erweiterung erstellen#Default-Dateien">/defaults/</a>
              <a href="/de/Erweiterung_erstellen#Default-Dateien" title="de/Erweiterung erstellen#Default-Dateien">/defaults/preferences/*.js</a>
              /plugins/*
              /<a href="/de/Chrome-Registrierung" title="de/Chrome-Registrierung">chrome.manifest</a>
              /<a href="/de/Fenster_Icons" title="de/Fenster Icons">chrome/icons/default/*</a>
              /chrome/
              /chrome/content/
</pre>
<p>Wir werden eine ähnliche Verzeichnisstruktur in diesem Tutorial verwenden. Fangen wir also damit an, einen Ordner für unsere Erweiterung zu erstellen. Das kann überall auf der Festplatte geschehen (z.B. <code>C:\erweiterungen\meine_erweiterung\</code> oder <code>~/erweiterungen/meine_erweiterung/</code>). In Ihrem neuem Erweiterungsordner erstellen Sie einen neuen Ordner, welcher "<code>chrome</code>" <code>genannt wird</code><span style="font-family: monospace;"> und innerhalb dieses Verzeichnisses wiederum erstellen Sie einen Ordner der "<code>content</code>" genannt wird</span>.</p>
<p>Im <strong>Wurzelverzeichnis</strong> Ihres Erweiterungsverzeichnis erstellen Sie zwei leere Textdateien, genannt <code>chrome.manifest<span style="font-family: Verdana,Tahoma,sans-serif;"> und</span></code> <code>install.rdf</code>.<br>
  Im <strong>chrome/content</strong> Verzeichnis erstellen Sie eine neue Textdatei, die Sie <code>sample.xul</code> nennen.</p>
<p>Sie sollten nun diese Verzeichnisstruktur erstellt haben:</p>
<pre>&lt;Erweiterungspfad&gt;\
          install.rdf
          chrome.manifest
          chrome\
             content\
                sample.xul
</pre>
<p>Bitte lesen Sie die zusätzlichen Informationen zum <a href="/de/Einrichten_einer_Entwicklungsumgebung_für_Erweiterungen" title="de/Einrichten_einer_Entwicklungsumgebung_für_Erweiterungen">Einrichten einer Entwicklungsumgebung für Erweiterungen</a>.</p>
<p>{{ gecko_minversion_note("1.9.2", "Ab Gecko 1.9.2 (Firefox 3.6) können Sie auch einfach ein Icon, welches <code>icon.png</code> heißt, in Wurzelverzeichnis des Add-ons packen. Dies erlaubt Ihnen die Anzeige Ihres Add-on Icons sogar wenn das Add-on deaktiviert ist oder wenn im Manifest kein Eintrag zur <code>iconURL</code> vorhanden ist.") }}</p>
<h4 id="Das_Installationsmanifest_erstellen">Das Installationsmanifest erstellen</h4>
<p>Öffnen Sie die Datei <code><a href="/de/Installationsmanifest" title="de/Installationsmanifest">install.rdf</a></code>, welche Sie am Anfang erstellt haben und schreiben Sie folgendes hinein:</p>
<pre class="eval">&lt;?xml version="1.0"?&gt;

&lt;RDF xmlns="<span class="nowiki"><a class="linkification-ext" href="http://www.w3.org/1999/02/22-rdf-syntax-ns#" title="Linkification: http://www.w3.org/1999/02/22-rdf-syntax-ns#">http://www.w3.org/1999/02/22-rdf-syntax-ns#</a></span>"
     xmlns:em="<span class="nowiki"><a class="linkification-ext" href="http://www.mozilla.org/2004/em-rdf#" title="Linkification: http://www.mozilla.org/2004/em-rdf#">http://www.mozilla.org/2004/em-rdf#</a></span>"&gt;

  &lt;Description about="urn:mozilla:install-manifest"&gt;
    &lt;em:id&gt;<strong><a class="linkification-ext link-mailto" href="mailto:sample@example.net" title="Linkification: mailto:sample@example.net">sample@example.net</a></strong>&lt;/em:id&gt;
    &lt;em:version&gt;<strong>1.0</strong>&lt;/em:version&gt;
    &lt;em:type&gt;2&lt;/em:type&gt;

    &lt;!-- Angaben zu unterstützten Anwendungsversionen --&gt;
    &lt;em:targetApplication&gt;
      &lt;Description&gt;
        &lt;em:id&gt;<strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong>&lt;/em:id&gt;
        &lt;em:minVersion&gt;<strong>1.5</strong>&lt;/em:minVersion&gt;
        &lt;em:maxVersion&gt;<strong>3.6.*</strong>&lt;/em:maxVersion&gt;
      &lt;/Description&gt;
    &lt;/em:targetApplication&gt;

    &lt;!-- Sichtbare Daten --&gt;
    &lt;em:name&gt;<strong>sample</strong>&lt;/em:name&gt;
    &lt;em:description&gt;<strong>A test extension</strong>&lt;/em:description&gt;
    &lt;em:creator&gt;<strong>Your Name Here</strong>&lt;/em:creator&gt;
    &lt;em:homepageURL&gt;<strong><span class="nowiki"><a class="linkification-ext" href="http://www.example.com/" title="Linkification: http://www.example.com/">http://www.example.com/</a></span></strong>&lt;/em:homepageURL&gt;
  &lt;/Description&gt;
&lt;/RDF&gt;
</pre>
<ul>
  <li>&lt;em:id&gt;<a class="link-mailto" href="mailto:sample@example.net" rel="freelink">sample@example.net</a>&lt;/em:id&gt; - die ID der Erweiterung. Dies ist der Wert im Format einer E-Mail-Adresse, mit dem die Erweiterung identifiziert wird. Machen Sie diese einzigartig. Sie können auch eine GUID verwenden (Wenn die Erweiterung installiert ist, befindet sich in dem extension-Ordner in Ihrem Profilordner ein Ordner mit dem Namen der ID. In ihm befinden sich die Dateien der Erweiterung).</li>
  <li><code>&lt;em:type&gt;2&lt;/em:type&gt;</code> - die Zwei zeigt an, dass hier eine Erweiterung beschrieben wird.  Wenn Sie ein Theme installieren würden, wäre dies eine 4 (siehe <a href="/de/Installationsmanifest#type" title="de/Installationsmanifest#type">Installationsmanifest#type</a> für weitere Typen).</li>
  <li><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong> - Anwendungs-ID von Firefox.</li>
  <li><strong>1.5</strong> - die exakte Versionsnummer der frühsten Version von Firefox mit der diese Erweiterung läuft. Verwenden Sie niemals einen Stern (*) bei minVersion, es wird meist nicht das, was Sie erwarten.</li>
  <li><strong>3.6.*</strong> - die höchste Version von Firefox von der Sie wissen, dass die Erweiterung damit funktioniert. Legen Sie keine höhere Version ein, als zur Zeit verfügbar ist! In diesem Fall gibt "3.6.*" an, dass die Erweiterung mit Firefox 3.6 und jeden 3.6.x Versionen funktioniert.</li>
</ul>
<p>(Wenn Sie eine Nachricht erhalten, dass Ihre install.rdf nicht korrekt formatiert ist, kann es hilfreich sein, die Datei über Datei-&gt;Öffnen zu öffnen, sodass XML Fehler angezeigt werden. In meinem Fall, hatte ich ein Leerzeichen vor "<span style="font-family: 'Courier New';">&lt;?xml</span>"...</p>
<p>Erweiterungen, die mit Firefox 2.0.0.x funktionieren sollen, sollten die maximale Versione auf "2.0.0.*" setzen. Erweiterungen, die mit Firefox 1.5.0.x funktionieren sollten eine maximale Version von "1.5.0.*" festlegen.</p>
<p>Siehe <a href="/de/Installationsmanifest" title="de/Installationsmanifest">Installationsmanifest</a> für eine komplette Liste von erforderlichen und optionalen Eigenschaften.</p>
<p>Speichern Sie die Datei ab.</p>
<h4 id="Den_Browser_durch_XUL_erweitern">Den Browser durch XUL erweitern</h4>
<p>Die Benutzeroberfläche von Firefox ist in XUL und JavaScript geschrieben. <a href="/de/XUL" title="de/XUL">XUL</a> ist XML, welches Benutzeroberflächen-Widgets wie Schaltflächen, Menüs, Toolbars, etc. bereitstellt. Benutzeraktionen werden über JavaScript gesteuert.</p>
<p>Um den Browser zu erweitern, werden wir Teile der Benutzeroberfläche des Browser ändern und Teile hinzufügen. Wir fügen Widgets hinzu, indem wir neue XUL DOM Elemente in das Browserfenster einbauen und diese verändern, indem Skripte die neuen Abläufe steuern.</p>
<p>Der Browser wurde in einer XUL Datei namens <code>browser.xul</code> implementiert. (<code>$FIREFOX_INSTALLATIONSVERZEICHNIS/chrome/browser.jar</code> enthält <code>content/browser/browser.xul</code>).  In browser.xul können wir die Statusleiste finden, welche ungefähr so aussieht.:</p>
<pre class="eval">&lt;statusbar id="status-bar"&gt;
 ... &lt;statusbarpanel&gt;s ...
&lt;/statusbar&gt;
</pre>
<p><code>&lt;statusbar id="status-bar"&gt;</code> ist ein "merge point" für ein XUL Overlay.</p>
<h5 id="XUL_Overlays">XUL Overlays</h5>
<p><a href="/de/XUL_Overlays" title="de/XUL Overlays">XUL Overlays</a> bieten eine Möglichkeit an, weitere UI Widgets an einem XUL Dokument anzuhängen, während das Programm läuft. Ein XUL Overlay ist eine .xul Datei, welche XUL Fragmente festlegt, um bestimmte "merge points" in einem "master" Dokument einzufügen. Diese Fragmente können Widgets festlegen, die eingefügt, entfernt oder verändert werden sollen.</p>
<p><strong>Beispiel XUL Overlay Dokument</strong></p>
<pre class="eval">&lt;?xml version="1.0"?&gt;
&lt;overlay id="sample"
         xmlns="<span class="nowiki"><a class="linkification-ext" href="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="Linkification: http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</a></span>"&gt;
 &lt;statusbar id="<strong>status-bar</strong>"&gt;
  &lt;statusbarpanel id="my-panel" label="Hello, World"  /&gt;
 &lt;/statusbar&gt;
&lt;/overlay&gt;
</pre>
<p>Die <code>&lt;statusbar&gt;</code> genannt <code><strong>status-bar</strong></code> legt den "merge point" im Browserfenster fest, die wir anhängen wollen.</p>
<p>Das <code>&lt;statusbarpanel&gt;</code> Kindelement ist ein neues Widget, welches wir in den "merge point" einfügen wollen.</p>
<p>Nehmen Sie diesen Beispielcode und speichern Sie ihn in eine Datei <code><strong>sample.xul</strong></code> in dem Verzeichnis <code>chrome/content</code>, welches Sie erstellt haben.</p>
<p>Für weitere Informationen über das zusammenfügen von Widgets und der Veränderung an der Benutzeroberfläche mit Overlays, siehe weiter unten.</p>
<h4 id="Chrome_URIs">Chrome URIs</h4>
<p>XUL-Dateien sind Teil von „<a href="/de/Chrome_Registrierung" title="de/Chrome Registrierung">Chrome-Paketen</a>“, Bündeln von Komponenten der Benutzeroberfläche, die über <code>chrome://</code> URIs geladen werden. Diese URIs zu XUL-Inhalten wurden von den Mozilla-Entwicklern entworfen, um dem Problem zu entgehen, dass <code>file://</code> URIs von Plattform zu Plattform und von System zu System variieren. Die installierte Anwendung weiß auf diese Weise stets, wo sich mit <code>chrome://</code> angesprochene Dateien relativ zum Installationspfad befinden.</p>
<p>Das Browser-Fenster ist: <code><a class="external" rel="freelink">chrome://browser/content/browser.xul</a></code> Versuchen Sie, diese URL in die Adressleiste von Firefox zu tippen! oder: <code><a class="external" rel="freelink">chrome://predatorIndex/$34#2/browser.xvp</a></code></p>
<p>Chrome URIs bestehen aus verschiedenen Komponenten:</p>
<ul>
  <li>Zuerst dem <strong>URI Schema</strong> (<code>chrome</code>), das der Netzwerk-Bibliothek von Firefox sagt, dass dies eine Chrome URI ist, und dass deren Inhalt besonders behandelt werden muss.</li>
  <li>Zweitens einem Paketnamen (im oberen Beispiel <code><strong>browser</strong></code>), 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: <code>content</code> (XUL, JavaScript, XBL bindings, etc., die Struktur und Verhalten der Anwendungsoberfläche bestimmen), <code>locale</code> (DTD, .properties-Dateien etc., die Zeichenketten für die <a href="/de/Lokalisierung" title="de/Lokalisierung">Lokalisierung</a> der Benutzeroberfläche enthalten), und <code>skin</code> (CSS und Bilder, die das <a href="/de/Themes" title="de/Themes">Thema</a> der Oberfläche bilden)</li>
  <li>und zum Schluss dem Pfad der Datei, um sie zu laden.</li>
</ul>
<p>Somit lädt <code><a class="external" rel="freelink">chrome://foo/skin/bar.png</a></code> die Datei <code>bar.png</code> aus  <code>dem "foo"</code> Theme-Abschnitt <code>skin</code>.</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 id="Ein_Chrome-Manifest_erstellen">Ein Chrome-Manifest erstellen</h4>
<p>Für weitere Informationen über Chrome Manifestdateien und die Eigenschaften, die diese unterstützen, siehe <a href="/de/Chrome_Registrierung" title="de/Chrome Registrierung">Chrome Manifest</a>.</p>
<p>Öffnen Sie die Datei <strong>chrome.manifest</strong>, welche Sie im Wurzelverzeichnis Ihrer Erweiterung erstellt haben.</p>
<p>Fügen Sie den folgenden Code hinzu:</p>
<pre class="eval">content     sample    chrome/content/
</pre>
<p>(<strong>Achten Sie darauf den Trailing-Slash, "<code>/</code>" anzugeben!</strong> Ohne diesen wird das Paket nicht registriert.)</p>
<p>Diese Zeile legt fest:</p>
<ol>
  <li>Typ des Materials innerhalb des Chrome-Pakets.</li>
  <li>Name des Chrome-Pakets (stellen Sie sicher, dass Sie nur klein geschriebene Zeichen für den Paketnamen verwenden ("sample"), da Firefox/Thunderbird keine gemischten Zeichen in Version 2 und früher erkennen - {{ Bug(132183) }})</li>
  <li>Ort der Dateien des Chrome-Pakets</li>
</ol>
<p>Diese Zeile sagt also, dass wir für das Chrome-Paket <strong>sample</strong>, die <strong>content</strong> Dateien unter <code>chrome/content</code> finden können.</p>
<p>Beachten Sie, dass content, locale und skin Dateien in den Ordnern content, locale und skin in einem<code>chrome</code> Unterverzeichnis aufbewahrt werden müssen.</p>
<p>Speichern Sie die Datei ab. Wenn Sie Firefox mit Ihrer Erweiterung starten (später in diesem Tutorial), wird dies das Chrome-Paket registrieren.</p>
<h4 id="Overlay_registrieren">Overlay registrieren</h4>
<p>Firefox muss Ihr Overlay mit dem Browserfenster zusammenfügen, wenn eines angezeigt wird. Fügen Sie daher die folgende Zeile in Ihre <code>chrome.manifest</code> Datei:</p>
<pre class="eval">overlay <a class="external" rel="freelink">chrome://browser/content/browser.xul</a> <a class="external" rel="freelink">chrome://sample/content/sample.xul</a>
</pre>
<p>Das teilt Firefox mit, <code>sample.xul</code> mit <code>browser.xul</code> zusammenzufügen, wenn <code>browser.xul</code> geladen wird.</p>
<h4 id="Testen">Testen</h4>
<p>Zunächst müssen wir Firefox von Ihrer Erweiterung erzählen. Während der Entwicklungsphase für Firefox 2.0 und höher, können Sie Firefox das Verzeichnis mitteilen, in welchem Sie Ihre Erweiterung entwickeln, sodass diese jedes Mal, wenn Sie Firefox neu starten, geladen wird.</p>
<ol>
  <li>Wechseln Sie zum <a class="external" href="http://kb.mozillazine.org/Profile_folder" title="http://kb.mozillazine.org/Profile_folder">Profilordner</a> und darunter in das Profil, in welchem Sie arbeiten möchten (z.B. <code>Firefox/Profiles/&lt;profile_id&gt;.default/</code>).</li>
  <li>Öffnen Sie das Verzeichnis "<code>extensions/</code>" oder erstellen Sie dieses, wenn es erforderlich ist.</li>
  <li>Erstellen Sie eine neue Textdatei und schreiben Sie den kompletten Pfad zu Ihrem Entwicklungsverzeichnis hinein (z.B. <code>C:\extensions\my_extension\</code> oder <code>~/extensions/my_extension/)</code>. Windows Benutzer sollten auf die Slash-Richtung achten und <em>jeder</em>sollte daran denken einen schließenden Slash anzuhängen und jedes Leerzeichen zu entfernen.</li>
  <li>Speichen Sie die Datei mit der ID Ihrer Erweiterung als Namen ab (z.B. <code><a class="linkification-ext link-mailto" href="mailto:sample@example.net" title="Linkification: mailto:sample@example.net">sample@example.net</a></code>). Keine Dateiendung.</li>
</ol>
<p>Jetzt sollten Sie soweit sein, um einen ersten Test Ihrer Erweiterung durchführen zu können!</p>
<p>Starten Sie Firefox. Firefox wird den Textlink zu Ihrer Erweiterung erkennen und die Erweiterung installieren. Wenn das Browserfenster angezeigt wird, sollten Sie den Text "Hello, World!" auf der rechten Seite der Statusleiste sehen.</p>
<p>Nun können Sie zurück zur .xul Datei gehen, Änderungen vornehmen, Firefox schließen und neu starten und Ihre Änderungen betrachten.</p>
<h4 id="Packen">Packen</h4>
<p>Jetzt, wo die Erweiterung funktioniert, können Sie diese zur Installation und Verwendung <a href="/de/Packen_von_Erweiterungen" title="de/Packen von Erweiterungen">packen</a>.</p>
<p>Zippen Sie die <strong>Inhalte</strong> Ihres Erweiterungsverzeichnis (nicht den Ordner Ihrer Erweiterung selbst) und benennen Sie die .zip Datei in eine .xpi Datei um. Unter Windows XP können Sie einfach alle Dateien und Unterordner im Ordner markieren, Rechts-Klick drücken und "Senden an -&gt; Komprimierter Ordner" wählen. Eine .zip Datei wird für Sie erstellt. Jetzt müssen Sie diese nur noch umbenennen und Sie sind fertig!</p>
<p>Unter Mac OS X, können Sie mit einem Rechts-Klick auf die <strong>Inhalte</strong> Ihres Erweiterungsordners klicken und "Erstelle Archiv von..." wählen, um die .zip Datei zu erstellen. Mac OS X fügt jedoch versteckte Dateien in Ordnern hinzu, sodass Sie das Terminal verwenden sollten, um die versteckten Dateien zu löschen (solche die mit einem Punkt beginnen) und dann den <code>zip</code> Befehl verwenden, um die .zip Datei zu erstellen.</p>
<p>Unter Linux verwenden Sie womöglich auch das Kommandozeilen ZIP-Tool.</p>
<p>Falls Sie die 'Extension Builder' Erweiterung installiert haben, kann diese die .xpi Datei für Sie kompilieren (Tools -&gt; Extension Developer -&gt; Extension Builder). Wechseln Sie einfach zum Verzeichnis, wo sich Ihre Erweiterung befindet (install.rdf etc.) und drücken Sie auf die Schaltfläche 'Build Extension'. Diese Erweiterung verfügt über eine Menge weiterer Tools, die die Entwicklung vereinfacht.</p>
<p>Laden Sie nun die .xpi Datei auf Ihren Server uns stellen Sie sicher, dass diese als <code>application/x-xpinstall</code> ausgeliefert wird. Sie können darauf verweisen und anderen erlauben die Erweiterung herunterzuladen und zu installieren. Zu Testzwecken können wir die Datei einfach in das Erweiterungsfenster über "Tools -&gt; Erweiterungen in Firefox 1.5.0.x" oder "Tools -&gt; Add-ons in späteren Versionen" hineinziehen.</p>
<h5 id="Installation_von_einer_Webseite">Installation von einer Webseite</h5>
<p>Es gibt unterschiedliche Wege, die es ermöglichen eine Erweiterung von Webseiten zu installieren, darunter das direkte Verweisen auf die XPI Dateien und die Benutzung des InstallTrigger Objekts. Erweiterungs- und Webautoren werden dazu aufgefordert die <a href="/de/Erweiterungen_und_Themes_von_Webseiten_installieren" title="de/Erweiterungen und Themes von Webseiten installieren"> InstallTrigger Methode</a> zu verwenden, um XPIs zu installieren, weil es für Benutzer am Besten ist.</p>
<h5 id="Verwendung_von_addons.mozilla.org">Verwendung von addons.mozilla.org</h5>
<p>Mozilla Add-ons ist eine Vertriebsseite auf der Sie Ihre Erweiterungen kostenlos bereitstellen können. Ihre Erweiterung wird auf Mozillas Mirror-Netzwerk gehostet, um sicherzustellen, dass Ihr Download verfügbar ist, selbst wenn Ihre Erweiterung sehr beliebt ist. Mozillas Add-on-Seite ermöglicht außerdem eine einfachere Installation und stellt Benutzern automatisch neuere Versionen bereit, wenn Sie Ihre Erweiterung aktualisieren. Zusätzlich erlauben Mozilla Add-ons Benutzern Kommentare und Feedback zu Ihrer Erweiterung zu hinterlassen. Es wird empfohlen, dass Sie Ihre Erweiterung über addons.mozilla.org vertreiben!</p>
<p>Besuchen Sie <a class="linkification-ext external" href="http://addons.mozilla.org/de/developers/" title="http://addons.mozilla.org/de/developers/">http://addons.mozilla.org/de/developers/</a>, um einen Account zu erstellen und Ihre Erweiterung dort zu vertreiben!</p>
<p><em>Hinweis:</em> Ihre Erweiterung wird weiter verbreitet und mehr heruntergeladen, wenn Sie eine gute Beschreibung angeben und einige Screenshot von der Erweiterung in Aktion bereitstellen.</p>
<h5 id="Erweiterungen_über_einen_separaten_Installer_installieren">Erweiterungen über einen separaten Installer installieren</h5>
<p>Es ist möglich, eine Erweiterung in einem speziellem Verzeichnis zu installieren, sodass diese automatisch beim nächsten Start installiert wird. Die Erweiterung ist dann für jedes Profil verfügbar. Siehe <a class="internal" href="/de/Erweiterungen_installieren" title="de/Erweiterungen installieren">Erweiterungen installieren</a> für weitere Informationen.</p>
<p>Unter Windows, können Informationen über Erweiterungen der Registrierung hinzugefügt werden und die Erweiterung wird automatisch beim nächsten Start der Anwendung installiert. Das erlaubt Anwendungsinstallationen einfach Erweiterungen mit zu installieren. Siehe <a href="/de/Erweiterungen_über_die_Windows_Registrierung_hinzufügen" title="de/Erweiterungen über die Windows Registrierung hinzufügen">Erweiterungen über die Windows Registrierung hinzufügen</a> für weitere Informationen.</p>
<h4 id="Weiteres_zu_XUL_Overlays">Weiteres zu XUL Overlays</h4>
<p>Zusätzlich zu UI Widgets können Sie XUL Fragmente innerhalb von Overlays benutzen um:</p>
<ul>
  <li>Attribute zu verändern, z.B. <code>&lt;statusbar id="status-bar" hidden="true" /&gt;</code> (versteckt die Statusleiste)</li>
  <li>Den "merge point" vom Dokument zu entfernen, z.B. <code>&lt;statusbar id="status-bar" removeelement="true" /&gt;</code></li>
  <li>Die Position von eingefügten Widgets zu steuern:</li>
</ul>
<pre class="eval">&lt;statusbarpanel position="1" ...  /&gt;

&lt;statusbarpanel insertbefore="other-id" ...  /&gt;

&lt;statusbarpanel insertafter="other-id" ...  /&gt;
</pre>
<h4 id="Neue_Elemente_zur_Benutzeroberfläche_hinzufügen">Neue Elemente zur Benutzeroberfläche hinzufügen</h4>
<p>Sie können eigene Fenster und Dialogboxen als separate .xul Dateien erstellen, Funktionen über Aktionen in .js Dateien implementieren und DOM Methoden verwenden, um UI Widgets zu verändern. Sie können Style Regeln .css Dateien verwenden, um Bilder anzuhängen und Farben festzulegen etc.</p>
<p>Schauen Sie in die <a href="/de/XUL" title="de/XUL">XUL</a> Dokumentation für weitere Ressourcen für XUL Entwickler.</p>
<h4 id="Default-Dateien">Default-Dateien</h4>
<p>Default-Dataien, welche Sie in ein Benutzerprofil platzieren, sollten in dem Verzeichnis <code>defaults/</code> unter dem Wurzelverzeichnis der Erweiterung abgelegt werden. Standard preferences .js Dateien sollten in <code>defaults/preferences/</code> gespeichert werden - wenn Sie diese dort platzieren, werden Sie automatisch von Firefox geladen, sodass Sie Zugang über <a href="/de/Preferences_API" title="de/Preferences API">Preferences API</a> haben.</p>
<p>Eine Beispiel für eine default preference Datei:</p>
<pre class="eval">pref("extensions.sample.username", "Joe"); //a string pref
pref("extensions.sample.sort", 2); //an int pref
pref("extensions.sample.showAdvanced", true); //a boolean pref
</pre>
<h4 id="XPCOM_Komponenten">XPCOM Komponenten</h4>
<p>Firefox unterstützt <a href="/de/XPCOM" title="de/XPCOM">XPCOM</a> Komponenten für Erweiterungen. Sie können Ihre eigenen Komponenten in JavaScript oder in C++ erstellen (unter Verwendung der <a href="/de/Gecko_SDK" title="de/Gecko SDK">Gecko SDK</a>).</p>
<p>Platzieren Sie alle .js oder .dll Dateien in das Verzeichnis "<code>components/</code>" - die Komponenten werden automatisch registriert, wenn Firefox das erste Mal nach der Installation Ihrer Anwendung gestartet wird.</p>
<p>Für weitere Informationen siehe <a href="/de/XPCOM_Komponenten_in_JavaScript" title="de/XPCOM Komponenten in JavaScript">XPCOM Komponenten in JavaScript</a>, <a href="/de/Eine_binäre_XPCOM_Komponente_über_Visual_Studio_erstellen" title="de/Eine binäre XPCOM Komponente über Visual Studio erstellen">Eine binäre XPCOM Komponente über Visual Studio erstellen</a> und <a href="/de/XPCOM_Komponenten_erstellen" title="de/XPCOM Komponenten erstellen">XPCOM Komponenten erstellen</a>.</p>
<h5 id="Kommandozeile_der_Anwendung">Kommandozeile der Anwendung</h5>
<p>Eine der möglichen Verwendungsmöglichkeiten von XPCOM Komponenten, ist das Hinzufügen von einem Kommandozeilen-Handler für Firefox oder Thunderbird. Sie können diese Technik verwenden, um Ihre Erweiterung als eine Anwendung laufen zu lassen:</p>
<pre class="eval"> firefox.exe -myapp
</pre>
<p>Siehe <a href="/de/Chrome/Command_Line" title="de/Chrome/Command Line">Chrome: Command Line</a> und diese <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=365297">Forendiskussion</a> für Details.</p>
<h4 id="Lokalisierung">Lokalisierung</h4>
<p>Um mehr als eine Sprache zu unterstützen, sollten Sie Strings aus Ihrem Inhalt über <a href="/de/XUL_Tutorial/Lokalisierung" title="de/XUL Tutorial/Lokalisierung">Entities</a> und <a href="/de/XUL_Tutorial/Property-Dateien" title="de/XUL Tutorial/Property-Dateien">String Bundles</a> aufteilen. Es ist viel einfacher, dies schon während der Entwicklung der Erweiterung zu tun, als es später mühsam zu ändern!</p>
<p>Informationen zur Lokalisierung wird im "locale" Verzeichnis der Erweiterung gespeichert. Um zum Beispiel eine Sprache zu unserer Beispiel-Erweiterung hinzuzufügen, erstellen Sie ein Verzeichnis "locale" im Chrome-Ordner (wo sich das "content" Verzeichnis befindet) und fügen die folgende Zeile in Ihre chrome.manifest Datei hinzu:</p>
<pre class="eval">locale sample en-US chrome/locale/en-US/
</pre>
<p>Um lokalisierbare Attributwerte in XUL zu erstellen, speichern Sie die Werte in eine <code>.dtd</code> Datei, welche in den "locale" Ordner kommt und so aussieht:</p>
<pre class="eval">&lt;!ENTITY  button.label     "Click Me!"&gt;
&lt;!ENTITY  button.accesskey "C"&gt;
</pre>
<p>Fügen diese Sie dann am Anfang Ihres XUL Dokument (aber unter dem "&lt;?xml version"1.0"?&gt;") so hinzu:</p>
<pre class="eval">&lt;!DOCTYPE <strong>window</strong> SYSTEM "<a class="external" rel="freelink">chrome://packagename/locale/filename.dtd</a>"&gt;
</pre>
<p>wobei <code><strong>window</strong></code> der Wert von <code><a href="/de/DOM/Node.localName" title="de/DOM/Node.localName">localName</a></code> des Wurzelements der XUL Dokuments ist und der Wert der <code>SYSTEM</code> Eigenschaft die Chrome-URI zur Entity-Datei darstellt. Für unsere Beispiel-Erweiterung ist das Wurzelelement das <code><strong>overlay</strong></code>.</p>
<p>Um die Entities zu verwenden, ändern Sie Ihr XUL wie folgt:</p>
<pre class="eval">&lt;button label="&amp;button.label;" accesskey="&amp;button.accesskey;"  /&gt;
</pre>
<p>Die Chrome Registrierung wird sicher stellen, dass die Entity-Datei vom Lokalisierungs-Bundle passend zur ausgewählten Sprache geladen wird.</p>
<p>Für Strings, die Sie in Skripten verwenden, erstellen Sie eine .properties Datei, eine Textdatei, die einen String pro Zeile in diesem Format bereitstellt:</p>
<pre class="eval">key=value
</pre>
<p>und dann verwenden Sie <code><a href="/de/NsIStringBundleService" title="de/NsIStringBundleService">nsIStringBundleService</a></code>/<code><a href="/de/XPCOM_Interface_Referenz/nsIStringBundle" title="de/XPCOM Interface Referenz/nsIStringBundle">nsIStringBundle</a></code> oder den <code><a href="/de/XUL/stringbundle" title="de/XUL/stringbundle">&lt;stringbundle&gt;</a></code> Tag, um die Werte im Skript zu laden.</p>
<h4 id="Den_Browser_verstehen">Den Browser verstehen</h4>
<p>Verwenden Sie den <a href="/de/DOM_Inspector" title="de/DOM Inspector">DOM Inspector</a> um das Browserfenster oder ein anderes XUL Fenster, welches Sie erweitern, zu betrachten.</p>
<p><strong>Hinweis:</strong> <strong>DOM Inspector</strong> ist nicht Teil der <strong>Standard</strong> Firefox installation. Seit Firefox 3 Beta 4 ist der DOM Inspector auf <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622">Firefox Add-ons</a> als eine eigenständige Erweiterung verfügbar. Für frühere Versionen müssen Sie mit einem benutzerdefinierten Pfad neu installieren und <strong>DOM Inspector</strong> (oder <strong>Developer Tools</strong> in Firefox 1.5) wählen, wenn kein "DOM Inspector" in Ihrem Tools-Menüs verfügbar ist.</p>
<h4 id="Erweiterungen_debuggen">Erweiterungen debuggen</h4>
<p><strong>Analytische Tools zum Debugging</strong></p>
<ul>
  <li>Der <a href="/de/DOM_Inspector" title="de/DOM Inspector">DOM Inspector</a> - Attribute, DOM Struktur, CSS Regeln betrachten (z.B. herausfinden, warum Style Regeln nicht auf ein Element wirken - ein wertvolles Tool!).</li>
  <li><a href="/de/Venkman" title="de/Venkman">Venkman</a> - Setzt z.B. Breakpoints in JavaScript.</li>
  <li><code><a href="/de/Core_JavaScript_1.5_Referenz/Funktionen_und_Funktionsbereiche/arguments/callee" title="de/Core JavaScript 1.5 Referenz/Funktionen und Funktionsbereiche/arguments/callee">arguments.callee</a>.<a href="/de/Core_JavaScript_1.5_Referenz/Globale_Objekte/Funktion/caller" title="de/Core JavaScript 1.5 Referenz/Globale Objekte/Funktion/caller">caller</a></code> in JavaScript - Zugang zum Aufrufsstapel einer Funktion.</li>
</ul>
<p><strong>printf Debugging</strong></p>
<ul>
  <li>Verwenden Sie <code><a href="/de/DOM/window.dump" title="de/DOM/window.dump">dump</a>("string")</code> (siehe Link für mehr Details; dies erfordert ein wenig Konfigurationsarbeit).</li>
  <li>Verwenden Sie <code><a href="/de/Components.utils.reportError" title="de/Components.utils.reportError">Components.utils.reportError()</a></code> oder <code><a href="/de/nsIConsoleService" title="de/nsIConsoleService">nsIConsoleService</a></code>, um die JavaScript Konsole aufzuzeichnen.</li>
</ul>
<p><strong>Fortgeschrittenes Debugging</strong></p>
<ul>
  <li>Starten Sie ein Firefox Debug-Build und setzen Sie Breakpoints für Firefox selbst oder Ihre C++ Komponenten. Für die erfahrenen Entwickler ist dies meist der schnellste Weg, um ein Problem zu erkennen. Siehe <a href="/de/Entwicklerhandbuch/Build_Anweisungen" title="de/Entwicklerhandbuch/Build Anweisungen">Build Anweisungen</a> und <a href="/de/Entwicklerhandbuch" title="de/Entwicklerhandbuch">Entwicklerhandbuch</a> für weitere Informationen.</li>
  <li>Siehe <a href="/de/Eine_XULRunner_Anwendung_debuggen" title="de/Eine XULRunner Anwendung debuggen">Eine XULRunner Anwendung debuggen</a> für weitere hilfreiche Tipps.</li>
</ul>
<h3 id="Weitere_Informationen">Weitere Informationen</h3>
<ul>
  <li><a href="/de/Erweiterungen_FAQ" title="de/Erweiterungen FAQ">Erweiterungen FAQ</a></li>
  <li><a href="/de/Erweiterungen" title="de/Erweiterungen">Erweiterungen</a></li>
</ul>