Question

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

我尝试使用Chrome Storage API，但我无法达到我想要的效果。这是popup.html的图片：

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

我尝试使用localStorage和Chrome Storage 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解决方案，但我无法让它们中的任何一个工作。任何有关解决此问题的帮助都将非常感谢！

Answer 1

查看@Xan said

您刚刚忘记了#
中的$('myonoffswitch').attr('checked', true);

您的webextension需要storage权限。请参阅https://sites.google.com/site/getsnippet/browser/chrome/extensions/storage

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

1 个答案: