Tengo un script de usuario (para Chrome) que estoy usando para formatear las páginas de práctica de Duolingo por mí. Simplemente aplica una sola línea de css con
jQ(document).ready(function(){ jQ('#start-button').css({"float": "left", "margin-right": "10em"}); });Y esto funciona bien la primera vez que vengo a la página. Pero usan Ajax para evitar recargas de página. Y la URL cambia , así que si detecto eso, puedo actualizar el cambio de css y no perder el formato con este patrón de navegación del sitio.
¿Alguien sabe una buena manera de detectarlo?
editar: script de usuario completo que implementa la solución popular que varios señalaron al principio (que no funciona):
// ==UserScript== // @name duolingo // @namespace http://your.homepage/ // @version 0.1 // @description reformat /skills to not start timed practice by default // @author You // @include /^https?\:\/\/www\.duolingo\.com\/(skill|practice)?\/?.*/ // @require https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js // @grant none // ==/UserScript== window.jQ=jQuery.noConflict(true); jQ(document).ready(function(){ style_duolingo(); }); jQ(window).bind('hashchange', function() { style_duolingo(); }); jQ(document).ajaxComplete(function() { style_duolingo(); }); function style_duolingo() { jQ('#start-button').css({"float": "left", "margin-right": "10em"}); console.log("Tampermonkey script: wrote css change"); }editar #2:
Proporcione una solución que funcione que no cargue bibliotecas externas (me gustaría saber lo que me falta, no mantenerlo en una caja negra) y resuelva el problema usando eventos (sin solución basada en intervalos). Si los eventos (extrañamente) no se pueden usar, proporcione la solución de corrección y la razón por la cual los eventos no se activan.
Para cambiar la URL, Duolingo usa history.pushstate. Te recomiendo que galambalazs responda a una pregunta similar.
Este es su código:
(function(history){ var pushState = history.pushState; history.pushState = function(state) { if (typeof history.onpushstate == "function") { history.onpushstate({state: state}); } //Custom code here style_duolingo(); return pushState.apply(history, arguments); } })(window.history);Úsalo así:
jQ(document).ready(function(){ jQ(window).bind('hashchange', function() { jQ('#start-button').css({"float": "left", "margin-right": "10em"}); }); });Dado que solo está ajustando el estilo, es mejor que use la extensión de Chrome con estilo que le permite manipular css. Luego agregarías
@-moz-document domain("www.duolingo.com") { #start-button { float: left; margin-right: 10em; } } Nota @-moz-document sigue la convención de estilos de usuario y se puede importar a Chrome. De hecho, ya hay algunos estilos de usuario publicados para Duolingo :)