Сохранить значение флажка, расположенного во всплывающем окне, когда пользователь закрывает всплывающее окно

Я пытаюсь создать расширение Chrome, которое записывает пользовательские данные только при установленном флажке (визуально это ползунок, но тем не менее флажок). Однако у меня возникают проблемы с сохранением значения флажка после того, как пользователь щелкнул его. Всякий раз, когда всплывающее окно закрывается, флажок (или ползунок) снова становится неотмеченным.

Я попытался добавить (из background.js) атрибут "checked" в флажок в popup.html, когда значение равно true (отмечено), а затем удалить атрибут, когда значение равно false (не отмечено).

Затем я прочитал что-то, что .attr в jquery больше не поддерживается, и новый способ сделать это (начиная с jquery 3+) - использовать .prop('checked', true);

//background.js
var switchStatus;
chrome.storage.onChanged.addListener(function(changes, areaName){
    console.info('received');
    chrome.storage.local.get('sS', function(status){
        switchStatus = status.sS;
        console.info(switchStatus);

        if (switchStatus === true) {
            $('#togBtn').prop('checked', true);
            chrome.storage.local.set({'sS': true});            
            console.info('when checked ' + switchStatus);
        }
        if (switchStatus === false) {
            $('#togBtn').prop('checked', false);
            chrome.storage.local.set({'sS': false});
            console.info('unchecked ' + switchStatus);
         }
    });
});

//popup.js
$(function() { 
    var switchStatus;
    $("#togBtn").on('change', function() {
         chrome.storage.local.get('sS', function(status){
             switchStatus = status.sS;
         });
        if (($('#togBtn').is(':checked')) === true) {
            switchStatus = $("#togBtn").is(':checked');
            alert(switchStatus); //to verify

            chrome.storage.local.set({'sS': true}, function(){
                alert('saved' + ' : ' + switchStatus);
            });
        }
        if (($('#togBtn').is(':checked')) === false) {
            switchStatus = $("#togBtn").is(':checked');
            alert(switchStatus); //to verify

            chrome.storage.local.set({'sS': false}, function(){
                alert('saved' + ' : ' + switchStatus);
            });
        }   
    });
});

//popup.html
<label class = "switch">
            <input type = "checkbox" id = "togBtn">
            <div class = "slider round" id = "thisthing">
                <span class = "on">ON</span>
                <span class = "off">OFF</span>
            </div>
        </label>

Опять же, я пытаюсь сохранить значение флажка после закрытия всплывающего окна. Поэтому, когда пользователь нажимает на флажок, а ползунок становится зеленым и «включенным», если пользователь щелкнет из всплывающего окна или перейдет на новую вкладку, флажок все равно будет отображаться зеленым и «включенным».