Comment puis-je détecter et modifier la navigation sur les pages YouTube de manière transparente ?

Intégration des modifications de page transparentes dans la navigation YouTube

Détection de la navigation de page sur YouTube

Contrairement aux méthodes traditionnelles sites Web qui rechargent les pages lors de la navigation, YouTube utilise une technique qui remplace l'état de l'historique, évitant ainsi le script de contenu réinjection.

Méthodes de détection des transitions de page

Pour détecter les transitions de page sur YouTube, envisagez ces méthodes :

• Script d'arrière-plan (MV3 Service Worker) : Utilisez l'API webNavigation ou les onglets API.
• Script de contenu et événement de succès de navigation : Disponible dans Chrome moderne.
• Script de contenu et événement personnalisé de YouTube : Tirez parti de 'yt-navigate -start' ou 'yt-navigate-finish' événement.

Mise en œuvre de la solution

manifest.json :

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

contenu. js :

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

Fonction de processus pour la page Modification :

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>`);
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!