Eine Browser-Extension bzw. Erweiterung selbst zu programmieren ist gar nicht so schwierig wie man vielleicht meint. Zudem sind die Einsatzmöglichkeiten wirklich vielfältig. Nachfolgend aufgelistet ein paar Ressourcen, die gut als Einstieg zur Erstellung der eigenen ersten Erweiterung dienen können:

Über Google bin ich bei Mozilla fündig geworden. Auf Github findet sich ein Repository mit vielen verschiedenen Beispiel-Erweiterungen die als Grundlage für das eigene Projekt dienen können.

In dem nachfolgenden Video wird gezeigt, wie man über about:debugging (in die URL-Zeile vom Browser eintippen und mit Enter bestätigen) eine Erweiterung schnell und einfach temporär einbinden kann:

Please accept YouTube cookies to play this video. By accepting you will be accessing content from YouTube, a service provided by an external third party.

YouTube privacy policy

If you accept this notice, your choice will be saved and the page will refresh.

Mittels about:addons kann die Erweiterung einfach per Klick immer wieder deaktiviert und aktiviert werden. So kann man schnelle und einfach Änderungen an der Erweiterung testen.

Mozilla bietet unter dem Schlagwort “Anatomy of an extension” eine interessante Übersicht der verschiedenen Möglichkeiten, eine Erweiterung in den Browser zu integrieren. Nach meinem derzeitigen Verständnis gibt es drei Möglichkeiten:

  1. Hintergrundskripte: diese laufen die ganze Zeit im Browser im Hintergrund und sind nicht abhängig von der jeweiligen Webseite, sondern werden sogar bei der Betrachtung von PDFs ausgeführt. Über das Schlagwort “background.js” findet man weitere relevante Informationen dazu.
  2. Sidebars, Pop-ups, Options-Pages: hier hast du die Möglichkeit eigene HTML-Seiten einzubinden, welche mit dem Hintergrundskript kommunizieren können.
  3. Content scripts: diese werden direkt in die jeweilige Webseite eingebettet, können von dieser aber auch blockiert werden. Über das Schlagwort “content_scripts.js” finden sich Informationen dazu.

Wie fängt man jetzt am besten an? Ich habe damit angefangen mit das Repo mit den Beispielen von Github herunterzuladen und mir die verschiedenen Erweiterungen anzuschauen. Wenn bereits eine grobe Idee der Erweiterung existiert, kann man einfach mal schauen, welche davon der Idee am nächsten kommt. Diese kann man dann in Firefox temporär einbinden, wie oben im Video erläutert und auch gleichzeitig in einer IDE öffnen und anfangen ein bisschen zu experimentieren.

Hinweis: einE oft verwendete Debug-Ausgabe ist sicherlich “alert(123);”, dies ist jedoch bspw. bei den Background-Skripten nicht verfügbar. Was jedoch immer funktioniert ist “console.log(123);” jedoch erscheint die die Ausgabe nicht wie sonst üblich in der Konsole, welche man mittels Strg+Umschalt+I öffnet, sondern in der Konsole, die mit Strg+Umschalt+J geöffnet wird.

Dieser Hinweis findet sich auch nochmals fast am Ende in einer gelben Box.

Praxis-Tipp: Ich habe mir die Seiten “about:debugging” und “about:addons” als Lesezeichen direkt in die “Lesezeichen-Symbolleiste” gelegt.

Außerdem habe ich mir das kleine Freeware-Programm “DeskPins” besorgt, mit welchem die Browser-Konsole, welche mittels Strg+Umschalt+J aktiviert wird, immer im Vordergrund bleibt.