Hola chicos, estoy desarrollando una extensión de Chrome. el sitio https://eportal.incometax.gov.in/iec/foservices/#/login
Quiero mostrar un modal cuando se hace clic en el botón. Puedo agregar un detector de eventos al botón, pero no se activa. Necesito ayuda.
<button _ngcontent-fes-c25="" class="large-button-primary width marTop16" disabled=""><span _ngcontent-fes-c25=""> Continue <!----><!----><img _ngcontent-fes-c25="" alt="disabled next icon" class="ng-star-inserted" src="https://static.incometax.gov.in/iec/foservices/assets/buttonIcons/nextIconDisabled.svg"><!----><!----></span></button>En el archivo content.js de su extensión de Chrome, querrá crear y agregar su elemento modal al cuerpo de la página en carga. Puedes hacer eso con algo como:
const modal = document.createElement('h1'); modal.innerText = 'This is the "modal"'; modal.style.visibility = 'hidden'; document.body.appendChild(modal);Luego agregue un detector de eventos al botón usando los selectores de CSS y agregueEventListener
const button = document.querySelector('button.large-button-primary'); button.addEventListener('click', showModal);Y una función que cambia la visibilidad de su modal una vez que se hace clic
const showModal = () => { modal.style.visibility = 'visible'; }; <button _ngcontent-fes-c25="" class="large-button-primary width marTop16"> <span _ngcontent-fes-c25=""> Continue <!----><!----><img _ngcontent-fes-c25="" alt="disabled next icon" class="ng-star-inserted" src="https://static.incometax.gov.in/iec/foservices/assets/buttonIcons/nextIconDisabled.svg" /><!----><!----></span > </button> <script> const button = document.querySelector('button.large-button-primary'); const modal = document.createElement('h1'); modal.innerText = 'This is the "modal"'; modal.style.visibility = 'hidden'; document.body.appendChild(modal); const showModal = () => { modal.style.visibility = 'visible'; }; button.addEventListener('click', showModal); </script>Si el detector de eventos no funciona, probablemente se deba a que está configurando la variable del botón antes de que el botón de destino aparezca en la pantalla, lo que significa que querySelector simplemente regresa indefinido.