Question

我正在构建Chrome扩展程序，我在弹出窗口中遇到以下错误。 enter image description here

我明确定义了＆＃39;总计＆＃39;变量并在其中存储来自本地存储的值。但为什么我得到这样的错误？

我想做的事情：

1）我将总变量存储在本地存储中并从popup.js访问它。 2）然后修改popup.html中的<p>元素

这是popup.html和popup.js：

popup.js：

var total,percentage;

chrome.storage.local.get('myVariable', function (items) { 
total = (items.myVariable);
});



percentage = total/7.25;

document.getElementById("total").innerHTML = total;
document.getElementById("percentage").innerHTML = percentage;

popup.html：

<!DOCTYPE HTML>

<html>
  <head>
  <title>Popup page</title>
  </head>
  <body>

  <form name="F1" method="POST">
        TOTAL  : <p id="total"></p>
    PERCENTAGE : <p id="percentage"></p>    
  </form>

  <script src="popup.js">

  </script>

  </body>
</html>

来自我的contentscript.js的片段

 chrome.storage.local.set({
         'myVariable': total;
        });
 chrome.runtime.sendMessage({
     greeting: "myAction"
 });

在background.js中我得到了这个：

chrome.runtime.onMessage.addListener(
    function (request, sender, sendResponse) {
    if (request.greeting == "myAction") {
        collectData();
    }
 });

我们是否应该在访问本地存储之前向popup.js添加一个监听器。我添加并检查但是我得到了相同的结果。这段代码有什么问题？如何实现我的目标？

我的扩展程序的本地存储：

enter image description here

Answer 1

chrome.storage.local.get回调是异步执行的，因此在您尝试使用之前，总数不会被定义。如果将脚本的其余部分移动到回调中，它应该可以工作。

var total,percentage;

chrome.storage.local.get('myVariable', function (items) { 
    total = (items.myVariable);

    percentage = total/7.25;

    document.getElementById("total").innerHTML = total;
    document.getElementById("percentage").innerHTML = percentage;
});

Answer 2

两个主要错误： 1）只是做var x是javascript中的无操作，你必须为它赋值。 2）即使你修复了你有一个更大的bug。存储是异步的，因此在获得结果之前执行'get'之后的行。

如何解决Undefined和Nan？

2 个答案: