在 popup.html Chrome 扩展程序中保存用户首选项答案

【问题标题】：Save user preferences in popup.html Chrome Extension在 popup.html Chrome 扩展程序中保存用户首选项
【发布时间】：2016-09-10 08:09:41
【问题描述】：

我已经完成了 Chrome 扩展程序的主要功能的开发，但我很难在 popup.html 文件中保留用户偏好。因此，我在 popup.html 文件中有一个按钮，该按钮应该是用户首选项，但在重新加载页面并再次单击扩展时，我无法保留用户首选项。

我尝试使用 Chrome 存储 API，但无法实现我想要的。这是popup.html的图片：

如果用户选择在打开和关闭之间切换，我希望能够保存他们的偏好。但是就我现在所拥有的而言，当用户将其滑动（如图所示）时，单击远离弹出窗口并再次单击图标时，该按钮始终默认为“关闭”位置。

我尝试结合使用 localStorage 和 Chrome 存储 API 来加载用户首选项，但我无法这样做。

这是我的 popup.js 文件：

function saveChanges() {
    // Get a value.
    if ($('#myonoffswitch').is(':checked')) {
        localStorage.mydata = 'y';
    } else {
        localStorage.mydata = 'n';
    }
    // Save it using the Chrome extension storage API.
    chrome.storage.sync.set({
        'value': localStorage.mydata
    }, function () {

    });
}

$(document).ready(function () {
    if (localStorage.getItem('mydata')) {
        if (localStorage.mydata == 'n') {
            $('myonoffswitch').attr('checked', false);
        } else {
            $('myonoffswitch').attr('checked', true);
        }
    } else {
        if ($('#myonoffswitch').is(':checked')) {
            localStorage.setItem('mydata', 'y');
        } else {
            localStorage.setItem('mydata', 'n');
        }
    }

    $('#myonoffswitch').click(function () {
        saveChanges();
    });

});

这是我的 popup.html 文件：

<html>

<head>
    <title>Replace some text</title>
    <link rel="stylesheet" type="text/css" href="popup.css">
    <script type='text/javascript' src='jquery-1.12.3.js'></script>
    <script type="text/javascript" src="options.js"></script>
</head>

<body>

    <div>
        <div class='logo'>

        </div>
        <div class='main-text'>

        </div>
        <div class='buttons-area'>
            <div class="onoffswitch">
                <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
                <label class="onoffswitch-label" for="myonoffswitch"></label>
            </div>
            <div class='block-spoilers-message'>
                On Off Button
            </div>
        </div>
    </div>

</body>

</html>

最后，这是我的内容脚本的相关部分：

$(document).ready(function () {

    var on_off_pref = true;

    chrome.storage.onChanged.addListener(function (changes, namespace) {
        for (key in changes) {
            var storageChange = changes[key];
            on_off_pref = storageChange.newValue;
            console.log('Storage key "%s" in namespace "%s" changed. ' +
                'Old value was "%s", new value is "%s".',
                key,
                namespace,
                storageChange.oldValue,
                storageChange.newValue);
        }
    });

    if (on_off_pref === 'y') {
        //Execute main functionality here only if the button in popup.html is on.
    }
});

所以，简而言之，我需要保留 popup.html 上的设置，并在内容脚本中使用这些设置来确定是否运行主要部分。我查看了其他 StackOverflow 解决方案，但我无法让它们中的任何一个工作。任何有关解决此问题的帮助将不胜感激！

【问题讨论】：

投票结束为错字。你只是在$('myonoffswitch').attr('checked', true); 中忘记了#
我最近写了一个模块来管理选项：webext-options-sync。该表单还将自动与保存的选项同步

标签： javascript html google-chrome google-chrome-extension

【解决方案1】：

看看@Xan said

你只是在$('myonoffswitch').attr('checked', true);中忘记了#

您的网络扩展需要storage 权限。见https://sites.google.com/site/getsnippet/browser/chrome/extensions/storage

【讨论】：