Firefox AddOn selbst entwickeln

Heute habe ich mich mal kurz mit Firefox-AddOns beschäftigt. Idee war es ein AddOn zu schaffen, was die Youtube-Suchleiste (die beim runterscrollen auf dem Bildschirm bleibt) das CSS-Attribut "position=absolute" zu geben, und damit zu verhindern, dass die Leiste mit nach unten scrollt.

Um Firefox-AddOns zu entwickeln muss man sich zuerst das AddOn-SDK von Mozilla herunterladen [1]. Damit das SDK funktioniert benötigt ihr Python und den Firefox selbst! Das Archiv entpacken, und das Bash-Skript "bin/activate" ausführen. Dann seid ihr in der SDK-Umgebung (mit eurer Bash). Dann könnte eure Bash folgendes anzeigen:

(addon-sdk-1.17)snaums\@xlifebook:\~/Desktop/addon-sdk-1.17\$

Nun könnt ihr das cfx-Skript ausführen. Mit cfx --help könnt ihr wichtige Funktionen des Skriptes herausfinden. Zum Beispiel legt cfx init in einem leeren Verzeichnis ein Beispiel-Addon an, was nichts tut. Ihr erhaltet dabei die Ordner "data", "lib" und "test". In "data" gehören zum Beispiel Bilder, die ihr in eurem AddOn verwenden wollt, "lib" enthält die Codedatei(en) und "test" enthält den Code für die Tests eures AddOns. Mit cfx run öffnet sich ein Test-Firefox, welches euer AddOn installiert hat. Damit könnt ihr die Funktionsweise eures AddOns überprüfen. Und mit cfx test lasst ihr das Testskript unter /test/... laufen. Die Tests müsst ihr übrigens selbst schreiben.

Mit cfx xpi könnt ihr aus eurem Code eine .xpi-Datei machen, die ihr in eurem Firefox einfügen könnt und damit euer neues AddOn installiert. Die Datei package.json, die beim init angelegt worden ist, enthält übrigens Namen und weitere Informationen über euer AddOn, unter anderem auch, ob es im privaten Modus laufen darf oder nicht. (siehe [2])

Die AddOns für den Firefox werden (neuerdings) in Javascript entwickelt, das heißt ihr solltet gute Javascript-Kenntnisse haben. Euch hilft auch das Mozilla Developer Network, mit einigen kleineren Beispielen, die eine gewisse Funktionalität liefern, die in eurem AddOn sicher sinnvoll wären.

Mein kleines AddOn soll nichts anderes machen, als verhindern, dass die Youtube-Suchleiste mitscrollt. Ich klicke also im Browser mit Rechtsklick darauf, und auf "Element untersuchen". Nun suche die das \<div>, was am weitesten oben steht, suche mit dessen ID heraus (masthead-positioner), und probiere in der Javascript-Konsole im Browser: document.getElementById("masthead-positioner").style.position="absolute";. Und siehe da - es funktioniert. Nun muss ich das nurnoch in mein AddOn bringen.

Im Mozilla Developer Network lese ich, dass man für Seitenveränderungen mit bestimmten URLs das Modul pageMod verwenden soll. Schnell beim Beispiel abgeschrieben kommt nun folgendes heraus (lib/main.js):

var pageMod = require("sdk/page-mod");

pageMod.PageMod({  
include: "\*.youtube.com",  
contentScript: 'if (document.getElementById("masthead-positioner")!=null) { ' +  
    'document.getElementById("masthead-positioner").style.position="absolute"; }'  
});

Das AddOn ist unter [3] erhältlich.

[1] https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Installation
[2] https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json
[3] https://addons.mozilla.org/de/firefox/addon/yt-heading-fixer/