与网页类似，弹出窗口（或选项/设置页面）的范围在显示时创建，在不再可见时销毁。这意味着在弹出窗口显示的时间之间没有存储在弹出窗口本身中的状态。您希望在弹出窗口被销毁后保留的任何信息，您都需要存储在其他地方。因此，您将需要使用 JavaScript 来存储您希望在下次打开弹出窗口时保持相同的任何状态。每次打开弹出窗口时，您都需要检索该信息并将其恢复到 DOM。两个最常用的地方是StorageArea ^MDN或背景页面。

您存储信息的位置取决于您希望存储的数据保留多长时间，以及您希望数据显示的位置。

您可以存储数据的一般位置包括（存在其他可能性，但以下是最常见的）：

• 如果您希望数据仅在 Chrome 关闭之前存在，则为后台页面。一旦 Chrome 重新启动，它将不存在。您可以通过几种/几种不同的方法将数据发送到后台页面，包括消息传递^MDN，或直接更改后台页面^MDN上的值。存储在 StorageArea（以下两个选项）中的数据也可用于后台页面和内容脚本。
• chrome.storage.local如果您希望数据在关闭和重新启动的 Chrome 中保留在本地计算机上，请使用^MDN。
• chrome.storage.sync^MDN如果您希望与使用当前 Chrome 帐户/配置文件的所有 Chrome 实例共享数据。数据也将保持不变，直到更改。它将通过关闭和重新启动 Chrome 来使用。它将在使用相同配置文件的其他机器上可用。
• window.localStorage：在存在之前chrome.storage，将扩展的数据存储在window.localStorage. 虽然这仍然有效，但通常首选使用chrome.storage.

使用chrome.storage StorageArea ^MDN的优点之一是数据可直接用于扩展的所有部分，而无需将数据作为消息传递。¹

您当前的代码

目前，您的代码没有存储在弹出窗口的 DOM 之外的任何地方输入的 URL。您将需要建立一个数据结构（例如一个数组）来存储 URL 列表。然后可以将该数据存储到上述存储位置之一。

Google 在选项文档页面²上的示例^，MDN显示chrome.storage.sync了在显示选项页面时将值存储和恢复到 DOM 中。在这个例子中使用的代码可以在选项页面可以准确地工作，用于开发一个弹出的只是定义其HTML页面的default_popup一个browser_action。还有许多其他示例可用。

不幸的是，如果您没有提供更多关于您想要什么的细节，就很难为您提供具体的代码。但是，朝着您需要前进的方向前进的一些建议是：

• 重构您的代码，以便您拥有一个单独的函数，您可以使用 URL 作为参数调用该函数，该函数只是将此 URL 添加到您在 DOM 中的列表中（例如addUrlToDom(url)）。当用户添加 URL 以及在页面加载时恢复 URL 时，将使用此函数。

• 将您的 URL 列表存储在一个数组中（例如urlList）。此数组将是您保存到弹出窗口之外的存储位置的内容。您将从DOMContentLoaded处理程序中的该存储位置读取此数组，并使用重构的addUrlToDom()函数添加每个值。将其恢复到 DOM 可能类似于：

  urlList.forEach(function(url){
      addUrlToDom(url);
  });
  

将您的数据存储在 chrome.storage.local

假设您想通过 Chrome 关闭/重启（即使用chrome.storage.local）将 URL 存储在本地计算机上，您的代码可能如下所示：

manifest.json更改为permissions仅：

    "permissions": [
        "tabs",
        "storage"
    ]

popup.js :

// global variables
var urlList=[];

document.addEventListener('DOMContentLoaded', function() {
    getUrlListAndRestoreInDom();
    // event listener for the button inside popup window
    document.getElementById('button').addEventListener('click', addLink);
});

// fetch the URL of the current tab, add inside the window
function addLink() {
    chrome.tabs.query({currentWindow: true,active: true}, function(tabs) {
        // tabs is an array so fetch the first (and only) object-element in tab
        var url = tabs[0].url;
        if(urlList.indexOf(url) === -1){
            //Don't add duplicates
            addUrlToListAndSave(url);
            addUrlToDom(url);
        }
    });
}

function getUrlListAndRestoreInDom(){
    chrome.storage.local.get({urlList:[]},function(data){
        urlList = data.urlList;
        urlList.forEach(function(url){
            addUrlToDom(url);
        });
    });
}

function addUrlToDom(url){
    // change the text message
    document.getElementById("div").innerHTML = "<h2>Saved pages</h2>";

    //Inserting HTML text here is a bad idea, as it has potential security holes when
    //  including content not sourced entirely from within your extension (e.g. url).
    //  Inserting HTML text is fine if it is _entirely_ sourced from within your
    //  extension.
    /*
    // format HTML
    var html = '<li><a href=' + url + " target='_blank'>" + url + '</a></li>';
    //Add URL to DOM
    document.getElementById("list").insertAdjacentHTML('beforeend',html);
    */
    //Build the new DOM elements programatically instead:
    var newLine = document.createElement('li');
    var newLink = document.createElement('a');
    newLink.textContent = url;
    newLink.setAttribute('href',url);
    newLink.setAttribute('target','_blank');
    newLine.appendChild(newLink);
    document.getElementById("list").appendChild(newLine);
}

function addUrlToListAndSave(url){
    if(urlList.indexOf(url) === -1){
        //URL is not already in list
        urlList.push(url);
        saveUrlList();
    }
}

function saveUrlList(callback){
    chrome.storage.local.set({urlList},function(){
        if(typeof callback === 'function'){
            //If there was no callback provided, don't try to call it.
            callback();
        }
    });
}

1. 例外情况是您插入到页面上下文中的脚本。页面上下文是您可能不会在其中运行脚本的内容。为此，您必须使用内容脚本（您的StorageArea ^MDN数据可直接在其中使用）将<script>标签插入到网页的 DOM 中。这可能有点复杂，您可能不需要担心它。在这里提到它仅仅是因为StorageArea ^MDN数据可用于扩展的所有区域的声明可能存在例外。
2. Chrome 文档中的示例在 Firefox 上运行良好。是的，Firefox 支持chrome.*使用回调和browser.*使用 promise 的。

每次关闭/重新打开时，弹出窗口都会重新加载它的文档。相反，您应该使用背景页面来保留状态。

这样做的一般方法是：

1. 从弹出窗口到后台进行通信以做某事。即：执行 ajax 请求并将结果存储在一个普通的 javascript 对象中。
2. 从后台页面获取，以获取 javascript 对象。即使您关闭了弹出窗口，状态仍会保留在后台页面中。