JustZix funciona en páginas dinámicas (SPA) sin un F5
Cada vez más sitios son aplicaciones de una sola página (SPA): haces clic, la barra de direcciones cambia, pero la página no se carga de nuevo. JustZix no solía notar esos cambios — las reglas emparejadas a una ruta URL solo aparecían tras un F5. Esta entrada explica qué cambió y por qué importa.
Qué significa navegar sin recargar
En un sitio clásico cada transición es una carga fresca del documento. Una SPA, en cambio, intercambia el contenido sobre la marcha y actualiza la dirección mediante history.pushState o replaceState. Así funcionan el panel de Google Ads, muchos paneles de administración y las aplicaciones web modernas.
El problema: reglas "congeladas" en la primera URL
JustZix empareja las reglas con un patrón de URL. Como el script en la página solo comprobaba la URL en los eventos DOMContentLoaded y load, el emparejamiento no se refrescaba tras navegar dentro de una SPA. El botón flotante, las barras de acciones, las ventanas en la página y el CSS inyectado solo aparecían o desaparecían tras recargar la página manualmente.
La solución: tres canales de detección
La extensión ahora detecta la navegación SPA por tres canales: los eventos popstate y hashchange y un observador de los cambios del documento. Todos confluyen en un único guardián barato que compara location.href — el emparejamiento de reglas solo se vuelve a ejecutar cuando la dirección cambió de verdad, así que no carga la página.
Qué te da en la práctica
Las reglas emparejadas a una ruta concreta — por ejemplo solo /campaigns en un panel de anuncios — se activan y desactivan mientras navegas por la aplicación, sin un F5. Lo mismo aplica a las barras de acciones y ventanas fijadas a un patrón de URL.
Consejo: escribe reglas JS resistentes a SPA
La extensión en sí ahora reacciona a los cambios de dirección, pero tu propio código JS también debería. Si una regla modifica elementos que la SPA muestra más tarde, envuelve la lógica en un MutationObserver para que funcione también después de que el contenido se cargue:
// Ejecútalo también después de que la SPA cargue contenido
function applyTweak() {
document.querySelectorAll('.widget').forEach(el => {
el.style.outline = '2px solid #006870';
});
}
applyTweak();
new MutationObserver(applyTweak).observe(document.body, {
childList: true, subtree: true,
});Beneficios
Las reglas funcionan de inmediato, sin recarga manual. El comportamiento es coherente en los paneles SPA — Google Ads, paneles de administración y aplicaciones web. Y el emparejamiento por ruta URL es por fin del todo fiable.
Las reglas ya hechas para muchos sitios están en el catálogo de ejemplos. Instala JustZix y prueba tus reglas en cualquier SPA.
Valora este artículo
Sin valoraciones — sé el primero.