Как и где я могу хранить пользовательские настройки с помощью Chrome .storage API в расширении chrome?

Question

Я пытаюсь сохранить значение флажка в файле popup.html. У меня есть две эти функции в моем файле popup.js:

function storeUserPrefs() {
    var isHighlighting = false;
    var highlightedCheckBoxVal = $("#highlightedCheckbox").is(":checked");
    chrome.storage.sync.set({isHighlighting: highlightedCheckBoxVal}, function() {
        console.log("saved " + isHighlighting + "as " + highlightedCheckBoxVal);
    })
}

function getUserPrefs() {
    chrome.storage.sync.get(['isHighlighting'], function(result) {
        console.log('Value is currently ' + result.isHighlighting);
      });
}

Мой первый вопрос:

Если я пытаюсь сохранить значение true / false для переменной isHighlighting и затем установите сохраненное значение на highlightedCheckBoxVal , будут ли эти две функции делать это правильно?

Мой второй вопрос:

Где я могу назвать эти две функции? Должен ли я оставить их в popup.js или поставить их в background.js?

Мой третий вопрос:

Буду ли я использовать Chrome .storage.onChanged функция для обновления этих значений каждый раз, когда флажок установлен / снят?

Любая помощь очень ценится, и, пожалуйста, дайте мне знать, если вам нужна дополнительная информация.

Answer 1

попытка сохранить значение true / false

set () - это нормально.

get () не делает ничего полезного, поэтому для его обратного вызова требуется что-то вроде

$("#highlightedCheckbox").prop('checked', result.isHighlighting)

Где я вызываю эти две функции

Во всплывающем окне.

Фоновый сценарий выполняется на отдельной скрытой фоновой странице с собственным пустым DOM.

использует функцию Chrome .storage.onChanged

Зарегистрируйте прослушиватель change или click, который вызывает set () для сохранения нового значения.

Сделайте это в начале скрипта и добавьте вызов getUserPrefs () к загружать данные каждый раз, когда открывается всплывающее окно:

$("#highlightedCheckbox").change(storeUserPrefs)
getUserPrefs();