Chrome Storage API keys getting reset - google-chrome

Question

I am developing my first chrome extension. It highlights the words that are passed to it. I used storage API to save a few objects so when I open the extension again, it will retain what I highlighted. but once in a while, they get reset to the first string value of the object only.
https://www.screencast.com/t/0jF6AtCc
I went through the code for hours but there is nothing that could be doing this. i have tried them reassigning them in multiple places but nothing helped. There are no errors in both consoles.
popup.js
var rstr = [];
var rnum = [];
var rcolor = [];
var rfont = [];
chrome.storage.local.get(['htxt', 'hnum', 'hcolor', 'hfont'], function(result) {
if (result.hnum != null) {
rnum = (result.hnum);
rcolor = (result.hcolor);
rfont = (result.hfont);
rstr = (result.htxt);
}
if (rstr.length > 0) {
document.getElementById('tbl').innerHTML = '<tr><td>Search Key</td><td style="width: 25px;">Score</td><td></td><td></td></tr>';
for (var j = 1; j <= rstr.length; j++) {
document.getElementById('tbl').innerHTML += '<tr><td><input type="text" id="txt' + j + '"></input></td><td><input type="text" id="num' + j + '" style="width: 25px;" value=0></input></td><td><input type="color" id="bg' + j + '" style="width: 15px;"> </td> <td> <input type="color" id="font' + j + '" style="width: 15px;"> </td> </tr> ';
}
for (var j = 1; j <= rstr.length; j++) {
document.getElementById("txt" + j).value = rstr[j - 1];
document.getElementById("num" + j).value = rnum[j - 1];
document.getElementById("bg" + j).value = rcolor[j - 1];
document.getElementById("font" + j).value = rfont[j - 1];
}
}
colorarr = ["#b1c7fd", "#ddfdb1", "#fdb1f3", "#b1fdf0", "#fddab1", "#c4b1fd", "#b4fdb1", "#FFFF00", "#FFA500"];
function getRandomColor() {
return colorarr[Math.floor(Math.random() * 9)];
}
document.getElementById("bg1").value = getRandomColor();
var i = 2;
var txt = [];
var num = [];
var color = [];
var font = [];
document.getElementById('btn').addEventListener('click', function() {
chrome.tabs.query({
active: true,
currentWindow: true
}, function(activeTabs) {
txt = [];
num = [];
color = [];
font = [];
for (var j = 1; j < i; j++) {
if (document.getElementById("txt" + j).value != null) {
txt.push(document.getElementById("txt" + j).value);
num.push(document.getElementById("num" + j).value);
color.push(document.getElementById("bg" + j).value);
font.push(document.getElementById("font" + j).value);
}
}
chrome.storage.local.set({
"htxt": txt
});
chrome.storage.local.set({
"hnum": num
});
chrome.storage.local.set({
"hcolor": color
});
chrome.storage.local.set({
"hfont": font
});
chrome.tabs.executeScript(null, {
code: "var str=" + JSON.stringify(txt) + ";var numjson=" + JSON.stringify(num) + ";var color=" + JSON.stringify(color) + ";var font=" + JSON.stringify(font) + ";"
}, function() {
chrome.tabs.executeScript(null, {
file: 'highlight.js'
}, function(results) {
if (results != null) {
document.getElementById('scorevalue').innerHTML = results[0];
chrome.browserAction.setBadgeText({
text: results[0] ? results[0].toString() : "0"
});
}
});
});
});
});
document.getElementById('add').addEventListener('click', function() {
var tr = document.createElement('tr');
tr.innerHTML = '<td><input type="text" id="txt' + i + '"></input></td><td><input type="text" id="num' + i + '" style="width: 25px;" value=0></input></td><td><input type="color" id="bg' + i + '" style="width: 15px;"> </td> <td> <input type="color" id="font' + i + '" style="width: 15px;"> </td> ';
document.getElementById('tbl').appendChild(tr);
document.getElementById("bg" + i).value = getRandomColor();
i++;
});
document.getElementById('delete').addEventListener('click', function() {
chrome.storage.local.remove(['htxt', 'hnum', 'hcolor', 'hfont'], function() {
var error = chrome.runtime.lastError;
if (error) {
console.error(error);
}
})
document.getElementById('tbl').innerHTML = '<tr><td>Search Key</td><td style="width: 25px;">Score</td><td></td><td></td></tr>';
document.getElementById('tbl').innerHTML += '<tr><td><input type="text" id="txt1"></input></td><td><input type="text" id="num1" style="width: 25px;" value=0></input></td><td><input type="color" id="bg1" style="width: 15px;"> </td> <td> <input type="color" id="font1" style="width: 15px;"> </td> </tr> ';
chrome.tabs.getSelected(null, function(tab) {
var code = 'window.location.reload();';
chrome.tabs.executeScript(tab.id, {
code: code
});
});
});
document.getElementById('bulk').addEventListener('click', function() {
document.getElementById('bulkdiv').innerHTML = "<textarea rows='4' cols='50' id='bulktext'></textarea><input id='bulkbtn' type=button value='Fill Up'>"
document.getElementById('bulkbtn').addEventListener('click', function() {
var res = document.getElementById('bulktext').value.split("\n");
i = res.length + 1;
document.getElementById('tbl').innerHTML = '<tr><td>Search Key</td><td style="width: 25px;">Score</td><td></td><td></td></tr>';
for (var j = 1; j < i; j++) {
document.getElementById('tbl').innerHTML += '<tr><td><input type="text" id="txt' + j + '"></input></td><td><input type="text" id="num' + j + '" style="width: 25px;" value=0></input></td><td><input type="color" id="bg' + j + '" style="width: 15px;"> </td> <td> <input type="color" id="font' + j + '" style="width: 15px;"> </td> </tr> ';
}
for (var j = 1; j < i; j++) {
document.getElementById("txt" + j).value = res[j - 1].trim();
document.getElementById("bg" + j).value = getRandomColor();
}
console.log(res);
});
});
});
Highlight.js
function highlight(container, what, spanClass) {
var content = container.innerHTML,
pattern = new RegExp('(>[^<.]*)(' + what + ')([^<.]*)', 'gi'),
replaceWith = '$1<span ' + (spanClass ? 'style=background:' + spanClass + ';' : '') + '">$2</span>$3',
highlighted = content.replace(pattern, replaceWith);
return (container.innerHTML = highlighted) !== content;
}
function num(container, what) {
if ((container.innerHTML.match(new RegExp('(>[^<.]*)(' + what + ')([^<.]*)', "gi"))) != null) return container.innerHTML.match(new RegExp('(>[^<.]*)(' + what + ')([^<.]*)', "gi")).length;
return 0;
}
chrome.storage.local.remove(['htxt', 'hnum', 'hcolor', 'hfont'], function() {
var error = chrome.runtime.lastError;
if (error) {
console.error(error);
}
var score = 0;
for (var i = 0; i < str.length; i++) {
if (str[i] != '') {
console.log("inside highlight.js");
console.log(str[i]);
highlight(document.getElementsByTagName('body')[0], str[i], color[i]);
score += num(document.getElementsByTagName('body')[0], str[i]) * numjson[i];
}
}
chrome.storage.local.set({
"htxt": str
});
chrome.storage.local.set({
"hnum": numjson
});
chrome.storage.local.set({
"hcolor": color
});
chrome.storage.local.set({
"hfont": font
});
score;
});
There is an inject.js also which run on all pages with similar code to highlight.js. It was made so that pages get highlighted even when someone navigate away or reload the page. It is also accessing the Chrome Storage API.
Only popup.js have code to modify the key pairs in storage API but it still somehow get changed to the first string. Please help.
Here is an unpacked version of it.
https://drive.google.com/file/d/1icG6pa9xTGAJ6DO2Wgwn7LE5yG8CSRzz/