我正在制作Chrome扩展程序，基本上有一个按钮。该按钮在单击时更改颜色和文本，并在“启用”和“禁用”之间切换。看到这个fiddle的解释，看看我在说什么。
现在我想要的是，一旦我点击按钮并进入禁用状态，它应该保持禁用状态直到再次点击。我该怎么做？
我知道每当打开扩展弹出窗口时，它就像一个新页面，所以我必须使用chrome.storage保存以前的状态，并在每次单击弹出窗口时加载此状态。我在这里得到this ans的一点想法。但我无法完全绕过它。
我的清单：
{
"manifest_version": 2,
"name": "Parental Control",
"description": "This extension allows the user to change the background color of the current page.",
"version": "1.0",
"background":{
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"run_at": "document_start"
},
"permissions": [
"tabs",
"activeTab",
"storage",
"webRequest",
"webRequestBlocking"
],
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["content_script.js"],
"run_at": "document_end"
}
]
}
popup.html：
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<style type="text/css">
body {
width:200px;
height:300px;
white-space: nowrap;
background: linear-gradient(0deg, rgba(248, 246, 242, 0.8), rgba(248, 246, 242, 0.8)), url(back_main.jpg) repeat;
}
</style>
<link href="css/button.css" rel="stylesheet">
<link href="css/logo.css" rel="stylesheet">
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<img src="icon.png" alt="Control" class="center" style="width:80px;height:80px;">
<button class="button" style="vertical-align:middle" id="buttonclick">
<span>Enable Control</span></button>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
popup.js：
document.addEventListener('DOMContentLoaded', function() {
var click = document.getElementById("buttonclick")
click.addEventListener("click", handler);
});
var count = 1;
function handler() {
var property = document.getElementById('buttonclick');
if (count == 0) {
property.style.backgroundColor = "#4f8ff7"
property.innerHTML = "<span>Enable control</span>"
count = 1;
}
else {
property.style.backgroundColor = "#a84237"
property.innerHTML = "<span>Disable control</span>"
count = 0;
}
}
如果我正在正确读取您的代码，您使用'count'就像一个布尔值来指示该按钮是否已启用。你应该能够通过调用来实现保存状态
var obj = {};
obj['buttonState'] = count;
chrome.storage.sync.set(obj, function() {
// this called after the save
}
检索，你只需反过来
chrome.storage.sync.get('buttonState', function(data) {
// this is called after the retrieve.
count = data['buttonState'];
}
你是对的，你需要使用storage.local - 你还需要允许值尚未存储，所以最好的方法是使用get函数的默认值功能：
function handler() {
chrome.storage.local.get({count: 0}, function (result) {
var count = result.count;
var property = document.getElementById('buttonclick');
if (count == 0) {
property.style.backgroundColor = "#4f8ff7"
property.innerHTML = "<span>Enable control</span>"
count = 1;
}
else {
property.style.backgroundColor = "#a84237"
property.innerHTML = "<span>Disable control</span>"
count = 0;
}
chrome.storage.local.set({count: count});
});
}
您可以通过不打扰设置计数和使用来优化
chrome.storage.local.set({count: 1 - count});