Problema con programación de una extensión para Chrome

freesoftwarrior · #1 (**permalink**) 31/05/2017, 14:05

Buenas tardes:
He empezado a curiosear el tema de la programación de extensiones. Hasta ahora me va muy bien, sin embargo he encontrado un pequeño escollo. Estoy programando la página de configuración en que simplemente tengo una lista de 19 campos input, de a dos, para ingresar el nombre de la página y el otro el url de la misma. Ah, lo que estoy programando es una personalización de los newtab.

Para eso, cree este página

settings.html

Código:

<html>
<head>
	<title>NewTab2 Setup</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
  <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="js/settings.js"></script>
</head>
 
<body class="opciones">
  
  <a href="index.html" target="_self" title="Abrir nueva pestaña"> 
    <img class="irhome2" src="assets/home.png"> 
  </a>

  <h1 class="opciones"><img src="assets/icon_48.png" alt="[icon]" /> Configuración</h1>

  <script type="text/javascript" src="js/campos.js"></script>

  <input id="submit" type="button" value="Guardar">

</body>
</html>

Y el código de campos.js es el siguiente

campos.js

Código:

//<![CDATA[
  document.write("<ol>");
  for (i=1; i<19; i++) {
    document.write("<li><input id='nombreIco"+i+"' title='Ingrese el nombre del web site' placeholder='Ingresa el nombre del web site' size='40'>  ");
    document.write("<input id='linkIco"+i+"' title='Ingrese la dirección del web site' placeholder='http://direccion_del_web_site/' size='60'><br></li>"); 
  }
  document.write("</ol>");
//]]>

Con esto logro crear 38 campos input correctamente identificados. Ahora, el problema es guardar los datos localmente. Para eso tengo este script

Código:

$(function(){
  var data;
  
  function getSavedChannel() {
    if (localStorage.nombre_web1) {
      $("#nombreIco1").attr("placeholder", localStorage.nombre_web1);
    }
    if (localStorage.link_web1) {
      $("#linkIco1").attr("placeholder", localStorage.link_web1);
    }
    
    setTimeout(getSavedChannel, 1000);
  } getSavedChannel();
  
  $("#submit").click(function() {
    $("#checkResponse").remove();
    
    data = $('#nombreIco1').val();
    localStorage.nombre_web1 = data;
    data = $('#linkIco1').val();
    localStorage.link_web1 = data;
  })
})

Con el que puedo guardar, sin ningún problema, el primer dato. Pero deseo llegar a estos puntos:

1. Poder crear un loop que me permita crear ilimitados campos input, y no una cantidad fija
2. Poder leer y guardar todos los datos de los campos input creados.

¿Podrían darme pautas o recomendaciones sobre el tema?
Un saludo cordial desde Lima, Perú
Bendiciones

Alexis88 · #2 (**permalink**) 01/06/2017, 01:16

Si se va a tratar de una cantidad ilimitada de elementos, entonces no sería necesario un bucle ya que en algún momento tiene que detenerse. Lo recomendable sería que crees una función en la cual se genere y adhiera el nuevo para de elementos al documento, proceso que podría realizarse al pulsar un botón. Por otro lado, para leer los datos de todos los campos creados, puedes utilizar el método .querySelectorAll() con el cual puedes tomar de uno a más elementos, en conjunto con un selector avanzado de CSS, por ejemplo, uno que seleccione elementos cuyo nombre empiece por un patrón, digamos, la palabra "foo":

Código Javascript:

Ver originaldocument.querySelectorAll("[name^=foo]")

Una vez que tengas esta selección de elementos, podrás recorrerlos como si se tratara de un arreglo (en realidad será una lista de nodos), leer sus valores y almacenarlos. También podrías almacenar los datos de cada par de elementos por cada vez que se modifiquen los datos que estos contienen, para lo cual deberás apoyarte en los eventos del teclado.