gpt4 book ai didi

javascript - 在 Chrome 扩展中对 popup.html 进行更改并反射(reflect)

转载 作者:行者123 更新时间:2023-12-01 03:23:50 24 4
gpt4 key购买 nike

我是 Chrome 扩展新手。我正在尝试制作一个基本扩展,每隔几秒钟更新弹出页面中输入字段的值。这是我当前的代码。

list .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"
]

}

布局.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 秒更新一次的值)。

提前致谢。

最佳答案

  1. 请务必阅读 extension architecture overview :弹出窗口是一个单独的页面,仅在显示时才存在。要查看其开发工具和控制台,请右键单击弹出窗口,然后单击“检查”。
  2. 背景/事件页面是一个单独的隐藏页面,具有自己的 DOM,因此无需在那里加载 jQuery。
  3. 您的后台页面可以增加该值并通过 chrome.storage.local.set 存储它
  4. 您的 popup.js(不同的脚本)可以在启动时使用 chrome.storage.local.get 并使用 chrome.storage.onChanged 来检测更改
  5. 如果您每 6 秒唤醒一次事件页面(manifest.json 中的 "persistent": false),则使用它是没有意义的,因为事件页面会在自上次访问后 5 秒后自动卸载激活,这意味着您的事件页面当前每 6 秒卸载一次,仅持续 1 秒。这是对计算机资源的浪费:每次加载浏览器都需要解析它、编译它、优化它等等。

关于javascript - 在 Chrome 扩展中对 popup.html 进行更改并反射(reflect),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44963836/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com