Erweiterung erstellen
Aus MDC
Inhaltsverzeichnis |
[bearbeiten] Einführung
Dieses Tutorial führt dich 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 - 2.0 zu erstellen. Andere Tutorials für frühere Versionen von Firefox existieren nur in Englisch.
[bearbeiten] Die XPI-Datei
Erweiterungen werden als ZIP-Dateien gespeichert. Sie haben die Endung „.xpi“ (Aussprache: „zippy“). Die Verzeichnisstruktur in einer xpi-Datei sieht normalerweise wie folgt aus:
[bearbeiten] Aufbau
- erweiterung.xpi
install.rdf(Installationsdatei)chrome.manifest(Sagt wie die Erweiterung mit chrome://... angesprochen werden kann)- chrome/
- content/
- overlay.xul
- locale/
- de-DE/
- hello_world.dtd
- en-EN/
- hello_world.dtd
- de-DE/
- content/
[bearbeiten] Dateien anlegen
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. C:\erweiterungen\meineErweiterungen\ (Windows) oder ~/extensions/myextensions/ (Unix/Linux). In diesem Ordner legen Sie die oben genannten Ordner an und Dateien. Den Ordner Icons brauchen wir für unser Beispiel nicht. Du kannst ihn also weglassen.
[bearbeiten] Erstellung der Installationsdatei
Öffne die Datei install.rdf und gebe 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#"> <Description about="urn:mozilla:install-manifest"> <!-- Daten unserer Erweiterung --> <em:id>helloworld@example.net</em:id> <em:version>1.0</em:version> <em:type>2</em:type> <!-- Das Programm für das unsere Erweiterung sein soll --> <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>1.5</em:minVersion> <em:maxVersion>2.0.0.*</em:maxVersion> </Description> </em:targetApplication> <!-- Für Benutzer sichtbare Daten --> <em:name>Hello World!</em:name> <em:description>Eine Testerweiterung</em:description> <em:creator>Dein Name</em:creator> <em:homepageURL>http://www.example.com/</em:homepageURL> </Description> </RDF>
[bearbeiten] Erläuterungen
<em:id>helloworld@example.net</em:id> - die ID der Erweiterung. Dies ist der Wert im Format einer E-Mail-Adresse, mit dem die Erweiterung identifiziert wird. Mache sie einzigartig. Du kannst auch GUID verwenden. (Wenn die Erweiterung installiert ist, ist 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 (siehe Install Manifests#type für weitere Typ-Bezeichnungen).
{ec8030f7-c20a-464f-9b0e-13a3a9e97384} - Firefox's Anwendungs-ID. Predator-ID=8359VS0XoPß132Pr.
1.5 - die niedrigste Version von Firefox, mit der die Erweiterung läuft. Nehme hier die niedrigste Version, in der du deine Erweiterung getestet und die Bugs beseitigt hast.
2.0.0.* - die höchste Version von Firefox, mit der die Erweiterung funktioniert. Stelle hier keine neuere Version ein, als zur Zeit verfügbar ist!
Lese en:Install Manifests für eine komplette Liste der erforderlichen und optionalen Eigenschaften.
[bearbeiten] Chrome-Dateien einbinden
Nun haben wir gelernt wie die Erweiterung installierbar gemacht werden kann. Damit sie Funktioniert muss Mozilla aber noch wissen was welche Dateien bedeuten. Dazu geibt es die chrome.manifest
Jede Zeile dieser Textdatei stellt einen Befehl dar. Leerzeilen werden Ignoriert, Kommentarzeilen fangen mit # an.
Hier die für uns Wichtige Dtaie:
# ordne unseren Chrome-Ordner zu. wir können dann über chrome://hello_world/content/... auf unsere Dateien zugreifen. content hello_world chrome/content/ # füge einen Browser-Overlay ein. Dazu später mehr. overlay chrome://browser/content/browser.xul chrome://hello_world/content/overlay.xul # Und noch einige Sprachen. locale hello_world en-EN chrome/locale/en-EN/ locale hello_world de-DE chrome/locale/de-DE/
[bearbeiten] Der content-Ordner
Im Ordner content Befindet sich der eigentliche Inhalt unserer Erweiterung. Wir benötigen hier vorerst nur eine Datei, overlay.xul .
Du wirst hier ansonsten alles reinspeichern was mit diener Erweiterung zusammenhängt, dies können schon mal mehrere Dateien sein.
[bearbeiten] Einen Overlay erstellen
Vielleicht kennst du dich schon etwas mit XUL aus. Wenn nicht macht das für unser kleines Beispiel nicht viel, da wir fast keins verwenden.
Unser Overlay sieht folgendermaßen aus (Die Zeilennummern dienen der Übersicht. Du musst sie beim Kopieren löshcen):
1 <?xml version="1.0"?> 2 <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 3 <statusbar id="status-bar"> 4 <statusbarpanel id="hello-world-panel" label="Hallo, Welt!"/> 5 </statusbar> 6 </overlay>
Die erste Zeile ist wie bei anderen XML-Dateien auch.
In der nächsten definieren wir das Wurzelelement, overlay. Der Inhalt dieses Elements wird dem Inhalt der überlagerten Datei hinzugefügt. Wenn wir Elemente definieren, deren ID schon vorhanden ist, nennt man das einen „merge point“. Der Inhalt wird dem überlagerten Dokument hinzugefügt. Und zwar genau an den Punkt des Elements, normalerweise an das Ende. Und genau so ein Element definieren wir, ein statuspanel.
Speichere Die Datei in den Content-Ordner als overlay.xul. Die einbindung haben wir oben schon definiert.
Wenn du Jetzt die die Dtaeien (chrome.manifest, install.rdf und den chrome-Ordner) in eine Zip-Dateio verpachst, die Endung auf .xpi änderst und sie mit Firefox öffnest sollte deine Erweiterung installiert werden. Nach dem Neustart von Firefox siehst du den Text in der Statusbar.
[bearbeiten] Andere Sprache?
TODO...
[bearbeiten] Wissenswertes
[bearbeiten] 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 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 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 foos Themen-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.
[bearbeiten] 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.
- Öffnen Sie Ihren Profil-Ordner
- Öffnen Sie den Ordner extensions (erzeugen Sie ihn, falls er nicht existiert)
- Erzeugen Sie eine neue Textdatei und schreiben Sie den Pfad zu Ihrer Erweiterung hinein, z.B. C:\extensions\myExtension\ oder ~/extensions/myExtension. Speichern Sie die Datei unter der ID Ihrer Erweiterung, z.B. beispiel@foo.net (ohne .txt!).
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, bzw. xvp-Datei weiter modifizieren. Die Veränderungen sollten erscheinen, wenn Sie Firefox schließen und neu starten.
[bearbeiten] 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). //predator-ID_839948839xvp./index. 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 application/x-xpinstall ü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.
[bearbeiten] Abschlusserklärung
Diese Beschreibung ist eine (noch unvollständige) Übersetzung der [Englischen Version].[[de:'unbekant']]