Set Chrome Storage on Select Change

Question

Currently I have a working block of code for a Chrome Extension, however I have a variety of code blocks which repeat themselves and I am looking to minimise the code required.

document.getElementById('streamSelect').addEventListener('change', function() {
    var t = document.getElementById("streamSelect").value;
    chrome.storage.sync.set({ "streamSelect" : t }, function() {});
}, false)

document.getElementById('volumeSlider').addEventListener('change', function() {
    var u = document.getElementById("volumeSlider").value;
    chrome.storage.sync.set({ "volumeSlider" : u }, function() {});
}, false)

document.getElementById('currentSegment').addEventListener('change', function() {
    var v = document.getElementById("currentSegment").value;
    chrome.storage.sync.set({ "currentSegment" : v }, function() {});
}, false)

document.getElementById('nowPlaying').addEventListener('change', function() {
    var w = document.getElementById("nowPlaying").value;
    chrome.storage.sync.set({ "nowPlaying" : w }, function() {});
}, false)

document.getElementById('lastPlayed').addEventListener('change', function() {
    var x = document.getElementById("lastPlayed").value;
    chrome.storage.sync.set({ "lastPlayed" : x }, function() {});
}, false)

document.getElementById('quickLinks').addEventListener('change', function() {
    var y = document.getElementById("quickLinks").value;
    chrome.storage.sync.set({ "quickLinks" : y }, function() {});
}, false)

document.getElementById('desktopNotifications').addEventListener('change', function() {
    var z = document.getElementById("desktopNotifications").value;
    chrome.storage.sync.set({ "desktopNotifications" : z }, function() {});
}, false)

As a result I have tried to create a smaller code block that listens for a change to any HTML Select element. It is successfully activating on any change done to a Select element and it is also setting the Y and Z variables correctly, however it does not appear to be completing the execution of the Chrome.Storage.Sync.Set line.

var setOptions = ["streamSelect", "volumeSlider", "currentSegment", "nowPlaying", "lastPlayed", "quickLinks", "desktopNotifications"]

$("select").change(function() {
    for(var i = 0; i < setOptions.length; i++) {
        var Y = setOptions[i];
        var Z = document.getElementById(Y).value;
        chrome.storage.sync.set({ Y : Z }, function() {});
    }
})

I'm unsure if I am missing something simple for this but any assistance to get this working would be much appreciated at this time.

tklg · Accepted Answer · 2017-01-21T04:44:36.700

1

With ES6, {[key]: value} will create the key key:

var key = "test";
var obj = {[key]: "value"}; // obj = {test: "value"}

So something like this might work:

$("select").change(function() {
    var id = this.id;
    var val = this.value;
    chrome.storage.sync.set({[id]: val}, function() {});
})

Or, a non-ES6 version:

$("select").change(function() {
    var obj = {};
    obj[this.id] = this.value;
    chrome.storage.sync.set(obj, function() {});
})

edited Jan 21 '17 at 04:44

answered Jan 21 '17 at 02:10

tklg

2,572
2
19
24

this worked perfectly and is such a simple/elegant solution. – BlairSille Jan 21 '17 at 02:22
Is this ES6-specific? If so, that'd be worth noting, and a non-ES6 version would be good to note as well. – Nic Jan 21 '17 at 03:10
Defining variable keys in the object literal is ES6-specific, yes. I've added a non-ES6 version to the answer. – tklg Jan 21 '17 at 04:49

Set Chrome Storage on Select Change

1 Answers1