从Chrome扩展程序选项中创建复选框以保留当前版本

时间:2016-07-16 00:29:16

标签: jquery google-chrome google-chrome-extension

我正在创建一个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>

1 个答案:

答案 0 :(得分:1)

您可以在加载网页后致电chrome.storage.sync.get,检索varMenuSwitch的值并将truefalse设置为$("input:checkbox[name=onoffswitch]")

chrome.storage.sync.get('varMenuSwitch', function (result) {
    $("input:checkbox[name=onoffswitch]").prop('checked', result.varMenuSwitch === '1');
});

您可以将上面的代码包装到触发页面加载事件的某个位置,例如window.onload