JustZix fonctionne sur les pages dynamiques (SPA) sans F5
De plus en plus de sites sont des applications monopages (SPA) : vous cliquez, la barre d'adresse change, mais la page ne se charge pas à nouveau. JustZix ne remarquait pas de tels changements — les règles associées à un chemin d'URL n'apparaissaient qu'après un F5. Ce billet explique ce qui a changé et pourquoi cela compte.
Ce que signifie la navigation sans rechargement
Sur un site classique chaque transition est un nouveau chargement de document. Une SPA remplace plutôt le contenu à la volée et met à jour l'adresse via history.pushState ou replaceState. C'est ainsi que fonctionnent le panneau Google Ads, beaucoup de tableaux de bord d'administration et les applications web modernes.
Le problème : des règles « figées » sur la première URL
JustZix associe les règles à un motif d'URL. Comme le script dans la page ne vérifiait l'URL qu'aux événements DOMContentLoaded et load, l'association n'était pas rafraîchie après une navigation au sein d'une SPA. Le bouton flottant, les barres d'actions, les fenêtres dans la page et le CSS injecté n'apparaissaient ou ne disparaissaient qu'après un rechargement manuel de la page.
La correction : trois canaux de détection
L'extension détecte désormais la navigation SPA par trois canaux : les événements popstate et hashchange et un observateur des changements du document. Ils convergent tous vers un seul garde-fou peu coûteux qui compare location.href — la réassociation des règles ne se relance que lorsque l'adresse a réellement changé, donc elle ne charge pas la page.
Ce que cela vous apporte en pratique
Les règles associées à un chemin précis — par exemple uniquement /campaigns dans un panneau publicitaire — s'activent et se désactivent à mesure que vous cliquez dans l'application, sans F5. La même chose vaut pour les barres d'actions et les fenêtres épinglées à un motif d'URL.
Astuce : écrivez des règles JS résistantes aux SPA
L'extension elle-même réagit désormais aux changements d'adresse, mais votre propre code JS devrait aussi le faire. Si une règle modifie des éléments que la SPA rend plus tard, enveloppez la logique dans un MutationObserver pour qu'elle fonctionne aussi après le chargement du contenu :
// S'exécuter aussi après que la SPA a chargé le contenu
function applyTweak() {
document.querySelectorAll('.widget').forEach(el => {
el.style.outline = '2px solid #006870';
});
}
applyTweak();
new MutationObserver(applyTweak).observe(document.body, {
childList: true, subtree: true,
});Avantages
Les règles fonctionnent tout de suite, sans rechargement manuel. Le comportement est cohérent sur les panneaux SPA — Google Ads, tableaux de bord d'administration et applications web. Et l'association par chemin d'URL est enfin pleinement fiable.
Des règles prêtes à l'emploi pour de nombreux sites sont dans le catalogue d'exemples. Installez JustZix et testez vos règles sur n'importe quelle application SPA.
Notez cet article
Aucune note — soyez le premier.