Save value of checkbox located in popup window when user closes out of the popup window

Question

I am trying to create a chrome extension that only records user data when the checkbox is checked (visually, it is a slider but a checkbox nonetheless). However, I am having trouble saving the value of the checkbox after a user has clicked it. Whenever the popup closes the checkbox (or slider) goes back to unchecked.

I have tried adding (from background.js) the attribute 'checked' to the checkbox in popup.html when the value is true (checked) and then removing the attribute when the value is false (unchecked).

Then, I read something that the .attr in jquery is no longer supported and the new way to do it (as of jquery 3+) is to use .prop('checked', true);

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

        if(switchStatus === true) {
            $('#togBtn').prop('checked', true);
            chrome.storage.local.set({'sS': true});            
            console.log('when checked ' + switchStatus);
        }
        if(switchStatus === false) {
            $('#togBtn').prop('checked', false);
            chrome.storage.local.set({'sS': false});
            console.log('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>

Again, I'm trying to save the value of the checkbox after the popup is closed. So when a user clicks the checkbox, and the slider switches to green and 'on', if the user were to click out of the popup window or go to a new tab, the checkbox would still show green and 'on'

Is your `switchStatus` variable saving the right status? Looks like you have a `console.log` to check that...does it keep the checkbox value? — Bruno Monteiro, May 28 '19 at 21:28
Yeah, the weird thing is that the ```switchStatus``` variable is working correctly. The problem, as far as I can tell right now, is that even when the checkbox shows as 'off' sometimes, the value for ```switchStatus``` is ```true```.. it's just not saving in popup.js I think — losa22, May 29 '19 at 02:50
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — wOxxOm, May 29 '19 at 05:36
Chrome API callbacks aren't there just for show, but because they are invoked asynchronously, meaning you need to rework your code as shown in the linked [duplicate] topic. — wOxxOm, May 29 '19 at 05:38

score 1 · Accepted Answer · answered May 29 '19 at 04:21

It looks like you can simplify your code a little bit.

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

        if(switchStatus) {
            $('#togBtn').prop('checked', true);
        } else {
            $('#togBtn').prop('checked', false);
        }
    });
});

and

// popup.js
$(function() {
    $("#togBtn").on('change', function(e) {
        if (e.target.checked){
            chrome.storage.local.set({'sS': true}, function(){
                alert('saved: True');
            });
        } else {
            chrome.storage.local.set({'sS': false}, function(){
                alert('saved: False');
            });
        }   
    });

    // I think that you may need to include this to initialize the checkbox.
    // I could be wrong though.
    chrome.storage.local.get('sS', function(status){
        var switchStatus = status.sS;

        if(switchStatus) {
            $('#togBtn').prop('checked', true);
        } else {
            $('#togBtn').prop('checked', false);
        }
    });
});

That fixed my problem. Thank you so much!! – losa22 May 29 '19 at 15:13 — losa22, May 29 '19 at 15:13

Save value of checkbox located in popup window when user closes out of the popup window

1 Answers1