title: Completely lost on how to save extension popup window content
body: <p>I'm pretty much lost on how to make the added contents of my popup window not disappear every time I open a new link or click it "away". I've read about content script, background script and the like but I don't honestly know how to implement that into my own source code. Below is my <em>popup.html</em>, <em>popup.js</em> and my <em>manifest.js</em> file.</p>
  
  <pre class="lang-json prettyprint-override"><code>{
      "manifest_version": 2,
      "name": "URL_save",
      "description": "This extension saves an URL and renames the title to the user's wishes and hyperlink the title.",
      "version": "0.1",
  
      "browser_action": {
          "default_icon": "/img/icon.png",
          "default_popup": "popup.html",
          "default_title": "See your saved websites!"
      },
  
      "permissions": [
          "tabs"
      ]
  }
  </code></pre>
  
  <p><em>popup html</em>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Your articles&lt;/title&gt;
      &lt;link href="/css/style.css" rel="stylesheet"/&gt;
      &lt;script src="/js/underscore-min.js"&gt;&lt;/script&gt;
      &lt;script src="/js/popup.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="div"&gt;No content yet! Click the button to add the link of the current website!&lt;/div&gt;
      &lt;div&gt;&lt;ul id="list"&gt;&lt;/ul&gt;&lt;/div&gt;
      &lt;br/&gt;
      &lt;button id="button"&gt;Add link!&lt;/button&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><em>popup.js</em>:</p>
  
  <pre class="lang-js prettyprint-override"><code>// global variables
  var url;
  
  // event listener for the button inside popup window
  document.addEventListener('DOMContentLoaded', function() {
      var button = document.getElementById('button');
      button.addEventListener('click', function() {
          addLink();
      });
  });
  
  // fetch the URL of the current tab, add inside the window
  function addLink() {
  // store info in the the queryInfo object as per: 
  //   https://developer.chrome.com/extensions/tabs#method-query
      var queryInfo = {
      currentWindow: true,
      active: true
      };
  
      chrome.tabs.query(queryInfo, function(tabs) {
          // tabs is an array so fetch the first (and only) object-elemnt in tab
          // put URL propery of tab in another variable as per: 
          //   https://developer.chrome.com/extensions/tabs#type-Tab
          url = tabs[0].url;
  
          // format html
          var html = '&lt;li&gt;&lt;a href=' + url + " target='_blank'&gt;" + url + '&lt;/a&gt;&lt;br/&gt;&lt;/li&gt;';
  
          // change the text message
          document.getElementById("div").innerHTML = "&lt;h2&gt;Saved pages&lt;/h2&gt;";
  
          // get to unordered list and create space for new list item 
          var list = document.getElementById("list");
          var newcontent = document.createElement('LI');
          newcontent.innerHTML = html;
  
          // while loop to remember previous content and append the new ones
          while (newcontent.firstChild) {
              list.appendChild(newcontent.firstChild);
          }
      });
  }
  </code></pre>
  
  <p>In this images you see what happens when I first add a link but then close (only) the popup window, opening it again:</p>
  
  <p>After adding the current URL:<br>
    <a href="https://i.stack.imgur.com/7YKI9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7YKI9.png" alt="before"></a></p>
  
  <p>After closing and re-opening the popup:<br>
    <a href="https://i.stack.imgur.com/MzNK2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MzNK2.png" alt="after"></a></p>