完全不知道如何保存扩展弹出窗口内容 [英] Completely lost on how to save extension popup window content

问题描述

我对如何使弹出窗口中添加的内容不会在每次打开新链接或离开"时消失的方法感到非常困惑.我已经阅读了内容脚本、背景脚本等内容，但老实说我不知道​​如何将其实现到我自己的源代码中.下面是我的 popup.html、popup.js 和我的 manifest.js 文件.

{清单版本":2，"name": "URL_save","description": "此扩展程序保存一个 URL 并将标题重命名为用户的意愿并超链接标题.",版本":0.1"，浏览器动作":{"default_icon": "/img/icon.png","default_popup": "popup.html","default_title": "查看您保存的网站！"},权限":[标签"]}

弹出 html:

<头><title>你的文章</title><link href="/css/style.css" rel="stylesheet"/><script src="/js/underscore-min.js"></script><script src="/js/popup.js"></script><身体><div id="div">还没有内容！点击按钮添加当前网站的链接！</div><div><ul id="list"></ul></div><br/><button id="button">添加链接！</button>

popup.js:

//全局变量变量网址；//弹出窗口中按钮的事件监听器document.addEventListener('DOMContentLoaded', function() {var button = document.getElementById('button');button.addEventListener('click', function() {添加链接()；});});//获取当前选项卡的 URL，添加到窗口内函数添加链接(){//将信息存储在 queryInfo 对象中，如下所示://https://developer.chrome.com/extensions/tabs#method-queryvar 查询信息 = {当前窗口:真，活动:真实};chrome.tabs.query(查询信息，功能(标签){//tabs 是一个数组，因此获取 tab 中的第一个(也是唯一一个)对象元素//将选项卡的 URL 属性放入另一个变量中://https://developer.chrome.com/extensions/tabs#type-Taburl = tabs[0].url;//格式化htmlvar html = '
关闭并重新打开弹出窗口后:
解决方案
与网页类似，弹出窗口(或选项/设置页面的)范围在显示时创建，在不再可见时销毁.这意味着在弹出窗口显示的时间之间没有存储在弹出窗口本身中的状态.您希望在弹出窗口被销毁后保留的任何信息，您都需要存储在其他地方.因此，您将需要使用 JavaScript 来存储您希望在下次打开弹出窗口时保持相同的任何状态.每次打开弹出窗口时，您都需要检索该信息并将其恢复到 DOM.两个最常用的地方是 StorageAreaMDN，或后台页面.
您存储信息的位置取决于您希望存储的数据保留多长时间，以及您希望数据显示的位置.
您可以存储数据的一般位置包括(存在其他可能性，但以下是最常见的):
如果您希望数据仅在 Chrome 关闭之前存在的背景页面.一旦 Chrome 重新启动，它将不存在.您可以通过几种/几种不同的方法将数据发送到后台页面，包括消息传递MDN，或直接更改背景页面上的值MDN.存储在 StorageArea(以下两个选项)中的数据也可用于后台页面和内容脚本.
chrome.storage.localMDN 如果您希望数据在关闭和重新启动的 Chrome 中保留在本地计算机上.
chrome.storage.syncMDN 如果您希望与使用当前 Chrome 帐户/配置文件的所有 Chrome 实例共享数据.数据也将保持不变，直到更改.它将通过关闭和重新启动 Chrome 来使用.它将在使用相同配置文件的其他计算机上可用.
window.localStorage:在 chrome.storage 出现之前，流行将扩展的数据存储在 window.localStorage 中.虽然这仍然有效，但通常首选使用 chrome.storage.
使用 chrome.storage 的优势之一 StorageAreaMDN 是数据可直接用于扩展程序的所有部分，无需将数据作为消息传递.1
您当前的代码
目前，您的代码不会存储在弹出窗口的 DOM 之外的任何地方输入的 URL.您需要建立一个数据结构(例如一个数组)来存储 URL 列表.然后可以将这些数据存储到上述存储位置之一.
Google 在 选项文档页面上的示例2, MDN 显示存储 chrome.storage.sync 并在显示选项页面时将值恢复到 DOM 中.此示例中使用的代码可以用于选项页面，只需将其 HTML 页面定义为 browser_action 的 default_popup 即可与弹出窗口完全一样工作.还有许多其他示例可用.
不幸的是，如果您没有提供更多关于您想要什么的具体信息，则很难为您提供具体的代码.但是，朝着您需要前进的方向前进的一些建议是:
重构你的代码，这样你就有一个单独的函数，你用一个 URL 作为参数调用它只是将该 URL 添加到你在 DOM 中的列表中(例如 addUrlToDom(url)).当用户添加 URL 以及在页面加载时恢复 URL 时，将使用此函数.
将您的 URL 列表存储在一个数组中(例如 urlList).此数组将是您保存到弹出窗口之外的存储位置的内容.您将从 DOMContentLoaded 处理程序中的那个存储位置读取这个数组，并使用重构的 addUrlToDom() 函数来添加每个值.将其恢复到 DOM 可能类似于:
urlList.forEach(function(url){addUrlToDom(url);});
将数据存储在 chrome.storage.local
假设您想在 Chrome 关闭/重启后将 URL 存储在本地机器上(即使用 chrome.storage.local)，您的代码可能如下所示:
manifest.json 仅更改为 permissions:
权限":[标签"，贮存"]
popup.js:
//全局变量var urlList=[];document.addEventListener('DOMContentLoaded', function() {getUrlListAndRestoreInDom();//弹出窗口中按钮的事件监听器document.getElementById('button').addEventListener('click', addLink);});//获取当前选项卡的 URL，添加到窗口内函数添加链接(){chrome.tabs.query({currentWindow: true,active: true}, function(tabs) {//tabs 是一个数组，因此获取 tab 中的第一个(也是唯一的)对象元素var url = tabs[0].url;if(urlList.indexOf(url) === -1){//不要添加重复项addUrlToListAndSave(url);addUrlToDom(url);}});}函数 getUrlListAndRestoreInDom(){chrome.storage.local.get({urlList:[]},function(data){urlList = data.urlList;urlList.forEach(函数(url){addUrlToDom(url);});});}函数 addUrlToDom(url){//改变文本信息document.getElementById("div").innerHTML = "<h2>保存的页面</h2>";//在此处插入 HTML 文本是一个坏主意，因为它具有潜在的安全漏洞//包括并非完全来自扩展程序中的内容(例如 url).//插入 HTML 文本是可以的，如果它_完全_来自您的内部// 延期./*//格式化 HTMLvar html = '
"+ url + '</a></li>';//给DOM添加URLdocument.getElementById("list").insertAdjacentHTML('beforeend',html);*///改为以编程方式构建新的 DOM 元素: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);}函数 addUrlToListAndSave(url){if(urlList.indexOf(url) === -1){//URL 不在列表中urlList.push(url);saveUrlList();}}函数 saveUrlList(回调){chrome.storage.local.set({urlList},function(){if(typeof callback === '函数'){//如果没有提供回调，不要尝试调用它.打回来();}});}
<小时>
这种情况的例外是您插入到页面上下文中的脚本.页面上下文是您可能不会在其中运行脚本的内容.为此您必须使用内容脚本(其中您的 StorageAreaMDN 数据是直接可用的)将 



        

登录 关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆

友情链接： IT屋 Chrome插件 谷歌浏览器插件

IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图 站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.