Countdown Javascript isn't working on Chrome Extension

Question

I'm new to making extensions and this is driving me crazy. My countdown works when I load the page locally in the browser, but when I try to make it an extension, only the html shows, and the javascript doesn't work (ex. When I click on the start button when launching the extension, nothing changes and the countdown never starts.) I put my code below, dows it have somethning to do with me not putting the javascript in the "background"? I didnt understand that part of the Chrome Docs

    <html>
  <head>
  </head>
  <body>

<script>var countdown;
var countdown_number=10000*3600
var days;
var hours;
var minutes;
var seconds;

function countdown_init() {
    //countdown_number = 11;
    countdown_trigger();
}

function countdown_trigger() {
    if(countdown_number > 0) {
        countdown_number--;
        //store()
        days = Math.floor(countdown_number/(3600*24))
        hours = (Math.floor(countdown_number/(3600))-days*24) % 24;
        minutes = (Math.floor(countdown_number/(60))-hours*60) % 60;
        seconds = (Math.floor(countdown_number)-minutes*60) % 60;
        update_counter();
        if(countdown_number > 0) {
            countdown = setTimeout('countdown_trigger()', 1000);
        }
    }
}

function update_counter(){
     document.getElementById('timer_text').innerHTML = "Days: "+days+"<br>"+
        " Hours: " + hours +"<br>"+" Minutes: " + minutes +"<br>"+" Seconds: " + seconds;
}

function countdown_clear() {
    clearTimeout(countdown);
}

function countdown_reset(){
    countdown_number=10000*3600;
    update_counter();
    clearTimeout(countdown);
}

function writeItem(){
    localStorage[1] = countdown_number;
}

function returnItem() {
    var stored = localStorage[1];
    document.getElementById('item').innerHTML=countdown_number;
  }

function store(){
    writeItem();
}
</script>

<div>
    <h1> 10,000 Hours Timer </h1>
    <input type="button" value="start countdown" onclick="countdown_init()" />
    <input type="button" value="stop countdown" onclick="countdown_clear()" />
    <input type="button" value="reset" onclick="countdown_reset()"/>
    <input type="button" value="store" onclick="store()"/>
    <p id="item">Hi</p>
</div>
<div id="timer_text">Ready To Start?</div>
  </body>
</html>

Answer 1

Chrome extension doesn't support inline JavaScript. http://developer.chrome.com/extensions/contentSecurityPolicy.html

Try this JS:-

document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('#start').addEventListener('click', countdown_init);
  document.querySelector('#stop').addEventListener('click', countdown_clear);
  document.querySelector('#reset').addEventListener('click', countdown_reset);
  document.querySelector('#store').addEventListener('click', store);

});

var countdown_number=10000*3600;
var days;
var hours;
var minutes;
var seconds;
var countdown;

function countdown_init(e) {
    //countdown_number = 11;
    countdown_trigger();
}

function countdown_trigger() {
    if(countdown_number > 0) {
        countdown_number--;
        //store()
        days = Math.floor(countdown_number/(3600*24));
        hours = (Math.floor(countdown_number/(3600))-days*24) % 24;
        minutes = (Math.floor(countdown_number/(60))-hours*60) % 60;
        seconds = (Math.floor(countdown_number)-minutes*60) % 60;
        update_counter();
        if(countdown_number > 0) {
            countdown = setTimeout(countdown_init, 1000);
        }
    }
}

function update_counter(){
     document.getElementById('timer_text').innerHTML = "Days: "+days+"<br>"+
        " Hours: " + hours +"<br>"+" Minutes: " + minutes +"<br>"+" Seconds: " + seconds;
}

function countdown_clear(e) {
    clearTimeout(countdown);
}

function countdown_reset(e){
    countdown_number=10000*3600;
    update_counter();
    clearTimeout(countdown);
}

function writeItem(){
    localStorage[1] = countdown_number;
}

function returnItem() {
    var stored = localStorage[1];
    document.getElementById('item').innerHTML=countdown_number;
  }

function store(e){
    writeItem();
}

And HTML:-

<div>
    <h1> 10,000 Hours Timer </h1>
    <input type="button" id="start" value="start countdown"  />
    <input type="button" id="stop" value="stop countdown"  />
    <input type="button" id="reset" value="reset" />
    <input type="button" id="store" value="store" />
    <p id="item">Hi</p>
</div>
<div id="timer_text">Ready To Start?</div>

Countdown Javascript isn't working on Chrome Extension

Question

1 answers

solution1
1 ACCPTED 2013-02-21 15:36:02

Countdown Javascript isn't working on Chrome Extension

Question

1 answers

solution1 1 ACCPTED 2013-02-21 15:36:02

solution1
1 ACCPTED 2013-02-21 15:36:02