1 00:00:00,320 --> 00:00:03,040 Wie baut man eigentlich eine Browser Extension? 2 00:00:03,600 --> 00:00:07,040 In dieser Folge sprechen wir darüber, weil Robin Manuel hat 3 00:00:07,040 --> 00:00:09,440 ein ganz persönliches Problem gelöst. 4 00:00:09,600 --> 00:00:11,840 Im Internet findet man immer mehr Bullshit, den man 5 00:00:11,840 --> 00:00:14,080 eigentlich gar nicht mehr sehen oder lesen will. 6 00:00:14,560 --> 00:00:18,320 Und um diesen auszublenden, hat er eine Browser Extension 7 00:00:18,320 --> 00:00:22,560 gebaut, die wir jetzt alle in unsere Chrome basierten Browser 8 00:00:22,560 --> 00:00:26,000 integrieren können und damit diesen ganzen Blödsinn endlich 9 00:00:26,000 --> 00:00:28,080 loswerden. Lasst uns heute auf die 10 00:00:28,080 --> 00:00:30,640 technischen Themen eingehen, damit wir auch alle unsere 11 00:00:30,640 --> 00:00:33,840 eigenen Browser Extension in der Zukunft einfach umsetzen können. 12 00:00:39,280 --> 00:00:42,640 Und damit wie immer ganz herzlich Willkommen zu einer 13 00:00:42,640 --> 00:00:45,520 neuen Folge vom to do Developer Podcast. 14 00:00:45,520 --> 00:00:50,000 Folge 109 schon heute geht's um Browser Extensions bauen wie 15 00:00:50,000 --> 00:00:54,720 immer mit Malte Lantin und mit mir Robin, Manuel Thiel und 16 00:00:54,880 --> 00:00:55,920 malte. Du hast ja im Intro schon 17 00:00:55,920 --> 00:00:58,880 angekündigt, das Internet ist ein besserer Ort für mich 18 00:00:58,880 --> 00:01:02,480 geworden, weil ich weniger Bullshit lesen muss. 19 00:01:02,880 --> 00:01:06,240 Ich will also in meinem Fall ging es explizit um linkedin. 20 00:01:06,240 --> 00:01:10,640 Ich will auf linkedin nicht über Politik lesen, nicht über deinen 21 00:01:10,640 --> 00:01:13,400 Urlaub, den du gemacht hast, nicht über dein Privatleben, 22 00:01:13,400 --> 00:01:15,680 mich interessieren. Über meinen Urlaub. 23 00:01:16,000 --> 00:01:18,000 Nicht auf linkedin. Du kannst mir gerne ne whatsapp 24 00:01:18,000 --> 00:01:20,160 Nachricht schreiben, mich interessieren seine 25 00:01:20,160 --> 00:01:24,080 Zertifizierungen nicht, mich interessiert nicht ob du 212 26 00:01:24,080 --> 00:01:25,800 oder 15 Jahre bei deiner Firma bist. 27 00:01:25,800 --> 00:01:28,960 Mich interessiert auch dieses ganze I am Thrill to announce 28 00:01:28,960 --> 00:01:31,560 nicht. Und das interessiert mich schon 29 00:01:31,560 --> 00:01:34,000 ganz lange nicht und ich habe mit dem Problem schon irgendwie 30 00:01:34,000 --> 00:01:39,360 ganz lange ja im Kopf rumgesponnen und habe eine 31 00:01:39,360 --> 00:01:41,840 Browser Extension gebaut, die mir zumindest diesen ganzen 32 00:01:41,840 --> 00:01:44,160 Bullshit aus linkedin rausfiltert und darüber sprechen 33 00:01:44,160 --> 00:01:46,880 wir heute ein bisschen, bevor es losgeht. 34 00:01:47,280 --> 00:01:51,360 Aber wie immer ein fettes Dankeschön an euch, die ihr 35 00:01:51,360 --> 00:01:55,760 zuhört und ganz besonders ein dickes Dankeschön an Filipe 36 00:01:55,760 --> 00:01:58,560 Filipe hat uns nämlich 10 Kaffee ausgegeben. 37 00:01:58,960 --> 00:02:01,600 In der letzten Folge vielen Lieben Dank. 38 00:02:01,680 --> 00:02:04,000 Wahrscheinlich weil wir nicht über KI gesprochen haben. 39 00:02:05,040 --> 00:02:08,400 Wow, herzlichen Dank. Ja, tatsächlich haben wir nach 40 00:02:08,400 --> 00:02:11,920 der letzten Folge, wo wir uns ja mit dem Thema Anti Patterns 41 00:02:11,920 --> 00:02:14,640 beschäftigt haben. An der ein oder anderen Stelle 42 00:02:14,640 --> 00:02:19,240 Feedback bekommen, auf youtube auf Spotify, wo ihr gesagt habt, 43 00:02:19,240 --> 00:02:23,840 cool, dass ihr auch mal über andere Themen als KI sprecht, 44 00:02:23,840 --> 00:02:26,720 auch wenn wir es nicht ganz vermeiden konnten, hier und da 45 00:02:27,440 --> 00:02:29,840 zumindest das Wort Ki fallen zu lassen. 46 00:02:30,160 --> 00:02:32,720 Aber ich glaube, da haben wir auch einen Nerv getroffen. 47 00:02:32,720 --> 00:02:37,120 Die Folge kam sehr gut an und das Schöne ist, wir können heute 48 00:02:37,120 --> 00:02:40,320 direkt wieder über ein sehr praktisches Thema sprechen, was 49 00:02:40,320 --> 00:02:43,120 glaube ich für ganz viele von euch relevant. 50 00:02:43,520 --> 00:02:47,280 Ist oder relevant werden könnte nicht, weil ihr genau das 51 00:02:47,280 --> 00:02:51,280 gleiche Problem wie Robert Manuel lösen wollt, sondern weil 52 00:02:51,280 --> 00:02:54,160 glaube ich viele von uns jeden Tag Browser Extensions 53 00:02:54,160 --> 00:02:58,240 verwenden, aber die wenigsten von uns selber sich da mal damit 54 00:02:58,240 --> 00:03:00,360 beschäftigt haben. Was bedeutet es eigentlich so 55 00:03:00,360 --> 00:03:03,440 eine Extension zu bauen, was muss ich dafür wissen, wie ist 56 00:03:03,440 --> 00:03:06,800 der Ganze? Technologie Stack, den ich dafür 57 00:03:06,800 --> 00:03:09,760 beherrschen muss und wie wir heute im Laufe der Folge dann 58 00:03:09,760 --> 00:03:12,200 auch sehen werden, ist es gar nicht so kompliziert, also 59 00:03:12,200 --> 00:03:15,200 zumindest viel einfacher, als ich mir das im Vorfeld 60 00:03:15,200 --> 00:03:19,280 vorgestellt hatte und von daher freue ich mich, dass wir konkret 61 00:03:19,280 --> 00:03:22,680 das Beispiel Deiner Browser Extension nutzen können und du 62 00:03:22,680 --> 00:03:25,120 uns mal ein bisschen durchführst, welche Technologien 63 00:03:25,120 --> 00:03:27,280 du da eingesetzt hast. Wie du diese Browser Extension 64 00:03:27,280 --> 00:03:28,840 umgesetzt hast. Du hast sie mittlerweile ja 65 00:03:28,840 --> 00:03:30,080 auch. Publiziert. 66 00:03:30,080 --> 00:03:33,200 Das heißt, wir können auch in den shownotes Link darauf geben, 67 00:03:33,200 --> 00:03:35,920 wer diese Browser extension dann selber mal ausprobieren möchte. 68 00:03:35,920 --> 00:03:39,120 Ich habe sie auch schon installiert und habe den seitdem 69 00:03:39,120 --> 00:03:42,960 einen wunderbar gefilterten Linkedin feed und zusätzlich zu 70 00:03:42,960 --> 00:03:45,200 den Themen, die du gerade erwähnt hast, diesen ganzen 71 00:03:45,200 --> 00:03:47,840 persönlichen Updates, weil linkedin ist ja für viele 72 00:03:47,840 --> 00:03:51,880 irgendwie zum zum neuen Facebook irgendwie geworden, kann man 73 00:03:51,880 --> 00:03:54,560 natürlich auch mit deiner Extension diese ganzen 74 00:03:54,560 --> 00:03:58,080 politischen Themen rausfiltern, weil vielleicht möchte man 75 00:03:58,080 --> 00:04:00,800 eigentlich nur sich zu. Den fachlichen Themen seiner 76 00:04:00,800 --> 00:04:03,920 Berufswelt austauschen und eigentlich gar nicht wissen, wer 77 00:04:03,920 --> 00:04:07,120 sich wie politisch positioniert. Gerade vor den ganzen 78 00:04:07,360 --> 00:04:11,200 politischen Themen, die im Moment so aktiv aktiv diskutiert 79 00:04:11,200 --> 00:04:16,160 werden, im Netz rund um Amerika, Wahlen in Europa etc. 80 00:04:16,800 --> 00:04:19,600 Kann man alles loswerden mit deiner Extension und von daher 81 00:04:19,600 --> 00:04:23,120 freue ich mich, dass wir jetzt mal tiefer reingehen. 82 00:04:23,360 --> 00:04:27,280 Erzähl mal, wie heißt deine Extension, was tut sie konkret, 83 00:04:27,280 --> 00:04:31,640 also wie funktioniert sie? Und was kann, wie kann ich Sie 84 00:04:31,640 --> 00:04:33,400 installieren? Und dann gehen wir ein bisschen 85 00:04:33,400 --> 00:04:35,280 in die Technologie. Ja, gerne. 86 00:04:35,680 --> 00:04:38,000 Es war auch wichtig, das ist ja keine, keine Werbefolge für 87 00:04:38,000 --> 00:04:39,840 meine, für meine Browser extension sein, aber wir wollten 88 00:04:39,840 --> 00:04:42,240 jetzt irgendwie als auf als Aufreißer nehmen und so ein 89 00:04:42,240 --> 00:04:44,960 bisschen die technischen Implementierungsdetails aus 90 00:04:44,960 --> 00:04:47,640 developer Perspektive natürlich anzuschauen, aber ich glaube 91 00:04:47,640 --> 00:04:50,800 dafür hilft es trotzdem einmal ganz kurz dieses Bild zu malen, 92 00:04:50,800 --> 00:04:53,200 was was, was, was die Extension kann. 93 00:04:54,320 --> 00:04:58,000 Sie heißt make linkedin great Again, angelehnt natürlich an 94 00:04:58,000 --> 00:05:00,440 Make America great again. Wer dieses ganze Donald Trump 95 00:05:00,440 --> 00:05:03,840 Ding irgendwie mit losgetreten wurde und hat die Motivation, 96 00:05:04,160 --> 00:05:06,960 wie malte gerade schon gesagt hat, ist also ich, ich 97 00:05:06,960 --> 00:05:09,440 persönlich, ich mag linkedin total gerne, das ist mein Nummer 98 00:05:09,440 --> 00:05:13,200 1 Social network, ich bin super super gerne auf linkedin, ich 99 00:05:13,200 --> 00:05:17,280 war bis vor einem halben Jahr noch viel lieber auf linkedin 100 00:05:17,440 --> 00:05:20,680 und irgendwie. Ist es ja auch irgendwie nicht 101 00:05:20,680 --> 00:05:22,320 mehr zu so einem reinen Business Ort geworden. 102 00:05:22,320 --> 00:05:25,360 Ich hab es, ich liebe das da über über Business, über 103 00:05:25,360 --> 00:05:28,080 Technik, über irgendwelche Innovationen, über News zu 104 00:05:28,080 --> 00:05:30,960 lesen, aber diese ganzen anderen Sachen nicht. 105 00:05:30,960 --> 00:05:34,840 Also ich möchte da einfach keine politischen Inhalte haben und 106 00:05:34,840 --> 00:05:37,920 das liegt nicht dran, dass ich kein politischer Mensch bin. 107 00:05:37,920 --> 00:05:40,560 Ich glaube, wenn ich glaube, in den Vorbesprechungen, die malte 108 00:05:40,560 --> 00:05:42,760 und ich für jede Podcast Folge machen, sprechen wir zum 109 00:05:42,760 --> 00:05:47,200 Beispiel wahnsinnig viel. Über politische Gegebenheiten 110 00:05:47,200 --> 00:05:49,920 und Entwicklungen, aber eben im Privaten. 111 00:05:50,080 --> 00:05:52,720 Und ich glaub wir gerade malte und ich glaub wir sind beide 112 00:05:52,720 --> 00:05:55,480 sehr sehr sehr informiert und auch von dir gerade malte weiß 113 00:05:55,480 --> 00:05:58,560 ich bis auch politisch sehr involviert, aber ich will mir 114 00:05:58,560 --> 00:06:04,880 eben aussuchen wo und wann ich news über das Weltgeschehen zu 115 00:06:04,880 --> 00:06:09,080 mir nehme und vor allem auch aus welcher Quelle und das kann ich 116 00:06:09,080 --> 00:06:12,560 eben nicht, wenn ich Linkedin aufmache und mich eigentlich 117 00:06:12,560 --> 00:06:15,440 jedes Mal. Irgendwie die Visage von Elon 118 00:06:15,440 --> 00:06:18,560 Musk Anlacht oder ich irgendwas über irgend über das Trump da 119 00:06:18,560 --> 00:06:22,000 vorne in der linken Ecke Gefurzt hat, mir durchlesen muss oder 120 00:06:22,000 --> 00:06:24,360 was Putin gerade ist oder was in der, was in der was in der 121 00:06:24,360 --> 00:06:28,320 Ukraine passiert oder was was in Israel abgeht, das interessiert 122 00:06:28,320 --> 00:06:30,320 mich zwar alles irgendwie, aber nicht in dem Moment, wo ich 123 00:06:30,320 --> 00:06:33,680 linkedin aufmache, da will ich über über Nerd Kram, über Stuff, 124 00:06:33,680 --> 00:06:37,920 über über Business irgendwie lesen, und da linkedin selber 125 00:06:37,920 --> 00:06:40,520 nicht die Möglichkeit hast du das zu filtern, hab ich mir 126 00:06:40,520 --> 00:06:42,640 überlegt. Da linkedin ja nur eine Webseite 127 00:06:42,640 --> 00:06:45,200 ist und ja nur html ausspielt, warum brauche ich nicht einfach 128 00:06:45,200 --> 00:06:50,000 eine Browser extension, die sich jeden Post anschaut und wenn 129 00:06:50,000 --> 00:06:53,440 bestimmte Schlüsselwörter, die man selber definieren kann, in 130 00:06:53,440 --> 00:06:56,000 einfach einer langen Liste an Wörtern, wenn ein Post 131 00:06:56,000 --> 00:06:59,240 irgendeins dieser Wörter enthält, dann wird er einfach 132 00:06:59,240 --> 00:07:01,360 ausgeblendet, dann wird er einfach aus dem Dom entfernt 133 00:07:01,360 --> 00:07:03,200 oder in meinem Fall kann man sich quasi so ausführen, ob da 134 00:07:03,200 --> 00:07:06,000 rausgeschmissen oder einfach so quasi. 135 00:07:06,520 --> 00:07:09,760 Also halb durchsichtig gemacht wird und man den Texten nicht 136 00:07:09,760 --> 00:07:11,600 mehr lesen kann, es sei denn, man klickt noch mal irgendwie 137 00:07:11,600 --> 00:07:12,880 drauf. Auf so einen Button und kann 138 00:07:12,880 --> 00:07:14,560 sich dadurch die Timeline so ein bisschen wieder selber 139 00:07:14,560 --> 00:07:16,720 kuratieren. Und ich finde, das ist 140 00:07:16,720 --> 00:07:20,000 eigentlich ein ganz cooler Ansatz, weil es sind ja am Ende 141 00:07:20,000 --> 00:07:24,400 lösbare Probleme, Inhalte im Internet im eigenen Browser zu 142 00:07:24,400 --> 00:07:26,720 editieren. Man muss sich letzten Endes nur 143 00:07:26,720 --> 00:07:31,520 den Dom Tree, die Struktur der html Seite am Ende angucken und 144 00:07:31,520 --> 00:07:33,520 kann diese modifizieren, ich glaube. 145 00:07:34,080 --> 00:07:36,960 Viele von uns oder die meisten von uns diesen Podcast hören 146 00:07:36,960 --> 00:07:40,080 oder sich mit Technologie auseinandersetzen, haben auch 147 00:07:40,080 --> 00:07:43,160 schon mit den Developer Tools im Browser gearbeitet, wo man sich 148 00:07:43,160 --> 00:07:46,800 natürlich auch nicht nur die Seitenstruktur anschauen kann, 149 00:07:46,800 --> 00:07:49,560 sondern diese auch live editieren kann und sehen kann. 150 00:07:49,560 --> 00:07:52,880 Okay wie verändert sich die Seite und da liegt es ja nur 151 00:07:52,880 --> 00:07:55,600 nahe, diese ganzen Veränderungen, die man dort als 152 00:07:55,600 --> 00:07:59,120 Developer testen oder manuell durchführen kann, auch 153 00:07:59,200 --> 00:08:02,080 automatisiert durchzuführen, wie du das gemacht hast mit einer. 154 00:08:02,640 --> 00:08:06,400 Browser Extension und da kommen wir dann schon relativ nah an 155 00:08:06,400 --> 00:08:09,080 die Technologie, weil was macht letzten Endes die Browser 156 00:08:09,080 --> 00:08:11,760 Extension? Sie liest Inhalte aus der 157 00:08:11,760 --> 00:08:15,520 Webseite, die gerade angezeigt wird, verändert den. 158 00:08:15,840 --> 00:08:20,080 Dom tree fügt HTML Elemente hinzu, entfernt sie, editiert 159 00:08:20,080 --> 00:08:23,840 sie und kann dementsprechend die Darstellung der Webseite 160 00:08:23,840 --> 00:08:27,840 verändern und Informationen aus der Webseite bearbeiten und 161 00:08:27,840 --> 00:08:31,120 natürlich auch auslesen. Aber damit haben natürlich 162 00:08:31,360 --> 00:08:35,039 Browser Extensions auch relativ viele Zugriffsrechte, in der 163 00:08:35,039 --> 00:08:38,640 Regel laufen sie ja dauerhaft in meinem Browser und können 164 00:08:38,640 --> 00:08:42,480 dementsprechend auch. In Anführungsstrichen sehen, was 165 00:08:42,480 --> 00:08:44,680 ich gerade sehe, also die haben Zugriff auf die ganzen 166 00:08:44,680 --> 00:08:48,720 Webseiten, auf denen ich surfe und können dann diese Webseite 167 00:08:48,720 --> 00:08:54,000 entsprechend manipulieren oder verändern oder zumindest lesen. 168 00:08:54,880 --> 00:08:58,320 In deinem Fall reden wir jetzt über eine Browser Extension für 169 00:08:58,640 --> 00:09:02,480 Chrome basierte Browser, also eine spezielle eine Familie von 170 00:09:02,480 --> 00:09:05,360 Browsern, es sind ja mittlerweile mehr Browser als 171 00:09:05,360 --> 00:09:09,120 Google Chrome, die die Chrome Engine verwenden. 172 00:09:10,000 --> 00:09:12,520 Und dementsprechend, wenn ich das richtig verstanden habe, 173 00:09:12,520 --> 00:09:15,120 funktioniert deine Extension, die du jetzt geschrieben hast, 174 00:09:15,120 --> 00:09:17,760 auch in allen diesen Browsern und die Art und Weise, wie man 175 00:09:17,760 --> 00:09:20,640 für diese Browser entwickelt, ist auch immer die gleiche. 176 00:09:21,200 --> 00:09:24,520 Genau, also ich habe deswegen sie für Chrome geschrieben, weil 177 00:09:24,520 --> 00:09:26,120 ich selber den Arc Browser benutze. 178 00:09:26,120 --> 00:09:29,680 Der ist Chromium basiert, also nutzt dieses diese diese Chrome 179 00:09:29,680 --> 00:09:33,000 Engine unten drunter. Und das der große Vorteil ist, 180 00:09:33,000 --> 00:09:35,680 dass dass sie dadurch halt auch automatisch für Microsoft Edge, 181 00:09:35,680 --> 00:09:38,560 für Chrome selber, für Brave, für Vivaldi, für all diese 182 00:09:38,560 --> 00:09:41,200 anderen Browser, die eben Chrome in basiert sind, funktioniert. 183 00:09:41,200 --> 00:09:44,560 Das heißt, stand heute, Wenn dieser Podcast erscheint, gibt 184 00:09:44,560 --> 00:09:46,320 es die Extension auch tatsächlich nur für diese 185 00:09:46,320 --> 00:09:50,960 Chromium basierten Browser, also für Chrome, Edge, Arc, wir reden 186 00:09:50,960 --> 00:09:53,360 am Ende mal mal drüber, was so die nächsten Steps sind, denn es 187 00:09:53,360 --> 00:09:55,360 ist gar nicht so wahnsinnig kompliziert, die jetzt zumindest 188 00:09:55,360 --> 00:09:59,120 auch auf den Safari oder in den Firefox zu bringen. 189 00:10:00,000 --> 00:10:02,600 Das sind dann aber zuerst mal die nächsten Schritte, stand 190 00:10:02,600 --> 00:10:05,520 heute. Und dann pack den Link auf, wenn 191 00:10:05,520 --> 00:10:08,200 das interessiert gerne mal in die in die Show Notes in der 192 00:10:08,200 --> 00:10:11,200 Folge rein, gibst sie eben für alles was irgendwie auf Chrome 193 00:10:11,600 --> 00:10:15,320 Chromium basiert. Dann lasst uns mal einsteigen 194 00:10:15,320 --> 00:10:19,920 mit dem Technology Stack und so wie ich das in deiner 195 00:10:19,920 --> 00:10:24,000 Kurzzusammenfassung hier verstanden habe, hast du deine 196 00:10:24,000 --> 00:10:27,600 Extension auf Basis von Webtechnologien gebaut, sprich 197 00:10:28,000 --> 00:10:31,440 Java, script, HTML und. Ist das der einzige Weg? 198 00:10:31,440 --> 00:10:36,640 Gibt es noch andere Wege, solche Chromium Extensions zu bauen und 199 00:10:37,040 --> 00:10:40,400 wie gehe ich dann vor? Ja, ich weiß gar nicht, ob es 200 00:10:40,400 --> 00:10:41,920 wirklich der Allereinzige Weg geht. 201 00:10:41,920 --> 00:10:45,000 Ist es aber auf jeden Fall der mit Abstand populärste Weg und 202 00:10:45,000 --> 00:10:48,800 der wahrscheinlich auch sinnvollste Weg das, weil das 203 00:10:48,800 --> 00:10:52,280 Web besteht ja einfach nur mal am Ende des Tages aus HTML und 204 00:10:52,280 --> 00:10:55,480 Java Script und es kommen gerade auch noch so ein paar andere 205 00:10:55,480 --> 00:10:59,040 Technologien hier und da auf. Aber gerade wenn ich die 206 00:10:59,040 --> 00:11:01,480 Webseite, die ich gerade sehe, irgendwie bearbeiten, editieren 207 00:11:01,480 --> 00:11:04,840 möchte, dann habe ich ja eh HTML und Java Script vorliegen. 208 00:11:04,840 --> 00:11:06,320 Also genau wie du gesagt hast, wenn ich einfach mal die 209 00:11:06,320 --> 00:11:08,560 Developer Tools im Browser aufmache, das was ich da sehe, 210 00:11:08,560 --> 00:11:11,720 das will ich ja modifizieren deswegen ich habe jetzt auch 211 00:11:11,720 --> 00:11:13,960 erst mal kein Tutorial gefunden was das mit irgendwas anderem 212 00:11:13,960 --> 00:11:17,200 macht außer mit Java Script und HTML, das sind beides 213 00:11:17,200 --> 00:11:20,000 Technologien die ich halbwegs gut beherrsche, von da war war 214 00:11:20,000 --> 00:11:23,440 mir das auch recht. Und ich muss dazu sagen, N 215 00:11:23,440 --> 00:11:25,960 Großteil von diesem Skuff Holding, also von diesem ersten 216 00:11:25,960 --> 00:11:29,400 Wurf hat ohnehin ne KI geschrieben, wie kann das anders 217 00:11:29,400 --> 00:11:32,080 sein heutzutage und das war tatsächlich auch der Grund, also 218 00:11:32,080 --> 00:11:34,840 die Idee für diese Extension, die geistert mir schon n paar 219 00:11:34,840 --> 00:11:36,880 Jahre im Kopf rum, ich bin nur irgendwie nie so richtig dazu 220 00:11:36,880 --> 00:11:38,520 gekommen, weil ich einfach nicht wusste wie man ne Browser 221 00:11:38,520 --> 00:11:41,360 extension baut und halt auch irgendwie das wie n großer Berg 222 00:11:41,360 --> 00:11:43,120 Arbeit aussah, weißt ja wie das ist wenn man irgendwie n neues 223 00:11:43,120 --> 00:11:45,440 Framework oder irgendwas lernen muss, das Macht das selten in 224 00:11:45,440 --> 00:11:50,000 einem Tag gemacht und jetzt wo diese ganzen KI Tools soweit 225 00:11:50,000 --> 00:11:52,680 sind. Habe ich mir da auch sehr viel 226 00:11:52,680 --> 00:11:55,320 Hilfe geholt und muss sagen, ich bin dadurch auch wahnsinnig 227 00:11:55,320 --> 00:11:58,120 schnell gewesen. Und wer die vorletzte Folge 228 00:11:58,120 --> 00:12:01,120 glaube ich gehört hat, wo wir KI Agenten miteinander verglichen 229 00:12:01,120 --> 00:12:05,000 haben, so Developer Agenten, da war 1 dieser Projekte habe ich 230 00:12:05,000 --> 00:12:06,800 ja auch gesagt, auch ein Projekt wo ich mal in Zukunft drüber 231 00:12:06,800 --> 00:12:09,360 rede und das war genau diese Browser extension wo ich eben 232 00:12:09,360 --> 00:12:12,600 versucht habe okay wie gut sind die denn mir da einen Start zu 233 00:12:12,600 --> 00:12:16,040 geben, das heißt ich habe mir ein Tutorial geschnappt, es gibt 234 00:12:16,040 --> 00:12:17,880 von Chrome ein offizielles Tutorial wie man Browser 235 00:12:17,880 --> 00:12:21,760 Extensions baut. Und alle, alle KI Tools 236 00:12:21,760 --> 00:12:24,440 verwendet habe, wussten aber auch wie das geht und konnten 237 00:12:24,440 --> 00:12:27,200 mich da gut unterstützen. Das heißt, du hast dir dann 238 00:12:27,520 --> 00:12:30,560 grundsätzlich die Struktur aus dem Tutorial gezogen oder hast 239 00:12:30,560 --> 00:12:33,200 du die wirklich durch das KI Tool vorschlagen lassen? 240 00:12:33,360 --> 00:12:34,600 Nee, genau. Also ich habe mir die Struktur 241 00:12:34,600 --> 00:12:37,360 aus diesem Tutorial gezogen, die ist auch bei Browser Extensions 242 00:12:37,360 --> 00:12:39,760 relativ simpel, also es ist überraschend unkompliziert so 243 00:12:39,760 --> 00:12:42,880 eine Browser Extension zu bauen. Ich kann ja mal kurz durchgehen, 244 00:12:43,480 --> 00:12:45,840 eigentlich habe ich nur 4 Dateien, also ich habe. 245 00:12:47,120 --> 00:12:51,520 Ich habe erstmal eine Datei, die heißt die mein Fall heißt die 246 00:12:51,520 --> 00:12:55,840 Content Punkt js das ist das Java Script was du in das Java 247 00:12:55,840 --> 00:12:57,840 Script einer bestehenden Webseite die jetzt gerade offen 248 00:12:57,840 --> 00:13:01,520 ist injizieren kannst. Das heißt du kannst es gibt ja 249 00:13:01,520 --> 00:13:03,520 eh ganz viele Java scrip Dateien und eigentlich alles was die 250 00:13:03,520 --> 00:13:06,200 Browser Extension macht ist im Hintergrund in den Header noch 251 00:13:06,200 --> 00:13:08,320 eine weite Java Script Datei reinzuhängen. 252 00:13:08,920 --> 00:13:12,160 Das heißt, das heißt, die Methoden da drin sind dann auch 253 00:13:12,160 --> 00:13:14,000 nachladen der Seite sofort verfügbar. 254 00:13:14,080 --> 00:13:14,720 Richtig. Genau. 255 00:13:15,360 --> 00:13:17,480 Und da kannst du dann halt sagen, okay, das ist jetzt 256 00:13:17,480 --> 00:13:20,280 einfach mein zusätzliches Java Script und da habe ich zum 257 00:13:20,280 --> 00:13:23,040 Beispiel eigentlich in meinem Fall von dieser Filter Extension 258 00:13:23,040 --> 00:13:27,440 jetzt einfach nur gesagt, Pass auf, du registrierst dich auf 2 259 00:13:27,440 --> 00:13:29,520 Eventhändler nämlich einmal auf den Eventhändler, es wurde 260 00:13:29,520 --> 00:13:32,080 Gescrollt und dann auf den Eventhändler die Seite ist 261 00:13:32,080 --> 00:13:35,120 geladen und führst dann deine Filterlogik aus und die 262 00:13:35,120 --> 00:13:37,360 Filterlogik heißt einfach, man kann ja mit Java Script auf den 263 00:13:37,720 --> 00:13:41,000 Jom zugreifen, also auf alle html Elemente und. 264 00:13:41,680 --> 00:13:44,160 Und habe mir dann vorher einmal manuell per Hand in den 265 00:13:44,160 --> 00:13:47,840 Developer Tools angeschaut, welchen Klassennamen tragen denn 266 00:13:47,920 --> 00:13:50,080 Posts in der Timeline von linkedin? 267 00:13:50,800 --> 00:13:53,760 Das heißt, ich habe wusste, wie der Klassenname ist und irgendwo 268 00:13:53,760 --> 00:13:56,960 da drin vergraben gibt es dann verschiedene Stellen in den Text 269 00:13:56,960 --> 00:14:00,760 auftauchen kann und das habe ich aber schon gar nicht selber 270 00:14:00,760 --> 00:14:04,320 geschrieben, sondern einfach hier der kopal KI im Chat 271 00:14:04,320 --> 00:14:08,080 gesagt, Pass auf ich. Such mir mal den Content von 272 00:14:08,080 --> 00:14:10,840 allen Sub Klassen aus der Klasse mit diesem Klassennamen raus 273 00:14:10,840 --> 00:14:13,680 oder allen Sub Elementen raus und speichert das in einer 274 00:14:13,680 --> 00:14:18,240 Variable namens Text und dann hat die mir quasi schon den Code 275 00:14:18,240 --> 00:14:20,240 dadurch geschrieben. Wie ich jetzt genau die queery 276 00:14:20,240 --> 00:14:23,760 schreibe, die mir diese diese ganzen Klassen gibt und in jedem 277 00:14:23,760 --> 00:14:27,000 jede Sub Element reinguckt und wenn da Text drin steht den in 278 00:14:27,000 --> 00:14:30,560 ein großes einen großen String reinschreibt und dann kann ich 279 00:14:30,560 --> 00:14:33,400 eben diesen String checken, kommt da 1 der gefilterten Worte 280 00:14:33,400 --> 00:14:34,680 und Forder nicht und wenn ja dann. 281 00:14:35,200 --> 00:14:38,720 Dann füg ich einfach ne weitere Klasse zu meinem Post hinzu. 282 00:14:38,720 --> 00:14:41,520 Ne CSS Klasse und diese CSS Klasse besagt dann eben, dass 283 00:14:41,520 --> 00:14:44,320 sie entweder ausgeblendet wird oder halt entsprechend versteckt 284 00:14:44,320 --> 00:14:45,200 wird. Dieser Post. 285 00:14:45,360 --> 00:14:48,240 Das ist die Zweite, das ist die zweite Datei, ne. 286 00:14:48,720 --> 00:14:51,840 Css Datei, die ich genauso wie meine wie meinen Content Java 287 00:14:51,840 --> 00:14:54,720 Script kann ich einfach weiter weiter eine weitere CSS Datei 288 00:14:54,960 --> 00:14:57,360 mit in die bestehende Webseite injizieren, die ich da gerade 289 00:14:57,360 --> 00:14:59,480 sehe. Und in deinem Fall ist es ja so, 290 00:14:59,480 --> 00:15:03,240 dass deine Extension mit den Inhalten der Seite interagiert, 291 00:15:03,240 --> 00:15:06,720 diese verändert. Wenn ich jetzt dort bestimmte 292 00:15:06,720 --> 00:15:09,160 Methoden definiere, geht das dann auch andersrum, dass dann 293 00:15:09,160 --> 00:15:12,600 entsprechend die Seite mit meiner Extension interagiert, 294 00:15:12,600 --> 00:15:16,400 indem sie Methoden aufruft, die dann von mir hinzugefügt wurden. 295 00:15:16,800 --> 00:15:19,000 Das würde bestimmt gehen. Dadurch müsste die Seite aber 296 00:15:19,000 --> 00:15:20,920 natürlich die Methoden kennen. Ich weiß jetzt auch nicht, ob 297 00:15:20,920 --> 00:15:23,840 ich eine Methode überschreiben kann, die es schon in der Seite 298 00:15:23,840 --> 00:15:26,240 gibt, also ich glaube, das ist schon noch mal, dass das schon 299 00:15:26,240 --> 00:15:28,760 noch mal in einem eigenen Sandbox Umgebung abläuft, aber 300 00:15:28,760 --> 00:15:30,640 ich kann mir vorstellen, wenn ich jetzt irgendwie notion 301 00:15:30,640 --> 00:15:33,760 aufmache, dass Notion davon profitiert, wenn ich die Notion 302 00:15:33,920 --> 00:15:36,040 Browser Extension auch installiert habe und die sich 303 00:15:36,040 --> 00:15:38,040 dann halt irgendwie noch mal gegenseitig was zuschustern 304 00:15:38,040 --> 00:15:43,520 können ich weiß ja nicht ob das nötig ist, weil wenn ich der 305 00:15:43,520 --> 00:15:45,760 vollen Zugriff auf meine Seite habe, dann. 306 00:15:46,280 --> 00:15:48,400 Kann ich auch die Methoden da die ich da auch direkt in den 307 00:15:48,400 --> 00:15:50,160 Javasript Code von meiner Webseite einbacken? 308 00:15:50,160 --> 00:15:52,520 Also fällt mir jetzt gerade kein Anwendungsfall ein, aber wenn es 309 00:15:52,520 --> 00:15:54,640 einen gibt, müsste man sich das noch mal angucken. 310 00:15:55,040 --> 00:15:58,880 Man muss generell aber sehr sehr streng definieren, was denn die 311 00:15:58,880 --> 00:16:02,480 Browser extension alles können soll, also spätestens wenn man 312 00:16:02,480 --> 00:16:05,080 sie in den Store hochlädt kommt zusammen mit der Browser 313 00:16:05,080 --> 00:16:07,360 Extension, wie das bei vielen Apps irgendwie ist, so eine 314 00:16:07,360 --> 00:16:11,680 Manifest Datei und da stehen Berechtigungen drin die so eine 315 00:16:11,680 --> 00:16:14,640 Browser Extension hat und zwar. Darf ich also, was darf sie 316 00:16:14,640 --> 00:16:16,560 sehen? Darf ich auf den aktiven Tab 317 00:16:16,560 --> 00:16:19,040 zugreifen, der gerade offen ist? Darf ich auf alle Tabs 318 00:16:19,040 --> 00:16:20,560 zugreifen, die gerade offen sind? 319 00:16:20,720 --> 00:16:25,680 Darf ich auf den Speicher vom Browser zugreifen und auf 320 00:16:25,680 --> 00:16:27,840 welchen Seiten möchte die Browser Extension überhaupt 321 00:16:27,840 --> 00:16:30,800 aktiviert sein und so weiter und das muss man schon alles 322 00:16:30,800 --> 00:16:35,240 mitgeben und im Chrome Store wird das auch einem Review 323 00:16:35,240 --> 00:16:38,400 unterzogen, das heißt die. Geht jetzt nicht einfach. 324 00:16:38,400 --> 00:16:40,560 Ich lad die um hoch und die ist online, sondern das schaut sich 325 00:16:40,560 --> 00:16:43,440 jemand an und die ist auch die ersten 2 Male bei mir rejectet 326 00:16:43,440 --> 00:16:46,120 worden, weil ich eben permissions angegeben habe, die 327 00:16:46,120 --> 00:16:48,320 ich aber meinem Code tatsächlich nicht benutze. 328 00:16:48,840 --> 00:16:51,120 Hat das zum Beispiel gesagt, Ich möchte Zugriff auf das 329 00:16:51,120 --> 00:16:53,520 Kontextmenü machen, haben, dass man einfach einen Rechtsklick 330 00:16:53,520 --> 00:16:56,000 machen kann und dann auch die Filter an und ausstellt. 331 00:16:56,320 --> 00:16:58,640 Das Feature hat ich aber noch nicht implementiert und hat das 332 00:16:58,640 --> 00:17:01,760 Chrome Team ja auch relativ klar gesagt Hey du brauchst keine 333 00:17:01,760 --> 00:17:03,840 Berechtigung auf das Kontextmenü, weil du es 334 00:17:03,840 --> 00:17:06,319 nirgendwo verwendest. Also die sind da schon auch 335 00:17:06,319 --> 00:17:09,520 streng, was ich auch irgendwo als user Perspektive gut finde. 336 00:17:10,240 --> 00:17:13,359 Dann gibt es aber noch weitere Dateien die ich brauche und zwar 337 00:17:13,680 --> 00:17:16,240 ist es ja nicht nur den Code, den ich in die aktuelle Seite 338 00:17:16,240 --> 00:17:20,319 injiziere, sondern jede Browser extension hat ja auch ja 339 00:17:20,319 --> 00:17:23,319 meistens oben in der in der in der Adressleiste dann so ein 340 00:17:23,319 --> 00:17:26,240 kleines Icon und wenn man darauf klickt öffnet sich auch noch mal 341 00:17:26,240 --> 00:17:28,480 so ein kleines Fensterchen. Und das ist eigentlich auch 342 00:17:28,480 --> 00:17:30,880 nichts anderes als eine Mini Webseite oder eine Mini Web App. 343 00:17:31,360 --> 00:17:34,560 Das heißt, auch dafür habe ich ein bisschen HTML und Java 344 00:17:34,560 --> 00:17:38,200 Script und CSS hinterlegt, in meinem Fall von meiner Extension 345 00:17:38,200 --> 00:17:40,960 ist öffnet das quasi einfach so ein Menü wo man dann eben alle 346 00:17:40,960 --> 00:17:44,560 Wörter eintragen kann die man gefiltert haben möchte wo man 347 00:17:44,800 --> 00:17:48,840 entscheiden kann ob die Seite ob der Post ganz ausgeblendet wird 348 00:17:48,840 --> 00:17:52,880 oder nur so versteckt wird und ob man noch andere Typen von 349 00:17:52,880 --> 00:17:55,600 linkedin posts wie es gibt bei linkedin so celebrations das 350 00:17:55,600 --> 00:17:58,360 sind ganz besondere Posts. Wo man dann die irgendwie auch 351 00:17:58,360 --> 00:18:00,400 automatisch erscheinen, wenn man 10 Jahre jetzt über der gleichen 352 00:18:00,400 --> 00:18:02,320 Firma war. Ob man auch diese erkennen und 353 00:18:02,320 --> 00:18:05,280 ausblenden möchte, das heißt, so ein kleines Konfigurationsmenü, 354 00:18:06,080 --> 00:18:10,360 das quasi auch eine Mini Mini Mini Web App und dann gibt es 355 00:18:10,360 --> 00:18:14,320 noch eine dritte und letzte Art von Datei und das ist so ein 356 00:18:14,320 --> 00:18:19,200 Background Script, das agiert so ein bisschen, das agiert nicht 357 00:18:19,200 --> 00:18:21,640 auf der aktuellen Webseite, es agiert nicht in diesem kleinen 358 00:18:21,640 --> 00:18:24,400 Fensterchen, wenn ich auf das Icon klicke, sondern das. 359 00:18:24,720 --> 00:18:26,960 Handelt. Vor allem läuft das eigentlich 360 00:18:26,960 --> 00:18:29,080 im Hintergrund vom Browser, das heißt, es handelt so ein 361 00:18:29,080 --> 00:18:32,120 bisschen Browser, Aktionen und vor allem also ich könnte zum 362 00:18:32,120 --> 00:18:35,520 Beispiel wenn ich jetzt einen Kontextmenü habe und dann Icon 363 00:18:35,520 --> 00:18:38,680 anklicke, dann könnte ich dadurch reagieren und über so 364 00:18:38,680 --> 00:18:41,280 einen den den Browser integrierten Message Bass eben 365 00:18:42,080 --> 00:18:46,000 eventuell das Icon von meiner von meiner Browser Extension 366 00:18:46,720 --> 00:18:49,680 beeinflussen, dass sich das ändert oder eine Methode in dem 367 00:18:49,680 --> 00:18:52,400 Skript auflösen, dass ich ihn injiziert habe von außen. 368 00:18:52,720 --> 00:18:55,600 Also das fungiert so ein bisschen als Broker zwischen den 369 00:18:55,600 --> 00:18:57,280 Sachen. Das läuft also nicht im Kontext 370 00:18:57,280 --> 00:19:00,160 der aktuell geöffneten Webseite, sondern eigentlich mehr im 371 00:19:00,160 --> 00:19:02,560 Kontext des Browsers und kann dann noch mal so auf so 372 00:19:02,560 --> 00:19:07,200 Browserfunktionen zurückgreifen und alles zusammen kommuniziert 373 00:19:07,200 --> 00:19:10,600 das bei mir eigentlich nur über den Browser internen Storage. 374 00:19:10,600 --> 00:19:14,280 Es gibt so eine Storage API, also dieses Chrome Punkt Storage 375 00:19:14,960 --> 00:19:17,320 und das heißt wenn ich in diesem wenn ich auf das kleine Icon 376 00:19:17,320 --> 00:19:19,240 drücke. Und da ein Wort ändert, dann 377 00:19:19,240 --> 00:19:21,360 wird die neue Liste an gefilterten Wörtern in diese 378 00:19:21,600 --> 00:19:24,000 Storage geschrieben. Und jedes Mal, wenn diese 379 00:19:24,000 --> 00:19:27,440 Filterfunktion auf der Webseite aufgerufen wird, wird die Liste 380 00:19:27,440 --> 00:19:30,520 aus dieser Storage rausgelesen und gesagt okay wenn jetzt wenn 381 00:19:30,520 --> 00:19:32,560 ich jetzt einen Post vor mir habe, wo 1 dieser Wörter drin 382 00:19:32,560 --> 00:19:35,600 vorkommt, dann wird er eben rausgefiltert und das ist 383 00:19:35,600 --> 00:19:37,680 eigentlich auch schon alles. Also es war wirklich 384 00:19:37,680 --> 00:19:41,200 überraschend unkompliziert. Das heißt, am Ende ist der 385 00:19:41,520 --> 00:19:44,480 Browser Extension, eine kleine Web App, die. 386 00:19:44,960 --> 00:19:48,080 Von Chrome entsprechend ausgeführt und gerendert wird 387 00:19:48,080 --> 00:19:51,440 und die Daten persistiere ich eigentlich so wie ich es als Web 388 00:19:51,440 --> 00:19:54,720 Developer mit Local Storage auch im Browser machen kann. 389 00:19:54,720 --> 00:19:58,640 Über diese spezielle Storage Klasse und habe dementsprechend 390 00:19:58,640 --> 00:20:02,640 alles was ich brauche um eine Webanwendung mit Persistenz 391 00:20:02,640 --> 00:20:05,840 laufen zu lassen, die dann über diese Schnittstellen und die 392 00:20:05,840 --> 00:20:09,360 Injection von dem Java Script in die Webseite diese Interaktionen 393 00:20:09,360 --> 00:20:11,280 vornimmt. Also wenn ich das so richtig 394 00:20:11,280 --> 00:20:12,400 zusammengefasst. Habe genau. 395 00:20:13,560 --> 00:20:15,440 Und ich glaube, das muss man auch gar nicht überkomplizieren. 396 00:20:15,440 --> 00:20:17,640 Also das fand ich irgendwie irgendwie spannend so die ersten 397 00:20:17,640 --> 00:20:19,640 Tutorials, die haben das irgendwie super komplex gemacht, 398 00:20:19,640 --> 00:20:22,800 da wurde dann REACT für das Frontend genommen und alles 399 00:20:22,800 --> 00:20:26,800 wurde auf Type Script gebaut um irgendwie typsicherheit zu 400 00:20:26,800 --> 00:20:30,520 haben, blablabla und dem bin ich natürlich am Anfang irgendwie 401 00:20:30,520 --> 00:20:33,000 brav gefolgt, bis ich dann irgendwann gemerkt habe, Moment 402 00:20:33,000 --> 00:20:36,640 mal, das ist ja also die meisten Chrome oder generell die meisten 403 00:20:36,640 --> 00:20:38,400 Browser Extensions, das sind ja wahrscheinlich. 404 00:20:38,880 --> 00:20:41,720 Wenn es ja am Ende des Tages Runtergebrochen wirklich nur n 405 00:20:41,720 --> 00:20:44,400 paar Zeilen Code hier und da braucht man da wirklich jetzt so 406 00:20:44,400 --> 00:20:45,760 n Framework? Brauch ich wirklich für dieses 407 00:20:45,760 --> 00:20:48,920 eine Fenster was ich da Anzeige wenn ich auf meine auf dieses 408 00:20:48,920 --> 00:20:51,440 Icon der Browser extension klicke brauch ich da wirklich n 409 00:20:51,440 --> 00:20:55,200 Frontend Framework für React dafür und hab ich dann also 410 00:20:55,200 --> 00:20:57,080 wahrscheinlich nicht und hab mich dann auch dagegen 411 00:20:57,080 --> 00:20:58,720 entschieden das alles über Bord geschmissen. 412 00:20:58,920 --> 00:21:01,720 Und habe jetzt wirklich ganz plain, HTML und und Java Script 413 00:21:01,720 --> 00:21:04,440 ich ja wirklich einfach nur 3 textboxen Anzeige und auch die 414 00:21:04,440 --> 00:21:07,440 kann man mit ein bisschen CSS so ein bisschen stylen und muss ich 415 00:21:07,440 --> 00:21:10,720 da jetzt wirklich irgendwie eine eine Rendering Group und so und 416 00:21:10,720 --> 00:21:12,320 irgendwelche Hooks im Hintergrund haben? 417 00:21:12,880 --> 00:21:14,880 Nee, und deswegen habe ich mich dann auch immer entschieden 418 00:21:14,880 --> 00:21:17,400 diese Ganzen den ganzen Kram an Bord zu schmeißen, aber jetzt 419 00:21:17,400 --> 00:21:21,440 ist es wirklich bei mir ganz ganz plain HTML und Java Script 420 00:21:21,440 --> 00:21:24,080 und CSS wirklich wieso ein bisschen wie früher hat es sich 421 00:21:24,080 --> 00:21:26,480 angefühlt, weil es ja auch wirklich einfach ein paar 422 00:21:26,480 --> 00:21:29,640 Funktionen hier und da sind so. Und ich da jetzt nicht den 423 00:21:29,640 --> 00:21:31,400 großen Typen Support oder irgendwas brauchte. 424 00:21:31,400 --> 00:21:33,280 Von daher habe ich mich jetzt dafür entschieden und das würde 425 00:21:33,280 --> 00:21:35,040 ich auch jedem empfehlen, der man irgendwie mit dem Thema 426 00:21:35,040 --> 00:21:37,200 anfängt oder vielleicht sagt jetzt auch irgendjemand von 427 00:21:37,200 --> 00:21:39,440 unseren Zuhörerinnen oder Zuhörern auch boah, mir geistert 428 00:21:39,440 --> 00:21:41,480 auch eigentlich so eine Idee schon lange im Kopf rum, wenn 429 00:21:41,480 --> 00:21:43,200 ich gewusst hätte, dass es einfach nur so ein paar Zeilen 430 00:21:43,200 --> 00:21:45,440 sind oder dass es so simpel ist, so eine Extension zu bauen, 431 00:21:45,520 --> 00:21:47,240 könnte ich auch meine Lieblingswebseite irgendwie 432 00:21:47,240 --> 00:21:48,680 besser machen, oder? Oder irgendwie eine coole 433 00:21:48,680 --> 00:21:51,120 Funktion in meinem lieblings Browser noch mit einfügen, da 434 00:21:51,120 --> 00:21:54,160 würde ich auch jedem empfehlen das irgendwie erstmal so simpel 435 00:21:54,160 --> 00:21:55,920 zu starten, weil dann macht es auch am meisten Spaß und dann 436 00:21:55,920 --> 00:21:57,360 kommt man auch direkt irgendwie weiter. 437 00:21:58,240 --> 00:22:00,440 Und am Ende, wie gesagt, braucht man wahrscheinlich kein riesen 438 00:22:00,440 --> 00:22:02,560 Framework dafür. Ja, es ist so ein bisschen der 439 00:22:02,560 --> 00:22:05,920 gleiche Effekt, wie wenn man jetzt neu in die Webentwicklung 440 00:22:05,920 --> 00:22:09,440 einsteigt und dann von diesen ganzen Frameworks total 441 00:22:10,840 --> 00:22:12,920 überfordert ist. Erstmal, wenn man denkt, 442 00:22:12,920 --> 00:22:15,920 irgendwie, wie kompliziert ist das eigentlich, Webanwendungen 443 00:22:15,920 --> 00:22:18,960 zu bauen, aber dass am Ende eine Webanwendung nur HTML und Java 444 00:22:18,960 --> 00:22:21,600 Script sein muss, merkt man ja auch in diesem Fall mit 445 00:22:21,600 --> 00:22:24,400 einfachen Funktionalitäten und ich finde es halt immer sehr 446 00:22:24,400 --> 00:22:26,240 kurios, wenn es dann auch solche. 447 00:22:27,520 --> 00:22:30,640 Quasi statischen Webseiten gibt, wo es nur ein paar Unterseiten 448 00:22:30,640 --> 00:22:33,120 gibt und dann wird dafür komplettes Projektprojekt 449 00:22:33,120 --> 00:22:34,720 angelegt. Aber es findet gar keine 450 00:22:34,960 --> 00:22:38,000 wirkliche dynamische Interaktion statt, man hat gar keine Backend 451 00:22:38,000 --> 00:22:41,120 Funktionalitäten und das ist ja in deinem Fall genauso. 452 00:22:41,200 --> 00:22:45,680 Du hast eigentlich nur ein U ein paar wenige Funktionen und das 453 00:22:45,680 --> 00:22:48,400 lässt sich natürlich auch problemlos genauso simpel 454 00:22:48,720 --> 00:22:52,920 umsetzen und ich glaube, gerade wenn man jetzt heutzutage mit 455 00:22:52,920 --> 00:22:56,880 solchen KI. Systemen arbeiten kann auch als 456 00:22:56,880 --> 00:23:00,440 Developer, dann ist auch das Bauen von User Interface ist 457 00:23:00,440 --> 00:23:03,080 viel einfacher, weil man dann auch hingehen kann und sagen 458 00:23:03,080 --> 00:23:06,000 kann, OK, ich hätte gern folgendes UI, folgende 459 00:23:06,000 --> 00:23:08,400 Menüpunkte sollen da drin sein. Jetzt bitte noch was in dem 460 00:23:08,400 --> 00:23:12,000 Styling ändern und dann braucht man vielleicht auch keine großen 461 00:23:12,960 --> 00:23:15,760 UI Frameworks mehr, weil ich glaube das ist auch immer etwas 462 00:23:15,760 --> 00:23:18,400 was einen so ein bisschen abschreckt, weil die Sachen die 463 00:23:18,400 --> 00:23:21,440 man so von Hand geschrieben hat oder schreibt sehen meistens 464 00:23:21,440 --> 00:23:24,000 furchtbar hässlich aus und dann hat man plötzlich irgendwelche. 465 00:23:24,800 --> 00:23:30,280 Libraries mit Hunderten von CSS Klassen, die riesengroß sind und 466 00:23:30,280 --> 00:23:33,480 ganz viele Ressourcen reinholen. Wo ich dann denke okay, das ist 467 00:23:33,480 --> 00:23:35,520 vielleicht jetzt ein bisschen too much und jetzt kann ich 468 00:23:35,520 --> 00:23:38,480 tatsächlich in natürlicher Sprache auch beschreiben, was 469 00:23:38,480 --> 00:23:41,440 ich haben möchte und dann generiert mir die KI so ein 470 00:23:42,320 --> 00:23:46,320 Snippet CSS, was ich brauche, damit mein kleines Menü in 471 00:23:46,320 --> 00:23:49,920 meiner Browser extension dann auch entsprechend schön und 472 00:23:50,080 --> 00:23:52,480 ansprechend aussieht und im Falle von. 473 00:23:52,960 --> 00:23:54,960 So einer Chrome Extension möchte man vielleicht auch, dass sich 474 00:23:54,960 --> 00:23:59,840 das ähnlich anfühlt von der User Experience wie Halt der Browser 475 00:23:59,840 --> 00:24:01,760 selber. Ja, ist lustig, dass du sagst, 476 00:24:01,760 --> 00:24:04,320 ich habe gerade noch mal den, den prompt aufgemacht, den ich 477 00:24:04,320 --> 00:24:06,560 dafür geschrieben habe für die UI, weil die ist auch komplett 478 00:24:07,200 --> 00:24:10,480 KI generiert und da habe ich hier geschrieben, the UI should 479 00:24:10,480 --> 00:24:15,040 look minimal and professional in avisually appealing way, but 480 00:24:15,040 --> 00:24:20,720 natural and native looking also die UI soll minimalistisch, aber 481 00:24:20,720 --> 00:24:25,040 professionell aussehen. In einer in einer visuell 482 00:24:25,040 --> 00:24:29,360 angenehmen Art und Weise, aber halt auch natürlich und nativ 483 00:24:29,520 --> 00:24:32,280 für den für den Browser. Und könnt euch ja mal angucken 484 00:24:32,280 --> 00:24:33,560 und mir sagen, ob das gelungen ist. 485 00:24:33,560 --> 00:24:35,760 Aber wie gesagt, ich hab da gar nichts gestylt. 486 00:24:35,760 --> 00:24:37,320 Das Einzige was ich geändert habe ist, ich hab den 487 00:24:37,320 --> 00:24:40,560 Hintergrund genommen und den auf den gleichen Hintergrund den 488 00:24:40,560 --> 00:24:44,160 linkedin verwendet gesetzt damit es sich so n bisschen nativer 489 00:24:44,160 --> 00:24:47,280 oder besser integriert in linkedin irgendwie anfühlt. 490 00:24:47,840 --> 00:24:49,760 Und da finde ich, ist es n völlig OK das Ergebnis 491 00:24:49,760 --> 00:24:52,800 rausgekommen, ohne dass da jetzt irgendwie n tailwind oder n 492 00:24:52,800 --> 00:24:56,560 bootstrap oder n shat CDN oder irgend irgend so n New I 493 00:24:56,560 --> 00:24:58,880 Framework hintersteckt und wie du halt gerade richtig das ist n 494 00:24:58,880 --> 00:25:02,960 paar Zeilen CSS und das hat es dann für mich auch irgendwie so 495 00:25:02,960 --> 00:25:05,280 spaßig gemacht und so und so schnell gemacht das zu bauen, 496 00:25:05,760 --> 00:25:08,080 weil ich bin aber am Anfang genau das Problem reingelaufen 497 00:25:08,080 --> 00:25:10,000 was du geschrieben hattest. Es war halt irgendwie type 498 00:25:10,000 --> 00:25:12,800 Script und es war React und da musste ich mir beim ersten Mal 499 00:25:12,800 --> 00:25:15,000 ich bin nicht in dieser Welt zu Hause, ich mach das jetzt nicht 500 00:25:15,000 --> 00:25:16,560 jeden Tag mit webtechnologien ich. 501 00:25:16,960 --> 00:25:19,280 Macht ganz, ganz viele verschiedene Frameworks und 502 00:25:19,280 --> 00:25:20,560 Probleme. Sprachen immer mal wieder, dass 503 00:25:20,560 --> 00:25:23,280 ich hatte jetzt dieses Ding. OK, ich weiß noch wie ich aus 504 00:25:23,280 --> 00:25:25,360 type Script Dateien dann irgendwie Java Script Dateien 505 00:25:25,360 --> 00:25:28,520 mache, weil die wollte die Prom Extension am Ende haben, aber da 506 00:25:28,520 --> 00:25:29,840 muss ich mich erstmal damit beschäftigen. 507 00:25:29,840 --> 00:25:31,840 Wie ist denn das Setup, dass ich mir irgendwie so einen watcher 508 00:25:31,840 --> 00:25:34,800 Aufsetze, der jedes Mal wenn ich die type Script Datei Speicher 509 00:25:35,040 --> 00:25:37,720 automatisch dieses type script in Java Script transferiert und 510 00:25:37,720 --> 00:25:40,560 in diesen Ordner dann und dann überführt den ich dem Chrome in 511 00:25:40,560 --> 00:25:42,080 den Developer Tools gegeben habe? 512 00:25:43,040 --> 00:25:44,240 Und irgendwann hab ich einfach das einfach. 513 00:25:44,240 --> 00:25:45,560 Als ich das alles rausgeschmissen habe, hab ich 514 00:25:45,560 --> 00:25:47,480 gemerkt, okay in dem Moment, wo du einfach die die Java Script 515 00:25:47,480 --> 00:25:51,920 Datei speicherst updated die sich auch automatisch im Chrome, 516 00:25:51,920 --> 00:25:54,240 also in meinem Fall hab ich Chrome verwendet weil Chrome hat 517 00:25:54,240 --> 00:25:58,040 so Developer Tools für Extension Developer, dann kann man da halt 518 00:25:58,040 --> 00:26:00,760 ne Extension reinladen indem man sie nicht aus dem Store lädt 519 00:26:00,760 --> 00:26:03,320 sondern dem man einfach den Dateipfad in seinem Verzeichnis 520 00:26:03,320 --> 00:26:06,320 System angibt, ist ja okay meine Extension liegt hier. 521 00:26:06,880 --> 00:26:08,280 Und dann wird hier auch eben automatisch genommen. 522 00:26:08,280 --> 00:26:11,760 Und wenn ich da das HTML änder und noch mal neu auf diesen auf 523 00:26:11,760 --> 00:26:13,920 diesen dieses Icon von der Extension klicke, hab ich da 524 00:26:13,920 --> 00:26:16,560 auch das neue HTML und musste mir halt nicht diese ganzen 525 00:26:16,560 --> 00:26:18,560 Prozesse im Hintergrund bauen, die bestimmt doch alle cool und 526 00:26:18,560 --> 00:26:21,200 sinnvoll sind, aber für so n kleines Projekt einfach nicht 527 00:26:21,200 --> 00:26:23,520 nötig waren. Ja, und ich habe tatsächlich 528 00:26:23,520 --> 00:26:28,240 deine Extension dann auch in Edge installiert und es 529 00:26:28,240 --> 00:26:31,520 funktioniert genauso, auch wenn du es jetzt erstmal in Chrome 530 00:26:31,520 --> 00:26:34,240 entwickelt hast. Und das macht es macht es ja 531 00:26:34,240 --> 00:26:36,560 sehr sehr vielseitig. Klar, du hast jetzt noch eine 532 00:26:36,560 --> 00:26:40,480 Aufgabe vor dir, dass für die anderen großen Browser, die noch 533 00:26:40,480 --> 00:26:43,840 am Markt sind, auch noch umzusetzen, die ja nicht auf der 534 00:26:43,840 --> 00:26:46,880 gleichen Engine basieren und einen bisschen anderen Ansatz 535 00:26:46,880 --> 00:26:51,440 fahren, aber ich glaube. Da sieht man schon, wie schnell 536 00:26:51,440 --> 00:26:54,880 man einfach auch zu einer Lösung kommt, weil häufig sind solche 537 00:26:54,880 --> 00:26:57,440 Dinge ja auch vielleicht erstmal Probleme, die man für sich 538 00:26:57,440 --> 00:27:01,600 selber löst, bevor man irgendwie ein Produkt für andere daraus 539 00:27:01,600 --> 00:27:02,800 macht. Ich finde es immer ganz toll, 540 00:27:02,800 --> 00:27:06,400 dass du, wenn du die Probleme für für dich löst, dass dann 541 00:27:06,400 --> 00:27:09,760 immer sofort auf dem Weg machst, dass du die Sachen auch nachher 542 00:27:09,760 --> 00:27:13,760 sofort oder quasi gleichzeitig in die entsprechenden Stores 543 00:27:13,760 --> 00:27:15,360 stellst. Wir hatten ja auch damals über 544 00:27:15,360 --> 00:27:18,640 Deine Mac App gesprochen zur Kalendersynchronisation. 545 00:27:19,120 --> 00:27:22,960 Und jetzt die Browser Extension und ich glaube weiß ich nicht. 546 00:27:22,960 --> 00:27:24,960 Ich glaube was dich reizt ist auf einmal den kompletten 547 00:27:24,960 --> 00:27:27,680 Prozess zu durchlaufen, nicht nur die Entwicklung, sondern 548 00:27:27,680 --> 00:27:30,400 auch zu schauen, wie kriege ich das eigentlich in den Store und 549 00:27:30,400 --> 00:27:33,680 wie kann man das natürlich auch unter die Leute bringen, für wie 550 00:27:33,680 --> 00:27:35,840 viele Leute es nützlich ist. Wirst du uns dann wahrscheinlich 551 00:27:35,840 --> 00:27:39,920 in ein paar Wochen sagen können, nachdem du dann die Statistiken 552 00:27:39,920 --> 00:27:44,400 aus dem Extension Store von Chrome bekommen hast. 553 00:27:45,120 --> 00:27:46,640 Ja, also ich muss natürlich sagen, ich freu mich, aber auch 554 00:27:46,640 --> 00:27:48,640 natürlich wie n wie n kleines Kind, wenn irgendjemand zu mir 555 00:27:48,640 --> 00:27:50,400 kommt und sagt, Ey, ich hab hier dann ne Extension, die löst 556 00:27:50,400 --> 00:27:52,240 genau das Problem was ich auch hatte mega cool. 557 00:27:52,240 --> 00:27:54,400 Ich freu mich natürlich auch wahnsinnig, gib mir auch 558 00:27:54,400 --> 00:27:56,920 irgendwie was, aber genauso wie mit der Kalender Sync App war 559 00:27:56,920 --> 00:27:58,840 das für mich einfach immer so n Ding das ist n persönliches 560 00:27:58,840 --> 00:28:01,360 Problem was ich habe ich kann mir fast nicht vorstellen, dass 561 00:28:01,360 --> 00:28:03,240 ich der einzige Mensch bin, aber ich hab es halt für mich gelöst. 562 00:28:03,240 --> 00:28:05,120 Aber wie du richtig sagst, mir macht es dann da auch irgendwie 563 00:28:05,120 --> 00:28:07,280 Spaß das in die in die Stores zu stellen und. 564 00:28:07,720 --> 00:28:08,960 Das macht man. Ich glaube, das ist gar nicht 565 00:28:08,960 --> 00:28:10,400 ganz normal. Das macht man natürlich erstmal 566 00:28:10,400 --> 00:28:12,160 ne, ich sitze hier an einem Mac, deswegen habe ich diese Kalender 567 00:28:12,160 --> 00:28:14,480 Sync App für Mac OS gebaut. Ich nutze den Chrome basierten 568 00:28:14,480 --> 00:28:17,600 Browser, deswegen habe ich diese Extension für einen für Chrome 569 00:28:17,600 --> 00:28:21,040 basierte Browser gebaut und ich habe überlegen, ich glaube 570 00:28:21,040 --> 00:28:22,880 zumindest von dieser Extension werde ich auch den Code Open 571 00:28:22,880 --> 00:28:25,440 sourcen dann wenn sich da irgendwie mal berufen fühlt den 572 00:28:25,440 --> 00:28:27,280 umzubauen oder irgendwie für einen anderen Browser noch zu 573 00:28:27,280 --> 00:28:30,440 verwenden, dann viel Free. Ich habe auch schon gesehen, 574 00:28:30,440 --> 00:28:33,760 also erstmal ich glaube so die Browserkompatibilität ist. 575 00:28:34,240 --> 00:28:36,480 Erstmal glaub ich recht ähnlich, weil das Web funktioniert ja 576 00:28:36,480 --> 00:28:38,640 jedem Browser gleich. Also die Tatsache, dass man da 577 00:28:38,720 --> 00:28:42,040 so n Java Script, Java Script Snippet injekten kann, wird sich 578 00:28:42,040 --> 00:28:46,480 ja nicht großartig ändern. Ich nutze n paar Chrome eigene 579 00:28:46,480 --> 00:28:48,880 Libraries also also ich hab keine Pakete oder sowas 580 00:28:48,880 --> 00:28:52,480 installiert, aber ich nutze halt Chrome Punkt Storage um den 581 00:28:52,480 --> 00:28:55,280 internen Speicher von Chrome basierten Browsern anzusprechen, 582 00:28:55,280 --> 00:28:57,440 weil ich da ja diese Liste von filterwörtern reinlege. 583 00:28:57,960 --> 00:28:59,840 Und ich habe mich jetzt schon so ein bisschen erkundigt. 584 00:28:59,840 --> 00:29:02,320 Also a ne, du hast ja gesagt, du hast es in Edge installiert, da 585 00:29:02,320 --> 00:29:04,880 scheint diese Chrome Punkt API eben auch zu funktionieren, 586 00:29:04,880 --> 00:29:08,000 wahrscheinlich weil sie Chromium eben basiert ist und daher 587 00:29:08,000 --> 00:29:10,040 kommt. Ich habe mich jetzt mal 588 00:29:10,040 --> 00:29:12,960 angefangen zu informieren, wie würde ich das denn in Safari 589 00:29:12,960 --> 00:29:17,520 umwandeln und da gibt es ein offizielles converting Tool von 590 00:29:17,520 --> 00:29:20,520 Apple die sie nennen es beziehungsweise dass man eine 591 00:29:20,520 --> 00:29:23,360 Web Extension nach Safari konvertieren kann, also sie 592 00:29:23,360 --> 00:29:24,960 nehmen das Wort Chrome nicht in den Mund. 593 00:29:25,680 --> 00:29:28,680 Aber man kannden.de facto eigentlich die Chrome Extension 594 00:29:28,680 --> 00:29:31,360 geben und die bauen dir daraus NX Code Projekt. 595 00:29:31,920 --> 00:29:34,520 Wer jetzt gar keine Ahnung hat wovon wir reden X Code ist die 596 00:29:34,520 --> 00:29:38,080 Entwicklungsumgebung von Apple und auf Safari installiert man 597 00:29:38,320 --> 00:29:41,880 Browser Extension ganz komisch über den App Store, das heißt 598 00:29:41,880 --> 00:29:45,520 ich muss über den normalen Mac OS App Store gehen und kann mir 599 00:29:45,520 --> 00:29:48,120 dann da so wie ich auch Apps installieren würde Safari 600 00:29:48,120 --> 00:29:50,280 Extensions auch installieren, heißt aber auch, dass sie 601 00:29:50,280 --> 00:29:52,480 natürlich dem gleichen Review Prozess folgen und so weiter. 602 00:29:53,200 --> 00:29:57,120 Aber, und auch da scheine ich Chrome Punkt Storage weiter 603 00:29:57,120 --> 00:29:59,840 verwenden zu können. Jetzt basiert der Safari Browser 604 00:29:59,840 --> 00:30:01,640 nicht auf Chromium, aber die werden dann irgendwie eine 605 00:30:01,640 --> 00:30:04,800 Kompatibilitätsebene eingezogen haben, weil die natürlich auch 606 00:30:04,800 --> 00:30:07,680 wollen, dass möglichst viele Extensions konvertiert werden. 607 00:30:08,000 --> 00:30:09,760 Also da gibt es ein offizielles Tool von Apple. 608 00:30:09,760 --> 00:30:11,680 Ich habe jetzt noch nicht ausprobiert, aber man kann 609 00:30:11,680 --> 00:30:14,800 weiterhin Chrome Punkt Storage Extensions irgendwie nehmen, 610 00:30:14,800 --> 00:30:18,080 also es scheint jetzt auch kein Hexenwerk zu sein für Firefox 611 00:30:18,080 --> 00:30:19,920 oder Opera oder andere Browser habe ich mir jetzt noch nicht 612 00:30:19,920 --> 00:30:22,560 angeschaut. Aber wenn das für Safari 613 00:30:22,560 --> 00:30:24,960 wirklich so einfach ist, wie es jetzt gerade aussieht, dann 614 00:30:24,960 --> 00:30:27,280 werde ich es auch zumindest für den Safari veröffentlichen. 615 00:30:27,280 --> 00:30:29,120 Einfach weil ich habe ja auch ein Apple Developer Account noch 616 00:30:29,120 --> 00:30:34,000 von dieser Local Kalender Sync App und werde das dann 617 00:30:34,000 --> 00:30:35,200 vielleicht auch noch irgendwie nutzen. 618 00:30:36,480 --> 00:30:38,680 Aber erstmal wie gesagt fast ein Problem was ich für mich gelöst 619 00:30:38,680 --> 00:30:42,000 habe und das in den Store hochzuladen bei Chrome war jetzt 620 00:30:42,000 --> 00:30:44,280 gar nicht so schwierig, dann macht man einfach eine zip Datei 621 00:30:44,280 --> 00:30:46,520 aus dem ganzen Kram, also aus allen seinen Files plus dem 622 00:30:46,520 --> 00:30:48,000 Manifest plus ein paar Icons und. 623 00:30:48,560 --> 00:30:50,000 Und kann die. Es gibt so ein Chrome Developer 624 00:30:50,000 --> 00:30:52,040 Portal, da meldet man sich mit seinem Google Account an und 625 00:30:52,040 --> 00:30:55,520 lädt das dann hoch, dann dauert das ein paar Tage bis der Review 626 00:30:55,520 --> 00:30:59,280 durch ist und dann erscheint die offizielle im Store und genau 627 00:30:59,600 --> 00:31:02,800 wenn ihr dir jetzt zuhört aussagt bei meiner linkedin 628 00:31:02,800 --> 00:31:06,480 timeline ist voll mit Müll, dann ladet ihr euch gerne runter und 629 00:31:06,640 --> 00:31:09,440 lasst mich gerne wissen ob sie für euch funktioniert und wie 630 00:31:09,440 --> 00:31:11,200 sie für euch funktioniert. Ich habe erstes Feedback schon 631 00:31:11,200 --> 00:31:12,680 bekommen. Jemand hat gesagt, es 632 00:31:12,680 --> 00:31:14,960 funktioniert nicht, wenn man Post repostet. 633 00:31:14,960 --> 00:31:17,520 Also dann scheine ich da diesen Text irgendwie nicht zu 634 00:31:17,520 --> 00:31:21,120 berücksichtigen, sondern nur den Text vom Original Post auch hier 635 00:31:21,600 --> 00:31:26,040 witzigerweise, ich meine diese fast schon müde das zu sagen, 636 00:31:26,040 --> 00:31:28,000 aber auch da hat mir KI wieder geholfen. 637 00:31:28,720 --> 00:31:31,120 Ich habe kurz die Stelle rausgesucht, wo ich den Text von 638 00:31:31,120 --> 00:31:35,440 einem Post Auslese und der KI einfach einfach nur diese Zeile 639 00:31:35,440 --> 00:31:39,120 markiert, der ki gesagt ey. Hier sind mehrere div. 640 00:31:39,120 --> 00:31:42,640 Blöcke in der Klasse Content in diesem Post, die es geben kann, 641 00:31:42,640 --> 00:31:46,640 berücksichtige bitte alle und Zack von Bug Report bis zum fix 642 00:31:47,440 --> 00:31:50,640 60 Sekunden 120 Sekunden vielleicht und das war schon 643 00:31:50,640 --> 00:31:54,120 irgendwie auch crazy Moment also ich weiß es ist ja alles nicht 644 00:31:54,120 --> 00:31:56,320 neu, aber ich habe jedes Mal noch so ein Bruch so ein Brain 645 00:31:56,320 --> 00:31:59,520 explode Moment wenn ich das nicht selber schreiben muss, 646 00:31:59,520 --> 00:32:02,080 dass ich nicht, dass ich einfach sagen muss, es kann sein, dass 647 00:32:02,080 --> 00:32:04,480 das hier mehrfach auftritt, weil es ein Verschachtelter Post ist. 648 00:32:05,280 --> 00:32:07,520 Schreibt mir den Code kurz selber ausprobiert. 649 00:32:07,520 --> 00:32:09,720 Jetzt nicht einfach übernommen, kurz ausprobiert, irgendwie 650 00:32:09,720 --> 00:32:12,960 repost in Post genommen, ah okay funktioniert jetzt auch da 651 00:32:13,120 --> 00:32:15,960 wieder getippt, Update hochgeladen, version 11 ich 652 00:32:15,960 --> 00:32:18,080 konnte dem es war in dem Fall ein Arbeitskollege von mir der 653 00:32:18,160 --> 00:32:21,000 der sich da bei mir gemeldet hatte am Tag drauf oder 2 Tage 654 00:32:21,000 --> 00:32:24,040 später hat sagen Hey guck mal ist ein Update da es hat nur 2 655 00:32:24,040 --> 00:32:26,160 Tage gebraucht weil er eben ein Review dazwischen ist. 656 00:32:26,960 --> 00:32:32,400 Aber schon immer wieder crazy. Ja, was ich in der Diskussion 657 00:32:32,400 --> 00:32:35,680 wieder super spannend finde, ist, dass man noch mal drauf 658 00:32:35,680 --> 00:32:39,040 gestoßen wird, wie toll eigentlich webtechnologien sind, 659 00:32:39,040 --> 00:32:41,480 weil es wirklich n einheitlicher Standard auch über verschiedene 660 00:32:41,480 --> 00:32:46,160 Hersteller hinweg ist. Und du sagst gerade die Apple 661 00:32:46,160 --> 00:32:49,040 spricht jetzt nicht über Chrome Extensions, sondern irgendwie 662 00:32:49,040 --> 00:32:52,000 Web Extensions, weil man da den Wettbewerber nicht erwähnen 663 00:32:52,000 --> 00:32:54,720 möchte, aber am Ende. Sieht man, dass es die gleichen 664 00:32:54,720 --> 00:32:57,920 Technologien dahinter sind, sind alles webtechnologien, ist alles 665 00:32:58,320 --> 00:33:02,440 Java Script und vielleicht an der Stelle auch noch mal die die 666 00:33:02,440 --> 00:33:06,400 User Experience für für Microsoft Edge ist auch 667 00:33:06,400 --> 00:33:09,680 spannend, wenn du auf den Chromewebstore gehst, dann sagt 668 00:33:09,680 --> 00:33:11,760 dir Chrome sofort, wenn du mit Edge da drauf gehst. 669 00:33:11,760 --> 00:33:13,480 Hey, willst du nicht Chrome installieren, dann sagst du nee 670 00:33:13,480 --> 00:33:15,840 möchte ich nicht. Dann gehst du auf die Extension 671 00:33:15,840 --> 00:33:19,680 und dann geht von Edge oben so eine Infoleiste auf und sagt 672 00:33:19,680 --> 00:33:22,840 Hey, willst du diese vielleicht in Edge installieren, weil wenn 673 00:33:22,840 --> 00:33:26,160 du halt in dem Chromewebstore gibt es natürlich nur den Button 674 00:33:26,160 --> 00:33:29,920 Installing Chrome und dann weist dich halt Edge darauf hin, dass 675 00:33:29,920 --> 00:33:33,240 du ja diese Extension für Chrome direkt in deinen Edge 676 00:33:33,240 --> 00:33:36,160 installieren kannst. Und am Ende sieht man da aber 677 00:33:36,160 --> 00:33:41,600 wie eine Kompatibilitäts. Welt dort da auch entstanden ist 678 00:33:41,600 --> 00:33:44,480 und nicht wieder jeder Hersteller irgendwie für Browser 679 00:33:44,480 --> 00:33:47,440 Extensions seine eigenen proprietären Technologien 680 00:33:47,440 --> 00:33:49,920 einsetzt, sondern dass mittlerweile wirklich sehr 681 00:33:49,920 --> 00:33:53,320 standardisiert ist und man da auch mit sehr wenig Aufwand sehr 682 00:33:53,320 --> 00:33:57,680 viele Menschen erreichen kann und von daher durchaus auch für 683 00:33:57,680 --> 00:34:00,760 mich eine spannende Erkenntnis, dass es mittlerweile wirklich 684 00:34:00,760 --> 00:34:04,320 auch einfach ist, solche Extensions zu bauen und von 685 00:34:04,320 --> 00:34:06,720 daher finde ich den Einblick, den du uns gegeben hast super 686 00:34:06,720 --> 00:34:08,400 wertvoll. Ja, total. 687 00:34:08,400 --> 00:34:11,239 Also ich glaube, ich glaube, ich habe jetzt gerade entschieden, 688 00:34:11,239 --> 00:34:13,000 ich werde, ich werde es einfach open sourcen. 689 00:34:13,000 --> 00:34:15,199 Das heißt, wer sich, wer sich jetzt irgendwie, weil wir wollen 690 00:34:15,199 --> 00:34:17,120 ja auch irgendwie ein bisschen was vermitteln in dieser Folge, 691 00:34:17,120 --> 00:34:20,239 wer sich den Code anschauen möchte, ich werde den verlinken 692 00:34:20,239 --> 00:34:22,120 unten ist dann einfach ein Gitter prepositorial und da 693 00:34:22,120 --> 00:34:23,840 sieht man schon, dass es wirklich ein paar Zeilen sind, 694 00:34:24,159 --> 00:34:26,440 es kann sein, dass ich mich in der Zwischenzeit wieder 695 00:34:26,440 --> 00:34:29,080 entschließe, doch type Script zu verwenden, weil ich einfach ein 696 00:34:29,080 --> 00:34:31,199 großer Fan davon bin, so ein bisschen typsicher zu haben, 697 00:34:32,080 --> 00:34:34,800 aber alles andere wird man sehen können, dass es wirklich auf 698 00:34:34,800 --> 00:34:37,040 diesen, auf diese 4 Dateien nur hinausläuft. 699 00:34:37,520 --> 00:34:40,679 Das heißt ja, wer Lust hat, sich die Extension anzugucken oder 700 00:34:40,679 --> 00:34:43,040 vielleicht sogar zu erweitern oder neues Feature hinzuzufügen 701 00:34:43,040 --> 00:34:46,560 oder die auf den, wenn ihr jetzt sagt, Ich bin absoluter Firefox 702 00:34:46,560 --> 00:34:49,440 Fan, ich würde das für dich in Firefox umwandeln bitte ich 703 00:34:49,440 --> 00:34:53,239 nutze kein Firefox in meinem Alltag verlinke ich zusammen mit 704 00:34:53,239 --> 00:34:56,639 der Browser Extension selber auch unten in der Beschreibung 705 00:34:56,639 --> 00:34:59,680 von dieser Folge. Wunderbar, wenn ihr jetzt auch 706 00:34:59,680 --> 00:35:04,000 die Motivation habt, eine eigene Extension zu bauen oder zu Robin 707 00:35:04,000 --> 00:35:08,080 Munnels Extension zu contributen, dann lasst es uns 708 00:35:08,080 --> 00:35:10,360 wissen. Schaut euch das Repo an, gebt 709 00:35:10,360 --> 00:35:13,160 uns auch gerne Feedback zu dieser Folge, vielleicht fällt 710 00:35:13,160 --> 00:35:17,920 euch auch ein spannender Use Case aus eurem Alltag ein, wie 711 00:35:17,920 --> 00:35:20,880 ihr euer und vielleicht auch unser Leben einfacher, schöner, 712 00:35:20,880 --> 00:35:23,680 besser machen könnt. Mit einer Browser Extension, 713 00:35:23,680 --> 00:35:25,360 wenn ihr selber mal eine geschrieben habt. 714 00:35:25,680 --> 00:35:28,320 Lasst es uns auch gerne per E Mail wissen. 715 00:35:28,320 --> 00:35:31,120 Die Kontaktdaten findet ihr wie immer unter dieser Folge. 716 00:35:31,200 --> 00:35:35,080 Wir hoffen euch hat diese Folge gefallen und ihr seid auch in 2 717 00:35:35,080 --> 00:35:38,400 Wochen wieder mit dabei. Der to do Developer Podcast 718 00:35:38,400 --> 00:35:41,760 erscheint alle 2 Wochen auf allen gängigen Podcast 719 00:35:41,760 --> 00:35:45,520 Plattformen und wenn es euch was gebracht hat, lasst uns gerne 720 00:35:45,520 --> 00:35:48,320 eine positive Bewertung da wir freuen uns immer über Sterne 721 00:35:48,320 --> 00:35:51,280 oder auch ein Review auf den Podcast Plattformen. 722 00:35:51,920 --> 00:35:56,760 Eurer Wahl und bis dahin freuen wir uns darüber, dass ihr uns 723 00:35:56,760 --> 00:35:59,840 treu bleibt und wünschen euch ganz viel Erfolg bei der 724 00:35:59,840 --> 00:36:02,480 Entwicklung der ersten eigenen Browser Extension. 725 00:36:03,040 --> 00:36:04,640 Wenn euch die Folge gefallen hat, dann macht's. 726 00:36:04,640 --> 00:36:07,520 Wie viel lieb seid so cool, wie viel lieb und gebt uns auch 727 00:36:07,520 --> 00:36:10,200 gerne einen Kaffee aus. Da gibt es einen Link auch unten 728 00:36:10,200 --> 00:36:13,040 in den Shownotes zu by Meal Coffee, da freuen wir uns auch 729 00:36:13,040 --> 00:36:16,600 über diebisch darüber, wenn wenn wir einen Kaffee von euch von 730 00:36:16,600 --> 00:36:19,120 der Community ausgegeben bekommen, den nutzen wir auch 731 00:36:19,120 --> 00:36:20,880 immer und wenn malte und ich uns persönlich sehen, dann. 732 00:36:21,120 --> 00:36:23,880 Gehen wir davon auch tatsächlich einen Kaffee trinken deswegen, 733 00:36:23,880 --> 00:36:25,840 da freuen wir uns immer sehr und ansonsten freuen wir uns 734 00:36:25,840 --> 00:36:28,240 natürlich, wenn ihr in 2 Wochen wieder dabei seid. 735 00:36:28,560 --> 00:36:31,400 Bis dahin schreibt viel Code, zum Beispiel für eine Browser 736 00:36:31,400 --> 00:36:34,960 Extension, habt eine gute Zeit, macht's gut und bis ganz bald. 737 00:36:35,680 --> 00:36:36,160 Bis dann.