製作並反映Chrome擴展中popup.html的更改

我是鉻擴展的新手。我正在嘗試做一個基本的擴展，它每隔幾秒就將值更新到彈出頁面中的輸入字段。這是我目前的代碼。製作並反映Chrome擴展中popup.html的更改

的manifest.json

{ 
"manifest_version": 2, 
"name": "Test extension", 
"version": "1", 
"browser_action": { 
    "default_icon": "tl.png", 
    "default_popup": "layout.html" 
}, 
"background": { 
    "scripts": ["jquery-3.2.1.min.js","addvalues.js"], 
    "persistent": false 
}, 

"permissions": [ 
     "alarms", 
     "tabs", 
     "webNavigation" 
    ] 

}

的layout.html

<html> 
<head> 
    <script src="jquery-3.2.1.min.js"></script> 
    <script src="addvalues.js"></script> 
</head> 

<body> 
    <label for="pfvalue"> Portfolio value </label> 
    <input id="pfvalue" readonly style="border:0; color:#f6931f; font-weight:bold; padding-bottom: 10px;"> 

</body> 
</html>

addvalues.js

$(function() 
{ 
    var i=0; 
    var portvalue; 
    function getData() 
    {  
     portvalue = i;      
     $("#pfvalue").val(portvalue); 
     i++; 
     console.log(portvalue); 
    }  

    getData(); 
    chrome.alarms.create("fetch data",{periodInMinutes: 0.1}); 
    chrome.alarms.onAlarm.addListener(getData);   
});

當我把彈出頁面打開足夠長的時間，輸入值不改變像它應該的那樣。但是，當我關閉並再次打開它時，彈出頁面將重置爲顯示0的初始狀態。我無法弄清楚爲什麼會發生這種情況。

控制檯顯示portvalue的正確值（即每6秒更新一次）。

在此先感謝。

來源

2017-07-07 kd394

請務必閱讀extension architecture overview：彈出窗口是一個單獨的頁面，僅在顯示時存在。要查看它的devtools和控制檯，請右鍵單擊該彈出窗口並單擊檢查。
背景/活動頁面是一個單獨的隱藏頁面，它有自己的DOM，所以不需要在那裏加載jQuery。
你的後臺頁面可以增加值，並將其存儲通過chrome.storage.local.set
你popup.js（不同的腳本）可以使用chrome.storage.local.get啓動和chrome.storage.onChanged能夠檢測到更改
這是毫無意義的使用活動頁面（"persistent" : false在你的manifest.json中），如果你每6秒喚醒它一次，因爲事件頁面自上次激活5秒後自動卸載，這意味着你的事件頁面每6秒鐘只卸載1秒鐘。這是對計算機資源的浪費：每次加載瀏覽器需要解析，編譯，優化等等。

來源

2017-07-07 06:59:47 wOxxOm

製作並反映Chrome擴展中popup.html的更改

回答

相關問題