CategoryAllgemein

DIY: Browser Extension

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.

Google Home Mini nicht mit Apps / Skills kompatibel

Alle Apps, oder nennt man die Erweiterungen bei Smart-Speakern Skills, insgesamt zwei, die ich bisher auf meinem Google Home Mini installieren wollte, scheinen für meinen Google Home Mini nicht geeignet zu sein. Konkret geht es um die Apps Remember The Milk und Blinkist. Für sachdienliche Kommentare, bzgl. den Ursachen, bin ich dankbar.

Insgesamt scheint es mir, dass es für den Smart-Speaker Alexa Echo von Amazon mehr Apps gibt, bzw. auch das ganze App-Verzeichnis besser gepflegt ist. Ist aber bisher nur ein subjektives Gefühl, ohne es bisher verifiziert zu haben, da ich mir jetzt noch einen Smart-Speaker in die Wohnung stellen möchte. Wer hierzu eine Quelle hat, würde ich mich gleichfalls über einen Kommentar freuen.

Rätsel-Lösung: Hier entsteht unsere neue Internetpräsenz.

In der letzten Woche gab es ein kleines Rätsel. Für alle die es ggf. verpasst haben und noch schnell selbst herausfinden wollen, sollten jetzt aufhören zu lesen und diesem Link folgen. In dem Rätsel ging es um das Bild und die Frage nach der Besonderheit darauf.

Hier entsteht eine neue Internetpräsenz

Hier entsteht eine neue Internetpräsenz
Ansprüche aufgrund von Urheberrechtsverletzungen bitte an DeBugger@BugBlog.de, vielen Dank.

Mir ging es um das Diskettenlaufwerk, welches heute wohl nur noch die wenigsten Laptops haben dürften. Die von mir gefundene Internetseite ist jedoch kein Einzelfall und wenn ihr das Bild in Googles Bildersuche eingebt, werdet ihr fast 1.000 weitere Seiten finden, die dieses Image-Bild noch verwenden. Vermutlich sind die Seiten alle um die selbe Zeit entstanden.

Rätsel: Hier entsteht unsere neue Internetpräsenz.

Ich war auf der Suche nach einer freien Domain für meine Sammlung und probierte gerade wieder einige Kombination aus, als ich dass folgende Bild zu sehen bekam. Instinktiv fragte ich mich, wie lange wohl schon dieser Hinweis angezeigt wird. Ich klickte die einzelnen Seiten am linken Rand durch, konnte aber nirgends ein Copyright Hinweis mit Jahreszahl finden.

Hier entsteht unsere neue Internetpräsenz.

Hier entsteht unsere neue Internetpräsenz.
Ansprüche aufgrund von Urheberrechtsverletzungen bitte an DeBugger@BugBlog.de, vielen Dank.

Als Nächstes schaute ich mir den Quellcode an, dort fiel mir auf, dass alle HTML-Elemente, wie HEAD und BODY, groß geschrieben waren. Das gab es schon zu meiner Ausbildung nicht mehr und die ist schon fast 10 Jahre her. Als ich nochmals genauer die Seite an schaute, fiel es mir plötzlich auf und ich wußte, dass die Seite wohl schon wirklich alt sein muss.

Wer sieht was ich gesehen habe? Gerne einfach in den Kommentaren vermerken!

Nächste Woche gibt es die Auflösung.

Plugin-Empfehlung: Advanced Ads

Nach der Umstellung des BugBlogs, auf ein neues Template, wollte ich nicht wieder manuell den Google AdSense Code in das Template einbauen. Vielleicht würde das Template auch meinen Ansprüchen nicht genügen und ich müßte es nach kurzer Zeit wieder austauschen. Also habe ich im Internet nach verschiedenen AdSense Plugins gesucht.

Advanced Ads

Die Suche nach “AdSense” im WordPress Plugin Verzeichnis fördert dabei nur wenig Brauchbares zu Tage, gemessen an der Anzahl Installationen und letztem Aktualisierungszeitpunkt. Eine Google Suche machte mich schließlich auf Advanced Ads aufmerksam. Dieses scheint die goldene Mitte zwischen Funktionsumfang und Usability gefunden zu haben.

Der Unterschied

Der Blog nutzt auch eine Reihe weiterer Plugins und nicht zu jedem gibt es einen Artikel. Der Grund für die Empfehlung liegt in der aktiven Betreuung des Projektes durch den Entwickler. Nach Aktivierung des Plugins stellte ich fest, dass auf manchen Seiten keine Werbung angezeigt wurde, obwohl es keine spezifischen Unterschiede gab. Ich benachrichtigte den Programmierer am Montag und erhielt am Mittwoch eine aktualisierte funktionsfähige Version.

© 2020 BugBlog.de

Theme by Anders NorénUp ↑