The Chrome extension popup is not working, click events are not handled

Question

I have created a JavaScript variable and when I click on the button it should increment by 1, but its not happening.

Here\'s manifest.json.

Answer 1

Your code is not working because it violates the default Content Security Policy. I've created a screencast of one minute to show what's wrong:

First, I've shown how to debug the problem. Right-click on your popup button, and click on "Inspect popup". After doing that, you will see the following error message:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

This explains that your code is not working, because it violates the default CSP: Inline JavaScript will not be executed. To solve the problem, you have to remove all inline JavaScript from your HTML file, and put it in a separate JS file.

The result is shown below:

hello.html (popup page)

=a
id="do-count">Count

popup.js

var a=0;
function count() {
    a++;
    document.getElementById('demo').textContent = a;
}
document.getElementById('do-count').onclick = count;

Note that I've replaced innerHTML with textContent. Learn to use textContent instead of innerHTML when you intend to change the text. In this simple example it does not matter, but in more complex applications, it might become a security issue in the form of XSS.