AniwatchPlus/src/javascript/settings.ts

import { getGlobalStorageProvider } from "./browserApi/storageProvider";
import { onReady } from "./utils/helpers";

const OPTION_SELECTOR = 'input[type="checkbox"';

function storeOptions() {
    document.querySelectorAll(OPTION_SELECTOR).forEach(optionElement => {
        let optionInputElement = optionElement as HTMLInputElement;
        getGlobalStorageProvider().setDataAsBoolean(optionInputElement.id, optionInputElement.checked);
    });
}

function restoreOptions() {
    document.querySelectorAll(OPTION_SELECTOR).forEach(optionElement => {        
        let optionInputElement = optionElement as HTMLInputElement;
        let defaultValue = optionInputElement.dataset.defaultValue === 'true' ? true : false;

        getGlobalStorageProvider().getDataAsBoolean(optionInputElement.id, defaultValue, value => {
            optionInputElement.checked = value;
        });
    });
}

function resetOptions() {
    document.querySelectorAll(OPTION_SELECTOR).forEach(optionElement => {
        let optionInputElement = optionElement as HTMLInputElement;
        let defaultValue = optionInputElement.dataset.defaultValue === 'true' ? true : false;

        optionInputElement.checked = defaultValue;
    });
}

onReady(() => {
    // register Store Button
    document.getElementById('btnSave').addEventListener('click', event => {
        event.preventDefault();
        storeOptions();
    });

    document.getElementById('btnReset').addEventListener('click', event => {
        event.preventDefault();
        resetOptions();
        storeOptions();
    })

    // try restore options
    restoreOptions();

    // update version label
    document.getElementById('version').innerText = `v${chrome.runtime.getManifest().version}`
});