Comment puis-je détecter la navigation dans les pages YouTube pour une insertion HTML transparente ?

Détection de la navigation dans une page YouTube pour une insertion HTML transparente

Modifier l'apparence d'une page YouTube de manière transparente peut s'avérer difficile, en particulier lorsque la navigation dans les pages est impliquée . Cela devient évident lorsqu'un script ne fonctionne qu'après l'actualisation de la page, mais pas lors de la navigation sur le site.

Pour résoudre ce problème, il est crucial de détecter la navigation dans les pages sur YouTube. Contrairement aux pages Web traditionnelles qui se rechargent lors de la navigation, YouTube remplace l'état de l'historique, rendant la réinjection de script de contenu inefficace.

Heureusement, plusieurs méthodes existent pour détecter les transitions de page sur YouTube :

1. Page d'arrière-plan ou script Service Worker

Utilisez l'API webNavigation ou les onglets dans une page d'arrière-plan ou un script Service Worker MV3.

2. Script de contenu et événement de succès de navigation

Exploitez un script de contenu dans Chrome moderne qui écoute l'événement de succès de navigation.

3. Script de contenu et événement de navigation YouTube

YouTube propose un événement spécifiquement pour la navigation vidéo : yt-navigate-start. Cet événement est idéal pour détecter les transitions de page.

Implémentation à l'aide yt-navigate-start

manifest.json

{
  "name": "YouTube Playlist Length",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": ".............",
  "content_scripts": [{
      "matches": [ "http://*.youtube.com/*" ],
      "js": [ "content.js" ],
      "run_at": "document_start"
  }]
}

content.js

document.addEventListener('yt-navigate-start', process);

if (document.body) process();
else document.addEventListener('DOMContentLoaded', process);

function process() {
  // Code to alter the page
}

En utilisant l'événement yt-navigate-start, le script de contenu peut détecter la navigation dans les pages et modifier le code HTML de manière transparente, éliminant ainsi tout retard ou besoin de rafraîchissement de la page.

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!