Completely lost on how to save extension popup window content
<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>