Question

我开发了Chrome扩展程序，并添加了一个On / Off切换来控制内容脚本的注入。

在我的 popup.html 中，添加了以下div以及一个复选框：

<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>

popup.js 正在设置chrome存储中的'onoffswitch'选项，如下所示：

$(document).ready(function() {
$('#myonoffswitch').on('change', function(e) {

    chrome.storage.sync.set({
        'myonoffswitch': ($(this).is(":checked"))
    }, function() {});
})
chrome.storage.sync.get('myonoffswitch', function(storage) {
    $('#myonoffswitch').prop('checked', (storage.myonoffswitch == true));
})

$('#myonoffswitch2').on('change', function(e) {

    chrome.storage.sync.set({
        'myonoffswitch2': ($(this).is(":checked"))
    }, function() {});
})
chrome.storage.sync.get('myonoffswitch2', function(storage) {
    $('#myonoffswitch2').prop('checked', (storage.myonoffswitch2 == true));
});

}）

我很难在初始Extension安装时将'onoffswitch'设置为默认值。每当添加扩展时，'onoffswitch'都会关闭，尽管'popup.html'下的'checkbox'输入中的'checked'声明。

谢谢你，我做。

Answer 1

如果我理解你的话会这样做：

chrome.storage.sync.get('myonoffswitch', function(storage) {
   $('#myonoffswitch').prop('checked', (typeof storage.myonoffswitch === "undefined" || storage.myonoffswitch == true));
})

基本上我正在做的是，如果它未定义，因此默认情况下也设置复选框的道具也是真的

Answer 2

更明确的方法是在扩展安装回调中设置默认选项：

chrome.runtime.onInstalled.addListener(function (details) {
    if (details.reason === "install") {
        chrome.storage.sync.set({
            'myonoffswitch': true
        }, function() {});
    }
});

这也有利于对选项访问逻辑进行整理。

Chrome扩展程序 - 输入复选框默认选中

2 个答案: