0

I'm building my first chrome extension and I want it to track the TV series I watch and I'm currently trying to get it to save metadata on the series that I am following.

I have a content script that returns the title, the newest episode (and the URL of this episode) as well as the URL of the cover image of the series. I am currently trying to save it with some code on my background script (I have made sure to include "storage" under the permissions section of the manifest file).

Since my app needs to be able to track more than one series, I made an object constructor that stores the metadata I fetch using an object:

function Series(nTitle, nNewEp, nNewEpURL, nImage) {
    this.anTitle = nTitle;
    this.anNewEp = nNewEp;
    this.anNewEpURL = nNewEpURL;
    this.anImage = nImage;
}

I then attempt to save this data via the following code:

var bkg = chrome.extension.getBackgroundPage();
response.aID = new Series(response.aTitle,response.aNewEp,response.aNewEpURL,response.aImage);

                chrome.storage.sync.set(response.aID, function(){
                    chrome.storage.sync.get(response.aID.anTitle, function(val){
                        bkg.console.log("The saved title is: ", val);
                    });
                    chrome.storage.sync.get(response.aID.anNewEp, function(val){
                        bkg.console.log("The saved newEp is: ", val);
                    });
                    chrome.storage.sync.get(response.aID.anNewEpURL, function(val){
                        bkg.console.log("The saved newEpURL is: ", val);
                    });
                    chrome.storage.sync.get(response.aID.anImage, function(val){
                        bkg.console.log("The saved imageURL is: ", val);
                    });
                });

My callback function was designed to check the process and print out the values that I saved. However I have noticed that every value I return is simply an empty JQuery wrapper. I have tried using val[0] instead of val, but that returns "undefined". That makes me think that I am not saving my object properly or that Chrome does not recognise response.aID as an object. So my question is how can I make something like this work?

GaleHalcyon
  • 3
  • 3
  • The code appears to be entirely wrong. Have you seen the [official example](https://developer.chrome.com/extensions/storage)? – wOxxOm Aug 19 '15 at 08:57
  • @wOxxOm, thank you for your response, I did read Google's page on it, but I'm completely new to this so I didn't quite understand it. Now I think I finally get it. – GaleHalcyon Aug 19 '15 at 09:22

1 Answers1

0

Your problem is in the callback :

When you are trying to get response.aID.anTitle, your actually looking for the string set in response.aID.anTitle i.e `"my Awesome Soap".

What you want is to get "anTitle" key of the saved object.

One way is to only get the whole storageArea object and just log your wanted keys : 

 chrome.storage.sync.set(response.aID, function(){
      chrome.storage.sync.get(function(val){
          bkg.console.log("The saved title is: ", val.anTitle);
          bkg.console.log("The saved newEp is: ", val.anNewEp);
          bkg.console.log("The saved newEpURL is: ", val.anNewEpURL);
          bkg.console.log("The saved imageURL is: ", val.anImage);
      });

or if you really want to make so much call to get(): 

   chrome.storage.sync.set(response.aID, function(){
        chrome.storage.sync.get('anTitle', function(val){
          bkg.console.log("The saved title is: ", val);
          });
        chrome.storage.sync.get('anNewEp', function(val){
          bkg.console.log("The saved newEp is: ", val);
          });
        chrome.storage.sync.get('anNewEpURL', function(val){
          bkg.console.log("The saved newEpURL is: ", val);
          });
        chrome.storage.sync.get('anImage', function(val){
          bkg.console.log("The saved imageURL is: ", val);
          });
      });

But this one will return an object, containing only your key and its value, so if you need the value you've got to i.e console.log(val.anTitle)

Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • Thank you so much, that completely solved my problem. I now see that I'd misunderstood what `val` returns. – GaleHalcyon Aug 19 '15 at 09:21
  • Not sure to get you here, of course if you try to save in the same key, it will be overwritten. If you need to store different instances, do `chrome.storage.sync.set({uniqKey : response.aID})` – Kaiido Aug 19 '15 at 13:02
  • I think that might work, but I was wondering how would you fetch data that is stored with a unique key? Would you still write `chrome.storage.sync.get(function(val) { console.log(val.anTitle)}) ...` or would you write `chrome.storage.sync.get(uniqKey, function(val) { console.log(val.anTitle)}) ...`? – GaleHalcyon Aug 19 '15 at 14:40
  • either `...sync.get(function(val) { console.log(val.uniqKey.anTitle)` or `...sync.get('uniqKey', function(val) { console.log(val.uniqKey.anTitle)` Try to `console.log(val)` to understand what is returned in each case. – Kaiido Aug 19 '15 at 15:38
  • The method seems to work, but trouble is fetching the data. I set `uniqKey ` to being a randomly generated 4 digit alphanumeric code. Then created an object `var stor = {}` I then added each entry to `stor` using `stor[uniqKey] = response.aID`. Trouble is retrieving the data because I now need to enter the unique key into `console.log(val./*insert key*/.anTitle)` and I have no way of doing this. Is there some way to replace the `/*insert key*/` with a placeholder that just says "here is a 4 digit alphanumeric code"? – GaleHalcyon Aug 20 '15 at 04:41
  • I didn't though of uniqKey being a randomly generated string since you'll need to get it later. You could use a `for(x in val)` loop to get all the saved objects however. – Kaiido Aug 20 '15 at 04:49
  • Thanks, that seems to have solved it for me! Really appreciate all the help you've given me, I hope I wasn't too much of a bother. – GaleHalcyon Aug 20 '15 at 12:44