javascript - Completamente perdido en cómo guardar el contenido de la ventana emergente de extensión
html google-chrome (2)
Similar a una página web, el alcance de la ventana emergente (o de una página de opciones / configuración) se crea cuando se muestra y se destruye cuando ya no es visible. Esto significa que no hay ningún estado almacenado dentro de la ventana emergente en sí entre las veces que se muestra. Cualquier información que desee conservar después de que se destruya la ventana emergente, deberá almacenarla en otro lugar. Por lo tanto, deberá usar JavaScript para almacenar cualquier estado que desee que sea el mismo la próxima vez que se abra la ventana emergente. Cada vez que se abre la ventana emergente, deberá recuperar esa información y restaurarla en el DOM. Los dos lugares más utilizados son StorageArea MDN o la página de fondo.
El lugar donde almacene la información dependerá de cuánto tiempo desea que persistan los datos que almacena y dónde desea que se vean los datos.
Las ubicaciones generales donde podría almacenar datos incluyen (existen otras posibilidades, pero las siguientes son las más comunes):
- La página de fondo si desea que los datos existan solo hasta que Chrome se cierre. No existirá una vez que Chrome se reinicie. Puede enviar los datos a la página de fondo a través de un par / algunos métodos diferentes, incluido el mensaje que pasa MDN o directamente el cambio de valores en la página de fondo MDN . Los datos almacenados en StorageArea (las dos opciones a continuación) también están disponibles para la página de fondo y los scripts de contenido.
- StorageArea MDN si desea que los datos persistan en la máquina local en Chrome que se cierra y reinicia.
- StorageArea MDN si desea que los datos se compartan con todas las instancias de Chrome que utilizan la cuenta / perfil actual de Chrome. Los datos también persistirán hasta que se modifiquen. Estará disponible a través del cierre y reinicio de Chrome. Estará disponible en otras máquinas que usen el mismo perfil.
-
window.localStorage: antes de la existencia dechrome.storageera popular almacenar datos para la extensión enwindow.localStorage. Si bien esto seguirá funcionando, generalmente se prefiere usarchrome.storage.
Una de las ventajas de usar un
MDN
chrome.storage
StorageArea
es que los datos están disponibles directamente para todas las partes de su extensión sin la necesidad de pasar los datos como un mensaje.
1
Su código actual
Actualmente, su código no almacena las URL que se ingresan en ningún otro lugar que no sea el DOM de la ventana emergente. Deberá establecer una estructura de datos (por ejemplo, una matriz) en la que almacene la lista de URL. Estos datos se pueden almacenar en una de las ubicaciones de almacenamiento mencionadas anteriormente.
El ejemplo de Google en la
página de documentación de Opciones
2,
MDN
muestra el almacenamiento de
chrome.storage.sync
y la restauración de valores en el DOM cuando se muestra la página de opciones.
El código utilizado en este ejemplo puede para la página de opciones puede funcionar exactamente como está para una ventana emergente simplemente definiendo su página HTML como
default_popup
para una
browser_action
.
Hay muchos otros ejemplos disponibles.
Desafortunadamente, sin más detalles de usted en cuanto a lo que desea, es difícil darle un código específico. Sin embargo, un par de sugerencias para ir en la dirección que debe seguir son:
-
Refactorice su código para que tenga una función separada que llame con una URL como parámetro que
simplemente
agrega esta URL a la lista que tiene en el DOM (por ejemplo,
addUrlToDom(url)). Esta función se usará cuando el usuario agregue una URL y cuando las URL se restauren cuando se cargue la página. -
Almacene su lista de URL en una matriz (por ejemplo,
urlList). Esta matriz será lo que guarde en la ubicación de almacenamiento fuera de su ventana emergente.DOMContentLoadedesta matriz desde esa ubicación de almacenamiento en su controladorDOMContentLoadedy usará la función refactorizadaaddUrlToDom()para agregar cada valor. Restaurarlo en el DOM podría ser algo así como:urlList.forEach(function(url){ addUrlToDom(url); });
Almacenar sus datos en
chrome.storage.local
Suponiendo que desea almacenar las URL en la máquina local a través del apagado / reinicio de Chrome (es decir, usar
chrome.storage.local
), su código podría verse así:
manifest.json
cambia solo a
permissions
:
"permissions": [
"tabs",
"storage"
]
popup.js :
// 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();
}
});
}
-
La excepción a esto son los scripts que inserta en el contexto de la página.
El contexto de la página es algo en lo que probablemente no ejecutará scripts. Para hacerlo, debe usar un script de contenido (donde sus datos de
StorageArea
MDN
están directamente disponibles) para insertar una etiqueta
<script>en el DOM de una página web. Esto puede ser un poco complejo, cualquiera de los cuales probablemente no necesite preocuparse. Se menciona aquí simplemente porque hay una posible excepción a la declaración de que los datos de StorageArea MDN están disponibles para todas las áreas de su extensión. -
El ejemplo en la documentación de Chrome funciona bien en Firefox.
Sí,
Firefox admite tanto
chrome.*, Usando devoluciones de llamada, como elbrowser.*, Usando promesas .
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. A continuación se muestra mi popup.html , popup.js y mi archivo 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"
]
}
HTML emergente :
<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);
}
});
}
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:
Una ventana emergente vuelve a cargar su documento cada vez que se cierra / vuelve a abrir. En su lugar, debe usar una página de fondo para preservar el estado.
La forma general de hacer esto es:
- comunicarse desde una ventana emergente a un fondo para hacer algo. Es decir: haga una solicitud ajax y almacene el resultado en un objeto javascript simple.
- haz un get desde la página de fondo, para obtener el objeto javascript. Aunque cierre la ventana emergente, el estado se conserva en la página de fondo.