倒計時Javascript不適用於Chrome擴展程序

我是新來的擴展程序，這讓我瘋狂。當我在瀏覽器中本地加載頁面時，我的倒計時工作正常，但是當我嘗試使其擴展時，只顯示html，並且javascript不起作用（例如，當啓動擴展時單擊開始按鈕時，沒有什麼變化，倒計時從來沒有開始。）我把我的代碼放在下面，它有沒有把JavaScript放在「背景」中呢？我不明白Chrome文檔的一部分倒計時Javascript不適用於Chrome擴展程序

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

來源

2013-02-21 user1987920

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>

來源

2013-02-21 15:36:02

謝謝，這讓我的文字更改爲「天：小時：分鐘：秒」這樣的HTML變，但計時器仍然無法工作。這是否與某些功能（如setTimeout）被Chrome瀏覽器的某些功能阻止有關？ TLDR：倒計時本身還沒有運行 – user1987920 2013-02-21 16:11:54

我已經對你的JS代碼做了些微的修改，試試我的代碼塊，讓我知道如果你面臨任何問題.. – 2013-02-21 16:50:26

它的工作！非常感謝，順便說一句，你從第一次編輯到第二次編輯有什麼變化？我注意到你向函數傳遞了一個變量，這是否有所作爲？ – user1987920 2013-02-21 20:52:14

倒計時Javascript不適用於Chrome擴展程序

回答

相關問題