Completamente perdido en cómo guardar el contenido de la ventana emergente de extensión
Estoy bastante perdido en cómo hacer que el contenido agregado de mi ventana emergente no desaparezca cada vez que abro un nuevo enlace o hago clic en "lejos". He leído sobre script de contenido, script de fondo y similares, pero honestamente no sé cómo implementar eso en mi propio código fuente. Abajo está mipopup.html, popup.js y mimanifest.js archivo.
{
"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"
]
}
ventana emergente 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;
// whi,le loop to remember previous content and append the new ones
while (newcontent.firstChild) {
list.appendChild(newcontent.firstChild);
}
});
}
En estas imágenes, verá lo que sucede cuando agrego un enlace por primera vez pero luego cierro (solo) la ventana emergente y la vuelvo a abrir:
Después de agregar la URL actual:
Después de cerrar y volver a abrir la ventana emergente:
