button in popup.html not working

问题

I have a popup.html, and what I thought was pretty simple listener event.

This is my popup.html:

<!DOCTYPE html>
<html>
<body>
  <button id="button">Starting Now</button>

  <script>
    function blah(){
      alert("blah");
    }

    $(document).ready(function(){ 
      document.getElementById('button').addEventListener("click", blah);
    });
  </script>
</body>
</html>

There's no alert when I press the button; what am I doing wrong?

回答1:

Your code is okay from normal web-page point of view but from the guidelines of Chrome Extension Development you need to check Content Security Policy (CSP) which says:

Inline JavaScript will not be executed. This restriction bans both inline <script> blocks and inline event handlers (e.g. <button onclick="...">).

So, what you can do to test your code is place the script code in a separate .js file and then refer it in your html.

As suggested by Xan in comments about the usage of alert():
In place of alert() you can use simple console.log() if the purpose is only to test the button click or else if you really want pop-up alert like thing then create a modal dialog.

Just for reference only (Probably OP is already aware of it though):

Since you are using jQuery check this guideline also about loading jQuery or other libraries.

来源：https://stackoverflow.com/questions/30418915/button-in-popup-html-not-working

标签

javascript

google-chrome-extension