我正在按照YouTube教程制作chrome扩展程序。
这是清单文件：
{
"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"
]
}
弹出窗口.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>
弹出窗口.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"-->chrome.storage.sync.get('total'， function (budget( {缺少'use strict' 语句 -->chrome.storage.sync.get('total'， function (budget( {'$' 在定义之前使用了 -->$(function({
也是另一个初学者问题。为什么我们仍然使用chrome.storage？我的意思是，如果我们不必同步。为什么我不能只使用普通变量来存储数据。
首先，非错误
我收到以下错误：
在定义之前使用了"chrome"-->
缺少'use strict'语句-->'$'在定义之前使用了-->
这些是 IDE 的警告。在这种情况下，它们是无害的(例如，您的IDE根本不知道Chrome或jQuery API(，并且与您的问题无关。如何修复(或静音(它们取决于 IDE。
请注意，您不应该只依赖它们;毕竟，浏览器是代码的最终"消费者"，拥有最终决定权。请查看扩展程序的调试教程，了解如何访问 Chrome 控制台以获取代码。
现在，对于错误
-
在Chrome扩展程序中使用
submit控件是没有意义的;它们所能实现的只是重新加载页面。将此问题视为规范来源，但TL;DR是使用输入类型button。 -
您的代码中有拼写错误：
var amount = $('amount').val();这应该有
#amount.可悲的是，jQuery只是在这里返回undefined，而不是抛出可见的错误。
接下来，"为什么">
Chrome扩展程序弹出窗口无法在关闭后幸存下来; 它不是简单地隐藏，直到您下次打开时，它每次都会重新打开。有点像刷新页面。所以JS状态不能生存 - 你不能把数据留在那里，并期望它下次仍然存在。
因此，您需要某种形式的存储来实现持久性(除非您在弹出窗口关闭时可以重置所有内容(。chrome.storageAPI 是"最原生"的选择 - 尽管在您的情况下使用sync可能矫枉过正，但您可以侥幸逃脱local。
了解各种存储 API 的优点和缺点非常重要。例如，sync只能存储少量数据，不能非常频繁地写入。这是一个很好的概述。