Kazu: Überprüfen ob Element existiert, auslesen und wiedergeben

Beitrag lesen

Hallo Mitglieder,

Ich sitze derzeit an einem Script der auf der Plattform YouTube das Menü auf der linken Seite erweitert.

Ich habe es geschafft dort Menüpunkte hinzuzufügen, jedoch würde ich ebenfalls gerne anzeigen lassen wie viele neue Nachrichten man im Posteingang hat.

YouTube selbst erstellt, wenn es eine neue Nachricht gibt, dort ein Menüpunkt mit einer Zahl daneben, die der Anzahl der neuen Nachrichten entspricht.

Wenn eine neue Nachricht vorhanden ist wird dies hier generiert:

<a class="guide-item yt-uix-sessionlink" href="/inbox#messages/1" data-sessionlink="ei=CVNTUajLOaOvhgHglIDgCw&amp;feature=g-personal">  
Nachrichten  
                  <span class="guide-count yt-uix-tooltip" title="Neue Nachrichten">1</span>  
  
            </a>

So sieht mein Code derzeit aus, wie bereits gesagt fügt dieser nur Menüpunkte hinzu.

// ==UserScript==  
// @name            Extended YouTube Sidebar  
// @version         1.0.0  
// @author          KazutoTV  
// @description     You will see more options in the sidebar  
// @include	    *.youtube.com/*  
// @updateVersion   0  
// ==/UserScript==  
  
  
var username = document.getElementById('yt-masthead-user-displayname').innerText;  
var newMenu = '';  
  
newMenu += '<ul class="guide-user-links yt-box"><h3><a href="/user/'+ username +'" class="guide-item  narrow-item" data-channel-id="UCcMTfKgGf_7_3HC2hhEjrMw" data-upsell="guide"><span class="display-name">'+ username +'</span></a></h3>';  
newMenu += '<a class="guide-item " href="/my_videos" data-channel-id="watch_later">Video-Manager</a>';  
newMenu += '<a class="guide-item " href="/my_favorites" data-channel-id="watch_later">Favoriten</a>';  
newMenu += '<a class="guide-item " href="/feed/watch_later" data-channel-id="watch_later">Später ansehen</a>';  
newMenu += '<a class="guide-item " href="/feed/history" data-channel-id="history">Verlauf</a>';  
newMenu += '<a class="guide-item " href="/channel/UCcMTfKgGf_7_3HC2hhEjrMw/videos?view=1" data-channel-id="playlists">Playlists</a>';  
newMenu += '<a class="guide-item" href="/inbox" data-channel-id="messages">Posteingang</a>';  
newMenu += '<a class="guide-item" href="/analytics" data-channel-id="messages">Analytics</a>';  
newMenu += '<a class="guide-item" href="http://socialblade.com/youtube/user/'+ username +'" target="_blank">Social Blade</a></ul>';  
  
document.getElementById('gh-personal').innerHTML = newMenu;  
  

Wie kann ich es bewerkstelligen dass überprüft wird ob dieses Element existiert sowie den Wert auslesen und diesen dann wie im Original rechts davon anzeigen lassen?

Ich habe nicht viel Erfahrung in Javascript und dachte mir dass dies Ideal wäre um etwas Javascript zu lernen, habt also bitte Verständnis falls ich etwas nicht direkt verstehen sollte.