Chrome 扩展设置页面 [重复]答案

【问题标题】：Chrome Extension Settings page [duplicate]Chrome 扩展设置页面 [重复]
【发布时间】：2017-02-09 16:06:50
【问题描述】：

我有这段代码（感谢Shah Abax Khan），我想让它成为一个 Chrome 扩展。我写了一个设置/选项页面，但它实际上并没有保存设置。帮忙？

Javascript：

var pretty_fied = false;
var isOn = localStorage.isOn;
var isCapFirst = localStorage.isCapFirst;
var firstLetterPerWord = localStorage.firstLetterPerWord;



function yay() {

    if ($("#on").value == "on") {
        isOn = true;
        localStorage["isOn"] = true;
    }
    else {
        isOn = false;
        localStorage["isOn"] = false;
    }


    if ($("#first").value == "on") {
        isCapFirst = true;
        localStorage["isCapFirst"] = true;
    }
    else {
        isCapFirst = false;
        localStorage["isCapFirst"] = false;
    }


    if ($("#per").value == "on") {
        firstLetterPerWord = true;
        localStorage["firstLetterPerWord"] = true;
    }
    else {
        firstLetterPerWord = false;
        localStorage["firstLetterPerWord"] = false;
    }


};



$('input, textarea').keyup(function () {

    alert(isOn);
    if (isOn) {

        prev = true;

        var value = $(this).val();
        var altText = '';
        for (num = 0; num < value.length; num++) {
            if (num % 2 == 0)
                altText += value[num].toUpperCase();
            else
                altText += value[num].toLowerCase();
        }
        $(this).val(altText);
    }


});

这是 HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Y.A.Y | Options</title>
        <script type="text/javascript" src="/js/caps.js"></script>
    </head>

    <body>
        <h1>Settings</h1>
        <form>

            <label>Enabled: </label>
            <select id="on">
                <option value="on">Yes</option>
                <option value="off">No</option>
            </select>

            </br>

            <label>First Letter:</label>
            <select id="first">
                <option value="on">Capital</option>
                <option value="off">Lowercase</option>
            </select>

            </br>

            <label>Change First Letter of Each </label>
            <select id="per">
                <option value="on">Word</option>
                <option value="off">Sentence</option>
            </select>

            <button id="done" onclick="yay()">Save</button>
        </form>
    </body>
</html>

yay() 应该保存设置，但它没有。

【问题讨论】：

如果你真的愿意，你可以使用 HTML5 localStorage，但不能像 onclick 处理程序那样使用内联 js。当某些东西不工作时，请始终查看 devtools 控制台：您会在那里看到一个错误。

标签： javascript google-chrome-extension local-storage

【解决方案1】：

在 Chrome 扩展程序中，您不应该使用 LocalStorage。用于网站。

像这样使用Chrome Storage：

JavaScript：

var pretty_fied = false;

var isOn;
var isCapFirst;
var firstLetterPerWord;

getData()

function getData() {
    chrome.storage.sync.get( function ( data ) {
        isOn = data.isOn;
        isCapFirst = data.isCapFirst;
        firstLetterPerWord = data.firstLetterPerWord;
    } )
}

function yay() {
    isOn = $("#on").value == "on";
    isCapFirst = $("#first").value == "on";
    firstLetterPerWord = $("#per").value == "on";

    chrome.storage.sync.set( {
        isOn: isOn,
        isCapFirst: isCapFirst,
        firstLetterPerWord: firstLetterPerWord
    } )
}

【讨论】：

在显示“chrome.storage.sync.get(function (data){”的行出现错误。我从未使用过 Chrome 存储。帮助？