CODEWITHSUNDEEP
javascriptjquerygoogle-chrome
user1079404
user1079404

Reputation: 308

chrome extension storage api won't set array

So I am developing a Chrome extension and making use of the Storage API here. As far as I know I am able to store JS objects and arrays.

I have a piece of code:

chrome.storage.sync.get(["fflist", "signature", "quote", "avatarHide", "ads", "tweet", "filters", "vine", "webm", "cats", "main", "tree", "embedTweet"],function (obj){
    g = obj;

   //all my functions and code are wrapped inside here, the rest of the options      
   //returned inside g are either primitives (booleans) and I have one object. 

    var t = g.fflist
    t.push(a[0])
    console.log(t)
    chrome.storage.sync.set({"fflist": t},function (){
    });
    console.log(g.fflist[0])
});

a[0] is some jQuery object that I know is not empty and is what I am wanting.`

Now, the output from console.log(g.fflist[0]) shows that g.fflist[0] has the proper value I would like to store. Such as <tr class="forum forum_268">..</tr>

I then reload the page. And suddenly when I log the output of console.log(g.fflist[0]) it just seems to be an empty object, Object {} It doesnt make any sense why

UPDATE: Solution

I was being very silly thinking I could store DOM objects or jQuery objects in the storage cache. But with blunderboys comment combined with the following code to find the classes again;

    var geg = new RegExp("forum ([a-zA-Z0-9_]+)")
    var g = geg.exec(thing)
    if (g!=null){
        $("#favouriteForums").after($("."+g[1]))
     }

Where thing is the class name attribute that I am storing in storage.

Since I can't store the changes to these elements and only reference to the originals, I will now need to reproduce the changes on the fly but it shouldn't be too difficult

Upvotes: 1

Views: 651

Answers (1)

Sachin Jain
Sachin Jain

Reputation: 21842

As mentioned in your post, you are trying to save a jQuery object in chrome storage area. You need to understand there is a difference between object, array and array-like objects.

jQuery object is just a wrapper over HTML DOM element and it is just a reference.

You might want to store the selector of the element in chrome storage area instead and get the element again by using that selector.

Here is how you can do that:

chrome.storage.sync.get(["fflist", "signature", "embedTweet"],function (obj){
    g = obj;

   //all my functions and code are wrapped inside here, the rest of the options      
   //returned inside g are either primitives (booleans) and I have one object. 

    var t = g.fflist || [];
    // Add selector of a into t
    t.push('.my-class-selector'); //Selector is a string
    console.log(t);
    chrome.storage.sync.set({'fflist': t}, function (){ });
    console.log(g.fflist[0]);
});

To get the element back, you can use $(g.fflist[0]);

Upvotes: 1

Related Questions