Question

我是Chrome扩展程序的新手。我正在尝试创建一个基本扩展，每隔几秒就会在弹出页面中将值更新为输入字段。这是我目前的代码。

的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秒更新一次）。

提前致谢。

Answer 1

请务必阅读extension architecture overview：弹出窗口是一个单独的页面，仅在显示时才存在。要查看其devtools和控制台，请右键单击弹出窗口，然后单击Inspect。
后台/事件页面是一个独立的隐藏页面，它有自己的DOM，所以不需要在那里加载jQuery。
您的背景页面可以增加值并通过chrome.storage.local.set
您的popup.js（另一个脚本）可以在启动时使用chrome.storage.local.get，chrome.storage.onChanged来检测更改
如果您每隔6秒钟唤醒一次事件页面（"persistent" : false，则无效）因为事件页面自上次激活后5秒后自动卸载，这意味着您当前的事件页面每6秒钟卸载1秒钟。这是浪费计算机资源：每次加载浏览器都需要解析它，编译它，优化它等等。

制作并反映Chrome扩展程序中popup.html的更改

1 个答案: