
Quiero aprender a usar las herramientas de desarrollo de Chrome para crear mis propias reglas de bloqueo de anuncios personalizadas de acuerdo con la sintaxis de Ublock/Adblock. Ahora, antes de hacer eso, necesito descubrir cómo funcionan las herramientas de desarrollo de Chrome.
Observe la imagen por favor. Todo este elemento div es lo que quiero bloquear. Lamentablemente, este elemento div viene con una identificación. Dicha identificación es una ensalada aleatoria de números y letras que cambian cada vez que recargas la página.
¿Cómo puedo saber cómo se llama realmente la "identificación" para poder crear una regla de bloqueo solo para esa identificación específica con ese nombre específico?
Puntos de bonificación si puedes mostrarme cómo crear la regla :P
Respuesta1
Si Id
se genera aleatoriamente cada vez, necesita encontrar alguna otra propiedad que sea única para que se conecte ese elemento DOM. Las propiedades del texto no son buenas porque espera que ningún otro nodo use el texto que está filtrando y que no haya traducción basada en la configuración regional.
Dicho esto, lo he usado en este ejemplo porque no estoy seguro de que haya algo mejor en este sitio de AllMusic que estás usando.
Usandoguiones bajosfind
función, puede seleccionar los nodos secundarios document.body
y devolver el primer nodo que contiene "bloque de anuncios" en el texto.
var blockElem = _.find(document.body.childNodes, function (elem) {
return elem.innerText && elem.innerText.toLowerCase().indexOf("ad block") != -1 }
);
Ahora tienes el elemento DOM, que puedes manipular (eliminar, ocultar, etc.).
Una alternativa usandojQueryfilter
función es:
var blockElem = $("body div").filter(function() {
return $(this).text().toLowerCase().indexOf("ad block") != -1;
}).first();
PD.Siento que esta es más una pregunta del tipo StackOverflow.
Respuesta2
Un filtro de ocultación de Adblock Plus consta de dos partes:<domain>##<selector>
La parte del dominio es simplemente una lista de dominios separados por comas en los que se deben ocultar los elementos.
La parte del selector define qué elementos deben ocultarse y sigue elEstándar de selección CSS. Entonces, en lugar de aprender a escribir filtros, sugeriría aprender selectores de CSS porque existen muchos recursos útiles sobre cómo escribirlos.
Por ejemplo, en este caso puede resultar útil saber que puede seleccionar un elemento según su ubicación en el documento. por ejemplo, body > :nth-child(1)
seleccionará el primer elemento del cuerpo. Para selectores más específicos, deberá verificar cuáles de sus características permanecen constantes y cuáles cambian.