Comment puis-je détecter la navigation sur une page YouTube pour mettre à jour dynamiquement le contenu d'une extension Chrome ?

Détection de la navigation dans les pages sur YouTube et modification transparente du contenu

Vous développez une extension Chrome pour calculer et afficher la durée totale des vidéos dans une playlist YouTube, mais le script ne fonctionne qu'après l'actualisation de la page. Pour surmonter cette limitation, il est crucial de détecter la navigation dans les pages de manière transparente et de modifier le DOM en conséquence.

Écouteurs d'événements pour les transitions de page

YouTube ne recharge pas les pages pendant la navigation, mais remplace plutôt l'état historique. Pour détecter cela, plusieurs méthodes sont disponibles :

• Page d'arrière-plan : Utilisez l'API webNavigation ou les onglets dans une page d'arrière-plan ou un service worker MV3.
• Script de contenu avec événement Navigatesuccess : Cet événement est disponible en version moderne Chrome.
• Script de contenu avec l'événement personnalisé de YouTube : YouTube déclenche l'événement « yt-navigate-start » pendant la navigation.

Utilisation de « yt-navigate-start » L'événement -start' offre une approche plus réactive pour modifier le contenu dynamiquement.

Implémentation

manifest.json:

{
  "matches": [ "*://*.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);

processus Fonction :

function process() {
  if (!location.pathname.startsWith('/playlist')) {
    return;
  }
  // Process logic to gather and display total playlist length here
}

En tirant parti de l'événement « yt-navigate-start » et en implémentant la logique de script nécessaire, vous pouvez détecter et répondre efficacement à la navigation des pages sur YouTube, en mettant à jour de manière transparente le contenu de la page sans tout retard ou actualisation 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!