I'm trying to store a Range object, created from the text that the user selects, using chrome.storage.sync with the page URL as the key. Since, there can be multi-selections associated with a page, I'm using an array to hold all the Range objects.

But I can't do it successfully. Every time I try to push a new Range object to the array, the previous objects suddenly become empty. Hence, I can only get an array in which all objects are empty except for the last Range object that I pushed.

This is my code snippet:

var selectedRange = window.getSelection().getRangeAt(0);
var key = request.url;
chrome.storage.sync.get([key], function(result){

/*check if an object is already present in storage with this key*/
if(Object.keys(result).length === 0 && result.constructor === Object){
console.log("No entry for " + key + " present in storage");

var entry = {};
/*create a new array with the first Range object*/
entry[key] = [selectedRange];
chrome.storage.sync.set(entry, function(){
console.log(entry);
});
}

else{
console.log("Entry found!");

var value = result[key];
/*push the Range object in the existing array*/
value.push(selectedRange);

chrome.storage.sync.remove(key, function(response){
var entry = {};
entry[key] = value;
chrome.storage.sync.set(entry, function(){
console.log(entry);
});
});
}
});

Here's the output from my console when I add 3 objects one after the other:

output from the console when I add Range objects

What's even more weird is that if I simply try to store a string instead of the Range object, say, by using this definition for selectedRange,

var selectedRange = "SomeString";

the storing works exactly as expected. The documentation for storage API says that it can store user data as objects.

I cant figure out the reason behind this strange behaviour. It would be really helpful if someone could help me figure that out or how I could get around this issue.

Thanks!