Question

我刚接触扩展，这让我发疯。当我在浏览器中本地加载页面时，我的倒计时工作，但是当我尝试将其作为扩展时，只有html显示，并且javascript不起作用（例如，当我启动扩展时单击开始按钮时，没有任何变化，倒计时永远不会开始。）我把我的代码放在下面，dows它有点与我没有把javascript放在“背景”中吗？我不明白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扩展程序不支持内联JavaScript。 http://developer.chrome.com/extensions/contentSecurityPolicy.html

试试这个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();
}

和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>

倒计时Javascript无法在Chrome扩展程序上运行

1 个答案: