39

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.

{
  "name":"Facebook",
  "version":"1.0",
  "description":"My Facebook Profile",
  "manifest_version":2,
  "browser_action":{
    "default_icon":"google-plus-red-128.png",
    "default_popup":"hello.html"
  }
}

Here is the code for the html page

<!DOCTYPE html>
<html>
<head>
<script>
var a=0;
function count()
{
  a++;
  document.getElementById("demo").innerHTML=a;
  return a;
}
</script>
</head>
<body>
<p id="demo">=a</p>
<button type="button" onclick="count()">Count</button>
</body>
</html>

I want the extension to show me the value of a and increment it by one each time I click on the extension or the button

picture of the extension

7
  • 1
    You're missing the opening <script type="text/javascript">
    – Timber
    Jul 11, 2013 at 19:20
  • @TimothyOnggowasito that too. (with my answer)
    – Naftali
    Jul 11, 2013 at 19:21
  • @Neal add it to your answer, so that it's more visible :)
    – Timber
    Jul 11, 2013 at 19:22
  • @timothyonggowasito still having the same issue when i click on the extension it shows me =a and the count button and when i click on the count button it stays the same
    – Sainath
    Jul 11, 2013 at 19:25
  • @TimothyOnggowasito Fancy time: jsfiddle.net/maniator/ck5Yz/7 ^_^
    – Naftali
    Jul 11, 2013 at 19:39

2 Answers 2

158

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:

screencast

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)

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="demo">=a</p>
<button type="button" id="do-count">Count</button>
<script src="popup.js"></script>
</body>
</html>

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.

12
  • 33
    +1 for creative graphical GIF :) You've got to teach me how to make those sometime. Jul 13, 2013 at 21:15
  • 3
    @BenjaminGruenbaum It's created using byzanz, I've written shell scripts to ease the use: askubuntu.com/a/201018/45058
    – Rob W
    Jul 13, 2013 at 21:25
  • 1
    @skaz When the popup is closed, the page is unload. If you want to save state, store the data somewhere, e.g. in chrome.storage or in the background page.
    – Rob W
    Feb 17, 2015 at 9:48
  • 3
    @skaz Get rid of the <form>. Now, when you press the button, a form is submitted, causing the page to reload. Or add document.forms[0].onsubmit = function(e){e.preventDefault();};
    – Rob W
    Feb 17, 2015 at 10:06
  • 3
    This is one of the highest quality answers I've ever seen on S/O, and I've been here 6 years
    – toddmo
    Sep 4, 2016 at 17:05
-1

Change your onclick:

onclick="count"

Or change your count function to something like this:

function count()
{

    var demo = document.getElementById("demo");
    return function() {
        demo.innerHTML = ++a;
    }

}

Here is a nice demo I put together:

Code (this assumes that you add id="the_button" to your button):

window.onload = function () {
    var button = document.getElementById("the_button");
    button.onclick = count();

    function count() {
        var a = 0;
        var demo = document.getElementById("demo");
        return function () {
            demo.innerHTML = ++a;
        }
    }
}

Demo: http://jsfiddle.net/maniator/ck5Yz/

6
  • if i change it to count it will not recognize it as a function count() if i'm right
    – Sainath
    Jul 11, 2013 at 19:26
  • @sainath with increment and decrement functions: jsfiddle.net/maniator/ck5Yz/7
    – Naftali
    Jul 11, 2013 at 19:38
  • still my chrome extention is only showing count now and no matter how much i click it still has only one value
    – Sainath
    Jul 11, 2013 at 19:43
  • I have changed the code and it works when i run it as a html file but when i load it to chrome extension and when i click on it here is the manifest { "name":"Facebook", "version":"1.0", "description":"My Facebook Profile", "manifest_version":2, "browser_action":{ "default_icon":"google-plus-red-128.png", "default_popup":"hello.html" } }
    – Sainath
    Jul 11, 2013 at 19:49
  • <!DOCTYPE html> <html> <head> <script> window.onload = function () { var button = document.getElementById("the_button"); button.onclick = count(); function count() { var a = 0; var demo = document.getElementById("demo"); return function () { demo.innerHTML = ++a; } } } </script> </head> <body> <p id="demo">0</p> <button type="button" id="the_button">Count</button> </body> </html>
    – Sainath
    Jul 11, 2013 at 19:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.