Así que mi amigo y yo estamos haciendo una extensión de Chrome. Para entrar en detalles, es para Roblox Devforum , y hasta ahora, ¡todo bien! Ayer comenzamos, y ya tenemos nuestro botón en el encabezado y demás, similar a Roblox+ o RoPro.

Sin embargo, hay una situación (no necesariamente un error, principalmente un problema de estilo) con el botón. Cada vez que pasa el cursor sobre el botón, aparece un cuadrado blanco en el ícono del botón y se ve horrible, y no sabíamos qué estaba causando el problema, incluso después de revisar varios artículos en Google, lo que nos trae aquí hoy. El código de la extensión es el siguiente:

modificaciones.js:

 function getFirstulWithClass(cssClass) { var elements = document.getElementsByTagName('ul'); for (var i = 0; i < elements.length; i++) { if((' ' + elements[i].className + ' ').indexOf(' ' + cssClass + ' ') > -1) { return elements[i]; } } } var ul = getFirstulWithClass('icons d-header-icons'); if (ul) { ul.innerHTML += ` <li class="header-dropdown-toggle dpp-dropdown"> <a title="DPPSettings" class="icon"> <div> <img src="https://i.imgur.com/suZBJ8y.png" width="45" height="29" title="DSI" class="DSI"> </div> </a> </li> ` }

Para aclarar este código, todo lo que hace es buscar el elemento de encabezado e inyecta ese fragmento de código HTML en el encabezado sin anular el código de encabezado original de Devforum.

Ahora quería agregar una pequeña animación al botón para que se viera muy atractivo, así que agregamos un nuevo archivo llamadomodificaciones.css, y se ve así:

 @keyframes settingsHover { 0% { width: 45px; height: 29px; } 100% { width: 48px; height: 31px; } } .DSI:hover { animation-name: settingsHover; animation-fill-mode: forwards; animation-duration: .01s; }

Todo lo que esto hace es agregar una pequeña animación de ampliación al botón.

Ahora lo unimos en nuestro archivo manifest.json así:

 "content_scripts": [ { "matches": ["https://*.devforum.roblox.com/*"], "css": ["modifications.css"], "js": ["modifications.js"] } ],

Y esto finalmente crea esta extraña caja que no estaba destinada a ser añadida en la programación de esto, que se ve así:

¿Cómo puedo eliminar esto? ¡Cualquier ayuda es muy apreciada!