Erweiterung erstellen

Schnellstart

Einführung

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

Eine Entwicklungsumgebung einrichten

Erweiterungen werden in ZIP Dateien mit der Endung ".xpi" (“zippy” ausgesprochen) oder in Bundles verpackt und ausgeliefert.

Ein Beispiel zum Aufbau einer typischen XPI Datein:

exampleExt.xpi:
              /install.rdf                   
              /components/*  
              /components/cmdline.js                   
              /defaults/
              /defaults/preferences/*.js     
              /plugins/*                        
              /chrome.manifest                
              /chrome/icons/default/*       
              /chrome/
              /chrome/content/

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. C:\erweiterungen\meine_erweiterung\ oder ~/erweiterungen/meine_erweiterung/). In Ihrem neuem Erweiterungsordner erstellen Sie einen neuen Ordner, welcher "chrome" genannt wird und innerhalb dieses Verzeichnisses wiederum erstellen Sie einen Ordner der "content" genannt wird.

Im Wurzelverzeichnis Ihres Erweiterungsverzeichnis erstellen Sie zwei leere Textdateien, genannt chrome.manifest und install.rdf.
Im chrome/content Verzeichnis erstellen Sie eine neue Textdatei, die Sie sample.xul nennen.

Sie sollten nun diese Verzeichnisstruktur erstellt haben:

<Erweiterungspfad>\
          install.rdf
          chrome.manifest
          chrome\
             content\
                sample.xul

Bitte lesen Sie die zusätzlichen Informationen zum Einrichten einer Entwicklungsumgebung für Erweiterungen.

Das Installationsmanifest erstellen

Öffnen Sie die Datei install.rdf, welche Sie am Anfang erstellt haben und schreiben Sie folgendes hinein:

<?xml version="1.0"?>

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

  <Description about="urn:mozilla:install-manifest">
    <em:id>[email protected]</em:id>
    <em:version>1.0</em:version>
    <em:type>2</em:type>
   
    <!-- Angaben zu unterstützten Anwendungsversionen --> 
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>1.5</em:minVersion>
        <em:maxVersion>3.6.*</em:maxVersion>
      </Description>
    </em:targetApplication>
   
    <!-- Sichtbare Daten -->
    <em:name>sample</em:name>
    <em:description>A test extension</em:description>
    <em:creator>Your Name Here</em:creator>
    <em:homepageURL>https://www.example.com/</em:homepageURL>
  </Description>      
</RDF>

• <em:id>[email protected]</em:id> - 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).
• <em:type>2</em:type> - die Zwei zeigt an, dass hier eine Erweiterung beschrieben wird.  Wenn Sie ein Theme installieren würden, wäre dies eine 4 (siehe Installationsmanifest#type für weitere Typen).
• {ec8030f7-c20a-464f-9b0e-13a3a9e97384} - Anwendungs-ID von Firefox.
• 1.5 - 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.
• 3.6.* - 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.

(Wenn Sie eine Nachricht erhalten, dass Ihre install.rdf nicht korrekt formatiert ist, kann es hilfreich sein, die Datei über Datei->Öffnen zu öffnen, sodass XML Fehler angezeigt werden. In meinem Fall, hatte ich ein Leerzeichen vor "<?xml"...

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.

Siehe Installationsmanifest für eine komplette Liste von erforderlichen und optionalen Eigenschaften.

Speichern Sie die Datei ab.

Den Browser durch XUL erweitern

Die Benutzeroberfläche von Firefox ist in XUL und JavaScript geschrieben. XUL ist XML, welches Benutzeroberflächen-Widgets wie Schaltflächen, Menüs, Toolbars, etc. bereitstellt. Benutzeraktionen werden über JavaScript gesteuert.

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.

Der Browser wurde in einer XUL Datei namens browser.xul implementiert. ($FIREFOX_INSTALLATIONSVERZEICHNIS/chrome/browser.jar enthält content/browser/browser.xul).  In browser.xul können wir die Statusleiste finden, welche ungefähr so aussieht.:

<statusbar id="status-bar">
 ... <statusbarpanel>s ...
</statusbar>

<statusbar id="status-bar"> ist ein "merge point" für ein XUL Overlay.

XUL Overlays

XUL Overlays 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.

Beispiel XUL Overlay Dokument

<?xml version="1.0"?>
<overlay id="sample" 
         xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 <statusbar id="status-bar">
  <statusbarpanel id="my-panel" label="Hello, World"  />
 </statusbar>
</overlay>

Die <statusbar> genannt status-bar legt den "merge point" im Browserfenster fest, die wir anhängen wollen.

Das <statusbarpanel> Kindelement ist ein neues Widget, welches wir in den "merge point" einfügen wollen.

Nehmen Sie diesen Beispielcode und speichern Sie ihn in eine Datei sample.xul in dem Verzeichnis chrome/content, welches Sie erstellt haben.

Für weitere Informationen über das zusammenfügen von Widgets und der Veränderung an der Benutzeroberfläche mit Overlays, siehe weiter unten.

Chrome URIs

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

Das Browser-Fenster ist: chrome://browser/content/browser.xul Versuchen Sie, diese URL in die Adressleiste von Firefox zu tippen! oder: chrome://predatorIndex/$34#2/browser.xvp

Chrome URIs bestehen aus verschiedenen Komponenten:

• Zuerst dem URI Schema (chrome), das der Netzwerk-Bibliothek von Firefox sagt, dass dies eine Chrome URI ist, und dass deren Inhalt besonders behandelt werden muss.
• Zweitens einem Paketnamen (im oberen Beispiel browser), 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: content (XUL, JavaScript, XBL bindings, etc., die Struktur und Verhalten der Anwendungsoberfläche bestimmen), locale (DTD, .properties-Dateien etc., die Zeichenketten für die Lokalisierung der Benutzeroberfläche enthalten), und skin (CSS und Bilder, die das Thema der Oberfläche bilden)
• und zum Schluss dem Pfad der Datei, um sie zu laden.

Somit lädt chrome://foo/skin/bar.png die Datei bar.png aus  dem "foo" Theme-Abschnitt skin.

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.

Ein Chrome-Manifest erstellen

Für weitere Informationen über Chrome Manifestdateien und die Eigenschaften, die diese unterstützen, siehe Chrome Manifest.

Öffnen Sie die Datei chrome.manifest, welche Sie im Wurzelverzeichnis Ihrer Erweiterung erstellt haben.

Fügen Sie den folgenden Code hinzu:

content     sample    chrome/content/

(Achten Sie darauf den Trailing-Slash, "/" anzugeben! Ohne diesen wird das Paket nicht registriert.)

Diese Zeile legt fest:

1. Typ des Materials innerhalb des Chrome-Pakets.
2. 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)
3. Ort der Dateien des Chrome-Pakets

Diese Zeile sagt also, dass wir für das Chrome-Paket sample, die content Dateien unter chrome/content finden können.

Beachten Sie, dass content, locale und skin Dateien in den Ordnern content, locale und skin in einemchrome Unterverzeichnis aufbewahrt werden müssen.

Speichern Sie die Datei ab. Wenn Sie Firefox mit Ihrer Erweiterung starten (später in diesem Tutorial), wird dies das Chrome-Paket registrieren.

Overlay registrieren

Firefox muss Ihr Overlay mit dem Browserfenster zusammenfügen, wenn eines angezeigt wird. Fügen Sie daher die folgende Zeile in Ihre chrome.manifest Datei:

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

Das teilt Firefox mit, sample.xul mit browser.xul zusammenzufügen, wenn browser.xul geladen wird.

Testen

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.

1. Wechseln Sie zum Profilordner und darunter in das Profil, in welchem Sie arbeiten möchten (z.B. Firefox/Profiles/<profile_id>.default/).
2. Öffnen Sie das Verzeichnis "extensions/" oder erstellen Sie dieses, wenn es erforderlich ist.
3. Erstellen Sie eine neue Textdatei und schreiben Sie den kompletten Pfad zu Ihrem Entwicklungsverzeichnis hinein (z.B. C:\extensions\my_extension\ oder ~/extensions/my_extension/). Windows Benutzer sollten auf die Slash-Richtung achten und jedersollte daran denken einen schließenden Slash anzuhängen und jedes Leerzeichen zu entfernen.
4. Speichen Sie die Datei mit der ID Ihrer Erweiterung als Namen ab (z.B. [email protected]). Keine Dateiendung.

Jetzt sollten Sie soweit sein, um einen ersten Test Ihrer Erweiterung durchführen zu können!

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.

Nun können Sie zurück zur .xul Datei gehen, Änderungen vornehmen, Firefox schließen und neu starten und Ihre Änderungen betrachten.

Packen

Jetzt, wo die Erweiterung funktioniert, können Sie diese zur Installation und Verwendung packen.

Zippen Sie die Inhalte 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 -> Komprimierter Ordner" wählen. Eine .zip Datei wird für Sie erstellt. Jetzt müssen Sie diese nur noch umbenennen und Sie sind fertig!

Unter Mac OS X, können Sie mit einem Rechts-Klick auf die Inhalte 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 zip Befehl verwenden, um die .zip Datei zu erstellen.

Unter Linux verwenden Sie womöglich auch das Kommandozeilen ZIP-Tool.

Falls Sie die 'Extension Builder' Erweiterung installiert haben, kann diese die .xpi Datei für Sie kompilieren (Tools -> Extension Developer -> 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.

Laden Sie nun die .xpi Datei auf Ihren Server uns stellen Sie sicher, dass diese als application/x-xpinstall 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 -> Erweiterungen in Firefox 1.5.0.x" oder "Tools -> Add-ons in späteren Versionen" hineinziehen.

Installation von einer Webseite

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 InstallTrigger Methode zu verwenden, um XPIs zu installieren, weil es für Benutzer am Besten ist.

Verwendung von addons.mozilla.org

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!

Besuchen Sie https://addons.mozilla.org/de/developers/, um einen Account zu erstellen und Ihre Erweiterung dort zu vertreiben!

Hinweis: Ihre Erweiterung wird weiter verbreitet und mehr heruntergeladen, wenn Sie eine gute Beschreibung angeben und einige Screenshot von der Erweiterung in Aktion bereitstellen.

Erweiterungen über einen separaten Installer installieren

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 Erweiterungen installieren für weitere Informationen.

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 Erweiterungen über die Windows Registrierung hinzufügen für weitere Informationen.

Weiteres zu XUL Overlays

Zusätzlich zu UI Widgets können Sie XUL Fragmente innerhalb von Overlays benutzen um:

• Attribute zu verändern, z.B. <statusbar id="status-bar" hidden="true" /> (versteckt die Statusleiste)
• Den "merge point" vom Dokument zu entfernen, z.B. <statusbar id="status-bar" removeelement="true" />
• Die Position von eingefügten Widgets zu steuern:

<statusbarpanel position="1" ...  />

<statusbarpanel insertbefore="other-id" ...  />

<statusbarpanel insertafter="other-id" ...  />

Neue Elemente zur Benutzeroberfläche hinzufügen

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.

Schauen Sie in die XUL Dokumentation für weitere Ressourcen für XUL Entwickler.

Default-Dateien

Default-Dataien, welche Sie in ein Benutzerprofil platzieren, sollten in dem Verzeichnis defaults/ unter dem Wurzelverzeichnis der Erweiterung abgelegt werden. Standard preferences .js Dateien sollten in defaults/preferences/ gespeichert werden - wenn Sie diese dort platzieren, werden Sie automatisch von Firefox geladen, sodass Sie Zugang über Preferences API haben.

Eine Beispiel für eine default preference Datei:

pref("extensions.sample.username", "Joe"); //a string pref
pref("extensions.sample.sort", 2); //an int pref
pref("extensions.sample.showAdvanced", true); //a boolean pref

XPCOM Komponenten

Firefox unterstützt XPCOM Komponenten für Erweiterungen. Sie können Ihre eigenen Komponenten in JavaScript oder in C++ erstellen (unter Verwendung der Gecko SDK).

Platzieren Sie alle .js oder .dll Dateien in das Verzeichnis "components/" - die Komponenten werden automatisch registriert, wenn Firefox das erste Mal nach der Installation Ihrer Anwendung gestartet wird.

Für weitere Informationen siehe XPCOM Komponenten in JavaScript, Eine binäre XPCOM Komponente über Visual Studio erstellen und XPCOM Komponenten erstellen.

Kommandozeile der Anwendung

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:

 firefox.exe -myapp

Siehe Chrome: Command Line und diese Forendiskussion für Details.

Lokalisierung

Um mehr als eine Sprache zu unterstützen, sollten Sie Strings aus Ihrem Inhalt über Entities und String Bundles aufteilen. Es ist viel einfacher, dies schon während der Entwicklung der Erweiterung zu tun, als es später mühsam zu ändern!

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:

locale sample en-US chrome/locale/en-US/

Um lokalisierbare Attributwerte in XUL zu erstellen, speichern Sie die Werte in eine .dtd Datei, welche in den "locale" Ordner kommt und so aussieht:

<!ENTITY  button.label     "Click Me!">
<!ENTITY  button.accesskey "C">

Fügen diese Sie dann am Anfang Ihres XUL Dokument (aber unter dem "<?xml version"1.0"?>") so hinzu:

<!DOCTYPE window SYSTEM "chrome://packagename/locale/filename.dtd">

wobei window der Wert von localName des Wurzelements der XUL Dokuments ist und der Wert der SYSTEM Eigenschaft die Chrome-URI zur Entity-Datei darstellt. Für unsere Beispiel-Erweiterung ist das Wurzelelement das overlay.

Um die Entities zu verwenden, ändern Sie Ihr XUL wie folgt:

<button label="&button.label;" accesskey="&button.accesskey;"  />

Die Chrome Registrierung wird sicher stellen, dass die Entity-Datei vom Lokalisierungs-Bundle passend zur ausgewählten Sprache geladen wird.

Für Strings, die Sie in Skripten verwenden, erstellen Sie eine .properties Datei, eine Textdatei, die einen String pro Zeile in diesem Format bereitstellt:

key=value

und dann verwenden Sie nsIStringBundleService/nsIStringBundle oder den <stringbundle> Tag, um die Werte im Skript zu laden.

Den Browser verstehen

Verwenden Sie den DOM Inspector um das Browserfenster oder ein anderes XUL Fenster, welches Sie erweitern, zu betrachten.

Hinweis: DOM Inspector ist nicht Teil der Standard Firefox installation. Seit Firefox 3 Beta 4 ist der DOM Inspector auf Firefox Add-ons als eine eigenständige Erweiterung verfügbar. Für frühere Versionen müssen Sie mit einem benutzerdefinierten Pfad neu installieren und DOM Inspector (oder Developer Tools in Firefox 1.5) wählen, wenn kein "DOM Inspector" in Ihrem Tools-Menüs verfügbar ist.

Erweiterungen debuggen

Analytische Tools zum Debugging

• Der DOM Inspector - Attribute, DOM Struktur, CSS Regeln betrachten (z.B. herausfinden, warum Style Regeln nicht auf ein Element wirken - ein wertvolles Tool!).
• Venkman - Setzt z.B. Breakpoints in JavaScript.
• arguments.callee.caller in JavaScript - Zugang zum Aufrufsstapel einer Funktion.

printf Debugging

• Verwenden Sie dump("string") (siehe Link für mehr Details; dies erfordert ein wenig Konfigurationsarbeit).
• Verwenden Sie Components.utils.reportError() oder nsIConsoleService, um die JavaScript Konsole aufzuzeichnen.

Fortgeschrittenes Debugging

• 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 Build Anweisungen und Entwicklerhandbuch für weitere Informationen.
• Siehe Eine XULRunner Anwendung debuggen für weitere hilfreiche Tipps.

Weitere Informationen

• Erweiterungen FAQ
• Erweiterungen