button in popup.html not working

Question

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?

try some of the documentation and tutorials in w3schools.com, great website. http://www.w3schools.com/ . your html code need to know about your javascript, you do not have anything in your html referencing the javascript. — faljbour, May 24 '15 at 01:33
possible duplicate of [The Chrome extension popup is not working, click events are not handled](http://stackoverflow.com/questions/17601615/the-chrome-extension-popup-is-not-working-click-events-are-not-handled) — abraham, May 24 '15 at 06:29
@abraham Duplicate does not fit well - this is a different kind of inline code. There must be a duplicate target, but that ain't it. — Xan, May 24 '15 at 08:30
@imhappi Please check edited answer - earlier on I wrote that `alert` is not allowed `coz of `CSP` but checking the guideline again it does allow `alert` . Thanks @Xan for pointing out — exexzian, May 24 '15 at 08:37
It's the same issue, move inline javascript to separate file. — abraham, May 24 '15 at 19:34

score 4 · Accepted Answer · edited May 23 '17 at 12:06

4

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.

edited May 23 '17 at 12:06

Community

1
1

answered May 24 '15 at 05:24

exexzian

7,782
6
41
52

thanks a lot :) I wasn't aware of the chrome extension guidelines – imhappi May 24 '15 at 05:34
Wrong on "CSP doesn't allow `alert()`", it does not allow `eval()`. However, having a focus-stealing alert window in a focus-sensitive popup is a bad idea anyway. – Xan May 24 '15 at 08:26
@Xan well that depends upon use case – exexzian May 24 '15 at 08:27
I agree with the recommendation to use `console.log()`, but the statement in your answer is wrong. – Xan May 24 '15 at 08:29
@Xan can you plz cite the statement that seemed wrong to you – exexzian May 24 '15 at 08:30
I already did in my first comment. `alert()` is fine with CSP, `eval()` and friends are not. See "should write code like" section in your link, it uses `alert()` - just not explicit or implicit `eval`. – Xan May 24 '15 at 08:31
@Xan ohh my bad.. mistook the code - snippet from the guideline. Thankx for pointing out. Let me quickly edit the answer :) – exexzian May 24 '15 at 08:33
Like I said, using `alert()` is _still bad_, but for other reasons: it can make your popup lose focus and close. Your recommendation is solid - though I'd add instructions to find **Inspect popup**. – Xan May 24 '15 at 08:36
@Xan yeah your point makes sense let me add that part as well – exexzian May 24 '15 at 08:39

button in popup.html not working

1 Answers1

Linked