Hey guys im developing a Chrome extension. the site https://eportal.incometax.gov.in/iec/foservices/#/login
I want to display a modal when the button is clicked I can add a eventlistener to the button but it doesnt get triggered need help
<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>
In the content.js of your Chrome Extension, you'll want to create and append your modal element to the body of the page on load. You can do that with something like:
const modal = document.createElement('h1');
modal.innerText = 'This is the "modal"';
modal.style.visibility = 'hidden';
document.body.appendChild(modal);
Then add event listener to the button using CSS selectors and addEventListener
const button = document.querySelector('button.large-button-primary');
button.addEventListener('click', showModal);
And a function which changes your modal's visibility once it's clicked
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>
If the event listener isn't working, then that's probably because you're setting the button variable before the target button is even on screen, which means the querySelector is just returning undefined.