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

Rob W
  • 341,306
  • 83
  • 791
  • 678
Sainath
  • 979
  • 2
  • 13
  • 22
  • 1
    You're missing the opening ` – Timber Jul 11 '13 at 19:20
  • @TimothyOnggowasito that too. (with my answer) – Naftali Jul 11 '13 at 19:21
  • @Neal add it to your answer, so that it's more visible :) – Timber Jul 11 '13 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 '13 at 19:25
  • @TimothyOnggowasito Fancy time: http://jsfiddle.net/maniator/ck5Yz/7/ ^_^ – Naftali Jul 11 '13 at 19:39
  • Please edit your question to show the whole code. Is that HTML a part of your Chrome extension? If yes, move all inline JavaScript to an external file, see [CSP](https://developer.chrome.com/extensions/contentSecurityPolicy.html). – Rob W Jul 11 '13 at 20:53
  • Hi @RobW i have edited the question let me know if any changes are needed – Sainath Jul 12 '13 at 03:30

2 Answers2

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.

Community
  • 1
  • 1
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • this worked like a charm and can you let me know how to store the number till i close the browser. – Sainath Jul 13 '13 at 04:10
  • @sainath [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Storage#sessionStorage) is your friend. – Rob W Jul 13 '13 at 08:15
  • 33
    +1 for creative graphical GIF :) You've got to teach me how to make those sometime. – Benjamin Gruenbaum Jul 13 '13 at 21:15
  • 3
    @BenjaminGruenbaum It's created using byzanz, I've written shell scripts to ease the use: http://askubuntu.com/a/201018/45058 – Rob W Jul 13 '13 at 21:25
  • Mine keeps on adding one and then quickly resetting to 0. What am I doing wrong? Note that I had to wrap my call in a `window.onload = function () {}` method. – skaz Feb 17 '15 at 09:47
  • 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 '15 at 09:48
  • @RobW I am not closing the popup, just clicking the button over and over, but it resets to zero. Maybe the button click is quickly triggering the closing of the popup? – skaz Feb 17 '15 at 09:56
  • popup.js `window.onload = function () { var button = document.getElementById("do-test"); button.onclick = count(); function count() { var a = 0; var demo = document.getElementById("demo"); return function () { demo.textContent = ++a; } } }` – skaz Feb 17 '15 at 10:01
  • @Robw gui.js ` Test
    0
    Username2: Password:
    `     – skaz Feb 17 '15 at 10:03
  • 3
    @skaz Get rid of the `
    `. 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 '15 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 04 '16 at 17:05
  • @toddmo Thanks for the compliment! – Rob W Sep 04 '16 at 23:06
-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/

Naftali
  • 144,921
  • 39
  • 244
  • 303
  • if i change it to count it will not recognize it as a function count() if i'm right – Sainath Jul 11 '13 at 19:26
  • @sainath with increment and decrement functions: http://jsfiddle.net/maniator/ck5Yz/7/ – Naftali Jul 11 '13 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 '13 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 '13 at 19:49
  • 0 – Sainath Jul 11 '13 at 19:50
  • my aim is to create an extension that will give me the number of times i clicked at the extension and now i'm only getting the button in the popup – Sainath Jul 11 '13 at 19:55