Como desarrolladores y usuarios de Internet, a menudo nos encontramos con sitios web que muestran muchas ventanas emergentes, desde solicitudes de suscripción hasta muros de pago, anuncios, notificaciones, etc.
Muchas veces, usamos esos sitios web a diario para todo tipo de cosas, y ver esas ventanas emergentes una y otra vez se vuelve obsoleto.
Los desarrolladores pueden evitarlos yendo a la consola y encontrando selectores para manipular el modelo de objetos de documento (DOM) del sitio web agregando o modificando CSS o JavaScript.
Pero ahora, gracias a Google Chrome y su tienda de extensiones, cualquiera puede inyectar código en cualquier sitio web automáticamente. Pasaremos al proceso paso a paso en esta pequeña guía.
1. Instalación de la extensión para inyectar el código
Lo siguiente solo se aplica si utiliza Google Chrome. Instale la extensión JavaScript personalizada para sitios web. Esta pequeña extensión le permite ejecutar JavaScript en cualquier sitio web automáticamente y guarda el código para futuras visitas en su navegador web.
Primero, visite el sitio web con molestas ventanas emergentes que usa con frecuencia. Para este tutorial, estoy usando el sitio web de The Washington Post:
2. Ubicación de elementos DOM y creación del código de inyección
Abra sus herramientas de desarrollador de Chrome presionando F12, luego identifique el elemento con la ventana emergente.
En este ejemplo, el iframeelemento con ID wallIframecontiene la ventana emergente con un fondo difuminado en la parte posterior.
Ahora, usaremos un pequeño fragmento de JavaScript para agregar CSS personalizado y comprobar si podemos ocultar la ventana emergente.
/* DOM Manipulation * If you want to update / add single style in DOM Element style attribute you can use this function: * inject javascript after page reloads. */ function setCssStyle(el, style, value) { var result = el.style.cssText.match(new RegExp("(?:[;\\s]|^)(" + style.replace("-", "\\-") + "\\s*:(.*?)(;|$))")), idx; if (result) { idx = result.index + result[0].indexOf(result[1]); el.style.cssText = el.style.cssText.substring(0, idx) + style + ": " + value + ";" + el.style.cssText.substring(idx + result[1].length); } else { el.style.cssText += " " + style + ": " + value + ";"; } } var element = document.getElementById("wallIframe"); setCssStyle(element, "display","none !important");Como puede ver, en el código anterior estamos resaltando el elemento wallIframey ocultándolo agregando CSS en línea.
3. Prueba del código de inyección
Pruebe su código en la consola de desarrolladores de Chrome para asegurarse de que funcione.
Como puede ver arriba, el código funciona.
Ahora es el momento de agregarlo a la extensión, JavaScript personalizado para sitios web y probar si el código funcionará en futuras visitas. Para agregarlo, haga clic con el botón izquierdo en el ícono de la extensión en la barra de direcciones y agregue el fragmento personalizado, luego haga clic en guardar.
La página se recargará inmediatamente para probar y probar el código agregado.
4. El código de inyección no funcionó, ¿ahora qué?
Después de probarlo, el iframe no desapareció como lo hizo cuando lo probamos en la consola. Una de las razones podría ser que el iframe se cargue después de X segundos de carga de la página.
Podríamos buscar en el registro de la red para ver si ese es el caso. Pero como medidas de ahorro de tiempo, vamos a intentar agregar una función de tiempo de espera a nuestro fragmento original para ver si eso ayuda.
setTimeout( function() { function setCssStyle(el, style, value) { var result = el.style.cssText.match(new RegExp("(?:[;\\s]|^)(" + style.replace("-", "\\-") + "\\s*:(.*?)(;|$))")), idx; if (result) { idx = result.index + result[0].indexOf(result[1]); el.style.cssText = el.style.cssText.substring(0, idx) + style + ": " + value + ";" + el.style.cssText.substring(idx + result[1].length); } else { el.style.cssText += " " + style + ": " + value + ";"; } } var element = document.getElementById("wallIframe"); setCssStyle(element, "display", "none !important"); }, 10000);Ahora el código espera 10 segundos antes de ejecutarse y listo , funciona perfectamente .
También puede agregar un detector de eventos para esperar a que la página se cargue por completo.
5. Pensamientos finales
Por ejemplo:
document.addEventListener("DOMContentLoaded", function() { // Your function goes here }Pero, si agregamos el código emergente después de X segundos, la función anterior no funcionará, así que es mejor que se ciña a la función de tiempo de espera.
También puede usar la extensión para agregar muchos otros fragmentos interesantes, como bloquear anuncios, bloquear ventanas emergentes, aumentar la fuente estándar del sitio web, aumentar la capacidad de respuesta, actualizar su apariencia, etc. Una vez que se agregan los fragmentos de JavaScript, siempre se ejecutarán en futuras visitas a esos sitios web.
Un agradecimiento especial a Abbey Rennemeyer de freeCodeCamp por sus comentarios editoriales en la preparación de este artículo.DESCARGO DE RESPONSABILIDAD: Las opiniones expresadas en este artículo son las del autor (es) y no representan las opiniones de Carnegie Mellon University, ni de otras compañías (directa o indirectamente) asociadas con el (los) autor (es). Estos escritos no pretenden ser productos finales, sino más bien un reflejo del pensamiento actual, además de ser un catalizador para la discusión y la mejora.
Puedes encontrarme en: Mi sitio web personal, Medium, Instagram, Twitter, Facebook, LinkedIn oa través de mi empresa de SEO.