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

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));
});

})

我正在努力让 '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));
})

基本上我正在做的是如果它是未定义的，因此默认情况下也将复选框的属性设置为 true

Answer 2

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

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

这还有利于整理选项访问逻辑。

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

Chrome Extension - input Checkbox checked by default

html

javascript

google-chrome

google-chrome-extension

jtogglebutton