Saving Chrome Extension Data (with LocalForage)

Question

I'm new to web and chrome extension dev and am trying to use the localForage API to store data for my chrome extension- currently I lose everything everytime I switch to a new tab, but I want the data to stay until the user explicitly clears everything out (so even over multiple sessions, etc.)

I decided to give the localForage api a go (since it's supposed to be like localStorage but simpler) and feel like I'm missing something important- I can setItems/getItems without issues but it's not actually saving any of the data.

How exactly do I make sure my data stays while switching tabs (and over multiple browsing sessions)?

Using localForage.getItem/setItem- this seems to be working as far as using the data but isn't doing anything as far as saving it when I switch tabs

citeUrl(values, function(citation) 
    {
      count++;
      var string = citation[0];
      localforage.setItem(string, [citation[0],citation[1]], function(err, value) 
      {// Do other things once the value has been saved.
        console.log(value[0] + " " + value[1]);
      });
      /*var result = document.getElementById('cite[]');
      result.style.visibility = 'visible'; 
      result.style.display = 'block';
      result.innerHTML = citation[0];
      renderStatus(citation[1]);*/

      for(i = 0; i < count ; i++)
      {
        var newCitation = document.createElement('div');
        localforage.getItem(citation[i], function(err, value)
          {
            newCitation.innerHTML = value[1] + "<br>" + value[0];
          }
        );
        newCitation.style.backgroundColor = "white";
        newCitation.style.marginBottom = "7px";
        newCitation.style.padding = "6px";
        newCitation.style.boxShadow= "0 2px 6px rgba(0,0,0,0.4)";
        newCitation.style.borderRadius = "3px";
        document.getElementById("answered[]").appendChild(newCitation);
      }
    }

Perhaps try https://developer.chrome.com/extensions/storage – Daniel Herr Jan 25 '16 at 23:02 — Daniel Herr, Jan 25 '16 at 23:02

score 0 · Answer 1 · edited May 23 '17 at 11:59

localForage is built upon localStorage and friends. The important part is that it is bound to the origin in which you access it.

Using it from a content script uses the website's origin, e.g. using your extension on http://example.com/test will bind the data to http://example.com/ origin, and using your extension on http://example2.com/test will bind the data to a completely independent store attached to origin http://example2.com/. What's more, the data is shared with (and may interfere with) the page's own storage.

As such, using localStorage (and by extension, localForage) does not allow for intended results in a content script (though it may be still useful if you're trying to manupulate the page's own storage).

So, there are 2 possiblities to do it correctly:

If you must use it at all, use localForage in the background script. In that case, the data is bound to origin chrome-extension://yourextensionidhere. However, this is not accessible from content scripts - you'll need to pass data using Messaging, which is tiresome.
Better, extension-specific approach: use native chrome.storage API, which is shared between all parts of the extension. This API specifically exists to address the need-to-pass-data limitations, among other things.
(Win lots of internet points approach) Write a custom driver for localForage using chrome.storage API. This will allow people to use it in Chrome extensions and apps with ease. Which is, apparently, something already attempted.

This question may be of use.

Thanks! I decided to use the chrome.storage API, but for some reason it's not executing the storage.sync parts (at least on the console) until all the other statements are logged- am I doing something wrong? 'getCurrentTabUrl(function(values) {citeUrl(values,function(citation){ var keys = ""+citation[0]; console.log(keys) chrome.storage.sync.set({keys:citation},function() {console.log("yay");}); var m = new Map(); m.set(1,"black"); m.forEach(function (item, key, mapObj) { console.log(item.toString());});' — swetha, Jan 27 '16 at 15:49
sorry didn't realize it would format it so weirdly. Here's a picture: [link] (http://imgur.com/dtTNzM7) it will log the 'key is' statement and the map parts before it logs the 'yay'- is this something weird I should just ignore or is it an actual problem with my code? — swetha, Jan 27 '16 at 15:57
`chrome.storage` is asynchronous. The rest of your code executes before the value is saved and the callback is called. See [this question](http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) for instance for more explanation. — Xan, Jan 27 '16 at 16:28

Saving Chrome Extension Data (with LocalForage)

1 Answers1