L’estensione di Chrome non viene caricata nella navigazione del browser su YouTube

Diciamo che ho un’estensione che carica quando arrivi a una pagina video di YouTube. Ho notato che quando si naviga avanti e indietro usando i pulsanti Chrome, l’estensione molto probabilmente non verrà caricata.

Ad esempio, ho 2 file, il manifest:

{ "name": "back forth", "version": "0.1", "manifest_version": 2, "description": "back forth", "permissions": ["storage", "*://www.youtube.com/watch*"], "content_scripts": [ { "matches": ["*://www.youtube.com/watch*"], "js": ["contentscript.js"] } ] } 

e il contentcript

 alert("loaded"); 

L’avviso non viene sempre visualizzato quando si naviga avanti e indietro. Come posso superare questo problema, in modo che l’estensione venga caricata ogni volta?

YouTube ha avviato una prova con la navigazione basata su pushState. In generale, tali navigazioni possono essere rilevate solo all’interno degli script di contenuto mediante l’iniezione di codice che intercetta le chiamate a history.replaceState / history.pushState (o utilizzando l’evento chrome.webNavigation.onHistoryStateUpdated nella pagina di sfondo).

Il resto di questa risposta è specifico per YouTube.
YouTube mostra una barra di avanzamento (rossa) nella parte superiore della pagina durante il caricamento. Questa barra di avanzamento è animata utilizzando una transizione CSS. Poiché gli eventi di transizione sono in bolla, puoi associare un listener di eventi di transizione a e controllare la navigazione in questi casi.

Devi inserire lo script di contenuto su *://www.youtube.com/* anziché su *://www.youtube.com/watch* , perché pushState può essere utilizzato per navigare da / a /watch..

 function afterNavigate() { if ('/watch' === location.pathname) { alert('Watch page!'); } } (document.body || document.documentElement).addEventListener('transitionend', function(/*TransitionEvent*/ event) { if (event.propertyName === 'width' && event.target.id === 'progress') { afterNavigate(); } }, true); // After page load afterNavigate(); 

Nota: questo metodo dipende dal fatto che la barra di avanzamento è inserita. Ogni volta che Google decide di rinominare l’ID della barra di avanzamento o di rimuovere completamente la barra di avanzamento, il codice smetterà di funzionare.

Nota 2: funziona solo per le tabs attive. Se è necessario rilevare le modifiche di navigazione mentre la scheda non è a fuoco, è necessario associare un evento window.onfocus e window.onblur e controllare se document.title è cambiato tra questi eventi.