Wie baut man eigentlich eine Browser Extension?
In dieser Folge sprechen wir darüber, weil Robin Manuel hat
ein ganz persönliches Problem gelöst.
Im Internet findet man immer mehr Bullshit, den man
eigentlich gar nicht mehr sehen oder lesen will.
Und um diesen auszublenden, hat er eine Browser Extension
gebaut, die wir jetzt alle in unsere Chrome basierten Browser
integrieren können und damit diesen ganzen Blödsinn endlich
loswerden. Lasst uns heute auf die
technischen Themen eingehen, damit wir auch alle unsere
eigenen Browser Extension in der Zukunft einfach umsetzen können.
Und damit wie immer ganz herzlich Willkommen zu einer
neuen Folge vom to do Developer Podcast.
Folge 109 schon heute geht's um Browser Extensions bauen wie
immer mit Malte Lantin und mit mir Robin, Manuel Thiel und
malte. Du hast ja im Intro schon
angekündigt, das Internet ist ein besserer Ort für mich
geworden, weil ich weniger Bullshit lesen muss.
Ich will also in meinem Fall ging es explizit um linkedin.
Ich will auf linkedin nicht über Politik lesen, nicht über deinen
Urlaub, den du gemacht hast, nicht über dein Privatleben,
mich interessieren. Über meinen Urlaub.
Nicht auf linkedin. Du kannst mir gerne ne whatsapp
Nachricht schreiben, mich interessieren seine
Zertifizierungen nicht, mich interessiert nicht ob du 212
oder 15 Jahre bei deiner Firma bist.
Mich interessiert auch dieses ganze I am Thrill to announce
nicht. Und das interessiert mich schon
ganz lange nicht und ich habe mit dem Problem schon irgendwie
ganz lange ja im Kopf rumgesponnen und habe eine
Browser Extension gebaut, die mir zumindest diesen ganzen
Bullshit aus linkedin rausfiltert und darüber sprechen
wir heute ein bisschen, bevor es losgeht.
Aber wie immer ein fettes Dankeschön an euch, die ihr
zuhört und ganz besonders ein dickes Dankeschön an Filipe
Filipe hat uns nämlich 10 Kaffee ausgegeben.
In der letzten Folge vielen Lieben Dank.
Wahrscheinlich weil wir nicht über KI gesprochen haben.
Wow, herzlichen Dank. Ja, tatsächlich haben wir nach
der letzten Folge, wo wir uns ja mit dem Thema Anti Patterns
beschäftigt haben. An der ein oder anderen Stelle
Feedback bekommen, auf youtube auf Spotify, wo ihr gesagt habt,
cool, dass ihr auch mal über andere Themen als KI sprecht,
auch wenn wir es nicht ganz vermeiden konnten, hier und da
zumindest das Wort Ki fallen zu lassen.
Aber ich glaube, da haben wir auch einen Nerv getroffen.
Die Folge kam sehr gut an und das Schöne ist, wir können heute
direkt wieder über ein sehr praktisches Thema sprechen, was
glaube ich für ganz viele von euch relevant.
Ist oder relevant werden könnte nicht, weil ihr genau das
gleiche Problem wie Robert Manuel lösen wollt, sondern weil
glaube ich viele von uns jeden Tag Browser Extensions
verwenden, aber die wenigsten von uns selber sich da mal damit
beschäftigt haben. Was bedeutet es eigentlich so
eine Extension zu bauen, was muss ich dafür wissen, wie ist
der Ganze? Technologie Stack, den ich dafür
beherrschen muss und wie wir heute im Laufe der Folge dann
auch sehen werden, ist es gar nicht so kompliziert, also
zumindest viel einfacher, als ich mir das im Vorfeld
vorgestellt hatte und von daher freue ich mich, dass wir konkret
das Beispiel Deiner Browser Extension nutzen können und du
uns mal ein bisschen durchführst, welche Technologien
du da eingesetzt hast. Wie du diese Browser Extension
umgesetzt hast. Du hast sie mittlerweile ja
auch. Publiziert.
Das heißt, wir können auch in den shownotes Link darauf geben,
wer diese Browser extension dann selber mal ausprobieren möchte.
Ich habe sie auch schon installiert und habe den seitdem
einen wunderbar gefilterten Linkedin feed und zusätzlich zu
den Themen, die du gerade erwähnt hast, diesen ganzen
persönlichen Updates, weil linkedin ist ja für viele
irgendwie zum zum neuen Facebook irgendwie geworden, kann man
natürlich auch mit deiner Extension diese ganzen
politischen Themen rausfiltern, weil vielleicht möchte man
eigentlich nur sich zu. Den fachlichen Themen seiner
Berufswelt austauschen und eigentlich gar nicht wissen, wer
sich wie politisch positioniert. Gerade vor den ganzen
politischen Themen, die im Moment so aktiv aktiv diskutiert
werden, im Netz rund um Amerika, Wahlen in Europa etc.
Kann man alles loswerden mit deiner Extension und von daher
freue ich mich, dass wir jetzt mal tiefer reingehen.
Erzähl mal, wie heißt deine Extension, was tut sie konkret,
also wie funktioniert sie? Und was kann, wie kann ich Sie
installieren? Und dann gehen wir ein bisschen
in die Technologie. Ja, gerne.
Es war auch wichtig, das ist ja keine, keine Werbefolge für
meine, für meine Browser extension sein, aber wir wollten
jetzt irgendwie als auf als Aufreißer nehmen und so ein
bisschen die technischen Implementierungsdetails aus
developer Perspektive natürlich anzuschauen, aber ich glaube
dafür hilft es trotzdem einmal ganz kurz dieses Bild zu malen,
was was, was, was die Extension kann.
Sie heißt make linkedin great Again, angelehnt natürlich an
Make America great again. Wer dieses ganze Donald Trump
Ding irgendwie mit losgetreten wurde und hat die Motivation,
wie malte gerade schon gesagt hat, ist also ich, ich
persönlich, ich mag linkedin total gerne, das ist mein Nummer
1 Social network, ich bin super super gerne auf linkedin, ich
war bis vor einem halben Jahr noch viel lieber auf linkedin
und irgendwie. Ist es ja auch irgendwie nicht
mehr zu so einem reinen Business Ort geworden.
Ich hab es, ich liebe das da über über Business, über
Technik, über irgendwelche Innovationen, über News zu
lesen, aber diese ganzen anderen Sachen nicht.
Also ich möchte da einfach keine politischen Inhalte haben und
das liegt nicht dran, dass ich kein politischer Mensch bin.
Ich glaube, wenn ich glaube, in den Vorbesprechungen, die malte
und ich für jede Podcast Folge machen, sprechen wir zum
Beispiel wahnsinnig viel. Über politische Gegebenheiten
und Entwicklungen, aber eben im Privaten.
Und ich glaub wir gerade malte und ich glaub wir sind beide
sehr sehr sehr informiert und auch von dir gerade malte weiß
ich bis auch politisch sehr involviert, aber ich will mir
eben aussuchen wo und wann ich news über das Weltgeschehen zu
mir nehme und vor allem auch aus welcher Quelle und das kann ich
eben nicht, wenn ich Linkedin aufmache und mich eigentlich
jedes Mal. Irgendwie die Visage von Elon
Musk Anlacht oder ich irgendwas über irgend über das Trump da
vorne in der linken Ecke Gefurzt hat, mir durchlesen muss oder
was Putin gerade ist oder was in der, was in der was in der
Ukraine passiert oder was was in Israel abgeht, das interessiert
mich zwar alles irgendwie, aber nicht in dem Moment, wo ich
linkedin aufmache, da will ich über über Nerd Kram, über Stuff,
über über Business irgendwie lesen, und da linkedin selber
nicht die Möglichkeit hast du das zu filtern, hab ich mir
überlegt. Da linkedin ja nur eine Webseite
ist und ja nur html ausspielt, warum brauche ich nicht einfach
eine Browser extension, die sich jeden Post anschaut und wenn
bestimmte Schlüsselwörter, die man selber definieren kann, in
einfach einer langen Liste an Wörtern, wenn ein Post
irgendeins dieser Wörter enthält, dann wird er einfach
ausgeblendet, dann wird er einfach aus dem Dom entfernt
oder in meinem Fall kann man sich quasi so ausführen, ob da
rausgeschmissen oder einfach so quasi.
Also halb durchsichtig gemacht wird und man den Texten nicht
mehr lesen kann, es sei denn, man klickt noch mal irgendwie
drauf. Auf so einen Button und kann
sich dadurch die Timeline so ein bisschen wieder selber
kuratieren. Und ich finde, das ist
eigentlich ein ganz cooler Ansatz, weil es sind ja am Ende
lösbare Probleme, Inhalte im Internet im eigenen Browser zu
editieren. Man muss sich letzten Endes nur
den Dom Tree, die Struktur der html Seite am Ende angucken und
kann diese modifizieren, ich glaube.
Viele von uns oder die meisten von uns diesen Podcast hören
oder sich mit Technologie auseinandersetzen, haben auch
schon mit den Developer Tools im Browser gearbeitet, wo man sich
natürlich auch nicht nur die Seitenstruktur anschauen kann,
sondern diese auch live editieren kann und sehen kann.
Okay wie verändert sich die Seite und da liegt es ja nur
nahe, diese ganzen Veränderungen, die man dort als
Developer testen oder manuell durchführen kann, auch
automatisiert durchzuführen, wie du das gemacht hast mit einer.
Browser Extension und da kommen wir dann schon relativ nah an
die Technologie, weil was macht letzten Endes die Browser
Extension? Sie liest Inhalte aus der
Webseite, die gerade angezeigt wird, verändert den.
Dom tree fügt HTML Elemente hinzu, entfernt sie, editiert
sie und kann dementsprechend die Darstellung der Webseite
verändern und Informationen aus der Webseite bearbeiten und
natürlich auch auslesen. Aber damit haben natürlich
Browser Extensions auch relativ viele Zugriffsrechte, in der
Regel laufen sie ja dauerhaft in meinem Browser und können
dementsprechend auch. In Anführungsstrichen sehen, was
ich gerade sehe, also die haben Zugriff auf die ganzen
Webseiten, auf denen ich surfe und können dann diese Webseite
entsprechend manipulieren oder verändern oder zumindest lesen.
In deinem Fall reden wir jetzt über eine Browser Extension für
Chrome basierte Browser, also eine spezielle eine Familie von
Browsern, es sind ja mittlerweile mehr Browser als
Google Chrome, die die Chrome Engine verwenden.
Und dementsprechend, wenn ich das richtig verstanden habe,
funktioniert deine Extension, die du jetzt geschrieben hast,
auch in allen diesen Browsern und die Art und Weise, wie man
für diese Browser entwickelt, ist auch immer die gleiche.
Genau, also ich habe deswegen sie für Chrome geschrieben, weil
ich selber den Arc Browser benutze.
Der ist Chromium basiert, also nutzt dieses diese diese Chrome
Engine unten drunter. Und das der große Vorteil ist,
dass dass sie dadurch halt auch automatisch für Microsoft Edge,
für Chrome selber, für Brave, für Vivaldi, für all diese
anderen Browser, die eben Chrome in basiert sind, funktioniert.
Das heißt, stand heute, Wenn dieser Podcast erscheint, gibt
es die Extension auch tatsächlich nur für diese
Chromium basierten Browser, also für Chrome, Edge, Arc, wir reden
am Ende mal mal drüber, was so die nächsten Steps sind, denn es
ist gar nicht so wahnsinnig kompliziert, die jetzt zumindest
auch auf den Safari oder in den Firefox zu bringen.
Das sind dann aber zuerst mal die nächsten Schritte, stand
heute. Und dann pack den Link auf, wenn
das interessiert gerne mal in die in die Show Notes in der
Folge rein, gibst sie eben für alles was irgendwie auf Chrome
Chromium basiert. Dann lasst uns mal einsteigen
mit dem Technology Stack und so wie ich das in deiner
Kurzzusammenfassung hier verstanden habe, hast du deine
Extension auf Basis von Webtechnologien gebaut, sprich
Java, script, HTML und. Ist das der einzige Weg?
Gibt es noch andere Wege, solche Chromium Extensions zu bauen und
wie gehe ich dann vor? Ja, ich weiß gar nicht, ob es
wirklich der Allereinzige Weg geht.
Ist es aber auf jeden Fall der mit Abstand populärste Weg und
der wahrscheinlich auch sinnvollste Weg das, weil das
Web besteht ja einfach nur mal am Ende des Tages aus HTML und
Java Script und es kommen gerade auch noch so ein paar andere
Technologien hier und da auf. Aber gerade wenn ich die
Webseite, die ich gerade sehe, irgendwie bearbeiten, editieren
möchte, dann habe ich ja eh HTML und Java Script vorliegen.
Also genau wie du gesagt hast, wenn ich einfach mal die
Developer Tools im Browser aufmache, das was ich da sehe,
das will ich ja modifizieren deswegen ich habe jetzt auch
erst mal kein Tutorial gefunden was das mit irgendwas anderem
macht außer mit Java Script und HTML, das sind beides
Technologien die ich halbwegs gut beherrsche, von da war war
mir das auch recht. Und ich muss dazu sagen, N
Großteil von diesem Skuff Holding, also von diesem ersten
Wurf hat ohnehin ne KI geschrieben, wie kann das anders
sein heutzutage und das war tatsächlich auch der Grund, also
die Idee für diese Extension, die geistert mir schon n paar
Jahre im Kopf rum, ich bin nur irgendwie nie so richtig dazu
gekommen, weil ich einfach nicht wusste wie man ne Browser
extension baut und halt auch irgendwie das wie n großer Berg
Arbeit aussah, weißt ja wie das ist wenn man irgendwie n neues
Framework oder irgendwas lernen muss, das Macht das selten in
einem Tag gemacht und jetzt wo diese ganzen KI Tools soweit
sind. Habe ich mir da auch sehr viel
Hilfe geholt und muss sagen, ich bin dadurch auch wahnsinnig
schnell gewesen. Und wer die vorletzte Folge
glaube ich gehört hat, wo wir KI Agenten miteinander verglichen
haben, so Developer Agenten, da war 1 dieser Projekte habe ich
ja auch gesagt, auch ein Projekt wo ich mal in Zukunft drüber
rede und das war genau diese Browser extension wo ich eben
versucht habe okay wie gut sind die denn mir da einen Start zu
geben, das heißt ich habe mir ein Tutorial geschnappt, es gibt
von Chrome ein offizielles Tutorial wie man Browser
Extensions baut. Und alle, alle KI Tools
verwendet habe, wussten aber auch wie das geht und konnten
mich da gut unterstützen. Das heißt, du hast dir dann
grundsätzlich die Struktur aus dem Tutorial gezogen oder hast
du die wirklich durch das KI Tool vorschlagen lassen?
Nee, genau. Also ich habe mir die Struktur
aus diesem Tutorial gezogen, die ist auch bei Browser Extensions
relativ simpel, also es ist überraschend unkompliziert so
eine Browser Extension zu bauen. Ich kann ja mal kurz durchgehen,
eigentlich habe ich nur 4 Dateien, also ich habe.
Ich habe erstmal eine Datei, die heißt die mein Fall heißt die
Content Punkt js das ist das Java Script was du in das Java
Script einer bestehenden Webseite die jetzt gerade offen
ist injizieren kannst. Das heißt du kannst es gibt ja
eh ganz viele Java scrip Dateien und eigentlich alles was die
Browser Extension macht ist im Hintergrund in den Header noch
eine weite Java Script Datei reinzuhängen.
Das heißt, das heißt, die Methoden da drin sind dann auch
nachladen der Seite sofort verfügbar.
Richtig. Genau.
Und da kannst du dann halt sagen, okay, das ist jetzt
einfach mein zusätzliches Java Script und da habe ich zum
Beispiel eigentlich in meinem Fall von dieser Filter Extension
jetzt einfach nur gesagt, Pass auf, du registrierst dich auf 2
Eventhändler nämlich einmal auf den Eventhändler, es wurde
Gescrollt und dann auf den Eventhändler die Seite ist
geladen und führst dann deine Filterlogik aus und die
Filterlogik heißt einfach, man kann ja mit Java Script auf den
Jom zugreifen, also auf alle html Elemente und.
Und habe mir dann vorher einmal manuell per Hand in den
Developer Tools angeschaut, welchen Klassennamen tragen denn
Posts in der Timeline von linkedin?
Das heißt, ich habe wusste, wie der Klassenname ist und irgendwo
da drin vergraben gibt es dann verschiedene Stellen in den Text
auftauchen kann und das habe ich aber schon gar nicht selber
geschrieben, sondern einfach hier der kopal KI im Chat
gesagt, Pass auf ich. Such mir mal den Content von
allen Sub Klassen aus der Klasse mit diesem Klassennamen raus
oder allen Sub Elementen raus und speichert das in einer
Variable namens Text und dann hat die mir quasi schon den Code
dadurch geschrieben. Wie ich jetzt genau die queery
schreibe, die mir diese diese ganzen Klassen gibt und in jedem
jede Sub Element reinguckt und wenn da Text drin steht den in
ein großes einen großen String reinschreibt und dann kann ich
eben diesen String checken, kommt da 1 der gefilterten Worte
und Forder nicht und wenn ja dann.
Dann füg ich einfach ne weitere Klasse zu meinem Post hinzu.
Ne CSS Klasse und diese CSS Klasse besagt dann eben, dass
sie entweder ausgeblendet wird oder halt entsprechend versteckt
wird. Dieser Post.
Das ist die Zweite, das ist die zweite Datei, ne.
Css Datei, die ich genauso wie meine wie meinen Content Java
Script kann ich einfach weiter weiter eine weitere CSS Datei
mit in die bestehende Webseite injizieren, die ich da gerade
sehe. Und in deinem Fall ist es ja so,
dass deine Extension mit den Inhalten der Seite interagiert,
diese verändert. Wenn ich jetzt dort bestimmte
Methoden definiere, geht das dann auch andersrum, dass dann
entsprechend die Seite mit meiner Extension interagiert,
indem sie Methoden aufruft, die dann von mir hinzugefügt wurden.
Das würde bestimmt gehen. Dadurch müsste die Seite aber
natürlich die Methoden kennen. Ich weiß jetzt auch nicht, ob
ich eine Methode überschreiben kann, die es schon in der Seite
gibt, also ich glaube, das ist schon noch mal, dass das schon
noch mal in einem eigenen Sandbox Umgebung abläuft, aber
ich kann mir vorstellen, wenn ich jetzt irgendwie notion
aufmache, dass Notion davon profitiert, wenn ich die Notion
Browser Extension auch installiert habe und die sich
dann halt irgendwie noch mal gegenseitig was zuschustern
können ich weiß ja nicht ob das nötig ist, weil wenn ich der
vollen Zugriff auf meine Seite habe, dann.
Kann ich auch die Methoden da die ich da auch direkt in den
Javasript Code von meiner Webseite einbacken?
Also fällt mir jetzt gerade kein Anwendungsfall ein, aber wenn es
einen gibt, müsste man sich das noch mal angucken.
Man muss generell aber sehr sehr streng definieren, was denn die
Browser extension alles können soll, also spätestens wenn man
sie in den Store hochlädt kommt zusammen mit der Browser
Extension, wie das bei vielen Apps irgendwie ist, so eine
Manifest Datei und da stehen Berechtigungen drin die so eine
Browser Extension hat und zwar. Darf ich also, was darf sie
sehen? Darf ich auf den aktiven Tab
zugreifen, der gerade offen ist? Darf ich auf alle Tabs
zugreifen, die gerade offen sind?
Darf ich auf den Speicher vom Browser zugreifen und auf
welchen Seiten möchte die Browser Extension überhaupt
aktiviert sein und so weiter und das muss man schon alles
mitgeben und im Chrome Store wird das auch einem Review
unterzogen, das heißt die. Geht jetzt nicht einfach.
Ich lad die um hoch und die ist online, sondern das schaut sich
jemand an und die ist auch die ersten 2 Male bei mir rejectet
worden, weil ich eben permissions angegeben habe, die
ich aber meinem Code tatsächlich nicht benutze.
Hat das zum Beispiel gesagt, Ich möchte Zugriff auf das
Kontextmenü machen, haben, dass man einfach einen Rechtsklick
machen kann und dann auch die Filter an und ausstellt.
Das Feature hat ich aber noch nicht implementiert und hat das
Chrome Team ja auch relativ klar gesagt Hey du brauchst keine
Berechtigung auf das Kontextmenü, weil du es
nirgendwo verwendest. Also die sind da schon auch
streng, was ich auch irgendwo als user Perspektive gut finde.
Dann gibt es aber noch weitere Dateien die ich brauche und zwar
ist es ja nicht nur den Code, den ich in die aktuelle Seite
injiziere, sondern jede Browser extension hat ja auch ja
meistens oben in der in der in der Adressleiste dann so ein
kleines Icon und wenn man darauf klickt öffnet sich auch noch mal
so ein kleines Fensterchen. Und das ist eigentlich auch
nichts anderes als eine Mini Webseite oder eine Mini Web App.
Das heißt, auch dafür habe ich ein bisschen HTML und Java
Script und CSS hinterlegt, in meinem Fall von meiner Extension
ist öffnet das quasi einfach so ein Menü wo man dann eben alle
Wörter eintragen kann die man gefiltert haben möchte wo man
entscheiden kann ob die Seite ob der Post ganz ausgeblendet wird
oder nur so versteckt wird und ob man noch andere Typen von
linkedin posts wie es gibt bei linkedin so celebrations das
sind ganz besondere Posts. Wo man dann die irgendwie auch
automatisch erscheinen, wenn man 10 Jahre jetzt über der gleichen
Firma war. Ob man auch diese erkennen und
ausblenden möchte, das heißt, so ein kleines Konfigurationsmenü,
das quasi auch eine Mini Mini Mini Web App und dann gibt es
noch eine dritte und letzte Art von Datei und das ist so ein
Background Script, das agiert so ein bisschen, das agiert nicht
auf der aktuellen Webseite, es agiert nicht in diesem kleinen
Fensterchen, wenn ich auf das Icon klicke, sondern das.
Handelt. Vor allem läuft das eigentlich
im Hintergrund vom Browser, das heißt, es handelt so ein
bisschen Browser, Aktionen und vor allem also ich könnte zum
Beispiel wenn ich jetzt einen Kontextmenü habe und dann Icon
anklicke, dann könnte ich dadurch reagieren und über so
einen den den Browser integrierten Message Bass eben
eventuell das Icon von meiner von meiner Browser Extension
beeinflussen, dass sich das ändert oder eine Methode in dem
Skript auflösen, dass ich ihn injiziert habe von außen.
Also das fungiert so ein bisschen als Broker zwischen den
Sachen. Das läuft also nicht im Kontext
der aktuell geöffneten Webseite, sondern eigentlich mehr im
Kontext des Browsers und kann dann noch mal so auf so
Browserfunktionen zurückgreifen und alles zusammen kommuniziert
das bei mir eigentlich nur über den Browser internen Storage.
Es gibt so eine Storage API, also dieses Chrome Punkt Storage
und das heißt wenn ich in diesem wenn ich auf das kleine Icon
drücke. Und da ein Wort ändert, dann
wird die neue Liste an gefilterten Wörtern in diese
Storage geschrieben. Und jedes Mal, wenn diese
Filterfunktion auf der Webseite aufgerufen wird, wird die Liste
aus dieser Storage rausgelesen und gesagt okay wenn jetzt wenn
ich jetzt einen Post vor mir habe, wo 1 dieser Wörter drin
vorkommt, dann wird er eben rausgefiltert und das ist
eigentlich auch schon alles. Also es war wirklich
überraschend unkompliziert. Das heißt, am Ende ist der
Browser Extension, eine kleine Web App, die.
Von Chrome entsprechend ausgeführt und gerendert wird
und die Daten persistiere ich eigentlich so wie ich es als Web
Developer mit Local Storage auch im Browser machen kann.
Über diese spezielle Storage Klasse und habe dementsprechend
alles was ich brauche um eine Webanwendung mit Persistenz
laufen zu lassen, die dann über diese Schnittstellen und die
Injection von dem Java Script in die Webseite diese Interaktionen
vornimmt. Also wenn ich das so richtig
zusammengefasst. Habe genau.
Und ich glaube, das muss man auch gar nicht überkomplizieren.
Also das fand ich irgendwie irgendwie spannend so die ersten
Tutorials, die haben das irgendwie super komplex gemacht,
da wurde dann REACT für das Frontend genommen und alles
wurde auf Type Script gebaut um irgendwie typsicherheit zu
haben, blablabla und dem bin ich natürlich am Anfang irgendwie
brav gefolgt, bis ich dann irgendwann gemerkt habe, Moment
mal, das ist ja also die meisten Chrome oder generell die meisten
Browser Extensions, das sind ja wahrscheinlich.
Wenn es ja am Ende des Tages Runtergebrochen wirklich nur n
paar Zeilen Code hier und da braucht man da wirklich jetzt so
n Framework? Brauch ich wirklich für dieses
eine Fenster was ich da Anzeige wenn ich auf meine auf dieses
Icon der Browser extension klicke brauch ich da wirklich n
Frontend Framework für React dafür und hab ich dann also
wahrscheinlich nicht und hab mich dann auch dagegen
entschieden das alles über Bord geschmissen.
Und habe jetzt wirklich ganz plain, HTML und und Java Script
ich ja wirklich einfach nur 3 textboxen Anzeige und auch die
kann man mit ein bisschen CSS so ein bisschen stylen und muss ich
da jetzt wirklich irgendwie eine eine Rendering Group und so und
irgendwelche Hooks im Hintergrund haben?
Nee, und deswegen habe ich mich dann auch immer entschieden
diese Ganzen den ganzen Kram an Bord zu schmeißen, aber jetzt
ist es wirklich bei mir ganz ganz plain HTML und Java Script
und CSS wirklich wieso ein bisschen wie früher hat es sich
angefühlt, weil es ja auch wirklich einfach ein paar
Funktionen hier und da sind so. Und ich da jetzt nicht den
großen Typen Support oder irgendwas brauchte.
Von daher habe ich mich jetzt dafür entschieden und das würde
ich auch jedem empfehlen, der man irgendwie mit dem Thema
anfängt oder vielleicht sagt jetzt auch irgendjemand von
unseren Zuhörerinnen oder Zuhörern auch boah, mir geistert
auch eigentlich so eine Idee schon lange im Kopf rum, wenn
ich gewusst hätte, dass es einfach nur so ein paar Zeilen
sind oder dass es so simpel ist, so eine Extension zu bauen,
könnte ich auch meine Lieblingswebseite irgendwie
besser machen, oder? Oder irgendwie eine coole
Funktion in meinem lieblings Browser noch mit einfügen, da
würde ich auch jedem empfehlen das irgendwie erstmal so simpel
zu starten, weil dann macht es auch am meisten Spaß und dann
kommt man auch direkt irgendwie weiter.
Und am Ende, wie gesagt, braucht man wahrscheinlich kein riesen
Framework dafür. Ja, es ist so ein bisschen der
gleiche Effekt, wie wenn man jetzt neu in die Webentwicklung
einsteigt und dann von diesen ganzen Frameworks total
überfordert ist. Erstmal, wenn man denkt,
irgendwie, wie kompliziert ist das eigentlich, Webanwendungen
zu bauen, aber dass am Ende eine Webanwendung nur HTML und Java
Script sein muss, merkt man ja auch in diesem Fall mit
einfachen Funktionalitäten und ich finde es halt immer sehr
kurios, wenn es dann auch solche.
Quasi statischen Webseiten gibt, wo es nur ein paar Unterseiten
gibt und dann wird dafür komplettes Projektprojekt
angelegt. Aber es findet gar keine
wirkliche dynamische Interaktion statt, man hat gar keine Backend
Funktionalitäten und das ist ja in deinem Fall genauso.
Du hast eigentlich nur ein U ein paar wenige Funktionen und das
lässt sich natürlich auch problemlos genauso simpel
umsetzen und ich glaube, gerade wenn man jetzt heutzutage mit
solchen KI. Systemen arbeiten kann auch als
Developer, dann ist auch das Bauen von User Interface ist
viel einfacher, weil man dann auch hingehen kann und sagen
kann, OK, ich hätte gern folgendes UI, folgende
Menüpunkte sollen da drin sein. Jetzt bitte noch was in dem
Styling ändern und dann braucht man vielleicht auch keine großen
UI Frameworks mehr, weil ich glaube das ist auch immer etwas
was einen so ein bisschen abschreckt, weil die Sachen die
man so von Hand geschrieben hat oder schreibt sehen meistens
furchtbar hässlich aus und dann hat man plötzlich irgendwelche.
Libraries mit Hunderten von CSS Klassen, die riesengroß sind und
ganz viele Ressourcen reinholen. Wo ich dann denke okay, das ist
vielleicht jetzt ein bisschen too much und jetzt kann ich
tatsächlich in natürlicher Sprache auch beschreiben, was
ich haben möchte und dann generiert mir die KI so ein
Snippet CSS, was ich brauche, damit mein kleines Menü in
meiner Browser extension dann auch entsprechend schön und
ansprechend aussieht und im Falle von.
So einer Chrome Extension möchte man vielleicht auch, dass sich
das ähnlich anfühlt von der User Experience wie Halt der Browser
selber. Ja, ist lustig, dass du sagst,
ich habe gerade noch mal den, den prompt aufgemacht, den ich
dafür geschrieben habe für die UI, weil die ist auch komplett
KI generiert und da habe ich hier geschrieben, the UI should
look minimal and professional in avisually appealing way, but
natural and native looking also die UI soll minimalistisch, aber
professionell aussehen. In einer in einer visuell
angenehmen Art und Weise, aber halt auch natürlich und nativ
für den für den Browser. Und könnt euch ja mal angucken
und mir sagen, ob das gelungen ist.
Aber wie gesagt, ich hab da gar nichts gestylt.
Das Einzige was ich geändert habe ist, ich hab den
Hintergrund genommen und den auf den gleichen Hintergrund den
linkedin verwendet gesetzt damit es sich so n bisschen nativer
oder besser integriert in linkedin irgendwie anfühlt.
Und da finde ich, ist es n völlig OK das Ergebnis
rausgekommen, ohne dass da jetzt irgendwie n tailwind oder n
bootstrap oder n shat CDN oder irgend irgend so n New I
Framework hintersteckt und wie du halt gerade richtig das ist n
paar Zeilen CSS und das hat es dann für mich auch irgendwie so
spaßig gemacht und so und so schnell gemacht das zu bauen,
weil ich bin aber am Anfang genau das Problem reingelaufen
was du geschrieben hattest. Es war halt irgendwie type
Script und es war React und da musste ich mir beim ersten Mal
ich bin nicht in dieser Welt zu Hause, ich mach das jetzt nicht
jeden Tag mit webtechnologien ich.
Macht ganz, ganz viele verschiedene Frameworks und
Probleme. Sprachen immer mal wieder, dass
ich hatte jetzt dieses Ding. OK, ich weiß noch wie ich aus
type Script Dateien dann irgendwie Java Script Dateien
mache, weil die wollte die Prom Extension am Ende haben, aber da
muss ich mich erstmal damit beschäftigen.
Wie ist denn das Setup, dass ich mir irgendwie so einen watcher
Aufsetze, der jedes Mal wenn ich die type Script Datei Speicher
automatisch dieses type script in Java Script transferiert und
in diesen Ordner dann und dann überführt den ich dem Chrome in
den Developer Tools gegeben habe?
Und irgendwann hab ich einfach das einfach.
Als ich das alles rausgeschmissen habe, hab ich
gemerkt, okay in dem Moment, wo du einfach die die Java Script
Datei speicherst updated die sich auch automatisch im Chrome,
also in meinem Fall hab ich Chrome verwendet weil Chrome hat
so Developer Tools für Extension Developer, dann kann man da halt
ne Extension reinladen indem man sie nicht aus dem Store lädt
sondern dem man einfach den Dateipfad in seinem Verzeichnis
System angibt, ist ja okay meine Extension liegt hier.
Und dann wird hier auch eben automatisch genommen.
Und wenn ich da das HTML änder und noch mal neu auf diesen auf
diesen dieses Icon von der Extension klicke, hab ich da
auch das neue HTML und musste mir halt nicht diese ganzen
Prozesse im Hintergrund bauen, die bestimmt doch alle cool und
sinnvoll sind, aber für so n kleines Projekt einfach nicht
nötig waren. Ja, und ich habe tatsächlich
deine Extension dann auch in Edge installiert und es
funktioniert genauso, auch wenn du es jetzt erstmal in Chrome
entwickelt hast. Und das macht es macht es ja
sehr sehr vielseitig. Klar, du hast jetzt noch eine
Aufgabe vor dir, dass für die anderen großen Browser, die noch
am Markt sind, auch noch umzusetzen, die ja nicht auf der
gleichen Engine basieren und einen bisschen anderen Ansatz
fahren, aber ich glaube. Da sieht man schon, wie schnell
man einfach auch zu einer Lösung kommt, weil häufig sind solche
Dinge ja auch vielleicht erstmal Probleme, die man für sich
selber löst, bevor man irgendwie ein Produkt für andere daraus
macht. Ich finde es immer ganz toll,
dass du, wenn du die Probleme für für dich löst, dass dann
immer sofort auf dem Weg machst, dass du die Sachen auch nachher
sofort oder quasi gleichzeitig in die entsprechenden Stores
stellst. Wir hatten ja auch damals über
Deine Mac App gesprochen zur Kalendersynchronisation.
Und jetzt die Browser Extension und ich glaube weiß ich nicht.
Ich glaube was dich reizt ist auf einmal den kompletten
Prozess zu durchlaufen, nicht nur die Entwicklung, sondern
auch zu schauen, wie kriege ich das eigentlich in den Store und
wie kann man das natürlich auch unter die Leute bringen, für wie
viele Leute es nützlich ist. Wirst du uns dann wahrscheinlich
in ein paar Wochen sagen können, nachdem du dann die Statistiken
aus dem Extension Store von Chrome bekommen hast.
Ja, also ich muss natürlich sagen, ich freu mich, aber auch
natürlich wie n wie n kleines Kind, wenn irgendjemand zu mir
kommt und sagt, Ey, ich hab hier dann ne Extension, die löst
genau das Problem was ich auch hatte mega cool.
Ich freu mich natürlich auch wahnsinnig, gib mir auch
irgendwie was, aber genauso wie mit der Kalender Sync App war
das für mich einfach immer so n Ding das ist n persönliches
Problem was ich habe ich kann mir fast nicht vorstellen, dass
ich der einzige Mensch bin, aber ich hab es halt für mich gelöst.
Aber wie du richtig sagst, mir macht es dann da auch irgendwie
Spaß das in die in die Stores zu stellen und.
Das macht man. Ich glaube, das ist gar nicht
ganz normal. Das macht man natürlich erstmal
ne, ich sitze hier an einem Mac, deswegen habe ich diese Kalender
Sync App für Mac OS gebaut. Ich nutze den Chrome basierten
Browser, deswegen habe ich diese Extension für einen für Chrome
basierte Browser gebaut und ich habe überlegen, ich glaube
zumindest von dieser Extension werde ich auch den Code Open
sourcen dann wenn sich da irgendwie mal berufen fühlt den
umzubauen oder irgendwie für einen anderen Browser noch zu
verwenden, dann viel Free. Ich habe auch schon gesehen,
also erstmal ich glaube so die Browserkompatibilität ist.
Erstmal glaub ich recht ähnlich, weil das Web funktioniert ja
jedem Browser gleich. Also die Tatsache, dass man da
so n Java Script, Java Script Snippet injekten kann, wird sich
ja nicht großartig ändern. Ich nutze n paar Chrome eigene
Libraries also also ich hab keine Pakete oder sowas
installiert, aber ich nutze halt Chrome Punkt Storage um den
internen Speicher von Chrome basierten Browsern anzusprechen,
weil ich da ja diese Liste von filterwörtern reinlege.
Und ich habe mich jetzt schon so ein bisschen erkundigt.
Also a ne, du hast ja gesagt, du hast es in Edge installiert, da
scheint diese Chrome Punkt API eben auch zu funktionieren,
wahrscheinlich weil sie Chromium eben basiert ist und daher
kommt. Ich habe mich jetzt mal
angefangen zu informieren, wie würde ich das denn in Safari
umwandeln und da gibt es ein offizielles converting Tool von
Apple die sie nennen es beziehungsweise dass man eine
Web Extension nach Safari konvertieren kann, also sie
nehmen das Wort Chrome nicht in den Mund.
Aber man kannden.de facto eigentlich die Chrome Extension
geben und die bauen dir daraus NX Code Projekt.
Wer jetzt gar keine Ahnung hat wovon wir reden X Code ist die
Entwicklungsumgebung von Apple und auf Safari installiert man
Browser Extension ganz komisch über den App Store, das heißt
ich muss über den normalen Mac OS App Store gehen und kann mir
dann da so wie ich auch Apps installieren würde Safari
Extensions auch installieren, heißt aber auch, dass sie
natürlich dem gleichen Review Prozess folgen und so weiter.
Aber, und auch da scheine ich Chrome Punkt Storage weiter
verwenden zu können. Jetzt basiert der Safari Browser
nicht auf Chromium, aber die werden dann irgendwie eine
Kompatibilitätsebene eingezogen haben, weil die natürlich auch
wollen, dass möglichst viele Extensions konvertiert werden.
Also da gibt es ein offizielles Tool von Apple.
Ich habe jetzt noch nicht ausprobiert, aber man kann
weiterhin Chrome Punkt Storage Extensions irgendwie nehmen,
also es scheint jetzt auch kein Hexenwerk zu sein für Firefox
oder Opera oder andere Browser habe ich mir jetzt noch nicht
angeschaut. Aber wenn das für Safari
wirklich so einfach ist, wie es jetzt gerade aussieht, dann
werde ich es auch zumindest für den Safari veröffentlichen.
Einfach weil ich habe ja auch ein Apple Developer Account noch
von dieser Local Kalender Sync App und werde das dann
vielleicht auch noch irgendwie nutzen.
Aber erstmal wie gesagt fast ein Problem was ich für mich gelöst
habe und das in den Store hochzuladen bei Chrome war jetzt
gar nicht so schwierig, dann macht man einfach eine zip Datei
aus dem ganzen Kram, also aus allen seinen Files plus dem
Manifest plus ein paar Icons und.
Und kann die. Es gibt so ein Chrome Developer
Portal, da meldet man sich mit seinem Google Account an und
lädt das dann hoch, dann dauert das ein paar Tage bis der Review
durch ist und dann erscheint die offizielle im Store und genau
wenn ihr dir jetzt zuhört aussagt bei meiner linkedin
timeline ist voll mit Müll, dann ladet ihr euch gerne runter und
lasst mich gerne wissen ob sie für euch funktioniert und wie
sie für euch funktioniert. Ich habe erstes Feedback schon
bekommen. Jemand hat gesagt, es
funktioniert nicht, wenn man Post repostet.
Also dann scheine ich da diesen Text irgendwie nicht zu
berücksichtigen, sondern nur den Text vom Original Post auch hier
witzigerweise, ich meine diese fast schon müde das zu sagen,
aber auch da hat mir KI wieder geholfen.
Ich habe kurz die Stelle rausgesucht, wo ich den Text von
einem Post Auslese und der KI einfach einfach nur diese Zeile
markiert, der ki gesagt ey. Hier sind mehrere div.
Blöcke in der Klasse Content in diesem Post, die es geben kann,
berücksichtige bitte alle und Zack von Bug Report bis zum fix
60 Sekunden 120 Sekunden vielleicht und das war schon
irgendwie auch crazy Moment also ich weiß es ist ja alles nicht
neu, aber ich habe jedes Mal noch so ein Bruch so ein Brain
explode Moment wenn ich das nicht selber schreiben muss,
dass ich nicht, dass ich einfach sagen muss, es kann sein, dass
das hier mehrfach auftritt, weil es ein Verschachtelter Post ist.
Schreibt mir den Code kurz selber ausprobiert.
Jetzt nicht einfach übernommen, kurz ausprobiert, irgendwie
repost in Post genommen, ah okay funktioniert jetzt auch da
wieder getippt, Update hochgeladen, version 11 ich
konnte dem es war in dem Fall ein Arbeitskollege von mir der
der sich da bei mir gemeldet hatte am Tag drauf oder 2 Tage
später hat sagen Hey guck mal ist ein Update da es hat nur 2
Tage gebraucht weil er eben ein Review dazwischen ist.
Aber schon immer wieder crazy. Ja, was ich in der Diskussion
wieder super spannend finde, ist, dass man noch mal drauf
gestoßen wird, wie toll eigentlich webtechnologien sind,
weil es wirklich n einheitlicher Standard auch über verschiedene
Hersteller hinweg ist. Und du sagst gerade die Apple
spricht jetzt nicht über Chrome Extensions, sondern irgendwie
Web Extensions, weil man da den Wettbewerber nicht erwähnen
möchte, aber am Ende. Sieht man, dass es die gleichen
Technologien dahinter sind, sind alles webtechnologien, ist alles
Java Script und vielleicht an der Stelle auch noch mal die die
User Experience für für Microsoft Edge ist auch
spannend, wenn du auf den Chromewebstore gehst, dann sagt
dir Chrome sofort, wenn du mit Edge da drauf gehst.
Hey, willst du nicht Chrome installieren, dann sagst du nee
möchte ich nicht. Dann gehst du auf die Extension
und dann geht von Edge oben so eine Infoleiste auf und sagt
Hey, willst du diese vielleicht in Edge installieren, weil wenn
du halt in dem Chromewebstore gibt es natürlich nur den Button
Installing Chrome und dann weist dich halt Edge darauf hin, dass
du ja diese Extension für Chrome direkt in deinen Edge
installieren kannst. Und am Ende sieht man da aber
wie eine Kompatibilitäts. Welt dort da auch entstanden ist
und nicht wieder jeder Hersteller irgendwie für Browser
Extensions seine eigenen proprietären Technologien
einsetzt, sondern dass mittlerweile wirklich sehr
standardisiert ist und man da auch mit sehr wenig Aufwand sehr
viele Menschen erreichen kann und von daher durchaus auch für
mich eine spannende Erkenntnis, dass es mittlerweile wirklich
auch einfach ist, solche Extensions zu bauen und von
daher finde ich den Einblick, den du uns gegeben hast super
wertvoll. Ja, total.
Also ich glaube, ich glaube, ich habe jetzt gerade entschieden,
ich werde, ich werde es einfach open sourcen.
Das heißt, wer sich, wer sich jetzt irgendwie, weil wir wollen
ja auch irgendwie ein bisschen was vermitteln in dieser Folge,
wer sich den Code anschauen möchte, ich werde den verlinken
unten ist dann einfach ein Gitter prepositorial und da
sieht man schon, dass es wirklich ein paar Zeilen sind,
es kann sein, dass ich mich in der Zwischenzeit wieder
entschließe, doch type Script zu verwenden, weil ich einfach ein
großer Fan davon bin, so ein bisschen typsicher zu haben,
aber alles andere wird man sehen können, dass es wirklich auf
diesen, auf diese 4 Dateien nur hinausläuft.
Das heißt ja, wer Lust hat, sich die Extension anzugucken oder
vielleicht sogar zu erweitern oder neues Feature hinzuzufügen
oder die auf den, wenn ihr jetzt sagt, Ich bin absoluter Firefox
Fan, ich würde das für dich in Firefox umwandeln bitte ich
nutze kein Firefox in meinem Alltag verlinke ich zusammen mit
der Browser Extension selber auch unten in der Beschreibung
von dieser Folge. Wunderbar, wenn ihr jetzt auch
die Motivation habt, eine eigene Extension zu bauen oder zu Robin
Munnels Extension zu contributen, dann lasst es uns
wissen. Schaut euch das Repo an, gebt
uns auch gerne Feedback zu dieser Folge, vielleicht fällt
euch auch ein spannender Use Case aus eurem Alltag ein, wie
ihr euer und vielleicht auch unser Leben einfacher, schöner,
besser machen könnt. Mit einer Browser Extension,
wenn ihr selber mal eine geschrieben habt.
Lasst es uns auch gerne per E Mail wissen.
Die Kontaktdaten findet ihr wie immer unter dieser Folge.
Wir hoffen euch hat diese Folge gefallen und ihr seid auch in 2
Wochen wieder mit dabei. Der to do Developer Podcast
erscheint alle 2 Wochen auf allen gängigen Podcast
Plattformen und wenn es euch was gebracht hat, lasst uns gerne
eine positive Bewertung da wir freuen uns immer über Sterne
oder auch ein Review auf den Podcast Plattformen.
Eurer Wahl und bis dahin freuen wir uns darüber, dass ihr uns
treu bleibt und wünschen euch ganz viel Erfolg bei der
Entwicklung der ersten eigenen Browser Extension.
Wenn euch die Folge gefallen hat, dann macht's.
Wie viel lieb seid so cool, wie viel lieb und gebt uns auch
gerne einen Kaffee aus. Da gibt es einen Link auch unten
in den Shownotes zu by Meal Coffee, da freuen wir uns auch
über diebisch darüber, wenn wenn wir einen Kaffee von euch von
der Community ausgegeben bekommen, den nutzen wir auch
immer und wenn malte und ich uns persönlich sehen, dann.
Gehen wir davon auch tatsächlich einen Kaffee trinken deswegen,
da freuen wir uns immer sehr und ansonsten freuen wir uns
natürlich, wenn ihr in 2 Wochen wieder dabei seid.
Bis dahin schreibt viel Code, zum Beispiel für eine Browser
Extension, habt eine gute Zeit, macht's gut und bis ganz bald.
Bis dann.