Saving data from a Chrome extension
<p>I am trying to create a Chrome extension that looks like the image below.</p>

<p>I want to save the Name and Id when clicking "+" button and I want to load all saved data int the <code>onLoad</code> event as seen in the upper section of image. I would also like to delete a particular row of data when clicking corresponding delete button.</p>

<p>Saved data should persist when closing Chrome.</p>

<pre><code>document.body.onload = function() {
  chrome.storage.sync.get(["id","name"], function(items) {
    if (!chrome.runtime.error) {
      console.log(items);
      document.getElementById("lsid").innerText = items.id;
      document.getElementById("lsname").innerText = items.name;
    }
  });
}

document.getElementById("set").onclick = function() {
  var d = document.getElementById("name").value;
   var x = document.getElementById("id").value;
   d=String(d);
  chrome.storage.sync.set({"name":d,"id" : x}, function() {
    if (chrome.runtime.error) {
      console.log("Runtime error.");
    }
  });
  window.close();
}
</code></pre>

<p><img src="https://i.stack.imgur.com/jL7wk.png" alt="Image"></p>