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

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.