Galerie
Jetpack: Tipps vom Profi
Das ist die Seite about:jetpack. Hier geben Sie Ihren Code ein.
Tipp 1: Jetpack statt Greasemonkey
Greasemonkey ist ihnen zu kompliziert, um neue Funktionen für Mozilla Firefox zu entwickeln? Dann hilft Ihnen Jetpack weiter.
Jetpack ist eine Erweiterung für Firefox, um leichter Plug-ins zu entwickeln. Die Vorteile: Sie schreiben und testen Code im Browser, ohne Firefox neu zu starten. Außerdem integriert Jetpack die Javascript-Bibliothek jQuery (http://jquery.com ), um leicht Web-Anwendungen zu programmieren.
Laden Sie die Site https://jetpack.mozillalabs.com/index.html im Firefox-Browser und klicken Sie auf den Download-Link. Jetpack wird als Erweiterung installiert. Nun benötigen Sie noch das Debugging-Tool Firebug, das Sie unter https://addons.mozilla.org/de/firefox/addon/1843 bekommen. Jetpack kann Meldungen direkt in die Konsole von Firebug schreiben. Umgekehrt zeigt Firebug an, in welcher Code-Zeile eines Jetpacks ein Fehler aufläuft. Nach der Installation der Jetpack-Erweiterungen sehen Sie im Extras-Menü von Firefox die Einträge about:jetpack und about:jetpack (Safe Mode).
Safe Mode ist der Wartungsmodus von Jetpack. Sie benötigen ihn nur, wenn es Abstürze mit der Erweiterung gegeben hat. Hier können Sie problematischen Code ändern oder Jetpacks deinstallieren. Fürs Programmieren rufen Sie about:jetpack auf. Wechseln Sie auf dieser englischen Website zum Punkt Develop. Hier sehen Sie ein schwarzes Feld, in das Sie direkt Code eingeben.
Mit einem Klick auf try out this code starten Sie das eingegebene Programm direkt in Firefox. Schließen Sie die Seite, bleibt der von Ihnen eingegebene Code trotzdem erhalten. Unter dem Link Tutorial finden Sie eine englische Einführung in Jetpack, die Techniken, wie den Zugriff auf Seiteninhalte, CSS-Formatierungen, die Arbeit mit Browser-Tabs und Meldungen in der Statusleiste von Firefox erklärt.
I nstallieren Sie Ihr Jetpack mit Hilfe einer eigenen HTML-Seite. Laden Sie die Installed-Features-Seite neu, wird auch die aktuelle Version Ihres Skripts neu geladen.
Tipp 2: Besser entwickeln mit Jetpack
Sie wollen zum Entwickeln von Jetpack-Code statt des Online-Editors lieber ein eigenes Programm verwenden? Mit einem einfachen Trick funktioniert auch das.
Sie sind bei der Entwicklung von Jetpack nicht auf den mitgelieferten Editor unter about:jetpack angewiesen. Sie schreiben Ihre Programme wie zum Beispiel auch mit den IDE Netbeans (www.net beans.org ). Speichern Sie es anschließend unter einem beliebigen Dateinamen, zum Beispiel unter MeinProgramm.js. Jetzt legen Sie eine HTML-Seite an, die folgenden Code enthält.
<html><head>
<title>Mein Jetpack</title>
<link rel="jetpack" href="MeinProgramm.js"/>
</head>
<body>Mein Jetpack</body></html>
Wichtig ist nur der link-Teil. Hier verweisen Sie auf Ihr Jetpack, in unserem Fall MeinProgramm.js. Passen Sie den Namen von href an den Namen Ihres Javascript-Programms an. Speichern Sie die HTML-Seite unter einem beliebigen Namen wie MeinJetpack.html, und öffnen Sie die Seite in Firefox. Sie werden gefragt, ob Sie das Jetpack installieren wollen. Bejahen Sie diese Frage und auch die anschließende Sicherheitsabfrage. Nun ist das Jetpack installiert und Sie testen es in Firefox.
Nach diesem Schritt arbeiten Sie mit Ihrem Lieblingseditor an dem Programm weiter. Rufen Sie nach einer Veränderung in Firefox about:jetpack auf. Wenn Sie die Seite neu laden, wird auch Ihre Javascript-Datei neu eingelesen. So sehen Sie, wie sich die Code-Veränderungen auswirken. Zudem hilft Firebug, Fehler zu suchen.
Hier sehen Sie eine Liste aller Vorschläge, die es zur Erweiterung von Jetpack gibt. Einige dieser Module können Sie bereits in Ihren Skripten verwenden.
Tipp 3: Neue Jetpack-Funktionen
Die Grundfunktionen von Jetpack sind Ihnen zu wenig? Dann suchen Sie sich neue, experimentelle Befehle bei Future.
Jetpack verfügt über ein komfortables System, mit dem sich der Befehlssatz kontinuierlich erweitern lässt. Die Erweiterungen heißen Jetpack Enhancement Proposals (JEP), zu Deutsch Vorschläge zur Jetpack-Erweiterung, bis sie in den regulären Befehlssatz aufgenommen wurden. So lange eine Erweiterung noch im Experimentierstadium ist, muss man diesen Testteil mit der Anweisung
jetpack.future.import("Name des JEP");
in den eigenen Code einbinden. Da ziemlich viele interessante Befehle noch JEP sind, werden Sie diese Anweisung öfter benötigen. Ein Beispiel ist das Einlesen von Text und HTML-Code, den Sie mit dem Cursor markiert haben. Diese JEP heißt selection. Man bindet sie daher folgendermaßen ein: jetpack.future.import ("selection"); Nach dieser Code-Zeile können Sie selection in Ihrem Programm benutzen. Der Vorteil dieser Methode: Wird das JEP einmal Teil von Jetpack, müssen Sie Ihren Code nicht ändern. Sie lassen lediglich den import-Befehl weg. Einen Überblick über alle vorhandenen JEP bekommen Sie unter der Web-Adresse
https://wiki.mozilla.org/Labs/Jetpack/JEPs .
Beachten Sie den Status der einzelnen Vorschläge. Wenn Sie implemented sind, können sie verwendet werden.
Sehen Sie sich die Wörterbuchabfrage und die zugehörige Adresse in der Adressleiste an. Jetzt wissen Sie, wie Sie Ihren Such-String zusammenbauen müssen.
Tipp 4: Auf markierte Inhalte zugreifen
Das Tutorial von Jetpack erklärt, wie Sie auf Seiteninhalte zugreifen. Mit dem selection-JEP verarbeiten Sie Textstellen, die Sie mit dem Cursor markiert haben.
Wenn Sie einen englischen Text lesen und ein Wort nicht verstehen, dann kann Ihnen Jetpack weiterhelfen. Mit nur fünf Zeilen Code schreiben Sie ein Programm, das immer dann in Aktion tritt, wenn Sie auf einer Seite ein Wort markieren. Dann öffnet das Jetpack einen eigenen Tab mit einer Wörterbuch-Site, die eine Erklärung dieses Wortes anzeigt.
Zunächst binden Sie das selection-JEP in Ihr Programm ein. jetpack.future.import ("selection"); Dann rufen Sie mit jetpack.selection.onSelection(function(){}) die Funktion function() jedes Mal dann auf, wenn Sie mit dem Cursor etwas markieren. Innerhalb der geschweiften Klammern steht die eigentliche Funktion. Mit jetpack.selection.text greifen Sie auf den markierten Text zu. Weisen Sie diesen Text mit var auswahl = jetpack.selection.text; der Variablen auswahl zu.
Bei vielen Online-Wörterbüchern kann man den Suchtext über die Adresszeile im Browser eingeben. Testen Sie, wie die entsprechende Web-Adresse für Ihr Wörterbuch aussieht. Unser Beispiel nutzt das Wörterbuch Linguee (www.linguee.de ). Die zugehörige Adressleiste sieht folgendermaßen aus: www. linguee.de/search?query=example&x=0&y=0 wobei example das gesuchte Wort ist.
Sie bauen also mit Hilfe der Variablen auswahl den Suchstring zusammen: jetpack.tabs.open("http://www.linguee.de/search?query="+auswahl+"&x=0&y=0"); Über jetpack.tabs greifen Sie auf die Browser-Tabs von Firefox zu. In unserem Fall wählen Sie den Befehl open, um einen neuen Tab im Hintergrund zu öffnen.
jetpack.future.import("selection");
jetpack.selection.onSelection(function(){
var auswahl = jetpack.selection.text;
jetpack.tabs.open
("http://www.linguee.de/search?query=" + auswahl + "&x=0&y=0");
}
);
Jetpack: Tipps vom Profi
Tipp 5: Startmitteilung an den Anwender
Als neue Funktion von Jetpack 0.7 können Sie dem Anwender beim Start eines Jetpack eine Nachricht mitgeben.
Wenn Sie ein Jetpack installieren, sehen Sie als Standard immer dieselbe Startseite. Wenn Sie statt der gewöhnlichen Standardseite die erhöhte Aufmerksamkeit Ihrer Benutzern mit einer individuellen Mitteilung einfordern wollen, legen Sie eine eigene Seite fest. Dafür benutzen Sie die Eigenschaft firstRunPage in der Systemvariablen manifest. In manifest werden sonst Benutzereinstellungen festgelegt, die für die Arbeit des jeweiligen Jetpacks gelten sollen. Diese Einstellungen sehen Sie, wenn Sie about:jetpack aufrufen und auf Installed Features klicken.
Hinter allen Jetpacks gibt es einen settings-Link, den Sie anklicken können, soweit über die Eigenschaft settings in manifest Einstellungen festgelegt wurden. Bei der Gestaltung der Startseite haben Sie zwei Alternativen: Der einfachste Weg ist, einen Weblink wie auf die eigene Website oder den eigenen Blog anzugeben: var manifest = { firstRunPage:"http://www.meine_homepage.de"}; Alternativ geben Sie auch inline eigenen HTML-Code an:
var manifest = { firstRunPage:"<head>
<title>Mein Jetpack</title>
<link rel="jetpack" href="MeinProgramm.js"/>
</head>
<body>Mein Jetpack</body>
</html>"
,};
Beachten Sie bitte, dass der gesamte HTML-Code in einer einzigen Zeile stehen muss. Eine weitere Möglichkeit verschafft Ihnen der Befehl jetpack.me.onFirstRun(). Damit rufen Sie beim ersten Start eines Jetpacks eine beliebige Funktion auf. Über jetpack.tabs.open öffnen Sie zum Beispiel eine beliebige Website. Denken Sie daran, dass onFirstRun nur funktioniert, wenn Sie das richtige JEP dafür importieren:
jetpack.future.import("me");
jetpack.me.onFirstRun(function() {
jetpack.tabs.open("www.meine_homepage.de")}
);
