Как сохранить тумблер в расширении Chrome - PullRequest
Новая
       40

Как сохранить тумблер в расширении Chrome

0 голосов
/ 02 августа 2020

Я пытаюсь создать расширение Chrome, которое будет показывать уведомления каждый час. Чтобы получать уведомления, вы должны переключить переключатель во всплывающем меню, однако прямо сейчас, когда я переключаю переключатель и закрываю всплывающее окно, а затем открываю всплывающее окно, он показывает, что переключатель выключен. После того, как пользователь включит переключатель, он должен оставаться включенным, пока пользователь не выключит его снова. Кстати, я использую Javascript. Любая помощь по этому поводу?

image 
if (checkbox.checked) {
    // this means the app is on and should display a notification every hour
} else {
    //this means the app is off and should NOT display a notification every hour
}

Update

I've tried all suggestions yet the everytime I reopen the popup the switch changes back to off. I think it might be something with my html? I have included it below:

   input:checked+.slider:before {
        -webkit-transform: translateX(100px);
        -ms-transform: translateX(100px);
        transform: translateX(90px);
    }

    .slider:after {
        content: 'Turn on notifications';
        color: white;
        display: block;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        font-size: 12px;
        font-family: 'Candara';

    }

    input:checked+.slider:after {
        content: 'Turn off notifications';
    }

+++++++++++++++++++

JS

document.addEventListener('DOMContentLoaded', function () {
    var checkbox = document.querySelector('input[type="checkbox"]');



    checkbox.addEventListener('click', function () {

        if (checkbox.checked) {
          
            checkbox.addEventListener('click', function () {
                chrome.storage.local.set({ 'enabled': checkbox.checked }, 
                 function () {
                    console.log("confirmed");
                });
            })

Ответы [ 2 ]

0 голосов
/ 02 августа 2020

  1. Использование API хранилища - простой способ постоянно сохранять значение параметра.

  2. Вам необходимо активировать функцию save, когда пользователь взаимодействует с этим флажком . В основном это привязка обработчика события щелчка к сохранению. 

checkbox.addEventListner('click', e=>{
   chrome.storage.local.set({key: value}..........}
})
0 голосов
/ 02 августа 2020

Вы можете использовать chrome .storage API для сохранения пользовательских данных, таких как состояние переключателя.

Пример: 

chrome.storage.local.set({key: value}, function() {
    console.log('Value is set to ' + value);
});

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

Обновление №1: на основе вашего примера: 

document.addEventListener('DOMContentLoaded', function () {
    var checkbox = document.querySelector('input[type="checkbox"]');
    chrome.storage.local.get('enabled', function (result) {
        if (result.enabled != null) {
            checkbox.checked = result.enabled;
        }
    });
    checkbox.addEventListener('click', function () {
        console.log(checkbox.checked);
        chrome.storage.local.set({ 'enabled': checkbox.checked }, function () {
            console.log("confirmed");
        });
    });
});

Обновление №2:

Вот как ваш фон. js может выглядеть при использовании API сигнализации и хранилища для запуска уведомления: 

chrome.alarms.get('myAlarm', function (alarm) {
    if (alarm == null) {
        chrome.alarms.create('myAlarm', { periodInMinutes: 1 });
    }
});
chrome.alarms.onAlarm.addListener(function (alarm) {
    chrome.storage.local.get('enabled', function(result) {
        if (result.enabled) {
            console.log('Show notification');
        }
    });
});
...