3

According to the documentation on Chrome Storage:

https://developer.chrome.com/extensions/storage

This is the proper way to set and get key-value pairs in synchronized storage:

   chrome.storage.sync.set({key: value}, function() {
     console.log('Value is set to ' + value);
   });

   chrome.storage.sync.get(['key'], function(result) {
     console.log('Value currently is ' + result.key);
   });

I have replicated this syntax for my code, but the result.key always ends up as undefined rather than returning the value for the key I specify.

I'm gathering the data for the key-value pair from a context menu, and that works properly. The log within the set operation shows the correct data, so I assume the set itself is working properly as well (but perhaps this is an incorrect assumption?).

For the get operation, I've temporarily forced a variable to 'data1' simply because that is a consistent string that I can select in the context menu to set for testing. But when I attempt to retrieve the value associated with that key, I get undefined.

let repUserSelected = item.selectionText;
let bColor = item.menuItemId;
chrome.storage.sync.set({repUserSelected: bColor}, function() {
          console.log(repUserSelected + ' is set to ' + bColor);
        });
//test - data1 should be a variable in the final code
let repUserTest = 'data1';
chrome.storage.sync.get(['repUserTest'], function(result) {
   console.log('Color for ' + repUserTest + ' currently is ' + result.repUserTest);
        });
});

Here is the console output I am getting:

data1 is set to #ff786f                 background.js:33
Color for data1 currently is undefined  background.js:38
data2 is set to #a0ffbd                 background.js:33
Color for data1 currently is undefined  background.js:38

I have attempted removing the quotes from repUserTest since I didn't want that to evaluate as an actual string in the get, but that didn't change anything. I don't feel like this is an asynchronous issue requiring a callback, because the problem persists even after subsequent sets are performed. But there must be something I'm not understanding about what is happening here, so any help would be appreciated.

2sylbl
  • 31
  • 1
  • Chrome API callbacks aren't there just for show, but because they are invoked asynchronously, meaning you need to rework your code to use the result inside the callback. There are many tutorials and demos for this, [here's one](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call). – wOxxOm May 31 '19 at 16:18
  • I (somewhat) understand why this would happen on the first iteration. I don't at all understand how the value for the data1 key still remains undefined after the second iteration where data2 is set - there's been an intervening time of many seconds since the 2nd iteration doesn't come about until further user input. – 2sylbl May 31 '19 at 18:29
  • Not sure what "iteration" means here. This is how asynchronous code works, the callbacks are like one-time event listeners that are invoked in no particular order at some point in the future. You need to understand the concept using a tutorial or the link I gave. – wOxxOm May 31 '19 at 18:48
  • Oh, I see, this question is probably a duplicate of [dynamic keys for object literals in Javascript](//stackoverflow.com/q/6500573) or [How to use a variable for a key in a JavaScript object literal?](//stackoverflow.com/q/2274242) – wOxxOm May 31 '19 at 18:51

0 Answers0