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"></stringbundle>
    </stringbundleset>
    <script type="application/x-javascript" src="chrome://bee5bar/content/bee5bar.js"></script>
    <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>
                        <menuitem label="&bee5bar.menu.mybee5;" accesskey="&bee5bar.menu.mybee5.key;" tooltiptext="&bee5bar.menu.mybee5.tooltiptext;" oncommand="Bee5Bar.loadURL('http://bee5.de/my/')"></menuitem>
                        <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')"></menuitem>

Weiterlesen