En la sexta clase del curso de desarrollo de extensiones de Google Chrome vamos a aprender a crear una página de opciones que guarda la información en el navegador.
En esta lección vamos a crear una página de opciones para nuestra extensión en Google Chrome. La idea es que podamos guardar información de configuración de nuestra extensión a través de esa página utilizando el API de Chrome para almacenamiento de datos en el navegador.
Veremos también las opciones que podemos utilizar para configurar la página de options a través de nuestro propio HTML y JS o incluso insertando nuestra página de opciones dentro de la interfaz del navegador para que tenga un acabado a nivel de interfaz mucho más bonito. ¡Vamos a por ello!
¡Nuestra extensión tiene página de opciones! Es super sencillo utilizar las diferentes APIs de Google Chrome para poder crear una página de opciones. Ya vimos en anteriores lecciones que podíamos utilizar el API storage para almacenar datos y ahora la pondremos en práctica con un formulario sencillo.
Cuando tengamos creado el formulario de opciones añadiremos una función con Javascript para que guarde los datos en el navegador y para que sea capaz de cargar los datos del navegador y nos los muestre en el formulario reflejando las opciones marcadas y/o seleccionadas.
Recordad que el API storage nos permite almacenar datos localmente y también sincronizarlo con la cuenta de Google para que puedan utilizarse en cualquier navegador de Google donde se haya iniciado sesión con la misma cuenta de Google.
Ahora como deberes os animo a que pongáis en práctica un poco el código creando un una página de opciones mejor maquetada y que os guarde información con más coherencia que un simple ejemplo. Quizás podéis jugar a crear un formulario que os permita guardar contactos como una especie de agenda para así probar más opciones.
¡Por cierto! Que no se os olvide que si tenéis cualquier duda o comentario podéis escribirnos a través del panel de soporte :).
Todos los capítulos de este curso:
- Curso de extensiones de Chrome #1. Qué es una extensión y para qué sirve
- Curso de extensiones de Chrome #2. Estructura y funcionamiento
- Curso de extensiones de Chrome #3. El manifest.json de nuestra extensión
- Curso de extensiones de Chrome #4. Nuestra primera extensión: Hello world
- Curso de extensiones de Chrome #5. Modificamos webs con Content Scripts
- Curso de extensiones de Chrome #6. Almacenar datos en el navegador
- Curso de extensiones de Chrome #7. Extensiones que hacen peticiones API
- Curso de extensiones de Chrome #8. La interfaz de nuestra extensión
- Curso de extensiones de Chrome #9. La lógica de nuestra extensión
- Curso de extensiones de Chrome #10. Publicación de nuestra extensión