Function JavaScript between popup.html and popup.js in chrome extension (taking into account message from Background)

Question

I would like to execute function in chrome extension (in popup.js) by clicking on button in a innerHTML.

My code in popup.html is:

<html>
    <head>
        <script src="popup.js"></script>
    </head>

    <body>
        <div id="panier_container"> </div>
    </body>
</html>

My code in popup.js :

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
    if (msg.text === 'results') {
        var panier_container = document.getElementById("panier_container");
        var texte = "<button onclick=\"toto()\"> TOTO </button>";
        panier_container.innerHTML = texte;
     });
});

function toto() {
    alert("toto");
}

When I execute the code, I see the button "TOTO" but when I click on the button, nothing happen. Out of chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { the button execute the function. But inside no.

Is there any error in the console? Chrome should have an Errors button in chrome://extensions. — Josh Lee, Apr 20 '17 at 18:55
That's probably because you can't use any inline js in extensions (onclick="toto()"). I think this is the answer you're looking for. http://stackoverflow.com/a/13592045/ — egvaldes, Apr 20 '17 at 18:55
Multiple issues. Thus, multiple duplicates: [pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it](http://stackoverflow.com/q/9899372), [$(document).ready equivalent without jQuery](http://stackoverflow.com/q/799981), and [onClick within Chrome Extension not working](http://stackoverflow.com/q/13591983) — Makyen, Apr 20 '17 at 20:02
If fact is not the same, because my problem occur inside chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { — Jeremy Bergeret, Apr 21 '17 at 13:58
@JeremyBergeret, It's fine that you have updated the question to make it no longer a duplicate of the two questions which deal with the issue of the page not being ready when your code runs (i.e. not waiting for `DOMContentLoaded`). Most importantly, the edit did not invalidate the answer you already have, as that answer addressed the issue of trying to use an inline `onclick` attribute, which is also what the 3rd duplicate addresses. However, please don't imply that we are wrong to have acted based upon the question and code as it existed at the time (i.e. prior to your edit). — Makyen, Apr 21 '17 at 17:06
NOTE: I don't have the ability to change the list of duplicates, or I would do so, given the change in the question. However, given that this is still a duplicate of the third duplicate target, it should still be closed as a duplicate. — Makyen, Apr 21 '17 at 17:08
You should be viewing the console for your popup. It would have informed you that you were violating the [restrictions of the default Content Security Policy](https://developer.chrome.com/extensions/contentSecurityPolicy#restrictions). Chrome has [various consoles for your extension](http://stackoverflow.com/a/38920982/3773011). You need to be looking for errors/output in all the appropriate consoles. — Makyen, Apr 21 '17 at 17:08

score 2 · Answer 1 · edited May 23 '17 at 12:17

2

I'd suggest attaching the function using JavaScript DOM functions instead of the html onclick attribute. Chrome extensions don't allow inline javascript in the HTML, see this SO question and the Chrome Developer documentation here. What if you gave the button a convenient handle like an id and used .addClickListener() instead?

var panier_container = document.getElementById("panier_container");
var texte = "<button id='totoButton'> TOTO </button>";
panier_container.innerHTML = texte;
document.getElementById("totoButton").addEventListener("click", toto);

function toto() {
  alert("toto");
}

Also worth noting that you might want to move your <script> tag to the end of the <body> or give it an async attribute, because based on the location of the script tag, the #panier_container might not have loaded yet, see the first answer here for an explanation of how the browser interprets script tags.

edited May 23 '17 at 12:17

Community

1
1

answered Apr 20 '17 at 18:56

Ananth Rao

1,222
1
9
17

Thank you for your answer, i just corrige my firts question because the probleme occur when i'm inside chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { – Jeremy Bergeret Apr 21 '17 at 14:01
1

This answer would be better if it addressed *why* using an inline HTML `onclick` handler does not work (see 3rd duplicate for more information). – Makyen Apr 21 '17 at 17:06
@Makyen, I did not found solution in the 3rd duplicate (onClick within Chrome Extension not working). I corriged my code and i put an id whereas onclick. But inside chrome.runtime.onmessage.addlistener, i see the button on the popup, but if i click nothing happen. If i put the same button outside chrome.runtime.onmessage.addlistener, toto occur when i click on the button. In fact i did not understand why it's not working because the dom is loaded, i put document.addEventListener('DOMContentLoaded', function() { – Jeremy Bergeret Apr 22 '17 at 12:42
@JeremyBergeret, As explained in the 3rd duplicate and [The Chrome extension popup is not working, click events are not handled](http://stackoverflow.com/a/17612988) (and many more questions), you can't use inline JavaScript, including HTML like ``. It does not work. Chrome will report an error. If you were looking at the [console for the popup](http://stackoverflow.com/a/38920982/3773011) you would see the error that states this. You need to add the event listener from JavaScript using `addEventListener()` – Makyen Apr 24 '17 at 06:16
I have already done that : delete onclick and replace by "id". I have also add EventListerner. I will ask my question in an other topic, because my question is different from the first one now – Jeremy Bergeret Apr 24 '17 at 13:40
@Makyen very true, I've updated the answer accordingly. Thanks! – Ananth Rao Apr 24 '17 at 16:12
@JeremyBergeret based on your updated question, you'd need to use event delegation since the button isn't necessarily created before you call `getElementById()` to try and access it – Ananth Rao Apr 24 '17 at 16:14

Function JavaScript between popup.html and popup.js in chrome extension (taking into account message from Background)

1 Answers1