Chrome Extensions: chrome.storage.local not saving state

I am trying to read a variable from chrome.storage.local, make some changes to it, save it back down, and read it back out again.

The problem arises after searchAndHighlight(...). Inside that function, the local variable nodesToClear is set. This should in-turn be written to chrome.storage.local, to be re-used next time searchAndHighlight(...) runs.

Note: I am using chrome-promise, to avoid old-school callbacks.

The Code

import chromep from 'chrome-promise';

var nodesToClear = [];
chromep.storage.local.get('nodesToClear').then(function(data) {
    console.log('data.nodesToClear: ', data.nodesToClear); // Array of node objects
    console.log('ntc before: ', nodesToClear);
    if(Object.keys(data.nodesToClear[0]).length > 0) {
        console.log('typeof data.nodeToClear: ', typeof data.nodesToClear);
        nodesToClear = data.nodesToClear;
    }
    console.log('ntc after: ', nodesToClear);
}).then(function() {
    return chromep.storage.local.get(['ss', 'em', 'mc'])
}).then(function (data) {
    searchAndHighlight(data.ss, data.em, data.mc);
    chrome.storage.local.remove(['ss', 'em', 'mc']);
}).then(function() {
    console.log('ntc at end: ', nodesToClear);
    if(nodesToClear.length > 0) {
        chromep.storage.local.set({ nodesToClear: nodesToClear });
    }
}).then(function() {
    return chromep.storage.local.get('nodesToClear');
}).then(function(data) {
    console.log('ntc at end end: ', data.nodesToClear);
});

The Output

// data.nodesToClear:  [{…}]
// ntc before:  []
// ntc after:  []
// nodesToClear:  [span.myCssClass]
// ntc at end:  [span.myCssClass]
// ntc at end end:  [{…}]

The Question

  • Notice how ntc at end: [span.myCssClass] correctly states that local Array nodesToClear now contains one single Element node (an object).
  • Notice also, after saving it down and reading it back out, it has been changed to an Array with an empty object inside: ntc at end end: [{…}]. That is not the intention. It should read back out the same that was saved moments before.

Why is it not setting and getting the value properly?


EDIT

Below follows a simplified piece of code, that demonstrates the same exact problem.

import chromep from 'chrome-promise';

var span = document.createElement('span');
span.classList.add('myClass');
var tn = document.createTextNode('blabla');
span.appendChild(tn);
var testVariable = span;

chromep.storage.local.set({testVariable: testVariable}).then(function() {
    console.log('testVariable: ', testVariable);
    return chromep.storage.local.get('testVariable');
}).then(function(data) {
    console.log('data.testVariable: ', data.testVariable);
});