Question

每次打开新链接或点击它时，我都会失去如何让弹出窗口的添加内容不会消失＃34;离开＆＃34;。我已经阅读过关于内容脚本，后台脚本等的内容，但我并不是真的知道如何将其实现到我自己的源代码中。以下是我的 popup.html ， popup.js 和我的 manifest.js 文件。

{
    "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"
    ]
}

popup html ：

<html>
  <head>
    <title>Your articles</title>
    <link href="/css/style.css" rel="stylesheet"/>
    <script src="/js/underscore-min.js"></script>
    <script src="/js/popup.js"></script>
  </head>
  <body>
    <div id="div">No content yet! Click the button to add the link of the current website!</div>
    <div><ul id="list"></ul></div>
    <br/>
    <button id="button">Add link!</button>
  </body>
</html>

popup.js ：

// 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 = '<li><a href=' + url + " target='_blank'>" + url + '</a><br/></li>';

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

        // 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);
        }
    });
}

在这张图片中，您会看到当我第一次添加链接但然后关闭（仅）弹出窗口时会发生什么，再次打开它：

添加当前网址后：

关闭并重新打开弹出窗口后：

Answer 1

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

存储信息的位置取决于您希望存储的数据的持续时间以及您希望数据的显示位置。

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

背景页面，如果您希望数据仅在Chrome关闭之前存在。 Chrome重新启动后不会存在。您可以通过几种/几种不同的方法将数据发送到后台页面，包括message passing ^{^MDN}或directly changing values on the background page < SUP> ^MDN 。存储在StorageArea中的数据（以下两个选项）也可用于后台页面和内容脚本。
chrome.storage.local ^{^MDN}如果您希望数据在Chrome上的本地计算机上保持关闭状态重新启动。
chrome.storage.sync ^{^MDN}账号/个人资料。数据也将持续到更改为止。它将通过Chrome关闭并重新启动来使用。它将在使用相同配置文件的其他计算机上提供。
window.localStorage：在chrome.storage存在之前，在window.localStorage中存储扩展数据很受欢迎。虽然这仍然有用，但通常最好使用chrome.storage。

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

您当前的代码

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

Google在Options documentation page ^{^2，MDN}上的示例显示存储chrome.storage.sync并在选项页面中将值还原到DOM中被展示。此示例中使用的代码可以通过将其HTML页面定义为default_popup的{{1}}，使选项页面完全按原样用于弹出窗口。还有许多其他例子。

不幸的是，如果没有您想要的更多细节，很难为您提供具体的代码。但是，有一些建议可以指向您需要的方向：

重构您的代码，以便您使用URL作为参数调用单独的函数，将此URL添加到DOM中的列表（例如browser_action）。当用户添加URL以及在页面加载时恢复URL时，将使用此功能。
将您的网址列表存储在一个数组中（例如addUrlToDom(url)）。此阵列将保存到弹出窗口外的存储位置。您将从urlList处理程序中的该存储位置读取此数组，并使用重构的DOMContentLoaded函数添加每个值。将其恢复到DOM可能看起来像：
```
addUrlToDom()
```

将您的数据存储在`urlList.forEach(function(url){ addUrlToDom(url); });`

中

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

manifest.json 仅更改为chrome.storage.local：

permissions

popup.js ：

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

此例外是您插入页面上下文的脚本。页面上下文是您可能不会运行脚本的。为此，您必须使用内容脚本（StorageArea ^{^MDN}数据直接可用）将// 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(); } }); }标记插入到网页的DOM中。这可能有点复杂，任何你可能不需要关心它。这里提到的仅仅是因为声明可能存在例外情况，StorageArea ^{^MDN}数据可用于您的扩展的所有区域。
Chrome文档中的示例在Firefox上运行良好。是的，Firefox supports both chrome.*, using callbacks, and browser.*, using promises。

Answer 2

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

执行此操作的一般方法是：

从弹出窗口到后台进行通信以执行某些操作。即：执行ajax请求并将结果存储在普通的javascript对象中。
从后台页面获取，获取javascript对象。即使关闭弹出窗口，状态也会保留在后台页面中。

完全失去了如何保存扩展弹出窗口内容

2 个答案:

您当前的代码

将您的数据存储在`urlList.forEach(function(url){ addUrlToDom(url); });`

完全失去了如何保存扩展弹出窗口内容

2 个答案:

您当前的代码

将您的数据存储在urlList.forEach(function(url){ addUrlToDom(url); });

将您的数据存储在`urlList.forEach(function(url){ addUrlToDom(url); });`