Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.
Eine Entwicklungsumgebung einrichten
Es gibt 3 Tools von denen wir denken das diese essentiell für eine effektive Add-on-Entwicklung sind (oder ehrlich gesagt für jede Art von Entwicklung): ein Quellcodeeditor, ein Versionskontrollsystem und eine Entwicklungsumgebung.
Im Bezug auf das Codeediting, es gibt keine offizelle Mozilla IDE. Mit anderen Worten, Erweiterungen benutzen die selben (oder ähnlichen) Sprachen die auch für die Webentwicklung genutzt werden, von daher könnnen die meisten Texteditoren und IDE`s eingesetzt werden. Die meisten XUL-Tools und Plugin`s die Sie Online finden werden sind lediglich Templates die die Ordnerstruktur füre das Projekt erzeugen, und das ist nicht viel Hilfe.
WIe empfehlen Komodo Edit. Es ist kostenlos, OpenSource und Cross-Platform-Unabhängig. Es basiert auf der Mozilla XULRunner Platform, von daher unterstützt einige der Besonderheiten in der Firefoxerweiterungsentwicklung. Komodo Edit bietet eine Autovercollständigung für XUL-Tags und Attribute und es unterstützt Mozilla`s CSS-Erweiterungen (CSS-Werte und Einstellungen beginnen mit "-moz"). Es besitzt ein Add-on System ähnlich dem im Firefox, und es gibt einige Komodo-Erweiterungen die zusätzliche Hilfe bei der Erweiterungsentwicklung bieten. Das ist mehr als die meisten andern Editoren bieten, von daher empfehlen wir Ihnen ihm eine Chance zu geben. Alle unsere Beispiel wurden mit Komodo Edit erstellt, also wenn Sie eine .kpf oder .komodoproject fi Datei in einem Beispieldownload sehen ist das eine Komodoprojektdatei.
Wir empfehlen Git und GitHub für die Versionskontrolle, aber jedes anständige Software-Configuration-Management System kann hier eingesetzt werden.
Um XPI-Dateien zu packen, nutzen wir make. Wir haben make gewählt weil dieses System von Mozilla genutzt wird um Firefox zu bauen und es ist für alle Betriebssysteme verfügbar. make ist das Standard Tool in den meisten UNIX-basierten Systemen. Es kann unter Mac OS X als Teil von des XCode Tool-Paketes installiert werden und unter Windows mit cygwin. In einer cygwin-Installation werden Sie explizit die make und zip utilities aus der langen Liste der Pakete auswählen müssen um diese herunterzuladen und installieren.
Sorgen Sie des weiteren dafür das make sich im ausführbaren Systempfad befindet. Nach der Einrichtung von make, sollten Sie in der Lage sein ein Kommandozeildenfenster zu öffnen, führen Sie "make-ver" aus, und Sie bekommen die installierte Version von make als Ausgabe.
Wir empfehlen Ihnen make auf Ihrem System einzurichten, da unsere Beispiele beinhalten alle notwendigen Dateien um die daraus entstehende XPI mit diesem Toolzu bauen und installieren. Es wird Ihnen einiges an Zeit für das packen ersparen. Oder Sie können ein vergleichbares System unter der Verwendung von Batch aufsetzen, machen Sie es wie auch immer Sie bevorzugen. Letztlich können Sie auch einfach jeden Zip oder Archivierungs Tool verwenden um den Inhalt des src Verzeichnisses zu komprimieren um ein identisches Ergebniss zu ereichen.
Build system
Beginnen wir mit dem Herunterladen des Projekts mit dem die zweite Version von Hello World aufgebaut wurde, aus der Übung der letzten Lektion
Entpacken die Datei wohin Sie wollen. Innerhalb des HelloWorld2 Verzeichnisses weden Sie zwei Verzeichnisse sehen: bin und src. Das bin Verzeichnis sollte leer sein. Dort werden alle enstehenden build-Dateien erstellt und dort werden Sie die Erweiterungs XPI-Datei finden wenn sie erstellt wurde.
Öffnen Sie die Projektdatei (HelloWorld2.komodoproject) in the src Verzeichnis in Komodo Edit. In dem Projektreiter sollten Sie nun in der Lage sein die Verzeichnisstruktur innerhalbt des src-Verzeichnises sehen. Dies Struktur solle ihnen vertraut sein, da Sie beinahe identisch mit der ungepackten XPI von der vorherigen Lektion ist.
Die einzige bemwerkswerte Änderung ist eine Datei mit der Bezeichnung Makefile unter src. Das ist die Datei die make nutzt um die XPI zu erstellen. Sie sollten sich etwas Zeit nehmen um diese zu lesen und zu verstehen., oder zumindest die Teile untersuchen die Sie ändern müssen um Ihr projekt zu beginnen. Die GNU Make Manual ist eine sehr gute Refernz um sich mit make und der Makefile-Datei vertraut zu machen.
In den meisten Fällen müssen Sie nur ein paar der ersten Zeilen in der Makefile-Datei ändern. Diese definieren den Erweiterungsnamen, die Erweiterungs ID (wie in install.rdf festgelegt) und der Name des profile-Verzeichnisses wohin die Erweiterung während der Entwicklung und des testens installiert wird. Mehr über das später.
Versuchen wir zuerst die XPI über die Kommandozeile zu erstellen. Öffnen Sie das Kommandozeilenprogramm in Ihrem System und naviergien Sie zum src Verzeichnis in Ihrem Projekt. Führen Sie folgenden Befehl aus:
make
Das ist es. Wenn alles gut läuft sollten Sie eine Ausgabe wie diese sehen:
Creating XPI file. adding: install.rdf (deflated 50%) adding: chrome.manifest (deflated 50%) adding: content/browserOverlay.js (deflated 42%) adding: content/browserOverlay.xul (deflated 69%) adding: skin/browserOverlay.css (stored 0%) adding: locale/en-US/browserOverlay.dtd (deflated 52%) adding: locale/en-US/browserOverlay.properties (stored 0%) Creating XPI file. Done! Build finished successfully.
Wenn Sie das bin Verzeichnis untersuchen, sollten Sie die xulschoolhello2.xpi Datei sehen.
Wenn Sie make ausführen, werden Sie die letzte Zeilde des Erstellungsprozesses sehen. Das ist so weil make mitteilt das die Datei im bin Verzeichnis aktuell ist und es nichts zu machen gibt. Änderungen an der Quelldatei werden make dazu bringen die notwendigen Schritte erneut auszuführen um XPI erneut zu erstellen.
Sie können das bin Verzeichnis aufräumen indem Sie einfach den folgenden Befehl ausführen (nochmal, innerhalb des src Verzeichnises)
make clean
Sie können diese Befehle auch in Komodo ausführen. Klicken Sie auf Tools > Befehl ausführen... In das "Ausführen" Textfeld sollten Sie das eingeben:
bash -c "make"
Oder ersetzen Sie "make" mit "make clean" für das aufräumen. Der "basc -c" Teil zwingt Komodo bash zu nutzen, welches aus einigen Gründen nicht als das Standard Kommandozeile gesetzt werden kann. Es ist nicht notwendig dies zu tun, aber es ist besser so das mit dem make-Befehl übereinstimmt den wir als nächstes sehen werden.
In em "Start in" Textfeld sollten Sie %p wählen (Verzeichnispfad des aktiven Projektes. Wenn Sie dieses Textfeld nicht sehen können dann klicken Sie auf den "More" Schalter. Sie besitzen auch die Möglichkeit den Befehl zu speichern, durch einen Klick auf das "Add to Toolbox" Auswahlfeld. Um die Toolbox zu sehen, klicke auf View > Tabs > Toolbox, über das Hauptmenü. Damit sollten Sie einen sehr einfachen Weg haben um Ihre XPI zu erstellen, indem Sie nur den Erstellungsbefehl Doppelklicken.
Wir können es sogar noch besser machen. Wenn Sie einmal Ihren Code testen und debuggen, werden Sie feststellen, dass das ständige erstellen und installieren einer XPI sehr ermüdend sein kann. Das ist der Gründ warum wir "make install" eingeführt haben. Dies funktioniert nur wenn die Erweiterung bereits in einem Firefoxprofil installiert ist. Wie in den vorgestellten Projekt, benötigen Sie die Add-on-ID und die gesetzte Profillokation die in der Makefile-Datei. Wir nutzen diese Informationen um den Installationspfad von der Erweiterung und überschreiben die installierten Dateien. Wenn Firefox geöffnet ist können Sie den "make install"-Befehl ausführen, Sie müssen Firefox neustarten um die Änderungen zu sehen. Es ist immernoch besser als die XPI andauernd neu zu installieren.
Möglicherweise möchten Sie die Profillokation in Ihrem Makefile-Datei ändern. . Um die Profilloaktion auf den richtigen Wert zu setzen, sollten Sie den Artikel support article on profiles auf der Mozilla Support Seite lesen. Auch werden wir später tiefer in dieses Thema eintauchen.
Um "make install" auf nicht WIndowssystemen einzusetzen, benötigen Sie einen extra Schritt. Der Installationsprozess benötigt eine Umgebungsvariable mit dem Namen OSTYPE, welche nicht exportiert wird. Lange Geschichte kurzer Sinn, über Kommandozeile müssen Sie folgendes ausführen:
export OSTYPE; make install
Und in Komodo sollten Sie fogenden Befehl eingeben:
bash -c "export OSTYPE; make install"
Der export-Befehl wird nicht korrekt funktionieren wenn Sie nicht "bach-c" verwenden.
Building IDL files
Einige Erweiterungen setzen die Entwicklung von XPCOM-Komponeten voraus um gewisse fortgeschritten Funktionen hinzuzufügen. Es gibt eine Lektion die für XPCOM in diesem Tutorial vorgesehen ist, aber wie gehen kaum auf den Einflussdie es auf die Entwicklung von Erweiterungen hat ein. Sie können diesen Teil überspringen und es als Refernenz zu nutzen wenn Sie XPCOM in Ihrem Projekt benötigen.
XPCOM Schnittstellen werden mit IDL-Dateien definiert. Das sind Textdateien die Attribute definieren und Methoden in einem oder mehren Schnittstellen. Diese IDL-Dateien werden in Binarydateien kompiliert und werden in die Erweiterung als XPT-Dateien eingebunden.
Um eine IDL-Dateizu XPT zu komplieren, benötigen Sie ein Kommandozeilen Tool, xpidl. Dieses Tool ist im Mozilla Gecko SDK enthalen. Wenn Sie IDL`s kompilieren möchten, gehen Sie zur SDK-Seite und laden Sie eine kompilierte Version für Ihr System herunter. Beachte auch mögliche Anforderungen. Wenn Ihr System nicht bei den unterstützen Systemen aufgelistet ist, müssen Sie das SDK selbständig aus dem Mozilla Quellcode erstellen. Viel Glück damit.
Sie sollten auch Ihre Umgebung so aufbauen das die xpidl.exe (oder nur xpidl in anderen Systemen) dich in dem standardmäßige auführbaren Pfad befindet und fügen Sie auch eine Variable mit der Bennung Gecko_SDK hinzu, die auf Ihren SDK-Build verweist:
export GECKO_SDK=/path/to/your/sdk
Ihr Buildsystem sollte dort darauf zugreifen. Um es in Komodo unter UNIX-basierten Systemen einsetzen zu können, fügen wir den Befehl in die .bash_login-Datei im Homeverzeichnis hinzu und wir passen den Befehl folgendermasen an.
bash -c ". ~/.bash_login; make"
Ein Beispiel Projekt mit XPCOM-Komponeten ist in der XPCOM-Lektion enthalten. Dort wird auch XPCOM Erstellung mit C++ angesprochen, was sehr viel schwieriger ist.
Signing
Um zusätzliche Sicherheit für Ihre Nutzer bereitzustellen, können Sie sich entscheiden eine Signature zu Ihrer Erweiterung hinzuzufügen. Die Signatur verfiziert das Sie der Autor dieser Erweiterung sind und das kann nur gemacht werden wenn Sie ein gültiges Zertifikat einer vertrauswürdigen Zertifizierungsstelle besitzen.
Der einzige wahrnehmbare Unterschied für den Benutzer ist das der XPI-Installationsdialog mitteilen wird das die Erweiterung von Ihnen erstellt wurde, was den Dialog vertrauswürdiger macht. Es is nicht üblich Erweiterungen zu signieren weil die meisten Anwender der offizellen Add-on-Seite (AMO) vertrauen anstatt sich auf die Erweiterungssignaturen zu verlassen. Auf der anderen Seite, ist es gängie Praxis für große Unternehmen ihre Erweiterungen zu signieren.
Sie werden einige libraries herunterladen müssen damit Sie in der Lage sind Ihre Erweiterungen zu signieren. Folgen Sie dieser Anleitung und fügen etwas ähnliches wie das der Makefile-Datei hinzu:
# The directory where the signature sources are located. signature_dir := signature # The signing key /certificate file. signature_extra_files := $(build_dir)/META-INF/manifest.mf \ $(build_dir)/META-INF/zigbert.sf # The signing key /certificate file. signature_rsa_file = $(build_dir)/META-INF/zigbert.rsa# The signing key /certificate file. signature_files := $(signature_extra_files) \ $(signature_rsa_file) $(signature_files): $(build_dir) $(xpi_built) @signtool -d $(signature_dir) -k $(cert_name) \ -p $(cert_password) $(build_dir)
Behalten Sie im Hinterkopf ds Ihr Passwort sollte nicht in Ihren Makefile-Dateien enthalten sein und Sie müssen sehr vorsichtig mit den Zertifkatsinformationen sein. Idealerweise sollte das von einer Person erledigt werden und nur Kurz vor Abschluss des Releaseprozess erledigt werden. Sie sollten auch einen abweichenden make-Befehl hierfür haben, wie z.B. make signed um die signierten und unsignierten Entwicklungs builds unterscheiden zu können.
Firefox profile management
Es ist gute Entwicklungspraxis die Testumgebung von allem anderen zu seperieren. Sie wollen bestimmt nicht das unstabilen Erweiterungen Ihr Firefoxprofil zu schädigen und einen Datenverlust zu riskieren. Es ist viel Besser eine weitere Firefox-"Version" für die Tests zu haben. Hierfür gibt es de Firefoxprofile.
Sie können in dem Mozillasupport-Artikeln Managing Profiles lernen wie man mehrere Firefoxprofile aufsetzt. Sie können soviele Profile anlegen wie Sie möchten. Sie können diese auch mit mehreren Firefoxinstallationen mischen. Als Beispiel, Sie möchten möglicherweise Ihre Erweiterungen in Firefox 3.5 und Firefox 3.6 oder in unterschiedlichen regionalen Versionen von Firefox testen. Sie können soviele Firefoxversionen installieren wie Sie möchten und die Profile und Versionen mischen.
Unter Windows und Linux ist es einfach Verknüpfungen für jedes angeleget Profil zu erstellen, unter der Verwendung der Befehle beschrieben in https://kb.mozillazine.org/Command_line_arguments ..
Für Mac OS X Entwickler, gibt es auch eine Möglichkeit "Verknüpfungen" zu erstellen. Sie können dies erledigen, indem Sie eine Automator-Anwendung öffnen, indem Sie Run Shell Script auswählen und anschließend das Profillade-Skript in das Textfeld eingeben:
/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -p MyProfile > /dev/null &
Sie können "/dev/null" auf einen Dateispeicherort ändern, in dem Fall das Sie eine dump-Ausgabe in Firefox sehen möchten oder ander Erweiterungen. last & prevents hindert Automator daran auf das beenden Ihrer Firefoxsitzung zu warten. Speicher Sie das als eine Anwendung nicht als einen Workflow. Un möglicherweise wollen Sie diese auf Ihrem Desktop oder Dock, für einen einfachen Zugriff.
Es sollten auch noch Konfigurationsänderungen in Ihrem Testprofil vorgenommen werden, sodass Sie im falls etwas schief geht detailierte Informationen erhalten. Die Firefox Error Console (Extras > Error Console) zeigt normalerweise JavaScripte Fehler an die auf der Webseite auftretten, aber mit etwas Optimierung können Sie Fehlerinformationen aus Ihrer Erweiterungen erhalten. Lesen hierfür Sie diesen Beitrag über Development preferences.
Developer extensions
Es gibt ein große Bandbreite an Firefoxerweiterungen die die Web- und Add-on-Entwicklung untersützen. Ein guter Ort um danach zu suchen ist die Mozilla Add-ons Seite auch gibt es hier ein gute Entwicklungserweiterungsliste. Sie sollten sich etwas Zeit nehmen und mit den Webentwicklungstools die in Firefox enthalten sind herumspielen. Einige von diesen können sehr hilfreich für die Add-on-Entwicklung sein und überschneiden sich mit den aufgeführen Add-on`s. in dieser Lektion werden wir ein paar wenige ansprechen die wir als sehr hilfreich empfunden haben.
DOM Inspector
Der DOM Inspector war früher ein Teil von Firefox als eine Installationsoption, aber seit Firefox 3 ist von Firefox abgetrennt als ein weiteres Add-on Sie können es hinzufügen und entfernen. Es ist ein sehr nützliches Tool für Untersuchungen das Sie in das DOM von HTML und XUL-Dokumenten sehen lässt, genauso wie eingesetzte CSS-Regeln und zugehörige JavaScript Objekte. Introduction to DOM Inspector ist eine gute Einführung um mit der Verwendung zu beginnen.
Der DOM Inspector ist besonders hilfreich um heruauszufinden wie Sie ein Fenster überblenden, und wie Sie standard CSS-Style-Regeln ersetzen. Sie können die Namen der beteiligten Dateien sehen, was Ihnen einen guten Startpunkt gibt wenn Sie in die Mozilla source sehen. Sie können sogar Styles, Attribute ändern und JavaScript Code ausführen, obwohl dies nicht vollständig zuverlässig ist.
JavaScript Debugger
Der Name sagt alles. Der Venkman JavaScript Debugger ist ein größartiger Weg um die Ausführung von JavaScript zu verfolgen.
Um Erweiterungen und Browsercod zu debuggen, klicken Sie mit der rechten Maustaste auf die geladene Scriptkonsole und entfernen Sie die Auswahl von Exclude Browser Files. Die Liste der geladenen Skripte wird anwachsen um alle Skripte in Firefox zu beinhalten. Unsere Dateinamenkonventionen erweisen sich hierbei als sehr hilfreich. Sie können Unterbrechngspunkte setzen, aus und in Methoden springen und sogar Profilinformationen aus der JavaScriptausführung erhlaten. Sie können Variablen untersuchen, Überwachungsausdrücke verfolgen, und nach Ermessen JS an jedem Punkt der Ausführung auswerten.
Diese Erweiterungen ist seit einiger Zeit nicht mehr gewartet werden, daher ist sie sehr buggy. Es ist besonders unzuverlässig wenn es Code in XPCOM und XBL-Dateien debuggen soll. Dennoch, ist ein wertvolles Tool wenn man versucht herauszufinden warum sich eine bestimmte Funktion ungewünscht verhält.
Tamper Data
Tamper Data fängt HTTP-Anfragen und ihren -Antworten ab. Dies erlaubt Ihnen diese zu unterbrechen und sogar die Payload-Daten zu ersetzten bevor diese gesendet werden. Es gibt einige ähnliche Erweiterungen, wie z.B. Live HTTP Headers, aber Tamper Data ist das eine das wir am meisten einsetzen. Wir werden mehr über HTTP debugging später erfahren.
Firebug
Die Firebug Erweiterung enthält fast alle Tools die bisher angesprochen wurden, aber sie ist hauptsächlich auf die Webentwicklung ausgerichtet. Die Chromebug Erweiterung hilft Firebug nützlicher im Bezug auf die Erweiterungsentwicklung, aber sie ist möglicherweise nicht stark genug um alle alle angesprochen Add-ons zu ersetzen.
Auf der anderen Seite, bietet Firebug eine sehr benutzerfreundliches integriertes Oberfläche und wirdurch stärker weiterentwickelt als seine Gegenstücke. Es ist definitiv einen Versuch wert.
Leak Monitor
Memoryleaks sind immer ein großer Kritikpunkt an Firefox gewesen. mozilla hat über die Zeit bewiesen das es die Arbeitsspeicher nutzung ernst nimmt, durch die Verbesserung der Performance an besonders kritischen Bereichen und durch das entfernen aller Memoryleaks.
Wie auch immer, Erweiterung können auch die Ursache von Memoryleaks sein. Wenn Sie Ihre Erweiterung in die Mozilla Add-on Seite aufgenommen haben möchten, sollten Sie besser keine Memoryleaks haben. In Using XPCOM in JavaScript sind einige Richtlinien erfastt die Sie befolgen sollten um diese zu vermeiden. Einer der häufigsten Fehler die Entwicklern machen, ist einen JS event listener oder observer zu registrieren und diesen niemals zu entfernen. Die einfache Praxis immer Code für das Entfernen für alles was Sie hinzuzufügen anzufügen macht einen großen Unterschied.
Um sicher zugehen das Ihre Erweiterungen keine Leaks beinhaltet, Sie sollten die Leak Monitor Erweiterung verwenden wenn Sie das testen. Testen Sie immer öffnende und schließende Fenster. Gewöhnlicherweise tretten diese Leaks bei diesem Vorgang auf.
Exercise
- Setzen Sie ein neues Firefoxprofil für die XUL-Schule auf. Stellen Sie sicher das Sie Ihr XUL-Schulen Firefox öffnen und schließen können, ohne dass SIe die Instance von Fireox mit der Sie normalerweise surfen schließen mussen. Machen Sie irgendwelche beliebigen Änderungen an Ihrem XUL-Schulen Projekt, führen Sie make install aus und starten Sie Firefox neu um zu sehen das die Erweiterung nach Ihren Änderungen noch funktioniert.
- Installiere den DOM Inspector. Benutze ihn um das von Ihnen erstellte Menü zu finden. Hinweis: Sie können mit der ID nach einem Element suchen. Untersuchen Sie CSS-Regel die Firefox standardmäßig verwendet. Sehen Sie sich den endgültigen berechneten Style für die Menüelemente an. Sehen Sie sich im Rest der Firefox DOM um, und versuchen Sie herauszufinden welche Knoten mit der Firefox UI in Verbindung stehen.
- Installiere die Firebug Erweiterung. Öffne das Firebugfenster und gehe zu einer AJAX-lastigen Webseitewie z.B. Gmail oder Facebook. Öffne und aktviere den Net Reiter. Versuche herauszufinden was passiert wenn einige Anfragen gesendet werden.
Jetzt das Sie wissen wie man schnell Ihr Projekt und Test-Änderungen überprüft, werden wir lernen wie man neue UI-Elemente zu Firefox durch Overlays und neuer Fenster hinzufügt.
This tutorial was kindly donated to Mozilla by Appcoast.