4

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.

Improve this question
7
  • Is there any error in the console? Chrome should have an Errors button in chrome://extensions. Commented Apr 20, 2017 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. stackoverflow.com/a/13592045 Commented Apr 20, 2017 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, $(document).ready equivalent without jQuery, and onClick within Chrome Extension not working Commented Apr 20, 2017 at 20:02
  • If fact is not the same, because my problem occur inside chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { Commented Apr 21, 2017 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). Commented Apr 21, 2017 at 17:06

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

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) {
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, 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() {
@JeremyBergeret, As explained in the 3rd duplicate and The Chrome extension popup is not working, click events are not handled (and many more questions), you can't use inline JavaScript, including HTML like <button onclick="toto()"> TOTO </button>. It does not work. Chrome will report an error. If you were looking at the console for the popup you would see the error that states this. You need to add the event listener from JavaScript using addEventListener()
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
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.