Chrome Extension Settings page

Question

I have this piece of code(thanks to Shah Abax Khan), and I wanted to make it a Chrome extension. I wrote a settings/options page, but it doesn't actually save the settings. Help?

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


});

And here's the 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() is supposed to save the settings, but it doesn't.

You can use HTML5 localStorage if you really want to, but not inline js like the onclick handler. Always look in the devtools console when something is not working: you'll see an error there. — wOxxOm, Feb 09 '17 at 08:01

Vladimir Kalinichev · Answer 1 · 2017-02-09T08:06:50.603

In Chrome Extension you shouldn't use a LocalStorage. It's for websites.

Use Chrome Storage instead like this:

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

There's an error at the line where it says "chrome.storage.sync.get( function ( data ) {". I've never used Chrome Storage. Help? — Joseph Liu, Feb 09 '17 at 11:49

Chrome Extension Settings page

1 Answers1