Im letzten Teil dieser Reihe wurde sichergestellt, dass das Skript in jedem Bereich auf YouTube funktioniert. Jetzt kümmern wir uns darum, dass die Likes und Dislikes auch für nachgeladene Videos und beim Bereichswechsel angezeigt werden!
Wie bereits erwähnt ist ein weiteres Problem, dass beim Bereichswechsel und auch beim Scrollen, Elemente in das DOM nachgeladen werden, welche bis jetzt nicht verarbeitet werden konnten. Um solche Änderungen zu erkennen und darauf reagieren zu können, wurde ein MutationObserver verwendet. Da es bei einer solch komplexen SPA wie YouTube jedoch auch Änderungen geben kann ohne, dass für uns interessante Elemente verändert wurden, werden neue Video IDs in einem Set gespeichert und die Likes/Dislikes nur abgefragt, wenn die gerade geprüfte ID noch nicht im Set vorhanden ist. Der vollständige Code zum finalen Skript befindet sich hier.
Wir müssen observieren! 🕵️♂️
Initial wird ein neues Set angelegt, um die eindeutigen Video IDs zu halten und die Methode addRootObserver() aufgerufen, um die entsprechenden Observer zu erstellen.
Ziel ist es die Knoten ytd-search und ytd-browse zu observieren, da sich hier die Video Elemente finden. Da beim Ansurfen von YouTube jedoch zuerst nur einer von beiden Knoten existiert, muss auch ein Observer auf deren root Knoten gesetzt werden.
Ich habe mir zuerst den root Knoten gespeichert. Dieser ist immer noch der selbe wie in der vorherigen Version des Skripts. Danach wird sowohl für das Element ytd-search, als auch für ytd-browse die Methode addSubObserver() aufgerufen. Was diese genau macht schauen wir uns gleich an. Als letzter Schritt wird auch der root Knoten observiert, um zu prüfen, ob beim Bereichswechsel das ytd-search, oder das ytd-browse Element hinzugefügt wurden.
Hier kann auch das Prinzip des MutationObserver erklärt werden. Dem Objekt an sich wird eine Funktion übergeben, die als Parameter die Liste alle Veränderungen / Mutation hält, sowie die Referenz auf sich selbst. Innerhalb dieser Funktion wird für jede Veränderung geprüft, ob ein neuer Knoten hinzugekommen ist und ob es sich dabei um ein ytd-search oder ytd-browse Element handelt. Ist dies der Fall, so wird addSubObserver für das Element aufgerufen. Um die Observierung zu starten wird die observe Methode des MutationObserver aufgerufen. Diese benötigt als ersten Parameter den Knoten, der beobachtet werden soll und als zweiten Parameter Optionen, die als Filter dienen. In diesem Fall wird childList: true gesetzt, was bedeutet, dass nur direkte Nachfahren des Zielknoten beobachtet werden.
Hier wird es etwas spannender und komplexer als zuvor. Als kleiner Reminder: die übergebene node ist entweder ein ytd-search oder ein ytd-browse Element. Als Filteroption wird definiert, dass sowohl Änderungen am Attribut role am Zielknoten, als auch Änderungen von Kindknoten als Trigger für den MutationObserver dienen.
Der erste if Block greift, wenn sich das Attribute role am Zielknoten geändert hat und nun den Wert main hält, was wiederum einen Bereichswechsel signalisiert. Hier müssen alle Likes/Dislikes neu geladen werden.
Der zweite if Block greift, wenn neue Kindknoten, also potentielle Videoelemente, hinzugekommen sind. Bevor die Daten abgefragt werden, wird über das Set UNIQUE_IDS geprüft, ob wirklich neue Videoelemente hinzugekommen sind. Ist dies der Fall, werden die Likes/Dislikes Daten wie in den vorherigen Teilen beschrieben abgefragt und angezeigt.
Fazit
Die Intension dieses Skripts war es, schnell zu sehen, ob ein YouTube Video lohnenswert ist oder, ob es sich nur um Clickbait handelt. Im Endeffekt war es aufwändiger als ich mir es eingangs gedacht habe. Vor allem die Datenabfrage über die YouTube API, als auch die Tücken einer SPA waren mir nicht so bewusst. Letztendlich funktioniert das Skript aber wie gewollt, auch wenn die Darstellung der Likes und Dislikes noch Optimierungspotenzial hat.