Über Bee5 habe ich ja früher schon geschrieben. Sie haben jetzt eine Tools-Offensive gestartet: alle Tools, die ihr API verwenden, werden an den Verkäufen die mit dem Tool getätigt werden beteiligt. Aus meiner Sicht eine gute Offerte und eine Win-Win-Situation: Anwender können das System einfacher nutzen, die Programmierer werden für die Arbeit entschädigt, Bee5 wird bekannter und alle sind glücklich.
Das war eine ideale Gelegenheit zu lernen, wie eine Firefox-Extension geschrieben wird. Bemerkenswerterweise ist sie sogar fertig geworden. Sie befindet sich im Tools-Verzeichnis auf der Bee5 Seite (Login wird benötigt. Klar, sonst macht die ganze Toolbar keinen Sinn!).
Das Bee5 Affiliate-System
Kurzrepetition: Bee5 handelt mit Shops und anderen Sites Verträge aus, um für die Beschaffung von Kunden und Verkäufen entlöhnt zu werden (Provisionen). Der Grossteil dieser Beträge wird an jene weitergegeben, die die Kunden beschaffen (Links weitergeben, selber in den Partnershps einkaufen, …). Damit identifiziert werden kann, wer was eingekauft hat, hat Bee5 einen Kurzurl-Dienst ins Leben gerufen. Wird ein Partner-Shop über eine solche URL angesurft, weiss Bee5 wem der Provisionsanteil zusteht. Dieser Kurzurldienst kann aber auch für beliebige URLs benutzt werden, nicht nur für die „Partner“.
Einfach gesagt läuft es folgendermassen ab:
- Man Surft zu einem Partnershop.
- Aus der URL wird über die Bee5-Seite eine Kurzurl gemacht.
- Man klickt auf diesen Link oder gibt ihn weiter.
- Es wird eingekauft.
- Der Provisionsanteil wird ausbezahlt.
Die Firefox Extension sollte folgende Features haben, um den Prozess zu erleichtern:
- Anzeigen, wenn man sich auf einer Partnerseite von Bee5 befindet.
- Per Knopfdruck diese Seite über einen Bee5 Link aufsuchen.
- Die aktuelle Seite im Browser in einen Bee5 Link umwandeln.
- Beliebige Links in Bee5 Links umwandeln.
- Über das Guthaben bei Bee5 informieren.
Herausgekommen ist eine Extension, die sich hauptsächlich als Toolbar zeigt:
Die Bee5 Extension in Aktion
Anatomie einer Firefox Extension
Das ganze Prinzip, das hinter einer Firefox Extension steht ist ziemlich interessant. Grundsätzlich werden die GUI-Elemente in XML, genauer in XUL definiert. Für den Browser wird ein Overlay kreiert, in dem man seine Dinge in die Toolbar, das Menü und/oder in die Statusbar einhängt. Alle Ereignisse werden mittels Javascript implementiert. Ein Ausschnitt aus dem Overlay:
<stringbundleset id="stringbundleset">
<stringbundle id="Bee5TB-stringBundle" src="chrome://bee5bar/locale/bee5bar.properties"/>
</stringbundleset>
<script type="application/x-javascript" src="chrome://bee5bar/content/bee5bar.js" />
<toolbox id="navigator-toolbox">
<toolbar id="Bee5TB-Toolbar" toolbarname="&bee5bar.toolbarname;" accesskey="&bee5bar.toolbarname.key;" class="chromeclass-toolbar" context="toolbar-context-menu" hidden="false" persist="hidden">
<toolbaritem flex="0" id="Bee5TB-MainMenuTBItem">
<toolbarbutton id="Bee5TB-MainMenu" type="menu" tooltiptext="&bee5bar.menu.tooltiptext;" label="&bee5bar.menu;" accesskey="&bee5bar.menu.key;">
<menupopup>
<menuitem label="&bee5bar.menu.website;" accesskey="&bee5bar.menu.website.key;" tooltiptext="&bee5bar.menu.website.tooltiptext;" oncommand="Bee5Bar.loadURL('http://bee5.de/beeoNu53a88')"/>
<menuitem label="&bee5bar.menu.mybee5;" accesskey="&bee5bar.menu.mybee5.key;" tooltiptext="&bee5bar.menu.mybee5.tooltiptext;" oncommand="Bee5Bar.loadURL('http://bee5.de/my/')"/>
<menuitem label="&bee5bar.menu.statistics;" accesskey="&bee5bar.menu.statistics.key;" tooltiptext="&bee5bar.menu.statistics.tooltiptext;" oncommand="Bee5Bar.loadURL('http://bee5.de/my/statistic-abstract.html')"/>
Probleme und Tipps
Das unglaubliche Prefwindow
Eines der grössten Probleme war das sogenannte Prefwindow: Lasst Euch nicht in den Wahnsinn treiben. Es reagiert nämlich auf allen Systemen anders. Unter Linux werden Änderungen sofort in die Config geschrieben, unter Windows erst nach Drücken von ok!
Reagieren auf Seitenwechsel
Bei jeder Seite sollte geprüft werden, ob es sich um einen Partnershop handelt. Es gibt verschiedene Philosophien, wie das gehandhabt werden soll, und die wenigsten funktionieren auch für Tabwechsel. Grundsätzlich kommt man wohl nicht darum herum „pageshow“ und „focus“ zu überschreiben:
if(event.target.location) {
var url = event.target.location.toString();
Bee5Bar.doPageWork(url);
}
}
//...
window.addEventListener("pageshow", Bee5Bar.newPage, false);
window.addEventListener("focus", Bee5Bar.newPage, true );
Beim ersten Aufruf eine Webseite anzeigen
Will man bei einem Upgrade oder dem ersten Start einer Extension eine Seite anzeigen oder Initialisierungen durchführen, sollte man sich streng an die Vorgaben der XUL-Seite halten.
Autiomatisch ein Toolboxitem einfügen
Das funzt, hab nichts Anderes gefunden:
addToolbarButton: function() {
Bee5Bar.debugMsg("addToolbarButton","Function started",1);
// Get preferences
if(!Bee5Bar.prefsManager.getBoolPref("toolbarinstalled")) {
Bee5Bar.debugMsg("addToolbarButton","Installing Toolbar",1);
Bee5Bar.prefsManager.setBoolPref("toolbarinstalled",true);
try {
var firefoxnav = document.getElementById("nav-bar");
var curSet = firefoxnav.currentSet;
if (curSet.indexOf("Bee5TB-toolbarButton") == -1) {
var set;
// Place the button before the urlbar
if (curSet.indexOf("urlbar-container") != -1)
set = curSet.replace(/urlbar-container/, "Bee5TB-toolbarButton,urlbar-container");
else // at the end
set = curSet + ",Bee5TB-toolbarButton";
firefoxnav.setAttribute("currentset", set);
firefoxnav.currentSet = set;
document.persist("nav-bar", "currentset");
// If you don't do the following call, funny things happen
try {
BrowserToolboxCustomizeDone(true);
} catch (e) { }
}
} catch(e) { }
}
},
Einstieg in die Programmierung einer Toolbar
Von den Profis lernen
Von jedem Addon kann der Quelltext angesehen werden! Sollte er sich in einem JAR befinden, einfach entzippen.
Quellen/Tutorials
Der allerbeste Einstieg dürfte Born Geek’s Tutorial sein. Es ist etwas veraltet, bietet aber eine gute Basis. Etwas moderner, aber knapper sind das Mozilla Blog und Linux Box.
Entwicklungsumgebung
Devilsworkshop beschreibt ein paar Möglichkeiten, wie Firefox als Entwicklungsumgebung aufgesetzt werden kann. Unverzichtbare AddOns waren für mich die Extension Developers Extension, Console2 und ChromeList.
Fazit
Coden macht Spass!!! Startet die Editoren..!
Leider veraltet, und nicht kompatibel mit aktuellem Firefox.
Jup, hast recht, ich bin dran und werde so bis nächste Woche ein Update herausgeben…