Chrome Extension: Remembering a checkbox value when popup is reopened

Question

Newbie here so sorry if this is pretty elementary. I'm making an extension that simply has a checkbox/switch when loaded. It is to be unchecked the first time you open it but when the extension is closed and reopened, I would like it to display whether it was checked or not.

The checkbox starts a timer in the background.js and unchecking it stops it. I have all this working, except to save the state of the checkbox

Relevant HTML for the popup

<div class="onoffswitch">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="notification" />
            <label class="onoffswitch-label" for="notification">
                <span class="onoffswitch-inner"></span>
                <span class="onoffswitch-switch"></span>
            </label>
        </div>

Relevant part of popup.js

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById("notification").addEventListener('click', runTimer);
    console.log("DOM Loaded");
});

function runTimer() {...

In the html, my checkbox is set to unchecked. I was toying around with putting this into the popup.js

var switchState = document.getElementById("notification").checked;
    chrome.storage.sync.set({
        'value' : switchState
    }, function () {
        console.log("Switch Saved as " + switchState);
    });

I figure that would save the checkbox value so I could use it if I closed and reopened the extension. My issue is though that when I open the extension, the html takes over and creates the checkbox from scratch, unchecked.

How do I override this if I know that the extension has been opened once before and so I should now use the checkbox value from when I last had it open?

Answer 1

You would want to add a background script, that holds the state of the checkbox in a variable.

Storing a variable is also an option.

Answer 2

Deleted my previous response because I see where I went wrong again, code I used is below

function restoreOptions() {
    chrome.storage.sync.get({
        //False is the default value when first opening the extension
        'initialValue' : false
    }, function (items) {
        document.getElementById('notification').checked = items.initialValue;
    });
}

Pretty much exactly what was suggested, as well as what was in the google options page (I did read it but just didn't get it at the time). I missed the bit where the 'initialValue' was set to false if storage didn't have a value which fixed my issue for when I launched the extension for the first time.

It's all prefectly clear now, finally. Thanks again for your help

Answer 3

Copying the code from Google's options example and transforming it to fit your code:

// Restores checkbox state using the preferences stored in chrome.storage.sync
function restoreOptions() {
    // Use default value = false.
    chrome.storage.sync.get({
        value: false
    }, function (items) {
        document.getElementById('notification').checked = items.value;
    });
}

Then your DOMContentLoaded handler becomes:

document.addEventListener('DOMContentLoaded', function () {
    restoreOptions();
    document.getElementById("notification").addEventListener('click', runTimer);
    console.log("DOM Loaded");
});

Note that the use of chrome.storage.sync will store the state of the checkbox across not only different runs of Chrome on your machine, but all those which sync with that person. You may desire to use chrome.storage.local to limit storage of the checkbox state to that machine. In addition, you may desire to clear the state when the extension first runs when Chrome is started.