Javascript 完全不知道如何保存扩展弹出窗口内容
每次我打开一个新的链接或点击它“离开”时,我都不知道如何使弹出窗口中添加的内容不消失。我读过内容脚本、背景脚本等,但我不知道如何在自己的源代码中实现它。下面是我的popup.html、popup.js和manifest.js文件Javascript 完全不知道如何保存扩展弹出窗口内容,javascript,html,google-chrome,google-chrome-extension,firefox-addon-webextensions,Javascript,Html,Google Chrome,Google Chrome Extension,Firefox Addon Webextensions,每次我打开一个新的链接或点击它“离开”时,我都不知道如何使弹出窗口中添加的内容不消失。我读过内容脚本、背景脚本等,但我不知道如何在自己的源代码中实现它。下面是我的popup.html、popup.js和manifest.js文件 { “清单版本”:2, “名称”:“URL\u保存”, “说明”:“此扩展保存URL并将标题重命名为用户的愿望,并将标题超链接。”, “版本”:“0.1”, “浏览器操作”:{ “默认图标”:“/img/icon.png”, “默认弹出窗口”:“popup.html”,
{
“清单版本”: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后:关闭并重新打开弹出窗口后:
每次关闭/重新打开时,弹出窗口都会重新加载其文档。相反,您应该使用背景页来保留状态 一般做法是:
与网页类似,弹出窗口(或选项/设置页面)的作用域在显示时创建,在不再可见时销毁。这意味着在显示时间之间,弹出窗口本身没有存储任何状态。在弹出窗口被销毁后,您希望保留的任何信息都需要存储在其他地方。因此,您需要使用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);
});