Javascript 完全不知道如何保存扩展弹出窗口内容

每次我打开一个新的链接或点击它“离开”时，我都不知道如何使弹出窗口中添加的内容不消失。我读过内容脚本、背景脚本等，但我不知道如何在自己的源代码中实现它。下面是我的popup.html、popup.js和manifest.js文件

{
“清单版本”：2，
“名称”：“URL\u保存”，
“说明”：“此扩展保存URL并将标题重命名为用户的愿望，并将标题超链接。”，
“版本”：“0.1”，
“浏览器操作”：{
“默认图标”：“/img/icon.png”，
“默认弹出窗口”：“popup.html”，
“默认标题”：“查看保存的网站！”
},
“权限”：[
“选项卡”
]
}

弹出式html：

你的文章
还没有内容！点击按钮添加当前网站的链接！



添加链接！

popup.js：

//全局变量
var-url；
//弹出窗口内按钮的事件侦听器
document.addEventListener（'DOMContentLoaded'，function（）{
var button=document.getElementById（'button'）；
addEventListener（'click'，function（）{
addLink（）；
});
});
//获取当前选项卡的URL，在窗口内添加
函数addLink（）{
//将信息存储在queryInfo对象中，如下所示：
//   https://developer.chrome.com/extensions/tabs#method-质疑
变量queryInfo={
currentWindow：对，
主动：正确
};
chrome.tabs.query（查询信息，函数（选项卡）{
//tabs是一个数组，因此获取tab中的第一个（也是唯一一个）对象元素
//将选项卡的URL属性放入另一个变量中，如下所示：
//   https://developer.chrome.com/extensions/tabs#type-标签
url=选项卡[0]。url；
//格式化html
var html='

'；
//更改文本消息
document.getElementById（“div”）.innerHTML=“保存的页面”；
//进入无序列表并为新列表项创建空间
var list=document.getElementById（“列表”）；
var newcontent=document.createElement（'LI'）；
newcontent.innerHTML=html；
//同时循环以记住以前的内容并附加新内容
while（newcontent.firstChild）{
list.appendChild（newcontent.firstChild）；
}
});
}

在这些图像中，您可以看到当我第一次添加链接，然后关闭（仅）弹出窗口，再次打开时发生的情况：

添加当前URL后：

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

---

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

一般做法是：

从弹出窗口到后台进行通信以执行某些操作。例如：执行ajax请求并将结果存储在普通javascript对象中

从后台页面获取javascript对象。即使关闭弹出窗口，状态仍保留在后台页面中

---

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

存储信息的位置取决于您希望存储的数据保持多长时间，以及希望在何处查看数据

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

• 如果您希望数据仅在Chrome关闭之前存在，请打开背景页。一旦Chrome重新启动，它将不存在。您可以通过几种不同的方法将数据发送到后台页面，包括、或。存储在StorageArea中的数据（以下两个选项）也可用于后台页面和内容脚本
• 如果您希望数据保存在本地计算机上，请关闭并重新启动Chrome
• 如果您希望与使用当前Chrome帐户/配置文件的所有Chrome实例共享数据。数据也将一直保留，直到更改为止。它将通过关闭和重新启动Chrome来实现。它将在使用相同配置文件的其他机器上可用
• ：在

  chrome.storage

  出现之前，在

  window.localStorage

  中存储扩展数据是很流行的。虽然这仍然有效，但通常首选使用

  chrome.storage

使用

chrome.storage

的优点之一是数据可直接用于扩展的所有部分，而无需将数据作为消息传递。1

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

谷歌在2上的例子显示，当显示选项页面时，存储

chrome.storage.sync

并将值恢复到DOM中。本例中用于选项页面的代码与弹出窗口的代码完全相同，只需将其HTML页面定义为

浏览器操作的
默认弹出窗口
。还有许多其他的例子

不幸的是，没有更多的细节
urlList.forEach(function(url){
    addUrlToDom(url);
});