javascript - Chrome 扩展“$ 未定义”

问题描述

我从教程中复制了代码，我想我可能会错过一个新的补充。这是在我的 popup.html 文件中正确链接的 popup.js 文件中。这里的目标是有一个预算跟踪器，将输入添加到“总”ID。

这是我在 popup.js 中使用的代码

$(function() {
  $('#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('');

    });
  });
});

<!DOCTYPE html>
<html>

<head>
  <title>Budget Manager</title>
  <script type="text/javascript" src="popup.js"></script>
  <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>

<body>
  <h1>Budget Manager</h1>
  <h2>Total Spent: <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>

清单.json

{
    "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"
    ]
}

标签： javascript

您在脚本之后加载 jQuery。当你的脚本被执行时，没有 jQuery，所以当时没有定义 $。将弹出窗口移到 jQuery 下方

    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="popup.js"></script>

javascript - Chrome 扩展“$ 未定义”

问题描述

解决方案

推荐阅读