La extensión de Chrome no se carga en la navegación del navegador en YouTube

Digamos que tengo una extensión que se carga cuando llegas a una página de videos de YouTube. He notado que cuando uno navega hacia adelante y hacia atrás usando los botones de Chrome, la extensión probablemente no se cargue.

Como ejemplo, tengo 2 archivos, el manifiesto:

{ "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"] } ] } 

y el contenido

 alert("loaded"); 

La alerta no siempre aparece cuando se navega hacia adelante y hacia atrás. ¿Cómo puedo superar esto, de modo que la extensión se cargue siempre?

YouTube ha comenzado una prueba con navegación basada en pushState. En general, tales navegaciones solo se pueden detectar dentro de las secuencias de comandos de contenido mediante la inyección de código que intercepta llamadas a history.replaceState / history.pushState (o mediante el uso del evento chrome.webNavigation.onHistoryStateUpdated en la página de fondo).

El rest de esta respuesta es específica de YouTube.
YouTube muestra una barra de progreso (roja) en la parte superior de la página durante la carga. Esta barra de progreso está animada usando una transición de CSS. Dado que los eventos de transición burbujean, puede vincular un oyente de eventos de transición a y verificar la navegación en estos casos.

Debe insertar su secuencia de comandos de contenido en *://www.youtube.com/* lugar de *://www.youtube.com/watch* , ya que se puede usar pushState para navegar desde / hacia /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: Este método depende del hecho de que la barra de progreso esté insertada. Cuando Google decida cambiar el nombre de la ID de la barra de progreso o eliminar la barra de progreso, su código dejará de funcionar.

Nota 2: Esto solo funciona para tabs activas. Si necesita detectar cambios de navegación mientras la pestaña no está enfocada, entonces debe vincular un evento window.onfocus y window.onblur , y verificar si document.title ha cambiado entre estos eventos.

    Intereting Posts