我正在创建一个Google扩展程序,而且我正在从我的扩展程序设置选项页面的步骤。
我使用this website使用css样式复选框创建了一个切换开关。由于我是编程和扩展开发的早期阶段,我有点挣扎但是能够将一些jquery命令附加到复选框开关,以便在它开启时将var设置为1,当它开始时为0。 ;关闭,代码工作得很好,如下:
$("input:checkbox[name=onoffswitch]").change(function() {
if ($(this).is(':checked')) {
chrome.storage.sync.set({'varMenuSwitch': '1'}, function(toggleOn){
console.log('Switch is ON - Var set to 1');
});
} else {
chrome.storage.sync.set({'varMenuSwitch': '0'}, function(toggleOff){
console.log('Switch is OFF - Var set to 0');
});
}
});
现在我只需要保存'并保持复选框开关的当前状态(打开或关闭)以及VAR,当页面加载时,它现在始终为ON。我不知道如何实现这一目标。任何指示?
这是HTML:
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
答案 0 :(得分:1)
您可以在加载网页后致电chrome.storage.sync.get
,检索varMenuSwitch
的值并将true
或false
设置为$("input:checkbox[name=onoffswitch]")
。
chrome.storage.sync.get('varMenuSwitch', function (result) {
$("input:checkbox[name=onoffswitch]").prop('checked', result.varMenuSwitch === '1');
});
您可以将上面的代码包装到触发页面加载事件的某个位置,例如window.onload
。