0

I'm working on creating a Chrome extension, and I'm having trouble with adding a button with an onclick event listener to a page using Chrome Content Scripts. I did look at a lot of similar posts, including this one which suggests injecting scripts. I injected a script to my content script, and everything I have in the injected script (creating the button on the content page) works, except creating the event listener - nothing happens when I click on the button.
My content script injects a script to manipulate the DOM of the page:

function injectScript() {
 const s = document.createElement('script');
 s.src = chrome.runtime.getURL('readlater.js'); //my inject script
 (document.head || document.documentElement).appendChild(s);
 s.remove();
}

And the injected script creates a button & an event listener:

const btn = document.createElement('button');
btn.setAttribute('id', 'mybtn');
btn.innerHTML = 'click me!';
document.body.append(btn);
console.log(document.getElementById('mybtn')); //the elt is found
document.getElementById('mybtn').addEventListener('click', function () {
  alert('clicked!');
});

I added the inject script to manifest.json, like so: "web_accessible_resources": ["readlater.js"]. The button (or any html I tried) is being created, however, clicking on the button is never registered by the listener. What is the right way of setting up event listeners? Thank you!

Gokce Dilek
  • 67
  • 2
  • 7

1 Answers1

0

You have to tweak this a bit;

document.getElementById('mybtn').addEventListener('click', function () {
  alert('clicked!');
})

to be;

document.addEventListener('click', function(e) {
    if (e.target.matches('#mybtn')) {
        alert('clicked!');
    }
});

That way you can listen for dynamic content. This way it checks for the element upon click rather than on load. I think this is what you are after?

Dexterians
  • 1,011
  • 1
  • 5
  • 12
  • Thanks for the reply! That also didn't work unfortunately. – Gokce Dilek Jul 09 '20 at 03:11
  • Are you able to put together a sample in a fiddle or codepen and I can take a look? That should work. – Dexterians Jul 09 '20 at 03:20
  • Here is a fiddle I put together to show. I've added comments as notes; https://jsfiddle.net/daobvj2h/1/ - In this example, it creates 2 images and you will notice one listener doesn't work where the other does. Excuse my rough mock-up. – Dexterians Jul 09 '20 at 03:31
  • Thanks for the reply - actually, the code I have by itself also works on a fiddle/on codepen. I think that this problem is specifically related to Chrome Content Scripts, rather than the JS/HTML. – Gokce Dilek Jul 09 '20 at 03:53
  • You might be right. I remember in some chrome extensions I made that I had similar issues and either had to come up with a convoluted work around or drop the function entirely. Sorry this didn't help :( – Dexterians Jul 09 '20 at 04:08
  • 1
    Thanks anyways, I will update the post if I find a slightly different approach for it! – Gokce Dilek Jul 09 '20 at 04:58