如何在 Chrome 扩展中保存切换开关

Question

我正在尝试创建一个 Chrome 扩展程序，它每隔一小时显示一次通知。要接收通知，您必须从弹出菜单中切换开关，但是，现在一旦我切换开关并关闭弹出窗口，然后重新打开弹出窗口，它就会显示开关处于关闭状态。一旦用户打开开关，它应该保持打开状态，直到用户再次将其关闭。顺便说一下，我正在使用 Javascript。有什么帮助吗？

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
}

更新

我已经尝试了所有建议，但每次我重新打开弹出窗口时，开关都会变回关闭状态。我认为这可能与我的 html 有关？我把它包括在下面：

   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';
    }

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

        <div>
            <label class="switch"><input type="checkbox" id="togBtn">
                <div class="slider round"></div>
            </label>
        </div>

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");
                });
            })

Answer 1

您可以使用 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：

这就是您的 background.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');
        }
    });
});

Answer 2

使用存储 API 是持久保存选项值的简单方法。
您需要在用户与该复选框交互时触发 save 功能。主要是绑定点击事件处理程序来保存。

checkbox.addEventListner('click', e=>{
   chrome.storage.local.set({key: value}..........}
})

如何在 Chrome 扩展中保存切换开关

How to save toggle switch in Chrome Extension

javascript

toggle

google-chrome-extension