Firefox-Extension für das Bee5 affiliate System

flying-bee5Ü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:

  1. Man Surft zu einem Partnershop.
  2. Aus der URL wird über die Bee5-Seite eine Kurzurl gemacht.
  3. Man klickt auf diesen Link oder gibt ihn weiter.
  4. Es wird eingekauft.
  5. 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

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:

<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="Bee5TB-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:

newPage: function(event) {
    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:

// Automatically adds toolbar button on first run
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..!

2 Gedanken zu “Firefox-Extension für das Bee5 affiliate System

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.