Heim >Web-Frontend >js-Tutorial >Wie kann ich die Navigation auf YouTube-Seiten nahtlos erkennen und ändern?

Wie kann ich die Navigation auf YouTube-Seiten nahtlos erkennen und ändern?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-04 05:24:11301Durchsuche

How Can I Detect and Modify YouTube Page Navigation Seamlessly?

Nahtlose Seitenänderungen in die YouTube-Navigation integrieren

Seitennavigation auf YouTube erkennen

Anders als herkömmliche Auf Websites, die Seiten beim Navigieren neu laden, verwendet YouTube eine Technik, die den Verlaufsstatus ersetzt und so Inhaltsskripts vermeidet Reinjektion.

Methoden zur Seitenübergangserkennung

Um Seitenübergänge auf YouTube zu erkennen, ziehen Sie diese Methoden in Betracht:

  • Hintergrundskript (MV3 Service Worker): Nutzen Sie die webNavigation API oder die Tabs API.
  • Inhaltsskript und navigationsuccess-Ereignis: Verfügbar im modernen Chrome.
  • Inhaltsskript und benutzerdefiniertes YouTube-Ereignis: Nutzen Sie das 'yt-navigate -start‘ oder ‚yt-navigate-finish‘ Veranstaltung.

Implementierung der Lösung

manifest.json:

{
  "matches": ["*://*.youtube.com/*"],
  "js": ["content.js"],
  "run_at": "document_start"
}

Inhalt. js:

document.addEventListener('yt-navigate-start', process);
if (document.body) process();
else document.addEventListener('DOMContentLoaded', process);

Prozessfunktion für Seitenänderung:

function process() {
  if (!location.pathname.startsWith('/playlist')) return;
  var seconds = [...document.getElementsByClassName('timestamp')]
    .reduce((sum, ts) => {
      const minsec = ts.textContent.split(':');
      return sum + minsec[0] * 60 + minsec[1] * 1;
    }, 0);

  if (!seconds) {
    console.warn('Empty playlist');
    return;
  }

  const timeHMS = new Date(seconds * 1000)
    .toUTCString()
    .split(' ')[4]
    .replace(/^[0:]+/, '');

  document
    .querySelector('.pl-header-details')
    .insertAdjacentHTML('beforeend', `<li>Length: ${timeHMS}</li>`);
}

Das obige ist der detaillierte Inhalt vonWie kann ich die Navigation auf YouTube-Seiten nahtlos erkennen und ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn