Question

我正在关注制作Chrome扩展程序的youtube教程。

这是清单文件：

{
    "manifest_version":2,
    "name":"Budget Manager",
    "version":"1.0",
    "description":"This extension tracks your overall spendings.",
    "icons":{
        "128":"icon128.png",
        "48":"icon48.png",
        "16":"icon16.png"
    },
    "browser_action":{
        "default_icon":"icon16.png",
        "default_popup":"popup.html"
    },
    "permissions": [
        "storage"
    ]
}

popup.html

<!DOCTYPE html>
<html>
    <head>
        <title>Budget Manager</title>
        <script src="jquery-3.2.1.min.js">
        </script>
        <script src="popup.js">
        </script>
    </head>
    <body>
        <h1>Budget Manager</h1>
        <h2>Total Spend: <span id="total">0</span></h2>
        <h2>Limit: <span id="limit"></span></h2>
        <h3>Enter Amount</h3>
        <input type="text" id="amount"/>
        <input type="submit" id="spendAmount" value="Spend">
    </body>
</html>

popup.js

$(function() {   
    chrome.storage.sync.get('total', function (budget) {
        $('#total').text(budget.total);
    });
    $('#spendAmount').click(function() {
        chrome.storage.sync.get('total', function (budget) {
            var newTotal = 0;
            if (budget.total) {
                newTotal += parseInt(budget.total);
            }

            var amount = $('amount').val();
            if(amount) {
                newTotal += parseInt(amount);
            }

            chrome.storage.sync.set({'total': newTotal});

            $('#total').text(newTotal);
            $('#amount').val('');
        });
    });
});

我收到的错误如下：
'chrome'在定义之前使用 - ＆gt; chrome.storage.sync.get（'total'，function（budget）{
缺少'use strict'声明 - ＆gt; chrome.storage.sync.get（'total'，function（budget）{
'$'在定义之前使用 - ＆gt; $（功能）{

另一个初学者问题。为什么我们仍然使用chrome.storage？我的意思是，如果我们不必同步。为什么我不能只使用常规变量来存储数据。

Answer 1

首先，非错误

我收到的错误如下：

＆＃39;铬＆＃39;在定义之前使用 - ＆gt;
  缺少使用严格的＆＃39;声明 - ＆gt;
  ＆＃39; $＆＃39;在定义之前使用 - ＆gt;

这些是您的IDE的警告。在这种情况下它们是无害的（例如，您的IDE根本不了解Chrome或jQuery API）并且与您的问题无关。如何修复（或沉默）它们取决于IDE。

请注意，您不应仅依赖它们;毕竟，浏览器是最终的＆＃34;消费者＆＃34;您的代码并拥有最终发言权。请查看debugging tutorial扩展程序，了解如何访问Chrome代码的控制台。

现在，出现错误

在Chrome扩展程序中使用submit控件并不合理;他们实现的只是重新加载页面。请参阅this question作为规范来源，但TL; DR将使用输入类型button。
您的代码中有拼写错误：
```
var amount = $('amount').val();
```
这应该有#amount。遗憾的是，jQuery只是在这里返回undefined而不是抛出可见的错误。

接下来，＆＃34;为什么＆＃34;

Chrome扩展程序弹出窗口无法关闭;它不会在下次打开之前隐藏，每次都会打开新鲜。有点像刷新页面。因此，JS状态无法生存 - 您无法将数据保存在那里并期望它下次仍然存在。

因此，您需要某种形式的存储空间来保持持久性（除非您在弹出窗口关闭时重置所有内容）。 chrome.storage API是＆＃34;最本土的＆＃34;选择 - 虽然在你的情况下使用sync可能有点矫枉过正，你可以使用local。{/ p>

理解各种存储API的优缺点非常重要。例如，sync只能存储少量数据，并且无法经常写入。这是a good overview。

chrome.storage不保存数据（在定义之前使用了chrome）

1 个答案:

首先，非错误

现在，出现错误

接下来，＆＃34;为什么＆＃34;