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

Question

I've finished developing the main functionality of a Chrome Extension, but I'm struggling to retain the user preferences in the popup.html file. 我已经完成了Chrome扩展程序的主要功能，但我很难在popup.html文件中保留用户首选项。 So, I have a button in the popup.html file which is supposed to be a user preference, but I am not able to retain the user preference upon reloading the page and clicking on the extension again. 所以，我在popup.html文件中有一个按钮，它应该是用户首选项，但是我无法在重新加载页面并再次单击扩展名时保留用户首选项。

I tried using the Chrome Storage API, but I was unable to achieve what I wanted. 我尝试使用Chrome Storage API，但我无法达到我想要的效果。 Here is a picture of popup.html: 这是popup.html的图片：

I want to be able to save a user's preference if they choose to toggle between on and off. 我希望能够保存用户的偏好，如果他们选择在打开和关闭之间切换。 But as of what I have now, when the user slides it on (as indicated in the picture), upon clicking away from the popup and clicking the icon again, the button always defaults to the 'off' position. 但就我现在所做的情况而言，当用户将其滑动时（如图所示），单击弹出窗口并再次单击该图标时，该按钮始终默认为“关闭”位置。

I tried using a combination of localStorage and the Chrome Storage API to load the user preferences, but I was unable to do so. 我尝试使用localStorage和Chrome Storage API的组合来加载用户首选项，但我无法这样做。

Here is my popup.js file: 这是我的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();
    });

});

Here is my popup.html file: 这是我的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>

And finally, here is a relevant part of my content script: 最后，这是我的内容脚本的相关部分：

$(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.
    }
});

So, in short, I need to preserve the settings on popup.html and use those settings in the content script to determine whether or not to run the main part. 因此，简而言之，我需要保留popup.html上的设置，并在内容脚本中使用这些设置来确定是否运行主要部分。 I have looked at the other StackOverflow solutions, but I have not been able to get any of them to work. 我查看了其他StackOverflow解决方案，但我无法让它们中的任何一个工作。 Any help on resolving this issue would be thoroughly appreciated! 任何有关解决此问题的帮助都将非常感谢！

Answer 1

see what @Xan said 看看@Xan说的话

You just forgot # in $('myonoffswitch').attr('checked', true); 你忘记了#在$('myonoffswitch').attr('checked', true);

your webextension needs the storage permission. 你的webextension需要storage权限。 See https://sites.google.com/site/getsnippet/browser/chrome/extensions/storage 请参阅https://sites.google.com/site/getsnippet/browser/chrome/extensions/storage

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

问题描述

1 个解决方案

解决方案1
0 2017-04-26 16:38:25

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

问题描述

1 个解决方案

解决方案1 0 2017-04-26 16:38:25

解决方案1
0 2017-04-26 16:38:25