Saving settings in popup.html (Chrome extension)

Question

JavaScript

I want to save the state of the checkbox in the popup.html window. Problem: Every time the popup window is opened, the checkbox is reset to the default state. When a checkbox is clicked, its state is stored in localStorage. The problem is to restore the saved state when the popup window is reopened.
What I tried: tk. js just doesn't work like that, I tried to bind the function like this:

document.addEventListener("DOMContentLoaded" , function () {
  document.getElementById("bd").addEventListener( "load" , clickTwo);
});

but there is no reaction to the loading of the element (attached to the body, tried to the checkbox itself). While .addEventListener( "click" , clickCheckBox); works fine. Where to dig?

Answer 1

Just recently I solved a similar problem like this:
I wrote all changes in popup.html to the repository:

var obj = {
   checkbox: 'checked'
};
chrome.storage.local.set(obj);

and on the popup.html download handler I hung reading from the storage:

chrome.storage.local.get('checkbox', function (result) {
    var checkboxState =  result['checkbox'];
    // result['checkbox'] вернёт undefined если такого имени ключа нет в хранилище
    // ... 
});

It should be noted that chrome.storage is ASYNCHRONOUS, and therefore any continuation of work with the result read from the storage must be inside the callback function.