Blog

How To: Simple Firefox-Erweiterung in wenigen Minuten erstellen dank Add-on SDK

Verfasst von: Sören Hentzschel

How To: Simple Firefox-Erweiterung in wenigen Minuten erstellen dank Add-on SDK

Mit dem Add-on SDK, auch bekannt als Jetpack, hat Mozilla zusammen mit dem Add-on Builder eine großartige Möglichkeit geschaffen, auf einfache Weise Add-ons für Mozilla Firefox zu erstellen, zu deren Erstellung keine besonderen Kenntnisse notwendig sind. Entsprechende APIs erlauben dabei den Zugriff auf elementare Browserfunktionen, so dass man alleine hierdurch und gegebenenfalls ganz gewöhnliche Webstandards wie JavaScript sehr viel erreichen kann. Außerdem ist für derartige Erweiterungen zur Installation kein Neustart des Browsers notwendig.

Durch dieses How To möchte ich all jene zu dieser Thematik hinführen, die gerne selber die eine oder andere Anpassung an Firefox selbst vornehmen wollen, bisher aber vor der Thematik Add-on-Entwicklung zurückgeschreckt sind. Am Ende werden wir sehen, dass es überhaupt kein Hexenwerk ist, Programmierkenntnisse sind zumindest für einfache Anwendungen überhaupt nicht notwendig. Bewusst gehe ich nur auf einen Bruchteil der gebotenen Möglichkeiten ein, der Fokus sollte erst einmal darauf liegen, den Leser auf den Geschmack kommen zu lassen.

In diesem Beispiel  werden wir eine simple Erweiterung schreiben, welche die Add-on Bar um Favicons anderer Seiten erweitert und diese verlinkt. Um das Ganze noch etwas spannender zu machen, werden wir die Erweiterung nach und nach in der Funktionalität erweitern, um so einen kurzen Einblick in verschiedene APIs zu bekommen.

Hilfreich bei der Entwicklung ist die wirklich hervorragende Dokumentation. Außerdem kann über einen Button im Add-on Builder jederzeit die aktuelle Version im Editor live getestet werden. Fehler werden in der Konsole angezeigt, welche ebenfalls über einen Button im Add-on Builder erreichbar ist.

Zu allererst starten wie den Add-on Builder und erstellen unser neues Projekt. In den Projekt-Einstellungen werden wir der Erweiterung einen Namen und eine Beschreibung verpassen, auf der linken Seite lassen wir als Bibliothek die aktuelle Version des SDK, aktuell Version 1.1, ausgewählt.

Erst einmal werden wir dafür sorgen, dass in der Add-on Bar Favicons angezeigt werden. Hierfür bedienen für uns der Widget-API. Um diese nutzen zu können, müssen wir sie einbinden. Anschließend können wir diese bereits gemäß Dokumentation in der main()-Funktion nutzen:

var widgets = require('widget');

widgets.Widget({
   id: 'sh-at',
   label: 'soeren-hentzschel.at',
   contentURL: 'https://www.soeren-hentzschel.at/favicon.ico'
});

Und schon haben wir ein Icon in der unteren Leiste des Browsers. Wir könnten statt contentURL auch einfach content übergeben und wären so in der Lage, Text zu schreiben. Hierbei sollte allerdings noch das Attribut width gesetzt werden, um dem Widget die benötigte Breite mitzuteilen, ansonsten wird der Text unter Umständen abgeschnitten. Wichtig ist nur, dass das Widget entweder content oder contentURL enthält. Der Inhalt des label-Attributes ist (genauso wie eine eindeutige ID) zwingend erforderlich und erscheint außerdem, wenn man mit der Maus über das Element fährt.

Natürlich ist das jetzt noch nicht sonderlich spektakulär. Als nächstes wollen wir, dass sich bei Klick auf einen Link eine bestimmte Seite öffnet. Dafür binden wir zunächst die Tabs-API ein. Anschließend erweitern wir unser Widget um ein onClick-Event. Die Methode tabs.open() öffnet dabei eine Seite in einem neuen Tab und fokussiert diesen.

var tabs = require('tabs');

widgets.Widget({
   // ...
   onClick: function() {
      tabs.open('https://www.soeren-hentzschel.at');
   }
});

Im Prinzip reicht das schon, das Add-on erfüllt bereits mit diesen wenigen Zeilen Code seine Grundfunktionaltiät. Wir können jetzt auf den Download-Button klicken und erhalten damit bereits eine voll funktionale Erweiterung für Firefox, welche sich andere User einfach installieren können!

Natürlich können beliebig viele Widgets auf diese Weise in einem einzigen Add-on platziert werden. Also tun wir genau dies und erstellen nun unser zweites Widget. Um ein wenig Abwechslung reinzubekommen, werden wir nun für eines unserer Widgets nicht auf ein fremdes Favicon verweisen, sondern dieses direkt mitliefern. Wir ahnen es, auch zur Bereitstellung von Ressouren gibt es eine API, die sogenannte Self-API, welche wir auf äquivalente Weise einbinden. Anschließend gelangen wir über data.url() als contentURL auf unser Icon. Doch, halt! Wo ist unser Icon? Die Einbindung erfolgt denkbar einfach: Wir klicken auf der linken Seite auf das Plus bei Data und laden unser Icon über die Eingabemaske einfach hoch und benennen dieses gegebenenfalls noch um.

var self = require('self');

widgets.Widget({
   // ...
   contentURL: self.data.url('sh-at.ico')
});

Wie wir bereits festgestellt haben, werden Seiten in einem neuen Tab geöffnet und direkt fokussiert. Dieses Verhalten wollen wir jetzt ändern, doch nicht nur das – es wäre doch eine feine Sache, wenn wir dem User die Kontrolle darüber geben könnten, wie dieser die Seiten öffnet. Eine richtig schöne Prefs-API gibt es derzeit noch nicht, ist als P1-Priorität aber derzeit in Entwicklung. Zumindest aber gibt uns die aktuelle Version des SDKs über preferences-services die Möglichkeit, Schalter von about:config auszulesen. Eine dazu passende Oberfläche zum Setzen der Einstellungen in XUL umzusetzen würde den Rahmen dieses Artikels klar sprengen, ist an dieser Stelle aber auch nicht sonderlich wichtig.

Folgende zwei Möglichkeiten wollen wir dem User bieten: Entweder werden die Seiten weiter in einem neuen Tab geöffnet, dabei allerdings im Hintergrund geladen, also nicht weiter direkt fokussiert. Oder die Seite ersetzt den derzeit aktiven Tab. Besprechen wir also zuerst einmal, wie wir diese Ziele jeweils fix ohne entsprechende Einstellung erreichen.

Für Fall 1 müssen wir der Methode tabs.open() das Attribut inBackground mitgeben und auf true setzen. Dadurch ändert sich der Aufruf leicht:

widgets.Widget({
   // ...
   onClick: function() {
      tabs.open({
         url: 'https://www.soeren-hentzschel.at',
         inBackground: true
      });
   }
});

In Fall 2 verzichten wir auf Einsatz der Funktion tab.oben() und setzen stattdessen das Attribut tabs.activeTab.url auf die entsprechende URL:

widgets.Widget({
   // ...
   onClick: function() {
      tabs.activeTab.url = 'https://www.soeren-hentzschel.at'
   }
});

Nach dieser grundsätzlichen Überlegung sind wir soweit, dass wir den User entscheiden lassen können. Entsprechend der bisher eingesetzten APIs werden wir nun preferences-service einbinden. Damit es überhaupt zu einer Überprüfung kommen wird, müssen wir die bisherige onClick-Funktion durch eine neue Funktion ersetzen, welche wir nun außerhalb der main()-Funktion erstellen werden und die die Überprüfung übernimmt. Im Beispiel nennen wir die Funktion openTab() und übergeben wie bereits der alten Funktion die URL als Parameter. In dieser Funktion überprüfen wir mittels prefs.get() die zu überprüfende Einstellung sowie den Standardwert, welcher greift, falls der User keine entsprechende Einstellung gesetzt hat (in diesem Fall ‘extensions.quicklaunch.tabsinbackground’ und true) und führen dann eine Fallentscheidung durch: Ist der Schalter true, wird Fall 1 ausgeführt, andernfalls Fall 2.

var prefs = require('preferences-service');

function openTab(url) {
   if(prefs.get('extensions.quicklaunch.tabsinbackground', true) === true)
      tabs.open({
         url: url,
         inBackground: true
      });
   else
      tabs.activeTab.url = url;
}

widgets.Widget({
   // ...
   onClick: function() {
      openTab('https://www.soeren-hentzschel.at');
   }
});

Die nächste Idee ist, dass wir den Betreibern der verlinkten Seite eine simple Möglichkeit geben wollen festzustellen, dass Besucher über unsere Erweiterung auf die Seite gekommen sind. Dafür wollen wir der URL einen ref getauften Parameter anhängen, beispielsweise soll die URL https://www.soeren-hentzschel.at/?ref=quicklaunch übermittelt werden. Die Schwierigkeit hierbei ist, dass dieser Parameter je nachdem, ob bereits Parameter in der URL stecken, mit ? oder & eingeleitet werden muss. Zu diesem Zweck schreiben wir uns eine einfache Funktion, die das überprüft – das ist übrigens bis hierhin die einzige Stelle, wo wirklich JavaScript verwendet wird. ;-) Den Link in unserer openTab()-Funktion erweitern wir hinterher um dieses Anhängsel.

function addReferer(url) {
   var operator = (url.indexOf('?') === -1) ? '?' : '&';
   return url + operator + 'ref=quicklaunch';
}

function openTab(url) {
   var refurl = addReferer(url);

   if(prefs.get('extensions.quicklaunch.tabsinbackground', true) === true)
      tabs.open({
         url: refurl,
         inBackground: true
      });
   else
      tabs.activeTab.url = refurl;
}

Als letztes Schmankerl in diesem Tutorial werden wir die Erweiterung noch um eine Logfunktion erweitern. Gerade bei größeren Erweiterungen ist es meiner Meinung nach wichtig, eine vernünftige Fehlerausgabe bereitzustellen, weswegen es mir an dieser Stelle zumindest einmal wichtig ist erwähnt zu haben, wie man Meldungen in die Konsole schreiben kann. In diesem Beispiel werden wir – wieder in Abhängigkeit einer User-Einstellung – jeden Klick inklusive Zeitpunkt festhalten. Diese Einstellung setzen wir als Standard auf false. Zum Schreiben der Log-Funktionen kann ganz einfach die Funktion console.log() verwendet werden. Wir setzen diese an das Ende unserer openTab()-Funktion:

function openTab(url) {
   // ...
   if(prefs.get('extensions.quicklaunch.consolelog', false) === true)
      console.log('Quick Launch :\t' + new Date() + '\n' + refurl);
}

Am Ende noch einmal der komplette Beispiel-Code:

var widgets = require('widget');
var self    = require('self');
var tabs    = require('tabs');
var prefs   = require('preferences-service');

function addReferer(url) {
    var operator = (url.indexOf('?') === -1) ? '?' : '&';
    return url + operator + 'ref=quicklaunch';
}

function openTab(url) {
    var refurl = addReferer(url);

    if(prefs.get('extensions.quicklaunch.tabsinbackground', true) === true)
        tabs.open({
            url: refurl,
            inBackground: true
        });
    else
        tabs.activeTab.url = refurl;

    if(prefs.get('extensions.quicklaunch.consolelog', false) === true)
        console.log('Quick Launch :\t' + new Date() + '\n' + refurl);
}

exports.main = function() {
    widgets.Widget({
        id: 'sh-at',
        label: 'soeren-hentzschel.at',
        contentURL: self.data.url('sh-at.ico'),
        onClick: function() {
            openTab('https://www.soeren-hentzschel.at');
        }
    });

    widgets.Widget({
        id: 'sozone',
        label: 'Soccer-Zone',
        contentURL: 'http://www.sozone.de/favicon.ico',
        onClick: function() {
            openTab('http://www.sozone.de/');
        }
    });
};

Das war es an dieser Stelle mit meiner Demo-Erweiterung. Ich hoffe, ich konnte ein paar der Grundlagen verständlich übermitteln und motivieren, sich intensiver mit dem Add-on SDK zu befassen. Ich für meinen Teil bin begeistert davon, wieviel man mit relativ einfachen Mitteln erreichen kann. Vor allem gegenüber der traditionellen Add-on-Erstellung für Firefox älter als Version 4.0 stellt das eine erhebliche Vereinfachung dar.

58


Kommentare

  1. nixdagibts  18. September 2011, 11:52

    Hallo,

    gibt es so was wie SelfHTML oder SelfPHP auch für die Widget-API bei Firefox?
    Also eine Art Übersicht über alle möglichen Schlüsselwörter, die man verwendet kann.
    Wo kann man zum Beispiel sehen, welche Ausrücke hinter “tabs” oder “URL” erlaubt sind?

    Pragmatischer Hintergrund meiner Frage ist:
    – wie lautet der Ausdruck um zu testen, ob gerade exakt 1 Tab geöffnet ist
    – wie lautet der Ausdruck um zu testen, ob die URL des gerade aktiven Tab “www.beispiel.de” lautet

  2. Sören Hentzschel  18. September 2011, 15:04

    Hi,

    die Dokumentation ist wie im Artikel verllinkt hier zu finden:
    https://addons.mozilla.org/en-US/developers/docs/sdk/1.1/

    Dort findest du eigentlich alles, was derzeit möglich ist.
    Eine Möglichkeit, die oben genannten Fragen anzugehen, wäre vielleicht:

    var tabs = require(‘tabs’);

    exports.main = function() {
    tabs.on(‘ready’, function(tab) {
    if(tabs.length == 1)
    console.log(‘The number of open tabs across all windows is 1′);

    if(tab.url == ‘http://www.google.de/’)
    console.log(‘The URL of the current tab is ‘ + tab.url);
    });
    };

  3. nixdagibts  19. September 2011, 23:47

    ich hab im Mozilla Forum gefragt und mir wurde geholfen:

    if (gBrowser.currentURI.spec == “chrome://speeddial/content/speeddial.xul” && gBrowser.browsers.length == 1)
    {goQuitApplication();}
    else
    {gBrowser.removeCurrentTab();}

    Jetzt ist FireGestures in Verbindung mit Speedial nochmal ein Stück besser

  4. Sören Hentzschel  18. August 2012, 16:21

    Wenn du ein bestehendes Add-on bearbeiten möchtets, bringt dich dieses Tutorial auch nicht weiter. Hier geht es darum, mit Hilfe von Mozillas Add-on SDK und dem Add-on Builder eine neue Erweiterung zu erstellen. Geht es um die Veränderung einer bestehenden Erweiterung, musst du den Code dieser Erweiterung verstehen und entsprechend verändern, das kann man nicht pauschal in einem Tutorial abhandeln, dafür ist jede Erweiterung zu verschieden. Allerdings dürfte das sehr, sehr schwierig werden, wenn es mit diesem Tutorial schon Verständnisprobleme gibt, da hier schon sehr detailliert auf die einzelnen Schritte eingegangen wird und kaum Programmierkenntnisse vorausgesetzt werden. In der Praxis werden natürlich schon gewisse Kenntnisse in JavaScript vorausgesetzt, weil man sonst entsprechend beschränkt in seinen Möglichkeiten ist.

  5. Korken  18. August 2012, 16:06

    Ich habe ein Add one für ein kleines Spiel würde es gern bearbeiten, leider verstehe ich hier nur Bahnhof.

  6. Kevin  11. Oktober 2012, 11:40

    kannst du vielleicht auch ein Tutorial für Optionen bei einem AddOn machen? Ich find die Seite hier echt gut :-)

  7. Sören Hentzschel  11. Oktober 2012, 11:48

    Hallo,

    danke und klar. Ich werd schauen, dass ich am Wochenende dazu komme. :)

  8. Kevin  11. Oktober 2012, 12:01

    Juhuu… danke… ich hab aber mal noch eine Frage:
    wieso funktioniert der komplette Beispiel-Code bei mir nicht? Ich hab mir das soeren-hentzschel.at/favicon.ico heruntergeladen und dort eingefügt… geht aber irgendswie nicht… was mach ich falsch? ich hab den kompletten Fertig-Code kopiert…

    MfG
    Kevin

  9. Kevin  11. Oktober 2012, 12:08

    upss… jetzt klappts… ich hatte ganz unten das “};” nicht mit kopiert… :D

  10. Sören Hentzschel  11. Oktober 2012, 12:11

    Okay, das beruhigt mich, dann muss ich nicht nochmal den ganzen Code überprüfen. :D Die Fehlerkonsole (Strg+Umschalt+J) hilft einem ansonsten auch manchmal, wenn etwas nicht funktioniert. Teilweise etwas unübersichtlich, weil die Fehlermeldungen gerne mal meterlang werden, und nicht immer hilfreich, aber manchmal hilfts. ;)

  11. Kevin  11. Oktober 2012, 12:53

    meine letzte frage:
    Wie kann ich bitte das Icon von diesem blauen Puzzelteil zum Logo ändern? Das ist irgendswie komisch :D

  12. Sören Hentzschel  11. Oktober 2012, 13:05

    Du meinst das Icon, welches auch im Add-on Manager bei deiner Erweiterung erscheint? Wenn du die Erweiterung herunterlädst (.xpi) und entpackst, kannst du dort ein Icon mit der Bezeichnung icon.png ablegen. Die Größe sollte 48×48 Pixel betragen. Anschließend kannst du wieder alles zu einer xpi-Datei packen (das ist ZIP, bloß mit anderer Dateiendung). Zusätzlich könntest du für die Detail-Ansicht noch eine icon64.png in der Größe 64×64 Pixel ablegen, dort kann ein etwas größeres Icon verwendet werden.

  13. Kevin  11. Oktober 2012, 14:06

    Ah. Danke!
    Aber:
    In welches Verzeichnis? Da gibt es so viele… und wenn ich es einfach in das erste Verzeichnis packe mäckert der irgendswas auf englisch…

  14. Sören Hentzschel  11. Oktober 2012, 14:17

    Einfach in die oberste Ebene, da wo auch die package.json ist.

  15. Kevin  11. Oktober 2012, 14:27

    dann scheint aurora das nicht zu verstehen:
    ich hab mal screenshots gemacht:
    http://petzichen.coobz.de/addon-logo1.JPG
    http://petzichen.coobz.de/addon-logo2.JPG

    ich kann es auch mei Mozilla hochladen… gleiches ergebnis…

    MfG
    petzichen/Kevin

  16. Kevin  11. Oktober 2012, 14:30

    hab s bei mozilla ausprobiert: (selber Fehler, anders ausgedrückt)
    http://petzichen.coobz.de/addon-logo3.JPG
    http://petzichen.coobz.de/addon-logo4.JPG

    MfG

  17. Sören Hentzschel  11. Oktober 2012, 14:32

    Hast du die Datei install.rdf denn versehentlich gelöscht? Die sollte sich im selben Verzeichnis befinden.

  18. Kevin  11. Oktober 2012, 14:38

    gelöscht hab ich nix… läuft jetzt aber :-) daaanke… ich habs irgendswie die ganze zeit hin und her zwischen “.zip” und “.xpi” :D

    Tankschön… ;-) :-P

  19. Sören Hentzschel  15. Oktober 2012, 00:48

    Also wegen des Artikels zu den Einstellungen, nächstes Wochenende ist deutlich realistischer, der Aurora-Artikel hat mich lange aufgehalten, unter der Woche bin ich immer erst spät zuhause, da brauch ich aber auch Zeit für. ;)

  20. Kevin  15. Oktober 2012, 09:57

    Ist nicht schlimm… hauptsache du kriegst es in der nächsten Zeit hin… bei google.de finde ich nix…

  21. Kevin  26. Oktober 2012, 14:16

    Und?

  22. Kevin  26. Oktober 2012, 15:42

    Jetzt sind da schon wieder solche Errors… ich versteh nur Bahnhof… in Englisch bin nicht so gut… ich versteh aber schon das die datei nicht gefunden/geänder? werden kann…
    http://petzichen.coobz.de/error1.jpg
    http://petzichen.coobz.de/error2.jpg

    mfg

  23. Kevin  26. Oktober 2012, 15:48

    dieser und der beitrag kann gelöscht werden.. irgendswie musste ich aurora neustarten… nervig… sonst nie…

  24. Sören Hentzschel  27. Oktober 2012, 15:59

    Und?

    Ich muss leider um noch ein wenig Geduld bitten, weil ich aufgrund der Arbeit bis zum Ende des Jahres immer nur sehr eingeschränkt Zeit habe und nicht jeden Tag zum Schreiben komme. Aktuelle Themen bekommen dann aber entsprechend Vorrang, wenn Zeit ist, weil ein Tutorial weniger abhängig vom Zeitpunkt der Veröffentlichung ist, das ist bei anderen Themen leider nicht so.

  25. Kevin  27. Oktober 2012, 16:33

    Aktuelle Themen bekommen dann aber entsprechend Vorrang, wenn Zeit ist, weil ein Tutorial weniger abhängig vom Zeitpunkt der Veröffentlichung ist, das ist bei anderen Themen leider nicht so
    ok… kann ich verstehen… ;-)

  26. Malte  29. Oktober 2012, 11:49

    Hi,

    erstmal danke für dein super Tutorial!
    Ich habe noch eine Frage zu dem App Icon (nicht das welches man im “Firefox Addon Store” sieht, sondern zu dem welches im Firefox als Schaltfäche angelegt wird).
    Wie kann ich das anders positionieren? Mir ist bewusst, dass ich über “Anpassen” die Icons beliebig verschieben kann. Ich möchte aber, dass das Icon schon bei der Installation zum Beispiel neben dem URL Eingabefeld erscheint.

    Kannst du dort helfen?

  27. Sören Hentzschel  30. Oktober 2012, 01:23

    Hi,

    Die Symbole werden derzeit grundsätzlich in der Add-on-Leiste abgelegt beziehungsweise bald stattdessen in der Haupt-Toolbar. Das Add-on SDK bietet von sich aus derzeit keine Möglichkeit die standardmäßige Platzierung zu verändern. Erik Vold hat aber ein Modul für das SDK geschrieben, welches bereits dafür sorgt, dass diese Buttons standardmäßig in der Haupt-Toolbar erscheinen:

    https://github.com/erikvold/toolbarbutton-jplib

  28. Sören Hentzschel  04. November 2012, 20:25

    @Kevin: Das Tutorial ist nun online:
    How To: Einstellungen mit den Add-on SDK umsetzen

  29. Kevin  05. November 2012, 14:02

    Juhuuuu :)
    Danke!!

  30. Kevin  10. November 2012, 11:16

    Wie kann man eigendlich machen, das nach der installation eine Seite in neuem Tab geöffnet wird?

  31. Sören Hentzschel  10. November 2012, 11:34

    Ungetestet, sollte aber so gehen:

    var tabs = require('tabs');
    
    exports.main = function (options, callbacks) {
      if (options.loadReason === 'install') {
        tabs.open('http://www.google.de');
      }
    };
  32. Kevin  10. November 2012, 11:51

    also bei mir öffnet sich kein Link… ich hab auch schon die datwi runtergeladen (nicht nur vorschau), und auch Aurora neu gestartet… beides den selben Effekt: Kein Neuer Tab + Linköffnung :-s

  33. Sören Hentzschel  10. November 2012, 11:54

    Also ich habs hier gerade getestet. Nach der Installation öffnet sich mit diesem Schnipsel Google in einem neuen Tab. Das eventuell schon vorhandene exports.main = function() muss natürlich entsprechend angepasst werden, das sollte es nicht doppelt geben.

  34. MC_Kay  04. Januar 2013, 09:41

    Ich habe (vermutlich) einen kleinen Fehler in einem Beispielquelltext gefunden:

    widgets.Widget({

       // ...

       onClick: function() {

          tabs.open({

             url: 'https://www.soeren-hentzschel.at',

             inBackground: true

          }

       }

    });

     

    Fehlt in Zeile 7 hinter dem “}” nicht ein “);”?

    Schließlich wurde die Funktion “tabs.open()” nicht mit einem “)” abgeschlossen.

    Obendrein wurde die “Zeile” auch nicht mit dem “;” abgeschlossen.

  35. Sören Hentzschel  10. Januar 2013, 15:46

    Hallo,

    da hast du natürlich Recht und ich werde den Fehler umgehend beheben. In der abschließenden Code-Zusammenfassung ist alles korrekt, aber in dem einen Schritt davor versteckt sich tatsächlich der genannte Fehler. Vielen Dank!

  36. Michi  15. Februar 2013, 23:56

    Warum kann man den alert() & prompt nicht verwenden – oder geht das irgendwie?

    Hab jetzt ne Ewigkeit versucht das irgendwie zum laufen zu bringen – alles was ich will ist den Nutzer nach etwas fragen… *verzweifel*

  37. Sören Hentzschel  16. Februar 2013, 03:45

    Hallo,

    alert() respektive prompt() sind keine JavaScript-Features, sondern DOM-Features. Auf Webseiten wird JavaScript im Kontext der jeweiligen Webseite ausgeführt, entsprechend besteht Zugriff auf das DOM der entsprechenden Seite. Firefox-Erweiterungen werden allerdings nicht im Kontext einer bestimmten Webseite ausgeführt und haben damit keinen DOM-Zugriff, somit lassen sich die genannten Funktionen auch nicht nutzen. Um diese Funktionen mittels des Add-on SDKs nutzen zu können, muss ein sogenanntes Content-Script ausgeführt werden. Das Ganze ist auf folgender Seite ausführlich dokumentiert:

    Add-on SDK Guides: Content Scripts

  38. Michi  18. Februar 2013, 01:30

    Danke, damit hab ich es jetzt geschaft!

  39. jb  10. April 2013, 13:35

    Hi,

     

    ich versuche das auszuprobieren, aber bei mir funktioniert console.log nicht. Da wird nicht ausgegeben. Ich habe in der Fehlerkonsole, firebug und in der firefox entwickler konsole geschaut, console.log, auch alleine ohne if anwesiungen, funktioniert nie.

     

    was muss ich tun?

  40. Sören Hentzschel  11. April 2013, 16:15

    Hallo,

    es gab eine Änderung mit Version 1.14 des SDKs in Bezug auf das Standard-Log-Level. Meldungen via console.log() werden nicht mehr in der Konsole ausgegeben, da der neue Level ‘error’ und nicht mehr ‘info’ ist. Folgende Level gibt es:

    1. all: log calls to any console method
    2. debug: log calls to debug(), log(), info(), warn(), error()
    3. info: log calls to log(), info(), warn(), error()
    4. warn: log calls to warn() and error()
    5. error: log calls to error()
    6. off: log nothing

    Das Log-Level kann über about:config geändert werden, dazu muss der Schalter extensions.sdk.console.logLevel entsprechend gesetzt werden. console.error() funktioniert demnach auch ohne Änderung über about:config.

  41. Kevin  26. April 2013, 13:22

    So.. mal wieder eine Frage von mir.. Ich bin jetzt kein Meister in Addon machen, aber ich würde dennoch gerene machen, das wenn man so eine Srechblase (bei der neuen SDK version nun ein zentriertes Fenster aufm Monitor)

    https://addons.mozilla.org/en-US/developers/docs/sdk/1.14/static-files/media/screenshots/text-entry-panel.png

    aktiv hat, das der rest des Bildschirmes leicht abgedunkelt wird…

     

    MfG

  42. Sören Hentzschel  26. April 2013, 16:08

    Ich würde es mal mit dem PadeMod-Modul versuchen. Ein Beispiel dafür:

    var data = require('sdk/self').data;
    var pageMod = require('sdk/page-mod');
    
    pageMod.PageMod({
      include: ['*'],
      contentStyleFile: data.url('style.css')
    });

    Mit diesem Beispiel wird für jede Seite das Stylesheet style.css aus dem data-Verzeichnis angewendet. Das könnte vielleicht ein Ansatz sein. JavaScript lässt sich auch verwenden. Das ist hier dokumentiert:

    https://addons.mozilla.org/en-US/developers/docs/sdk/latest/modules/sdk/page-mod.html

    Konkret den gewünschten Anwendungsfall hab ich jetzt nicht gebaut, dafür fehlt mir momentan die Zeit, aber vielleicht hilft das ja.

  43. Kevin  28. April 2013, 10:46

    Hm.. ok.. danke.. ich werds mir mal anschauen ;D

  44. johannes  12. Juli 2013, 11:38

    Hi Sören, du scheinst dich gut mit Mozilla addons auszukennen. Kennst du dieses <link entfernt>? wenn ja, kannst du mir ein kurzes feedback geben?

    Danke und lg johannes

  45. Sören Hentzschel  12. Juli 2013, 12:21

    Hallo,

    ich hab den Link mal entfernt, da mir das sehr nach Werbung aussah, insbesondere da du nicht auf die relevante Add-on-Seite verlinkt hast und es im Camp Firefox-Forum bereits einen merkwürdigen Thread kürzlich dazu gab. Wenn du Feedback möchtest, müsstest du mir sagen, wofür genau, Funktionalität, Code, Interaktion, … Allerdings würde mich das wundern, wenn ausgerechnet ich Feedback geben soll, wo hinter der Erweiterung doch eine große Firma steht. ;)

  46. johannes  12. Juli 2013, 13:00

    Hab mir nur den thread mal durchgelesen und dachte mir ich frag dich, weil du kompetente Aussagen von dir gibst. Und ich frage sicher nicht die Firma, wenn ich eine neutrale Meinung haben möchte. :-)

    Ja Funktionalität z.b

  47. Sören Hentzschel  12. Juli 2013, 22:56

    Also ein Feedback rein aus Nutzersicht. Mir gefällt nicht, dass die Links für die Angebote verschleiert sind. So lässt sich nicht nachvollziehen, ob der Anbieter der Erweiterung für erfolgreiche Einkäufe nicht eine Provision erzielt. Ich gehe fest davon aus, dass dem so ist. Da fehlt es mir an Transparenz. Außerdem macht die Erweiterung auch Vorschläge für Angebote, welche nicht günstiger sind als das aktuelle Angebot, sondern genauso viel kosten oder gar teurer sind. Das entspricht für mich nicht der Beschreibung des Add-ons. Ansonsten, wenn einen das beides nicht stört und man sich über Hinweise auf andere Shops freut…

  48. Kevin  17. Juli 2013, 17:21

    Hört sich jetzt vielleicht ein bisschen noobig an, aber ich bin noch nicht so weit das ich die Antwort auf die Frage wissen könnte:

    Kann ich der Benachrichigung einen Befehl geben, wie lange es angezeigt werden soll?

    https://addons.mozilla.org/en-US/developers/docs/sdk/latest/modules/sdk/notifications.html

  49. Sören Hentzschel  17. Juli 2013, 17:32

    Das ist momentan nicht möglich.

  50. Kevin  17. Juli 2013, 17:45

    Wird es *irgendwann* funktionieren ;-) :D

  51. Sören Hentzschel  17. Juli 2013, 17:49

    Mir ist nicht bekannt, dass jemand an einer Einstellung dafür arbeitet, ich würde den folgenden Bug im Auge behalten (auch wenn der Titel nicht wirkich stimmt, es sind vier Sekunden und nicht nur zwei Sekunden):

    https://bugzilla.mozilla.org/show_bug.cgi?id=875114

Kommentar hinzufügen

E-Mail-Benachrichtigung bei weiteren Kommentaren.