Crea una extensión de Google Chrome para un buscador de cupones como "Honey"

1. Promoción de Skillshare: Hola, soy Russell. Y bienvenidos a mis nuevas habilidades Check class, todo sobre extensiones de cromo. Llevo 15 años trabajando dentro por desarrollo web y móvil, y a lo largo de ese tiempo tuve la oportunidad de trabajar en una serie de proyectos y startups. En esta clase, vamos a estar pasando por todo lo que necesitas saber para poder crear una extensión de Chrome buscador de cupones bastante similar a la miel. Esta clase amigable para principiantes nos llevará a través de todos los pasos que debes saber para ir. Para ello desde crear una base de datos en base de incendios y conectarlo a una extensión del crimen hasta hokum creaciones publicadas en la tienda de cromo. Estaré grabando cada paso del camino para que veas exactamente lo que necesitas hacer. Necesitas cualquier experiencia de desarrollo si alguna vez has querido saber cómo crear extensión de cromo y este es el elenco para ti listo para empezar se unirá a mí en la primera lección 2. Crea la aplicación y las carpas de extensión de Firebase: empecemos. Entonces en este video de hace, nuevo inicio ¿qué? Se construye la base a partir de la extensión cromada. Entonces vamos a estar creando APP in fire Base, que vamos a estar usando como la base de datos que somos todos los códigos de cupón alcanzados Main se almacenarán. Después vamos a crear una carpeta con los archivos necesarios que necesitamos para la extensión del crimen , como el archivo Manifiesto Jason y similares, JavaScript y archivos HTML de fondo que la extensión que componíamos, Entonces nos agregará esta carpeta a chrome. El modo en que agregamos esto primero es como una extensión desempaquetada y luego al final, fuera del desarrollo, podemos empacarlo. Y eso es lo que luego presentarías a la tienda de Chrome Extension. Y luego empezaremos a conectar firebase a nuestra extensión para que puedas tener comunicación ida y vuelta desde nuestra extensión hasta la base de datos basada en incendios. Podemos empezar realmente a ponerlo todo junto, y luego el paso cinco está bien, solo refresca la extensión para que podamos empezar a ver cómo va a avanzar el desarrollo a medida que hacemos cambios en los códigos y tengo que enviarlo a chrome cada vez comprimimos el botón de actualización, por lo que lo hace mucho más rápido. Entonces empezamos por crear una nueva app en cinco base. puedas hacer eso simplemente yendo a la consola de firebase así y luego haciendo clic en Agregar proyecto. Por lo que es muy fácil tener que introducir un nombre para el proyecto, así que llamaremos a este buscador de cupones. Puedes llamarlo lo que quieras, sin embargo, sin embargo, así que solo tienes que dar click en continuar. Te preguntará si quieres agregar analítica a tu proyecto, puedes si quieres, pero solo voy a decir que no por ahora, solo para hacerlo más magra y luego crear proyecto. Esto puede tomar un par de momentos, solo cosa de fábrica Teoh y configurar. De acuerdo, así que tan pronto como el proyecto esté listo, puedes dar clic en continuar. Entonces queremos hacer es dar click en el ícono de la Web justo aquí y luego registrar un nombre para tu app . Por lo que de nuevo lo llamaremos Buscador de Cupones. No queremos vender cinco A's hosting, y hay click register app y ahora se le proporcionará este script aquí. Entonces todo lo que necesitas hacer ahora es solo copiar este dedo por un lado. Entonces lo siguiente que vamos a hacer es crear una carpeta sobre la necesidad de archivos que necesitamos para la extensión. Entonces para hacer esto yendo a tu editor de código de ordenamiento de Joy. Entonces para mí, eso sería átomo. Y luego vamos a empezar a crear una carpeta sobre los archivos que necesitamos. Entonces primero han sido Atom va a agregar una carpeta de proyecto. Entonces esta es mi, uh, uh, nueva carpeta de Created Just Tears. Cuando añadas una carpeta dentro de esto y lo vamos a llamar cupón, encuéntranos solo para mantener el mismo nombre ings en el camino aquí para mantenernos más fáciles. Y luego vamos a añadir un archivo dentro de esta foto. Bueno, voy a hacer para que sea fácil seguirlo es sólo arrastrar esta ventana hacia arriba Así que el espacio a lo largo de la parte inferior Aquí, futuro. Seguid. De acuerdo, Así que ahora puedes agregar tu editor de código debajo. Yo sólo estoy aquí 3. Crea archivos necesarios para la extensión: dentro de nuestra carpeta del buscador de cupones. Vamos a crear los archivos que necesitamos para ejecutar nuestra extensión. Por lo que acabamos de abrir el archivo Cranie. Aquí está el 1er 1 será el manifiesto. No los Jason Necesitaríamos ap dot Js y siguiente Necesitamos antecedentes. No, html y luego finalmente necesitamos firebase dot Js Estos son todos los archivos que estarán usando en el siguiente que tenemos que hacer es configurar un archivo manifiesto para que podamos realmente enviar extensión a chrome. De acuerdo, entonces dentro del archivo manifiesto, necesitamos crear un nuevo objeto aquí. Simplemente voy a entrar en algunos atributos que necesitamos para que nuestra extensión funcione con de Chrome. El 1er 1 es el nombre de nuestra extensión para que puedas poner aquí lo que quieras. Pero de nuevo, solo estoy seguir la misma patente ya tengo. Entonces vamos a llamar a este buscador de cupones, tener números de versión de este solo 0.1, entonces necesitamos una descripción cuál hasta? Cupones. Entonces los permisos que tenemos para entrar estos como una matriz. Entonces lo hacemos así. Y luego los permisos que necesitamos estarán activos tab esto nos da la capacidad de resolver acceder a la pestaña en la que se encuentra el usuario. Queremos poder correr esto en todas tus chicas. ¿ También conoces el acceso? Otros con pestañas también? Esto nos ayuda a poder acceder a nuestra página de fondo en el camino. Vamos a hacer comunicaciones de ida y vuelta. Entonces después de eso, seguimos agregando más opciones. El siguiente es el trasfondo. Este es un archivo que ejecutamos en segundo plano. Por lo que de nuevo será la página. Aquí está en el html de fondo, ver para poner cotizaciones por aquí. Entonces otra vez, fondo toe html Andi, no queremos que esto sea persistente, así que no solo estamos corriendo todo el tiempo justo cuando lo llamamos. Esto sólo ayuda, um, por la cantidad de llamadas, los makings. Simplemente lo guardamos, um así se desempeñó un poco mejor. A continuación, necesitamos que Teoh establezca el tipo de extensión que estamos creando. Hay una serie de formas diferentes en las que puedes tener una extensión con chrome. Puedes tener extensiones que solo aparecen si tocas el icono de la esquina. Aquí arriba en chrome tienen otras extensiones que inyectan contenido en la página como estamos creando aquí y tienes otras extensiones que agrega como una página de aterrizaje de Ucrania en New Tab. Ellos se hacen cargo de esa nueva pestaña mientras ella que pero para esta, va a ser que vamos a inyectar código en la página. Por lo que a eso se le llama guión de contenido. Para eso, tenemos que pasar información que vamos a estar usando. Esta es una matriz de nuevo. Por lo que esta matriz toma en un objeto. Por lo que el primero de estos atributos se llama Partidos. Ahora, este es el Senador aquí arriba. Nos dice en qué hijos queremos inyectar código ahora porque queremos que este guión funcione en cualquier sitio web, esta extensión del dedo del pie, cualquier sitio web. Si tenemos un cupón, estamos a punto de mostrarlo. Por lo que de nuevo pondrás todos tus RL's. Entonces tenemos que mencionar los archivos JavaScript reales que quieren incluir por lo que nosotros. Eso es app dot Js. Y entonces sólo queremos decir cuándo se debe agregar este contenido, Así guardar ejecutar un documento y esto debería ser una vez que se haya agregado todo fuera del contenido para esa página , que normalmente es suficiente, Algunas páginas, tales como ligados a buen ejemplo. Tardan un tiempo en cargar la página, y hay algún tipo extra de llamadas que se llevan a cabo eso cuando estás haciendo extensiones para pacientes como vinculados en quizás Gmail, necesitamos agregar tus propios cheques para asegurarnos de que al igual que los dibs y se cargan elementos de la página Mona Interactive. Pero para este ejemplo, ¿ cuándo qué? Vamos a estar haciendo esto, esto es perfecto. Entonces en una más, que es la versión manifiesto, que por el momento es la versión dos y luego quieres Teoh, agrega una política de seguridad de contenidos. Ahora bien, esta es una cadena bastante larga, que tiene toda la información que necesitamos para usar la base de fuego, que escribiré ahora. Pero tendré, um, um, esto para que puedas copiadora en una descripción de este video. De acuerdo, entonces esa debería ser toda la información que necesitamos ingresar para el manifiesto. Entonces puedes seguir adelante ahora y guardar esto. De acuerdo, Entonces ahora que hemos agregado que queremos entrar en el crimen, ve a configuración, luego ve a extensiones. Quiero hacer clic en cargar desempacado aquí, click cargar, desempaquetar. Entonces queremos encontrar la carpeta que acabamos de crear. Entonces para mí, esto está en los ojos. Buscador de cupones. ¿ Es qué? Haga clic en seleccionar. Apenas para entonces si buscamos esta nueva extensión, puedes ver justo aquí. Ahora bien, eso es un error en este momento. Eso se debe a que no tenemos ningún contenido en nuestra página. Tan solo asegúrate de que también tengas médicos. Si estás siguiendo de mayo de blanco si tu copia y pega, no te preocupes. Además, si vuelves aquí, despeja todo esto en un fresco, deberías verlo funcionar. Entonces este es el siguiente paso que te iba a mostrar en el paso cinco, realidad. Entonces una vez que hayas agregado tu extensión en chrome, cualquier cambio que realices, tienes que refrescarte, y luego estos se reflejarán. Entonces, por ejemplo, si vamos a esto es encontrar una tienda aleatoria aquí son extensión se estará ejecutando en esta página. Entonces si agregamos a nuestra app dress, este es el archivo que en realidad estará inyectando um, código en la página. Entonces si volvemos a mirar, tenemos un fondo, um, un archivo de fondo aquí, que está de vuelta bajo html. Pero esto en realidad no va a ejecutar nada en la página. Eso es justo lo que estamos usando para enviar información de ida y vuelta desde la base de incendios. Entonces si entramos aquí y solo saludamos mucho desde la extensión, entonces volvemos a las extensiones, refrescamos y luego recargamos esta página. puedes ver ahora tenemos más, dice ex Hola de la extensión es que muestra son extensión está en esta página. Andi. Se carga correctamente, y el archivo manifiesto ha funcionado. Ahora ya puedes ver cómo se ve tu fecha de fondo mañana aquí en el siguiente paso empezará a agregar cinco base en extensión y empezará a hacer las conexiones a una base de datos . 4. Conéctate la extensión a nuestra base de datos: antes de continuar, hará una corrección ortográfica rápida a partir de los últimos videos donde tuvimos persistente. Justo aquí. Asegúrate de cambiar esta a a a una A como esta, pero veo sólo cambio necesidad de hacerlo justo eso. Entonces este video que íbamos a estar agregando en conexión a un guión de base de fuego. Entonces si volvemos a la base de incendios o encontramos información justo aquí, queremos llevar aquí la información de conflicto de la base de incendios. Tan libre Copiar en. Vamos a pegar esto en el archivo Fire base dot Js. Entonces ve a cinco base y pegamos esto. Entonces esto es lo que tenemos que hacer a la base de fuego. Inicia archivo Jess por ahora. Pero volveremos a este expediente más adelante. Entonces para guardar esos cambios y luego en segundo plano o HTML, queremos hacer una solicitud a este archivo firebase en. Queremos también asegurarnos de que cargamos el sdk firebase. Por lo que la forma en que funcionan las cosas en las extensiones de cromo es un poco diferente. Teoh, podríamos haber visto sólo en sitios web normales sobre cosas ausentes. Al menos no puedes llamar, um otros Js externos directamente desde tu extensión. Entonces lo que tenemos que hacer esencialmente es usar este fondo o HTML como un puente entre nuestra extensión donde inyectamos el script en la página en al sitio web que pasó en las fechas de fondo a Mel File el cual tendrá la conexión a la base de fuego. Eso es lo que tenemos para hacer este paso extra. Pero te mostraré lo que esto significa. No es demasiado complicado. Simplemente ayuda a hacer esto o realizar un buen té con cromo. Entonces queremos hacer es en segundo plano i html Si volvemos a chrome, solo quieres tomar este guión y pegarlo en? Y luego si solo copiamos este mismo guión y pegamos, hará un cambio aquí dos base de datos y luego solo cambiamos el número de versión Teoh 7.9 Doctor, estoy seis pies más al día a partir de marzo de 2020 y luego queremos anuncio de Teoh otra vez como oh, cinco base que llamaría en este expediente justo aquí. Entonces si guardamos esto y ellos vuelven a Chrome y refrescan ahora tendrán firebase conectada , lo soy si volvemos a extensiones. Refresca esto. Si lo sabemos, click en las vistas del inspector, puedes ver que tenemos descripción que queremos justo aquí. Entonces si realmente volvemos a firebase dot Js y hacemos una consola log off base de fuego. Refrescar este Abrir días de fondo para molino. Se puede ver ahora que estamos conectados a la base de incendios. Esto es lo que necesitamos para empezar a hacer conexiones hacia y desde la base de datos. 5. Cómo configurar los eventos de mensajes de Chrome: Ahora en este video, vamos a Teoh hacer cambios a un archivo Js de mapa para que podamos empezar a agarrar el nombre de dominio de la página que estaban encendidas y luego enviar esto a través para tener página HTML de fondo, que luego podemos comprobar con fire Base si tenemos alguna cupones de esta página. Entonces empecemos por eliminar este script de alerta que tenemos aquí en agregar unas cuantas secciones queremos empezar a codificar, por lo que la primera será conseguir el dominio actual. Por lo que estableceremos esto como una variable fuera de dominio y esto será igual a la ubicación de la ventana, nombre de host. Pero esto puede tener el prefijo http o www dot en este momento. Por lo que sólo queremos asegurarnos de que despojamos todo esto para que podamos hacer esto con un simple reemplazo. Entonces primero comprobaremos si solo tiene http y luego uno para 82 ps encendido, luego finalmente para w w dot también, así . Y entonces también queremos asegurarnos de que estamos dividiendo cualquier parámetro hash de esto también, lo cual podemos hacer así también, lo cual podemos hacer así . Es bueno asegurarnos de que obtenemos esta expresión incorrectamente y quieren pasar solo en la primera parte. Entonces eso debería asegurarse de que el nombre de dominio es todo lo que estamos obteniendo de esto. Y entonces estamos listos para realmente enviar esto a través de fondo a HTML. Entonces la forma en que lo hacemos es utilizar el objeto de extensión chrome y queremos usar el tiempo de ejecución. Y esto nos permite enviar un mensaje a través de Teoh background waged email. Entonces cuando terminamos bien y esto sería capaz de agregar una pieza de código al fondo extremo El, que en realidad llamó al archivo firebase. Y por eso, como evento de escucha para cualquier mensaje que se envíe, Pero primero crearemos el mensaje aquí. Por lo que queremos establecer una serie de parámetros para esto. Por lo que envié un objeto a través de que tiene un comando encendido. El motivo por el que queremos poner un comando aquí es porque queremos alrededor de un centavo diferentes tipos de solicitudes a través de esta vil. Por lo que el solicitar que queremos poder crear es primero una solicitud. Cuando cargamos la página para comprobar si tenemos algún cupón para este aviso de dominio que hablaba mal. Solicitudes familiares. Entonces pasaremos esto. Lo llamaremos un fetch en el segundo tipo off comando que quieren hacer es si queremos que Teoh envíe un cupón a la base de datos. Estos son los dos tipos diferentes que vamos a estar creando. Pero ahora mismo nos vamos a centrar en este tipo. Entonces vamos a pasar algunos datos también, que serán un objeto. Y llamamos dominio, y sólo vamos a pasar en esta variable justo aquí se queda los únicos parámetros que quieren justo aquí. Y entonces obviamente queremos escuchar respuesta. Y eso se enfriará en que se enviaría justo aquí. Aquí es donde obtenemos una respuesta de la base de datos, que es de fondo de HTML, lo que en realidad lo hace fresco. 25 a stodgy s. esto sólo nos ayuda a recordarnos dónde se harán estas llamadas. Entonces estamos seguros que por ahora y después queremos entrar para que tengamos html de fondo y luego base de fuego. Entonces aquí, necesitamos crear un oyente para cualquier mensaje que se esté enviando a través de fondo a 80 mil página. Entonces la forma en que lo hacemos. Esto es muy similar al mensaje enviado de chrome runtime. Entonces en su lugar ponemos el tiempo de ejecución del crimen en el mensaje. Quieren agregar oyente, y entonces esto estará buscando estos mismos parámetros. El primero sería el mensaje que será todos los parámetros. El ascenso justo aquí, llamará a la sis mensaje. Y entonces tenemos dos opciones extra aquí, que Ascender. Y entonces la respuesta esta es queremos enviar la respuesta de vuelta tres a esta función justo aquí para que podamos acceder a la información dentro de ésta. Entonces abre esto a una función propia y ellos insights aquí porque, como mencionamos, vamos a tener los dos tipos diferentes de comandos. Habrá el fetch para agarrar los cupones, y luego habrá un post para empujar nuevos cupones a la base de datos. Solo queremos asegurarnos de qué tipo de mando se nos ha enviado. Entonces decimos mensaje, pero nuestro mando y es igual a buscar. Pero entonces podemos empezar a ejecutar algún código aquí. Entonces lo que haremos justo ahora solo para probar esto es en una consola cerrar sesión el dominio. Entonces eso está listo. Dominio es igual a mensaje. No datos, Dr. Main. Simplemente escoge segundo y luego en consola registraremos el dominio justo aquí. Entonces guardamos eso. Y asegúrate de que tengamos esto o correcto. Justo aquí volveremos luego a Chrome on ir a las extensiones, refrescar la extensión, y luego ir a una página y luego comprobaremos si la página html de fondo está registrando el dominio en la consola. Entonces otra vez, presionamos fresco justo aquí, vamos a cargar, um, tienda de nuevo. Entonces si solo conseguimos un par de sitios web justo aquí y luego revisamos la página de fondo, puedes ver que ahora estamos obteniendo el registro de resultados justo aquí en la consola. Entonces si cargamos otra página y luego revisamos el registro, se puede ver que estos resultados se están actualizando como y cuando vamos en estas páginas. Entonces eso significa que tenemos una conexión de AP a través de html de fondo, que luego podemos recibir estas solicitudes y luego enviar un resultado de vuelta. ¿ Qué? En el momento en que solo estamos bloqueando esto a la página. Por lo que a continuación necesitamos enviar este resultado de vuelta a la app Js para que podamos ver una respuesta 6. Configurar la estructura y los cupones de base de base de base y fetch: De acuerdo, Entonces en este siguiente video, vamos a hacer una solicitud a nuestra base de datos basada en muslos y enviar el nombre de dominio codificado en base 64. El motivo por el que vamos a codificar el nombre de dominio es porque dentro de firebase dentro base de datos Por aquí, no se pueden usar guiones o puntos como tres claves. Por lo que necesitamos asegurarnos de que esté codificado correctamente antes de llegar a esta etapa. Entonces vamos a estar usando la base de datos en tiempo real por aquí. Vamos a iniciarlo en modo de prueba a un estado que creativo ahí y mover haciendo la solicitud a pensamiento dominio slash. Entonces dentro de aquí estará el nombre de dominio codificado. Y entonces tendremos un array off códigos de cupón que puedes tener dentro de aquí por lo que se mostrarán . Entonces así es como el aspecto estructural tiene un ejemplo. Entonces tendremos el nombre de dominio codificado justo aquí y habrá un código de cupón array off y para cada código de cupón tendrá el código como este y en una breve descripción de cada cupón. Entonces, por ejemplo, ¿cuánto dinero te queda por este cupón? Por lo que ahora vamos a crear un script que hará búsquedas hacer solicitud a una base de datos en cada uno de estos. Así que sea dominio Ford slash. Y entonces lo que codificaron para hacer nombre es un efectivo de los resultados. Por lo que nunca podemos terminar de estos en extensión. Entonces si saltamos de nuevo Teoh, ese es él ahora o tu coeditor, vamos a entrar en un comando fetch justo aquí para asegurarnos de que no es el Post Command y necesitamos codificar nuestro nombre de dominio. Entonces vamos a crear un nuevo cable aquí cuando codificemos el dominio en esto será usando el script Java basado 64 en la función de código, que es B t o a. entonces simplemente pasamos en dominio justo aquí. Deshazte de este candado de consola. Esto es con lo que queremos estar realmente haciendo un cheque. Y entonces ahora solo conectamos a Fire Base y vemos si tenemos algún cupón. Ya hemos configurado una conexión a base de incendios para que podamos llamar a nuestra base de datos de inmediato. Entonces acabas de llamar a base de datos y luego necesitamos la referencia o ruta fuera del carbón que queremos hacer Ligeramente dijo que esto sería dominio y luego reenviar barra Encodificarlo dominio ahora porque vía base te permite obtener resultados en tiempo real. Tenemos que asegurarnos de que decimos expresamente una vez justo aquí es esto lo va a buscar, obtener la información más reciente cada vez que hacemos un cool y luego necesitamos escuchar la respuesta. Por lo que aquí vamos a obtener resultados. Entonces diremos respuesta. Esto lo enviará de vuelta a la app Js Así vamos a obtener los resultados aquí para que podamos empezar a usar esto para renderizar en pantalla para decir que queremos establecer una serie de parámetros diferentes. Sí, en realidad podemos depurar, averiguar cuál es toda la información que estamos recibiendo de la base de datos. Tan triste tipo de resultado. Nosotros queremos un estatus también. Entonces si se ha llegado a esta etapa ha sido un éxito y entonces por supuesto, habría pasado los datos en un oleaje. Esta será instantánea. Esta es la misma creencia asignada a esto aquí y luego pasaremos en todo el valor que tenemos me van a buscar de cinco base y luego solo queremos decir lo que la solicitud inicial waas, que lo ayudará para la depuración. Entonces otra vez, vamos a poner todo este mensaje justo aquí. Ahora deben enviar este resultado. Entonces si ponemos aquí un candado cónsul para la respuesta, ahora podemos ver cómo se ve esto sin tener que ir al fondo a HTML cada vez. Entonces si vamos a chrome, refrescamos nuestra extensión y van a Ah, página web, Veamos qué respuesta obtenemos de la base de fuego enterrando mentes. Solo tenemos este ejemplo de prueba aquí por el momento, por lo que actualizarás. Y ahora vamos a una página web. Inspeccionar, Revisar la consola. Aquí se puede ver. Respuesta de base de fuego. Indefinido. Entonces esto justo aquí está mostrando que no tenemos ningún registro de nada en la base de datos en momento para esta ruta. Pero si ahora vamos a codificar esto, en realidad podemos asegurarnos de que tenemos una respuesta aquí. Entonces si quieres en código esto a mano, va este sitio práctico khirbet 64 codifica la pasta de perro en la cuerda que quieres codificar . Entonces copiaremos esto. Vuelve a una base de datos, crea una nueva entrada justo aquí. Entonces este es ese nombre de dominio. Entonces queremos asegurarnos de establecer un código. Este es un nombre de cupón, triste descripción. Entonces si agregamos esto a la base de datos, entonces volvemos aquí, Podemos ver que el error sigue ocurriendo. Pero si volvemos a un editor de código justo aquí y luego debajo de punto hacer esta comprobación para el comando que necesito agregar a cambio. Cierto. Y esto mantendrá el mensaje pobre abierto para nosotros mientras hacemos la petición a los cinco con sede en un estado. Entonces si volvemos ahora y actualizamos nuestra extensión e intentamos esto de nuevo, puedes ver ahora sí tenemos una respuesta de Fire Base, y debería mostrar nuestro ejemplo. Cupón. Yo sólo estoy aquí. Pero si vamos a un nombre principal de dos diferentes, um, sólo levitas otra vez es un ejemplo. Ya verás que la respuesta es no, porque no tenemos cupones para esto para este dominio. Entonces tenemos éste aquí. Ahora eso está vinculado hasta google dot com. Por lo que en el siguiente video empezaremos a asegurarnos de que tomemos estos códigos de cupón que se han enviado de vuelta para la base de datos en Miramos a través de estos y en realidad los mostramos en la pantalla para redondear para seguir buscando en el registro de la consola y depurándolo cada tiempo por lo que empiezo a trabajar lejos en hacer pantallas reales para estos datos. 7. Renderizar cupones en la página.: a continuación, tenemos que empezar a mostrar los cupones que hemos recogido de la base de datos. Por lo que en el último video, buscamos obtener las respuestas de la Base de fuego. Podríamos enviarlo de vuelta, um, a la respuesta del mensaje que queríamos aquí. Entonces ahora tenemos los cupones, si hay alguno en esta variable justo aquí. Entonces en este video, vamos a recorrer esta matriz si hay alguna escalera de cupón y empezar a renderizar estos en la pantalla. Entonces vamos a empezar por crear una nueva función aquí abajo. Estamos geniales. Este pasado cupones como este, y luego por aquí, que es la disfunción fría, luego per en datos de punto de respuesta. Entonces de esa manera, nos aseguramos de que este mensaje de enviar a nuestro archivo basado en fuego o Jess haga un cool. Obtendremos la respuesta que envío la respuesta a través de esta función por aquí. Ahora, para empezar, solo queremos recorrer la matriz de cupones y luego Adam a una lista, y luego usaremos esto más adelante. Entonces pondremos todo esto dentro de un bloque try en caso de que haya en caso de que no haya cupón. Por lo que esto será nulo. Por lo que no queremos estar haciendo bucle algo que no es excel llamadas seguidas. Entonces si acabamos de colocar dentro de un bloque try que cogerá la época y no tendremos ningún problema. Entonces llamo a este cupón html, y esto estará vacío para empezar, los más nuevos solo dicen cupones para cada uno. Y acabamos de poner esto como cupón en índice de bonos fijo ahí arriba. Entonces esto recorrería la matriz y luego establecería cada elemento como cupón y porque el índice allí si lo necesitamos. Pero lo que vamos a hacer es llamar cupón anuncios html por cada vez. Um, solo dices dentro de esta lista aquí el código, este será el código de punto de cupón. Entonces de nuevo, desde las semanas de base de datos hasta en el último video, vimos que tenemos dos parámetros para el para el cupón. Ahí está el código, y hay una descripción. Por lo que después de esto se establecerán las descripciones. Acabamos de poner esto en cursiva descripción de punto cupón selfie, y luego asegurarnos de cerrar esa etiqueta justo ahí. Entonces esto significará que tenemos un, um esta variable aquí tendrá todos los códigos fuera. Códigos de cupón en una lista agradable para nosotros, lo que podemos usar esto para realmente renderizar en la página. Entonces lo siguiente que tenemos que hacer es crear algunos elementos que podamos usar para mostrar esto. Pero primero, sólo necesitamos dedo del pie en un cheque en caso de que esta respuesta fuera no para que no tengamos un error. Entonces solo decimos catch, luego establecemos variable para esta era justo aquí y comenzamos. Si solo somos locales a la pantalla y solo decimos que ningún cupón encontró este dominio y luego solo pondremos el mensaje de error ahí nos dijeron que podemos desacreditar eso. Por lo que guardé esto por ahora. Antes de eso, sólo queremos a Teoh. Simplemente queremos renderizar esta lista en la página. Entonces para hacer eso, crearemos un nuevo elemento justo aquí, saltando por delante de mí allá. Entonces llamamos a esto, um, exhibición de cupones, y este será un nuevo desarrollo como este especial para capitalizar eso. Y entonces diremos, sigue adelante, solo juega en 80 mil. Se enfría. Corregir estas cotizaciones y luego dentro de la tabla poner el cupón html y luego es solo un asunto agregar esto al cuerpo así Así que lo que tenemos ahora es que tenemos un mensaje enviado desde antes con un artista función de cupones nuevos pasados que tomará en la lista fuera cupones justo aquí. Por lo que los datos de respuesta fueron entonces bucle sobre todos los cupones que se han encontrado y agregarlos a esta lista en. Entonces creamos un nuevo desarrollo justo aquí y luego establecemos esto como el interés para derretirnos, luego anexamos a la página. Entonces vamos a actualizar la extensión y ver cómo aparece esto. Hemos refrescado nuestra extensión. Ahora bien, si vamos a Google, que es donde tuvimos esto en primer lugar, se puede ver un cupón está apareciendo aquí arriba sin ningún estilo por el momento. Pero eso es bueno. Ese es el cupón que teníamos ahí. Si cambiamos algo sobre lo necesario ponemos tipo de signos de exclamación Después de esto, estaban frescos. Ya ves, se está actualizando cada vez desde la base de datos, razón por la que estamos usando la base de fuego porque nos ayuda a tener una base de datos realmente rápida, fácil de acceder, y ellos pueden hacer de toda la autenticación Onda para nosotros mantiene todo agradable y rápido. 8. Añade un evento clic para abrir la superposición de la lista de cupón: De acuerdo, Entonces en este video, vamos a tomar la pantalla que tenemos hasta ahora y contener esto. Hemos sido un elemento clicable que al hacer clic en él, se abrirá y mostrará la lista de cupones dentro en lugar de esta visualización de clasificación aleatoria en la esquina de la pantalla aquí. Entonces volvamos a saltar de nuevo a un editor de código y empecemos a Teoh, hacer esto difícil. De acuerdo, Así que aquí está el código que tenemos actualmente donde tenemos un cupón sí juega desarrollo, y esto se ha agregado a la pantalla, lo cual es un gran comienzo, pero queremos cambiar. Eso rodea eso. Tenemos una parte que es genial, puedes dar click en la que luego mostraría esto. Entonces, empecemos por ocultar realmente este elemento. Um, Para empezar por Onda queremos establecer una clase llamada esta para que podamos acceder más adelante para que puedas hacerlo con solo decir apellido y nos llaman esta lista de cupones. Tan sólo tener un par de subrayados había querido un inicio en entre Onda queremos Teoh agregar un poco más html aquí solo para dejar claro lo que se ha mostrado especie de encabezamiento aquí y decir cupones. Y luego acabamos de establecer otro o subencabezamiento justo como cupones de lista fuera. Y podríamos incluso pasar por el nombre de dominio aquí. Um, así podríamos decir lista de cupones para y luego en el dominio. Entonces le echamos un vistazo. ¿ Ahora qué? Todavía no te verás porque esto está oculto. Pero lo que quiero hacer a continuación es añadir un pequeño círculo en la parte superior de la pantalla aquí que si haces clic, se abrirá cardo muestra su siguiente movimiento ligeramente más abajo aquí. Andi, crea otro elemento llamado botón cupón. Entonces de nuevo, con documento crea elemento y esto será un div. Entonces tenemos un botón de cupón aquí. Pero dale a esto un nombre de clase apagado, mantente encendido botón. Y luego queremos agregar un poco de estilo a esto. Entonces estamos justo en esto como CSS así en una lista de cosas aquí. Entonces lo primero que queremos hacer es, um asegurarnos de que tengamos una altura fuera menos alrededor de 30 píxeles. A con de 30 píxeles. Queremos que sea redondeado. Dipels ha tenido un radio de frontera del 100%. Tengo esta nueva línea de país aquí así como esta, Podemos llevar en el borde de un pixeles Andrada, color de fondo y dicho color de texto solo para que podamos ver esto probablemente se verá horrible para empezar, pero vamos darle estilo más adelante en el curso para que se vea mucho más atractivo para el usuario. Pero empezar de esto se asegurará de que tengan algo con lo que podamos interactuar. Um, semestres en otra nueva línea justo aquí. Entonces tenemos las cotizaciones aquí en cada línea. Así es empezar con uno. Tener uno cerrándolos para eso. Después de esto. ¿ Quieres tener los iconos más que podemos agregar a esta cadena? Queremos que se pueda hacer clic en. Entonces quiero fijar las posiciones del puesto serán fijadas. Entonces a medida que nos desplazamos por la página, se quedará ahí. Queremos que sean cinco fotos desde la parte superior de la pantalla y cinco imágenes desde el lado derecho de la pantalla. Entonces otra vez, por aquí, Andi, esto debería ser todo lo que necesitamos. Simplemente tenemos que establecer contenidos de Cem con texto la línea al centro cerrar la cuerda, justo ahí y allá. Queremos establecer en html Teoh,debería decir, debería decir, Cocinar en eso podría no encajar como si fuera eso solo checa esto aquí en. Por último, queremos en esto a la página así. Entonces por ahora, una fresca, uh extensión y ver qué obtenemos. De acuerdo, podemos ver que nuestro círculo está apareciendo por aquí, pero no es el más fácil de ver. Solo asegurémonos de que indexamos esto correctamente. Entonces si vamos, um, um, vuelta por aquí, sólo di, dicho Índice, eso es un nueves ahí. Sólo dedo del pie. Ajustar la jerarquía. Actualiza de nuevo la extensión. Puertas ahora por encima de la cima. Por lo que ahora queremos hacer es agregar un clic eventos. Cuando se haga clic en esto, abrirá en pantalla la lista de cupones que teníamos antes de querer estancar. Eso está bien así que aparece por aquí. Solo arreglemos esta tecnología de cupones para que esté bien centrada. Es así que lo haremos solo diciendo display flex, justifique centro de contenido en un centro de ítems de línea. Simplemente arregla esto aquí y luego quieres agregar un poco de estilo por aquí también. Entonces lo van a hacer si solo copiamos todo esto Andi quiere a un máximo de unos 300 azotados por unos 300. No hace falta un radio de frontera aquí. A lo mejor tres píxeles. Algo justo alrededor de los bordes. Un poco, Um, en el resto de esto. Quieres mover esto un poco más abajo por la página. Entonces no es solapamiento. Otros elementos fueron, digamos, un top de 100 muy ligeramente. Reduzca ese 90. Nosotros no hacemos el texto la línea para ser centro o esto tampoco. Si solo miramos por encima de este desbordamiento repentinamente oculto porque tenemos un elemento de lista aquí yo mismo . Um, empuja hacia un lado. Entonces deberíamos tener todo aquí. Entonces si solo cambiamos esto a un emoji, tal vez éste. Entonces es seguro. Esta refresca nuestra extensión. De acuerdo, Tenemos un ligero tema ahí. Vamos a comprobar lo que tenemos fuera de curso. Estamos diciendo mantequilla de cupón, no la gente exhibe. Por eso no se ha definido aún. Entonces si refresca esto, deberíamos ver nuestra actualizada solo estoy jugando aquí, y luego solo necesitamos agregar un evento click para hacer esta pantalla. Por lo que necesitamos quitar el tipo de pantalla de flex porque está haciendo que estos elementos aparezcan en una columna. Por lo que esto se ocultará entonces. Y luego cuando hacemos clic en esto, debería mostrarlo. Entonces acabamos de tener código para estos ahora, así que eliminamos este flex de pantalla Y luego vamos a crear una nueva función aquí abajo. Solicitar crear eventos No te oigo decir grandes eventos es una nueva función. Quieren decir selector de consulta de documentos y quieren obtener el nombre de clase de estos botones. Si solo copiamos esto, péguelo aquí, tía Event, oyente al click. Y entonces queremos que esto ejecute una función aquí abajo. Entonces cuando se haga clic en esto, queremos mostrar este elemento Aparece por lo que queremos tomar el otro nombre de clase. Empiezo aquí ese bloque display de estilo. Entonces deberían crear este evento aquí abajo que agrega un oyente de eventos al botón, cuál es eso relevante? Justo aquí. Entonces cuando se hace clic en esto, actualizamos el estilo de este elemento aquí arriba para mostrarlo. Entonces solo volvemos ahora o fresco esto para que como se puede ver en los cupones que se siguen mostrando actualmente , eso es porque este CSS está sobreescribiendo. Ellos son CSS aquí está sobre escribir lo que hemos puesto aquí arriba. Entonces ponemos esto debajo. Elimina esa que refresca los casos. Aquí vamos. No se muestra la lista de cupones. Si pinchamos aquí arriba , aparecerá. Si pasamos a un dominio que no tiene cupones, por ejemplo, por ejemplo, este sitio de Argo aquí, podemos ver que nuestro pequeño ícono no está apareciendo. Es un más adelante en el curso, vamos a hacer un cheque para ver si no hay alguno. Los cupones seguirán mostrando el icono, pero en un diseño ligeramente diferente para que los usuarios puedan enviar sus propios cupones para ese sitio . Pero por ahora, podemos ver que está detectando desde la base de datos si existen cupones. Si lo son, mostrará este icono en la esquina, y los usuarios podrán hacer clic en ellos y ver la lista de cupones. Por lo que obviamente quieren que esto se vea mucho más bonito y más fácil de usar. Y si hay más cupones para hacer su, pueden desplazarse hacia abajo y tomar copia fácil. Pueden copiar fácilmente este código de cupón y añadirlo a su cesta. Obtienen un descuento, por lo que estas son cosas lo estarán haciendo más adelante en el curso. Pero ahora tenemos un poco de estilo básico puesto. Estamos mostrando los datos de nuestra base de datos en base de incendios. Y entonces eso hace una comprobación para ver si este nombre de dominio codificado es el patriota en que mostrará estos cupones para que el usuario los use. 9. Crea un archivo CSS y rellena con estilo: bienvenido de nuevo a esta nueva sección. Por lo que en esta sección vamos a cambiar el diseño de una extensión delictiva por aquí. Por lo que será ajustando el pequeño botón que tenemos aquí que abre la extensión. Hazlo así si vuelves a hacer clic en él, se cerrará y empezará a agregar algo de estilo a la extensión. Por lo que no se ve así. Está apagado una vez basado, horrible color azul. Pero esto no es un curso de diseño, pero lo vamos a mover para que sí empiece a verse mucho más bonito. Y luego puedes tomar esto para con tu propio diseño y cambio que quieras hacer. Pero lo que vamos a estar haciendo primero es empezar a saltar de nuevo a un editor de código, y comenzó a cambiar de estos estilos. Volvamos a un editor de código ahora. ¿ De acuerdo? Es una de las primeras cosas que quieres hacer es empezar a mover a algunos de nosotros marcando a través su propio archivo CSS para que no tengamos que importar estilos directamente a la página así . Entonces para hacer esto yo para volver a un archivo manifiesto y donde tengamos nuestros scripts de contenido, vamos a agregar una entrada extra a este objeto llamado CSS. Y esto será similar a lo que tenemos hasta Js arriba justo aquí. Esto sólo se llamará cupón punto CSS Y asegúrese de agregar un común aquí para que este objeto YSL en eso correctamente y luego después de eso parecería agregar un nuevo archivo llamado cupón dot CSS. De acuerdo, entonces tenemos este archivo aquí ahora, y está vinculado a un archivo de manifiesto para que podamos acceder a esto desde AP. Jess, no tenemos que dejar de usar este CSS dentro de ese JavaScript para que puedas eliminar todos estos , pero vamos a empezar a mover esto a través de ATS cupón dot CSS. Entonces lo que quieres hacer primero es simplemente copiar el CSS. ¿ Tenemos aquí? Toma nota del nombre de la clase para eliminar esto a través de aquí, agarra el nombre de costo pega esto en. Entonces tenías un punto delante de él y luego quitarte todas las citas, um y más signos que teníamos entretenidos antes Entonces solo queremos ajustar el endeudamiento índice correctamente. Entonces es más fácil para nosotros leer y hacer cambios, así que simplemente guardamos que quieren volver a hacer esto por los demás elementos. Nos hemos quitado el sexo. Esta parte, el abrigo ahora no más aquí abajo. Tenemos el botón. Copiaremos con este código, volveremos a un archivo CSS y volveremos a hacer el mismo proceso. Es eliminación de las cotizaciones. De acuerdo, así que vamos a hacer algunos cambios impresionantes también. Vamos a asegurarnos de que tenemos todo esto organizado y estructurado muy bien dentro de nuestro archivo CSS. Por lo que no tengo que seguir retrocediendo dentro de cuatro palabras. Cuando haces estos cambios, no el perro aquí arriba por un nombre de costo y luego ahorra. Y entonces de nuevo podemos quitar esta línea justo aquí. De acuerdo, así que guarde esto ahora. Volvamos a nuestra página de extensión, actualicemos nuestra extensión y veamos si esto sigue funcionando con archivo CSS. Más bien, Y tener que Thestrals agregó directamente en JavaScript tailandés, un caso que podemos ver, está funcionando bien. Aún así, aquí está Ahora empecemos a cambiar realmente el estilo que tenemos antes de cambiar a estilo. Quieres realmente asegurarte de que al hacer clic en el icono para abrir ah lista de cupones se asegurará de que si vuelven a hacer clic en él, lo cerrará solo para que podamos liberar el espacio para que el usuario haga esto. Sólo vamos a sumar en un pequeño cheque justo aquí abajo para ver si ya aparece la lista de cupones . Entonces solo hacemos eso diciendo, si el tipo de visualización de estilo es un bloque y entonces diremos que no es, agregaremos aquí en esta línea. Entonces si actualmente es un bloque, queremos cambiarlo para que quede oculto y luego lo contrario que si es un bloque, si no es el bloque, queríamos ser un bloque, por lo que eso solo significaría si volvemos ahora podemos dar click tipo de 80 aparecen cuando volvemos a hacer clic, y oculta lo siguiente. Queremos hacer un par de los cambios como este. Entonces aquí arriba queremos cambiar esto de ser el efectivo que Emoji eligió para ver por cupones como así así podemos empezar a cambiar el diseño. Podemos cambiar el contenido que se muestra solo para que podamos tener en estos nuevos cambios de diseño . Empieza a verse un poco más agradable. Entonces otra vez, vamos a cambiar la redacción aquí arriba también. Entonces sólo cambia esto para decir, en lugar de lista de cupones porque yo sólo diría algo. Ceras, cupones. Hola, que han usado frijol para. Y luego sólo pondremos el nombre de dominio. Sólo ha habido audaz. Simplemente bolos el dominio así ¿Y luego qué? Probablemente deberíamos hacernos. Bueno, simplemente mueven esto en la línea 20 otra vez solo para mantener las cosas mucho más fáciles de leer. Y luego aquí dentro, agregaremos otro párrafo que solo dirá, haga clic en cualquier capa para copiar una noticia. Por lo que esta línea justo aquí es la última Usti en símbolo. Y entonces queremos cerrar ese párrafo, y creo que deberíamos hacer de esto un talico un oleaje. Pondría esto en línea justo por ahora. Entonces otra vez, vamos a guardar esto. Podríamos ver que tenemos un cambio aquí arriba, y luego tenemos un poco más de información ahora. De acuerdo, así que estamos casi listos para empezar a agregar los cambios CSS que queremos para, uh, lista de cupones aquí y el botón de cupón. Pero primero, sólo tenemos que cambiar la forma en que mostramos los cupones eso que hace que se vea un poco más clicable y que sea para que cuando sí empecemos a leer el estilo, podamos seleccionar estos elementos mucho más fácil. Para que puedas agregar el estilo que queremos. Volvamos a nuestro editor de códigos y solo hagamos algunos cambios justo aquí. Entonces para hacer esto, vamos a desplazarse hasta aquí hasta donde estamos ingresando el código para un cupón. Simplemente voy a quitar esta parte aquí, ese código diciendo y vamos a poner aquí un elemento span de una clase de código y luego cerrarlo así. Entonces vamos a mover este siguiente elemento aquí a una nueva línea. En lugar de poner esto dentro de las etiquetas E M para cursiva, lo vamos a poner en su propio párrafo. Y luego una cosa misión. Cuando hacemos un swot es en alguna flecha de emoji toff como esta solo para que agregue un poco de flujo extra a la forma en que estaban mostrando esto. Pero de nuevo, si quieres cambiar esto ligeramente, puedes tener tu propia pantalla. Te recomiendo solo, ya sabes, agregarle tu propio sabor de tienda justo aquí, Pero puedes copiar el CSS que estoy agregando compartir vinculado esto después del video, para que puedas usar el mismo CSS si quieres. Y luego a partir de ahí, solo sabes cosas. Haciendo el tuyo propio en un logo. Si quieres en cosas como esta, digamos eso ahora, solo para ver solo para ver cómo se ve esta pantalla. Entonces volvemos a las extensiones. Recargar fresco en caso de que podamos ver que es un espaciado solo un poco más. Entonces ahora saltemos al archivo CSS y empecemos a agregar algunos estilos más. Case se detendrá aquí con la lista de cupones y vamos a agregar algo de estilo primero para los cupones de cabecera . Por lo que escogí sólo un simple de la familia de la séptima. Estamos estableciendo un nuevo tamaño de fuente de 26 para que destaque un poco más. Quieren agregar un margen al fondo de alrededor de 20 píxeles. Fue ese un pozo sin fondo fronterizo de un píxel, sólo una especie. A color gris claro. Tendremos relleno al fondo solo para espaciar este borde y luego fue una línea hitan bien para que los márgenes sean solo un poco más consistentes. Esto serán 26 picks. También lo mismo, Um, tamaños. Diviértete tamaño. Después añadiremos un poco de estilo para párrafo. Soy etiqueta dentro de la lista de cupones, así que estamos cambios ligeramente en la familia de la granja aquí para ser la altura de la línea Sand Saref. 20 píxeles de tamaño de fuente de 16. Apenas tenía un poco de contraste contra la cabecera. Céntrela y luego agrega un peso frontal de 500 y pon un color aquí. Un oleaje, un gris claro, y quieren quitar el margen. Top se pone a continuación. Se desea agregar algunos estilizados. Toothy, um, lista real de nuestros códigos de cupón. Entonces de nuevo, este siendo arrastrarse en la lista, obtendremos el elemento de lista cambiaría el tipo de estilo de lista. Es una monja, y luego solo quita cualquier margen por palmaditas de la izquierda. Y luego somos artículos naturalistas de estilo. Por lo que quieres contener estos en su propio tipo de pequeños elementos. Entonces fuera de Board of Radius aquí de tres píxeles y luego poner un borde alrededor de eso así , un poco de un acariciamiento 15 píxeles, y luego vamos a añadir una sombra alrededor de esto, un oleaje entonces queremos que esto sea por caso. Entonces sólo hemos sido un margen inferior de 20 píxeles solo para espaciar. Si tenemos más de un código, más de un código de cupón disponible tan seguro están a salvo en justo lo que tenemos teniendo en cuenta algunos estilos más a seguir. Pero debemos empezar a ver que esto se lleve a cabo. El caso está empezando a tomar forma ahora Bob's que tienen algunos temas más aquí como este. Andi, relleno alrededor del elemento general no son ruidos demasiado bonitos, horrible color azul. Por lo que vamos a empezar a hacer cambios en esos artículos. Ahora podemos ver esta zona aquí. Es hora de tomar un poco más de forma. Por lo que a continuación los reemplazamos. Estilizado al elemento de código. Este es el propio titular del código de cupón real. Vamos a desplazarnos hacia arriba. Entonces sin un color de fondo apagado un naranja claro, un poco similar al que se usa en la miel, pero no no no, exactamente igual otra vez. Si cambiamos esto, estos colores, deberías tener palmaditas cinco píxeles. Quiero asegurarme de que sea pantalla en línea y otra vez saldremos del radio de frontera de tres píxeles. Tengo una frontera alrededor de esto también. Quiero asegurarme de que si el cursor fuera del mouse se mueve sobre este conjunto para ser puntero. De acuerdo, entonces ¿por fin quieres agregar un poco de estilo también? El nuevo párrafo etiqueta para una descripción. Entonces otra vez que nos mantenemos en lista en el ítem de lista y luego párrafo soy un texto. Alinee esto a la izquierda. Sam Margin, parte superior de 10 píxeles eliminados en margen. abajo en. ¿ Quieres eliminar la transformación de texto de aquí también y SEF en tamaño de 14 píxeles? Es tamaño divertido, no tomar talla. Vamos a refrescarnos. Este caso se ve un poco mejor ahora puedes ver aquí mientras te sugiero que agregues tu propio estilo. Um, pero de nuevo, esto está empezando a tomar forma. Entonces ahora necesitamos trabajar realmente en el elemento envolviendo general aquí fuera del desarrollo de la lista de cupones padre real para eliminar este color azul. Y entonces en realidad tendremos algo de estilo al botón aquí arriba también. De acuerdo, Entonces primero vamos a cambiar ese radio de frontera a seis píxeles. Queremos traer la caja. Demostró que estábamos usando aquí arriba sólo tenía una sombra alrededor del exterior de los ítems de la lista. Queremos hacer que el borde de color blanco. Mantendremos el fondo igual. Mantendremos estos elementos iguales. Vamos a añadir un poco de relleno. 15 píxeles. Elimina este color azul justo aquí, como mencionamos. Y luego queremos a Teoh. Permitir el uso que cinturón un desplazamiento hacia abajo de la página, algo cuando hemos desbordado oculto. Entonces esto significa que si tenemos más de un cupón y se va a recortar del fondo de los temores de ciervo, queremos asegurarnos de que puedan desplazarse hacia abajo algunos del desbordamiento. Por qué se pusieron ese auto encendido luego tinta todo lo que necesitamos Hasta ahora, tan seguro que y luego el botón de cupón real que necesitas configurar así vamos a ajustar. El tamaño aquí cambiará la altura a 40 píxeles establecidos. El ancho fue de 50 en. Entonces nos cambiamos el radio fronterizo solo para ser seis picos. Además, tenemos más de nosotros fuera de rectángulo delgado este círculo. Usaremos el mismo libro Sombra otra vez encendida con el color fueron eliminados. Esto y vamos a hacer que nuestra frontera tipo de blanco era una familia divertida del Sur y vamos a ajustar la distancia. Nosotros a menudo la parte superior del lado derecho de la pantalla, solo un 15 para darle un poco más de espacio para respirar. Entonces vamos a decir color de fuente. Entonces eso es solo guardar esto ahora y echar un vistazo. Lo que tenemos hasta ahora en caso de que podamos ver esto es que no es perfecto por ningún medio, pero tiene unas secciones definidas un poco mawr y un poco de estilo pasando aquí, cual es suficiente para que sigamos adelante con On Did use para el siguiente baño, por supuesto. Por lo que a continuación vamos a estar permitiendo a los usuarios hacer clic en un botón aquí abajo en la parte inferior de estos elementos, pueden enviar sus propios cupones a la base de datos para que puedas empezar a poblar esta información de prueba en DSO. Esta será la siguiente sección del curso 10. Asegurar la extensión aparece: caso cuando este siguiente video, vamos a estar actualizando extensión para que puedas ver la superposición de cupones como esta, ya sea que tengas algún cupón disponible para este sitio web o no. Entonces solo para dar un ejemplo rápido de esto, ya tenemos código de cupón Ejemplo aquí para google dot com. Si voy a la BBC um, clima por aquí. No tengo cupones, pero en realidad no puedo ver la extensión arriba en la esquina. Entonces los primeros cambios que vamos a hacer son asegurarnos de que en realidad siempre se puede ver el botón para abrir aquí la superposición de cupón, y pueden enviar un cupón. Entonces haber tenido en el botón agregar los cupones aquí abajo. Probablemente estemos sumados en esta esquina superior, por lo que incluso si se desplazan hacia abajo, todavía puedes hacer clic fácilmente para agregar un nuevo cupón. Pero así primero tenemos que hacer de hecho lejos para que puedas hacer clic a la apertura superpuesta desde cualquier sitio web. Entonces es saltar de nuevo a un editor de código en hacer algunos cambios. De acuerdo, entonces estamos en nuestro editor de códigos ahora, y lo primero que necesitamos echar un vistazo es esta línea justo aquí. Entonces en este momento estamos tomando la variable cupones justo aquí y dando un bucle sobre ella con los cuatro cada función. Justo aquí. Ahora, esto es genial si sabes que siempre vas a tener contenido para recorrer, Pero porque sabemos que algunos de estos dominios serán dinero vacío para cambiar esto un poco. Entonces vamos a cambiar esto en su lugar para decir por clave en cupones. Y este será Luke justo aquí. Entonces si salimos en esta parte y en lugar de usar esta variable de cupón, solo escucha del para cada función, lo vamos a configurar nosotros mismos. Entonces si un cupón es igual a cupones en noticias, Katrina siente que correctamente por lo que esto se verá a través de cada elemento justo aquí en set esta variable clave, y eso será a través de la clave real. Desea acceder en este array. Por lo que esto será cada individuo. Cooper tendrá una clave diferente. Y así podemos acceder al objeto igual que antes. Pero esto significará que no tendría un error si no hay cupones. Sólo asegúrate de que eso no esté ahí. Entonces estamos cambiando esta línea por esta justo aquí. Entonces después de que hayas hecho ese cambio, si lo guardamos en refresco y volvemos a la página web de nuevo tan fresco. Recargar este otro dominio. Justo antes de hacer eso, necesitamos asegurarnos de que quitamos este corchete de cierre justo aquí porque la función cuatro H abre un soporte extra justo aquí. Entonces ahora solo necesitamos el soporte rizado justo aquí. Corredores Cali. Entonces si volvemos, refresca y vuelve a intentarlo. Esto debería solucionar este problema. De acuerdo, ahí vamos. Por lo que podemos ver ahora aparece una superposición de cupón. Por lo que en el siguiente video se empezará a agregar estilo para el botón de envío y la superposición que aparecerá al hacer clic en él, y vamos a añadir un poquito de texto recién hecho aquí para decir, ya sabes, podrías ser la primera persona para agregar un cupón para este sitio web solo para darles un poco de un llamado a la acción para realmente crear en enter cupones 11. Formulario de presentación para presentar cupones: Ahora que nuestra superposición de cupones está apareciendo en cada sitio web, necesitamos asegurarnos de que chupamos. Mostrar un mensaje separado si no hay cupones para esta página. Entonces vamos a añadir un check in justo después de hacer este bucle a través de los cupones aquí y decir, Si el cupón html está vacío, queremos ejecutar esta pieza de CO. Justo aquí. Tan bueno, entonces solo agrega al cupón html y diremos, sé el primero en enviar cupón para este sitio. Fix ha estado en eso. Entonces si guardamos eso y fresco y echamos un vistazo a nuestra página, solo asegúrate de cerrar esa etiqueta de párrafo. Ahora deberíamos ver un mensaje en extensión de cromo. Entonces si vamos a un sitio que no tiene cupones así como este, espera a que la página cargue abra la superposición y ahí está ese mensaje justo ahí para que veas que ahora se está mostrando en esta página. De acuerdo, entonces ahora que tenemos un mensaje que está apareciendo aquí, no tienen cupones. Tenemos que añadir un botón para que la gente haga clic en él, para enviar cualquier cupón que tengan para ese lugar de trabajo. Entonces, lo que vamos a hacer para esto es entrar en el área HTML interior justo aquí, y sólo vamos a agregar un nuevo desarrollo, luego movimos esto a una nueva línea y diremos enviar cupón agregará un nombre de clase aquí para enviar. Sube de fondo el nombre de esta clase. Entonces si guardamos esto y actualizamos, encontraremos un nuevo botón. Estaban en estilismo para esto un final T de este video. Y luego necesitamos agregar un elemento más aquí abajo para crear la superposición real que aparecerá cuando alguien haga clic en este botón. Entonces en eso, justo aquí. Entonces vuelve a crear una nueva variable. Nos llaman este cupón enviar superposición y este es un nuevo elemento grúa, que sería una muerte similar a la voluntad perforce en un nombre de clase. Entonces solo copia esta línea aquí. El nombre de la clase es guion bajo. Presentar superposición en la misma que antes. Voy a pasar por en el CSS, pero proporcionaré el archivo CSS actualizado que estamos usando al final. Entonces si quieres, solo puedes copiar y pegar el CSS o seguirlo conmigo y luego pondremos el HTML interno fuera de este elemento. hincha. Entonces diremos que entramos. Entonces h tres, ¿Tienes un cupón para esta cosa del sitio? Cierra eso en una nueva línea. Crearemos una serie de entradas que pueden usar, Así que necesitamos que nos pasen el código real y la descripción de lo que hace este código. Entonces, por ejemplo, tiene un 50% de descuento, y luego finalmente, habrá un botón debajo de ellos para realmente enviar el cupón. Por lo que acabamos de tener esos elementos ahora súper cada uno de ellos dentro de un día de Andre. Necesitan tres de esos para cada uno de esos. Esas partes de este primero no serán el botón con este último, y yo diré enviar cupón. Gracias a Cristo. El botón apagado aquí arriba, necesitamos etiquetar que diga etiqueta de código aquí para decir descripción. Y entonces necesitamos los elementos de importación reales también. Por lo que haces eso igual que normalmente escribirías tipo es texto en clase es código. Simplemente copiamos eso a ritmo que aquí abajo y simplemente cambiamos la clase Teoh descripción o disco mi mejor para abreviar. Y luego solo necesitamos agregar por fin un nombre de clase para nuestro botón de envío para que podamos tener un oyente de eventos cuando se hace clic en esto y luego casi se hace. Solo necesitamos agregar un atributos mawr para este elemento antes de agregarlo a la página para asegurarnos de que cerraste esto justo aquí. Por lo que quiero decir cupón presentar. La visualización del estilo de superposición es igual a ninguno porque no faltan aparecer hasta que realmente se haya hecho clic. Un ámbar justo a esto en la parte inferior de la página. Asegúrese de que es cupón enviar superposición. Entonces si solo miramos por ahí, podemos ver que todo es correcto y ahorrar. Simplemente actualizamos esto y nos aseguramos de que no haya ningún error. Esto se está ejecutando sin problemas. No deberías ver aparecer nada. Si inspeccionas elemento en la página, tienes que encontrar esto de la parte inferior de la página, pero no necesitamos preocuparnos por eso todavía. Ahora que tenemos enviar superposición añadida a la página me para bajar y asegurarnos de que creamos un evento. Teoh Asegurarse de que desaparece una vez que el usuario hace clic. Tesis. Admitir botón aquí arriba. Entonces para hacerlo soy yo bajar a nuestra función de pre evento aquí abajo y agregar algo de espacio en la parte superior. Nos vamos, Teoh, copia esta línea sólo toma. Va a ser un oyente de eventos para el evento click. Justo lo mismo que este de aquí no hace algunos cambios. Entonces en lugar de, um, esperar el botón de cupón, vamos a estar escuchando lista de cupones y luego enviar botón para asegurarnos de cerrar los corchetes ambos aquí arriba. Y entonces vamos a estar diciendo consulta de documento, selector enviar estilo de superposición es bloque. Entonces básicamente lo contrario de lo que teníamos aquí arriba en esto con ellos. Asegúrese de que aparezca este elemento. Entonces, solo probemos esto ahora mismo. Entonces es seguro aquí. Refresca Andi. Recargar una página. Por lo que aún no hemos agregado ningún estilo para estos elementos, Pero si sabemos click, enviar cupón, deberíamos encontrar alguna manera de bajar la página. Este elemento aparece de esto tampoco tiene ningún estilo. Pero si nos refrescamos y simplemente volvemos a bajar al fondo de esa página, podemos ver que esto aún no ha pagado. Pero si hacemos clic en la superposición en el botón enviar cupón, entonces aparece así que a mi lado añadir estilo para realmente asegurarme de que en primer lugar, este botón esté bien peinado y que esta superposición de cupón aparezca en medio de la pantalla solo aquí para que el usuario pueda ingresar su código de cupón y una descripción. Y luego finalmente, necesitamos una función que una vez que presionen enviar cupón que envíe una solicitud a base de fuego para agregar esta información a una base de datos. Entonces en el siguiente video, vamos a estar mirando a esos dos. Dos partes de ella harían el estilo. Andi, agrega la conexión a Fire Base para enviar este código de cupón a una base de datos. 12. Nuevo comando para presentar cupones a la base de datos: bienvenido de nuevo. Entonces en este siguiente video, vamos a crear primero una función que podemos utilizar para enviar los cupones que los usuarios están enviando a nuestra base de datos. Entonces haz esto. Vamos a subir a la parte superior aquí después de que tengamos nuestra función de envío de mensajes de tiempo de ejecución de cromo encendida, vamos a crear una función similar, pero para enviar información a la base de fuego en lugar de buscar. Entonces empezaremos por crear una función variable como esta. Se ve un sometimiento. Mantenga una y otra vez, esta es una función y estamos tomando tres parámetros que codificamos descripción en dominio. Así que abre así vamos a añadir un registro de consola solo para ayudarnos t bucket. Si necesitamos filete suizo presentar cupón el. Entonces sólo pasaremos por el objeto on que realmente queremos enviar a través de la base de fuego también. Por lo que esta será la descripción del código de nuevo en el principal. Por lo que toda la información de un paso y básicamente justo en un objeto cayó en las variables de plano . Ese es el tala para que podamos verlo. Yo sólo estoy ahí. Pero a continuación tenemos que decir chrome run time enviar mensaje tan similar a lo que estamos haciendo aquí arriba . De acuerdo, Onda, en realidad podemos copiar este código taters para ahorrar algo de tiempo. Entonces si tomamos esto solo un poco aquí y pegamos, y luego necesitamos cambiar el comando de fetch, es una publicación y luego en datos, vamos a pasar en este objeto justo aquí, como así y en la respuesta en lugar de corriendo los cupones pasados, um, funcionan justo aquí. Vamos a usar una nueva función, Vamos a crear un segundo. Por lo que llamó a este enviar devolución de cupón, y esto tomaría de nuevo los datos de respuesta en el dominio. Un oleaje. Entonces si solo tomamos esta misma función de devolución de llamada recién creada esta será una función, y tomaría la respuesta en el dominio. Y luego desde aquí, todo lo que queremos hacer es ocultar la superposición. Van a ser Lecter de pliegue. Yo solo quiero que me envíen, superpongan, y luego estamos diciendo y una pantalla de estilo es no. Y estamos sólo mucho a la pantalla sólo por ahora y decir cupón enviado. Tan solo dale un poco de retroalimentación, pero te recomendaría peinar estos un poco más bonitos si realmente quieres usar esto mucho . Casilla seis Embajada. Esa no es la mejor manera de mostrar mensajes al usuario. Pero por ahora, este es un proceso perfecto. A ver lo que tenemos. Y realmente no podemos encerrarlo a la consola. A se hincha. Podemos comprobar esa información. Estamos volviendo. Si necesitas depurar algo de esto para poder comprobar la respuesta, solo eso. Entonces a continuación tenemos que ir realmente más abajo a la página otra vez, donde creamos nuestro evento sobre agregar un oyente de eventos para la parte de envío del botón que en realidad usará esta nueva función han creado aquí. Y luego entraremos en un archivo firebase en agregar este eventos separados. Por lo que tenemos al comandante de fetch para agregar el puesto Comando aquí también. 13. Los detalles de cupón para la base de datos: bienvenido de nuevo. Entonces como mencionamos el último video, vamos a estar agregando una función aquí abajo en la función de eventos de caja para que podamos tener un oyente para cuando el usuario llene la superposición de cupón y envíe un cupón es esto llamará a la función que creamos aquí arriba que presentan función de cupón. Por lo que básicamente necesitamos asegurarnos de que pasamos por el código en la descripción a través de esta función. Por lo que primero lo promedio antes, como lo hicimos antes. Copiemos al oyente de eventos. Apenas un sexo y tiempo en cambiar el impedimento para realmente escuchar. Entonces para este ejemplo, son laseventies excesivamente y entonces no vamos a escuchar a la gente del sujeto. Entonces si se hace clic en este elemento, queremos ejecutar esta pieza de código al primero que queremos hacer es obtener el código. Por lo que el código de cupón. Entonces nuevamente usamos el selector de consultas y este será el código de superposición de envío que tenemos justo aquí. Así que sea esa clase de repentinamente excesivamente y luego quieren acceder al código en compras. Usamos este nombre de clase para que pudiera ser el acceso al igual que esto en realidad tenemos un punto para el nombre de la clase y luego código. Simplemente agregan valor para asegurarse de que realmente obtienen el valor de importación de este campo de entrada que exactamente lo mismo para la descripción como esta. Y entonces todo lo que tenemos que hacer es simplemente pasar esto a través de la función de cupón de presentación como esta. Esto es todo lo que necesitamos para dio dentro de nuestra app dot Js Así podemos guardar esto de vez en cuando. Todo esto está vinculado. El siguiente que tenemos que hacer es actualizar el archivo firebase y luego finalmente agregar nuestro estilo para el exceso real Vale, ahora no somos el archivo firebase dot Js. Tenemos que asegurarnos de que añadimos otro check in aquí para el evento push real. Entonces, en nuestro caso es un post comando aquí, así que imperiosamente buscar y bajar aquí decimos post Así que vamos a añadir otra declaración if debajo de esta escuchando el post. Por lo que ahora sabemos que aquí es donde tendrá tesis admitir grupo sobre datos que vienen por aquí . Entonces primero necesitamos que Teoh establezca algunas variables, solo que hicimos arriba aquí arriba para que podamos copiar el ejemplo de dominio, porque lo necesitaremos de nuevo, y luego necesitamos obtener el código. Este será el código de datos del mensaje en el mismo para la descripción. Este será un mensaje Descripción de datos. Eso es bastante sencillo. Pero ahora tenemos que asegurarnos de que realmente sí pasamos esto a la base de datos. Por lo que a esto dentro de un bloque try. Simplemente si hay algún error desde la base de fuego que no podemos predecir que no se romperán silenciosamente swing para capturar estos errores. Entonces puedes hacer eso así. Si deletreo bien eso, entonces podemos lucir la época así, pero de lo contrario estamos bien dentro de este bloque justo aquí para ejecutar el código que necesitamos ejecutar. Entonces empezamos diciendo nueva base de datos post firebase de acceso a la base de actualización misma, la forma de establecer una referencia. Así que estar en el dominio. Y luego queremos usar este dominio codificado parece tan muy similar a lo que estamos haciendo en la parte superior aquí. Vamos a decir, empujar y establecer código como código en descripción como descripción. Entonces eso es todo lo que tienes que hacer aquí abajo y luego para que nosotros mandemos la respuesta de vuelta al usualmente quiero decir lo nuevo me d como la nueva idea que se ha agregado a la base de datos. Entonces para hacer esto, solo decimos posts, yo d igual a nuevo post Clave. Entonces utiliza esta referencia aquí arriba. Y luego hay una función firebase que se puede generar para que pudiéramos sacar la clave única este nuevo código de cupón. Y luego acabamos de pasar la respuesta de vuelta. Entonces otra vez, porque lo hemos montado todo aquí, sólo podemos pasar una respuesta de vuelta, similar a la batida. Justo aquí, en lugar de ser para el Comando fetch es para el Post Comando. Por lo que sólo diríamos resultados de tipo de respuesta, dijo el estado de nuevo como un éxito y luego justo más allá de los datos de vuelta como el nuevo Post I D. Y la solicitud. Es el mensaje dice todo lo que necesitamos hacer para asegurarnos de que pasamos esto a la base de datos , pero es bastante atrás en lugar de solo mirar a la consola que sí establecemos una respuesta separada para que realmente pasemos esto de vuelta a Abdul Sí, en lugar de sólo tener el error en esta página. Por lo que acaba de establecer el estado aquí como error y cambiar los datos. Esto hace que todo cambie esta coma y luego guarde y asegúrese de que aquí abajo. Un oleaje, um, fuera de formas que puedes dar cuenta de horas porque no es un objeto correcto. Pero ahora solo asegúrate de guardar, y volveremos a ejecutar la extensión de cromo. ¿ Encuentras cuando corres que no se carga demasiado con dientes al hacer clic en la extensión en la esquina superior derecha? Pero para arreglar eso, solo necesitamos asegurarnos de que ajustamos este nombre de clase solo para excitar. Faltó guión bajo saludable. Pero si actualizamos esto, lo guardamos y lo ejecutamos de nuevo, podemos empezar a ver aparecer extensión. Por lo que ahora necesito agregar un poco de estilo. Pero solo comprobemos primero la extensión para que vayamos a nuestro buscador de cupones y actualicemos. Iremos a un dominio abierto y ellos lo pueden ver aquí. Tenemos un cupón. Nunca enviar botón, lo que significa agregar algo de estilo para en esa superposición que también aparece. Por lo que en el siguiente video, agrega un poco de estilo básico para nuestra superposición y pide el botón enviar 14. Añade el estilo al botón y la superposición: continuación, necesitamos agregar algo de estilo a nuestra superposición. Por lo que un botón de estimación. Entonces vamos a entrar en nuestro cupón punto CSS pila aquí arriba y desplazarnos hasta la parte superior. Y así vamos a parar en en algún estilo a nuestra superposición. Llamaremos a esta lista de cupones. Dave, no soy la única historia en mayúsculas, Así que 1er 1 para asegurarnos de que tenemos algo de relleno Así que cinco píxeles y 10 píxeles para la altura para la parte superior e inferior en la izquierda y la derecha se estableció un tamaño de fuente de 10 píxeles. Fondo negro. Si quieres cambiar alguno de estos colores en el camino, siéntete libre solo para que destaque por nosotros. Trató de usarlo en esto. En el ejemplo conjunto algún color de fuente está bien formada familia on. Como mencioné antes, puedes copiar el CSS agregado después de este video para que puedas agarrar CSS ahí, así que solo paso y en el resto de thes el caso, este es todo el estilo que necesitamos para nuestros botones. Por lo que si guardamos la actualización en, echa un vistazo solo necesitamos asegurarnos de volver a agregar un guión bajo. Empecemos aquí. Sigue faltando estos apagados. Por lo que para refrescar de nuevo. Ahora abre nuestra extensión y pueden ver que tenemos un botón estilo. Por lo que ahora necesitamos agregar algo de estilo para nuestra superposición para que aparezca en medio de la página. Y creo que por el momento también, sin embargo esto se esconde detrás de los elementos fuera de la página. Entonces debajo donde agregamos el soporte para el botón, así que agrega un poco de estilo para excesivamente. Entonces otra vez, esto es bajo la escuela. Presentar superposición. El 2do 1 es un guión, y esto se puede fijar ya que una posición establecerá un ancho de 220 píxeles son alturas 200 píxeles. Colóquelo a mitad de camino hacia abajo desde la parte superior de la página y 50% desde la izquierda. Por el margen izquierdo, vamos a estar haciendo menos 110 píxeles, que está a la mitad del látigo en el mismo desde el conjunto superior de color de fondo. El color del borde como índice ed del aparece en la parte superior de cada elemento posible porque estamos trabajando con diferentes sitios web aquí, podrían tener elementos flotantes. Es sólo para asegurarse de que la superposición aparece en la parte superior de cualquier contenido era una especie de palmaditas. Y podemos usar esta caja dimensionando propiedad CSS aquí y dice su caja fronteriza. Y luego finalmente solo escribimos la línea como centro. Entonces si guardamos esto ahora y después recargamos la extensión en una nueva para que podamos abrir su extensión, podríamos enviar botón. Y ahora tenemos la superposición que aparece en la página. No, no es la más bonita, pero debe ser funcional. Entonces si abrimos una consola de cinco as y comprobamos base de datos, vamos a agregar una extensión para asegurarnos de que sean funcionalmente compañeros de poste los cupones a través de nuestra base de datos está funcionando. Está bien. Puede haber notado esto también en tu código, pero tomé esto mal aquí arriba. Entonces se ve la línea descriptiva, Pero lo que se supone que es mensaje. Por lo que parece cambiar esta línea de aquí. Deberíamos tener esto correcto en el tuyo. Pero por si acaso estuvieras copiando exactamente lo correcto, debo asegurarme de actualizar esta línea justo aquí. Pero de lo contrario todo debería estar empujando a tu base de datos. Entonces solo vuelvo a ejecutar mi ejemplo solo para mostrarte para que cualquier error aparezca justo aquí. Si estamos frescos este recargar la superposición de abridor de páginas en ese código de descuento en una descripción y enviar. Tenemos un mensaje diciendo Cupón enviado, y si ahora revisamos una base de datos, se puede ver que ha aparecido hecho aquí. Y esta es la idea de post única que mencionamos antes para que puedas usar este Teoh realmente mostrar información diferente en la página si quieres, Así que por el momento no aparecen justo aquí todavía. Pero si refrescas esta página porque era para este nombre de dominio y nos recargamos, puedes ver que aparece justo aquí. lo que en la siguiente sección del curso, vamos a hacer algunos ajustes que si haces click en el desgarro de los entrenadores de descuento, se copiará a tu portapapeles para que luego puedas simplemente pegarlo en tu auto. Andi hará unos últimos ajustes y las áreas de estilo como esta. Me aseguro de que puedas cerrar esta superposición y apenas más toques finales en. Entonces veremos cómo en realidad puedes publicar tu atención criminal en latienda de extensiones decromo tienda de extensiones de 15. Copia el cupón al clipboard y la superposición del cierre: estas nuevas secciones, como mencionamos antes vamos a seguir quedarán dejadas. Entonces vamos a estar haciéndolo para que cuando hagas clic en estos códigos de cupón justo aquí, sean copiados en tu portapapeles. Y también vamos a sumar un evento para que podamos cerrar. Esta superposición hará que los clics sumarán un botón aquí arriba para que solo puedas hacer click. Andi cerró la superposición, Pero primero, vamos a trabajar en esta área por aquí, así que realizamos una copia a entrevista Clipboard, pinchamos en cualquiera de estos códigos. Entonces es saltar de nuevo a nuestro co editor y empezar a agregar las funciones del. El caso de aquí Estamos de vuelta en ese editor de código, y vamos a desplazarnos hacia abajo hasta donde tenemos funciones de evento aquí abajo y vamos a agregar una nueva función justo por encima de esto. En realidad serán la función de copia a portapapeles, por lo que sería una nueva función. Aquí hay una copia al Portapapeles, y esto tomaría una cadena que queremos copiar. Y así aquí dentro. Lo que básicamente queremos hacer es crear un área de texto temporalmente e ingresar Ah, una cadena como valor de esta área de texto, selecciónela, copiarla y luego eliminaremos una cadena como valor de esta área de texto, selecciónela, el área de texto por lo que empezaremos con solo crear la entrada. Y esto será, como mencionamos, un nuevo elemento fuera del área de texto. Y luego estableceremos el en HTML para que se le pida Beber así y luego solo tenemos que añadirlo a la página. Entonces usa un niño de pluma de nuevo en el evento MPA o elemento de entrada, y luego simplemente lo seleccionamos Dice seleccionará todo el contenido del área de texto, esencialmente especie de hacer esto por lo que es sólo seleccionarlo. Y luego queremos alfombra Teoh al portapapeles. Hay una serie de formas diferentes de hacer esto, pero la mejor manera en chrome, que es donde estará la extensión en que soporta y la mayoría de los navegadores, es usar esta función de comando ejecutivo como esta y tener posiblemente copia. Entonces esa es una copia del comando X E C, y entonces todo lo que tenemos que hacer es entonces quitar el elemento que acabamos de crear así. Asegúrate de deletrear eliminado correctamente. Ahí vamos. Por lo que estamos creando el elemento conjunto en la furia para moler como nuestra cadena, agregándolo a la página, seleccionándolo, copiándolo y luego quitándolo de la página. Y entonces acabamos de devolver esta función. Entonces esa es nuestra función de copia al portapapeles. Ahora necesitamos usarlo en realidad. Entonces aquí abajo, vamos a crear un nuevo evento sobre este evento será similar a lo que hemos hecho antes . Hablar selector de consulta de documentos. Pero esta vez quiero decir que a Chris le gustó todo. Por lo que estamos seleccionando todos los elementos de la página que tendrán esta clase coincidente y vamos a estar buscando lista de cupones. Asegúrate de haber subrayado la lista de cupones y luego estamos buscando la clase de código aquí también, que corresponde a la clase de clase Teoh aquí arriba. Entonces la clase span es el código. Entonces miré a través de todos esos elementos, y luego haremos un chequeo aquí abajo. Entonces les estamos llamando elemento de código, y luego simplemente volveremos a correr. Esto es esencialmente como agregar un oyente de eventos a cada elemento individual con esta clase, por lo que esperando todos ellos, dando vueltas a través, y luego solo decimos elemento de código en el oyente de eventos al hacer clic, y luego esto será básicamente lo mismo. Es donde no lo haces normalmente. Pero aquí adentro ahora podemos ejecutar código como si estuviera en cada uno de estos elementos individuales sin tener el sector de la tripulación. Todo este hoyo aquí abajo hace que sea exactamente como sería. Un sui lo creó aquí abajo. Entonces dentro de aquí, solo necesitamos decir Coach String es ítem de código en el siguiente TML y luego solo decimos copiar al portapapeles Coach, String como esta. Esto agregará un oyente de eventos dedo del pie todos nuestros códigos de cupón en cuando hagan clic en ellos. Se los copiará al portapapeles. Entonces es seguro esto encendido. Volvamos a nuestra extensión del crimen. Refresca, Andi, ver qué tenemos. Así que refresca y vuelve a la extensión. Podría salir de ese cupones pegar y podemos ver que es pegar. Estoy afrontando los eventos que acabamos de golpear que está funcionando correctamente. Entonces a continuación queremos asegurarnos de que podamos cerrar esto excesivamente así que vamos a añadir un elemento span de la parte superior aquí en cuando se haga clic. Se cerrará esto excesivamente. De acuerdo, entonces primero vamos a agregar un elemento span. Entonces aquí arriba donde tenemos nuestra superposición, vamos a sumar en un lapso justo aquí y mover esto hacia abajo a una nueva línea. Asegúrate de que haya un sencillo bastante justo ahí en un solo siemblo, solo ahí para empezar. Y decimos que la clase está cerca y luego simplemente ponemos una X entre paréntesis ahí y decimos Cerrar. Entonces eso es todo lo que necesitamos para nuestro botón. Y luego simplemente volvemos a la zona de eventos y luego sólo vamos a sumar otra tripulación Estados realmente pueden copiar este aquí y pegar a Andi en su lugar. . Off corriendo aquí. Será la súbita superposición misma, y estaban buscando la clase de ropa. Esto encontrará la superposición de sujeto y luego le preguntó a Band que acabamos de crear y en lugar de hacerlo bloque de piezas, se mostrará como ninguno. Entonces guardé esto. Volver a la extensión. Refresca, Andre, corre casing. Abrimos nuestra superposición. Ahora tenemos este texto cercano, y si pudiéramos kit, cierra la superposición. Entonces ahí lo tenemos. Por lo que tenemos nuestra extensión que puede mostrar diferentes códigos de cupón. Puedes enviar códigos de cupón, Andi. Después puede hacer clic para copiar cualquier código y utilizarlos en su sitio. En el siguiente video, voy a pintar cómo puedes someter disfunción a la tienda de extensiones de cromo y pensar en algunas formas en que puedes mejorar esta extensión tanto en cuanto a estilizar en los diferentes casos de uso y rendimiento que deseas para salir de ella. 16. Cómo publicar la extensión de Chrome: Bienvenido de nuevo a la sección final fuera de este curso ahora. Hasta ahora hemos pasado y hemos creado nuestra extensión. Lo hemos conectado a una base de datos basada en incendios. Yo lo he tenido todas las interacciones que queríamos y de la base de datos para mostrar cupones. Pero vamos a tener un rápido pensar primero en la primera parte de este video sobre diferentes formas. Podríamos mejorar esta extensión si quisiéramos Teoh, hacerla compatible con más usuarios y agregar más características para ellos. Entonces echemos un vistazo rápido a nuestra extensión por aquí. Entonces aquí lo tenemos. Apenas construimos. Tenemos nuestro botón aquí arriba y abre esta superposición. Ahora lo primero que me destaca es que el diseño fuera de esto es muy, muy básico. Entonces lo primero que te sugeriría para que investigues y tal vez veas sitios web como dribble dot com, podemos encontrar un buen diseño. La inspiración es de diferentes maneras. Podrías modificar este punto de partida de arma para agregar tu propio sabor único a esta extensión. Andi, cambia el diseño y justo en la pantalla de esto un poco ahora, en cuanto a características que podrían funcionar bastante bien. Algo que no están sugiriendo buscar es agregar una opción de voto justo aquí para que puedas hacer, como, pulgares arriba o pulgares abajo para ver si esta extensión. Si este código de cupón funcionó para los diferentes usuarios, entonces puedes ver rápidamente qué cupones han sido buenos para las personas de las cuales no han funcionado. Esa podría ser una buena opción. Toe Ada está bien, y ahora otra cosa que podría ser bastante útil para tu extensión es alguna forma buscar. Entonces si te lo imaginas, si vas a una tienda tiene un montón de códigos de cupón diferentes, podría ser bastante abrumador en los pedidos enumerados aquí por lo que podría ser útil agregar un cuadro de búsqueda aquí arriba. No, no te mostraré videos todavía sobre cómo puedes. Podrás hacer este tipo sugerir probar e implementar necesidades ustedes mismos, sobre todo empezando por cambiar el diseño. Si tienes alguna pregunta sobre cómo te gustaría hacer esto, siéntete libre de enviarme un mensaje o dejarlo caer en el recuadro de preguntas. Pero estas son las diferentes formas en las que podrías empezar a agregar realmente características adicionales a la extensión y hacer que el diseño sea un poco más tuyo. De acuerdo, entonces en la segunda parte de este video, vamos a ver cómo en realidad publicaste esto a la puerta de las extensiones del crimen. Ahora hay una escritura completa sobre esto desde la extensión de cromo, como sitio de documentación. Ahora, esto siempre va a estar al día. Por lo que estoy grabando esto en mayo de 2020. Entonces para cuando estés viendo esto, podría haber cambiado ligeramente, pero casualidad, sería más o menos lo mismo que esta estructura. Por lo que lo primero que mencionaron hacer es enloquecer un archivo zip. Pero una cosa que a menudo se puede olvidar es que necesitas tener un icono. Entonces si echamos un vistazo a la extensión justo aquí, podemos ver el in y manifestarnos. Simplemente tenemos el nombre de la versión descripción, permisos, contenido de fondo, scripts y así sucesivamente. Pero también necesitas tener un íconos. Um, opción aquí. Ahora, estas son las imágenes de Theo que necesitas tener para poder publicar tu extensión, así que te mostraré cómo se ve esto en la documentación aquí. De acuerdo, entonces cada extensión de cromo necesita dedo del pie tener un icono en el archivo de manifiesto. Ahora necesitas tener una Nikon que sea de al menos 128 por 128 píxeles para una extensión. O necesitas tener otro icono de 48 por 48 píxeles, y también puedes tener un icono de 16 por 16 también. Esto estará apareciendo aquí, pero la única forma de hacerlo es sumando en un perímetro como este. Entonces son iconos, y solo tienes un objeto con cada uno de los iconos de diferentes tamaño y luego donde se encuentra la imagen en tu carpeta. Entonces una vez que tienes eso, todo lo que necesitas hacer es entrar en tu redil. Contamos con sus funciones de cupón. Asegúrate de agregar tu ícono aquí y actualizar tu manifiesto vinculado a esto, y luego simplemente comprimir o convertir en lo es? Y entonces estás listo para subir esto. No hay siguiente necesidad de ir al tablero del desarrollador de la puerta web chrome sobre la creación de Nuevo elemento. Si aún no tienes una cuenta para el panel de desarrollador, necesitas crear cuenta de desarrollador en una aceitosa para hacer es hacer clic en Nuevo ítem así que una vez que hagas eso, estás entonces navegando y selecciona el archivo ZIP que acabas de crear. Por lo que una vez que selecciones eso, empezará a procesar y subir tu extensión, y ahora podrás rellenar toda la información que quieras agregar. Las extensiones de combustible de esto todo provienen del archivo manifiesto. Entonces puedes agregar en una descripción más detallada. Categoría seleccionada. Seleccione un idioma en. Entonces puedes agregar más capturas de pantalla aquí, lo cual definitivamente es recomendable. Si quieres que la gente pueda, Teoh, descarga tu extensión. Esto lo hará destacar. Maurin la puerta de extensiones, y puedes agregar un enlace a tu sitio web así como en enlaces de soporte. No tenemos que tener estos, y también puedes tener Google Analytics para rastrearlo para ver cuántas personas están encontrando tu extensión, Listando sobre cuántas cosas haciendo clic en ella y luego todo lo que necesitas hacer después de eso es dar click guardar borrador y presentar para su revisión. Normalmente sólo debe tomar un par de días, a veces hasta una semana y canciones. Tienes tu ícono ahí dentro. Si no tienes tu ícono, no pasará esta revisión, por lo que es importante asegurarte de que tengas eso. Ahora hay diferentes maneras. Si quieres cobrar por extensión, hay unos pasos extra, así que tienes que asegurarte de que escojas un sistema de pago. Andi , Algunas opciones diferentes ahí. Tenemos que asegurarnos de que se hinche cuando te estás registrando, pagas la cuota de desarrollador, que al momento de la grabación es de $5. Yo sólo revisaré aquí abajo. Sí, hay una cuota de inscripción de 5 dólares. Entonces, ¿tienes alguna duda así de cómo publicar? Simplemente deja caer un mensaje en el cuadro de preguntas, y trato de ayudar lo mejor que puedo. Pero esto debería tener que darte un rápido yo 'd sobre cómo harías para crear extensión y en realidad establecer en esto. Vive en la tienda de cromo para que puedas hacer tu extensión. Y una vez que hayas subido tu extensión, si realizas algún cambio, puedes entrar en la sección de paquetes justo aquí y subir un nuevo paquete. Eso actualizado archivo zip Si has realizado algún cambio y solo trata de asegurarte de que en tu manifiesto cambies el número de versión para que todo se siga actualizando 17. ¡Gracias por tomar el curso!: Entonces como mencionaste en el último video, hay una serie de formas diferentes en las que puedes mover esta extensión hacia adelante. Ahora, me encantaría ver con qué creaciones se te ocurre. Entonces si has hecho algún contacto conmigo en instagram o mandas una grabación de tu curso, mándame un mensaje aquí con lo que has logrado crear. Tienen alguna pregunta en el camino. Sólo avísame también. Pero muchas gracias por tomar este curso. Espero que hayas encontrado algún valor a partir de eso estaría seguro de verte de nuevo diciendo 18. Video extra: aplicarse en aplicación automática automáticas (Código fuente en la sección de recursos): En este video, vamos a estar investigando cómo puedes ejecutar una función en JavaScript a través de múltiples páginas. Entonces vamos a estar usando la parte de almacenamiento local del navegador para que podamos almacenar en el estado de nuestra función lo lejos que hemos progresado. Y luego podemos escuchar para ver qué ha pasado en la página y luego ajustar nuestra función y luego seguir corriendo por el resto de la misma para que funcione entre estas cargas de página, este video, el ejemplo que voy a estar usando es un cupón función de autorelleno. Por lo que tenemos una lista de cupones que quieren aplicar a nuestra canasta. Por lo que le he hecho un sitio de pretensión aquí sólo por la canasta en él. Y hay algunos cupones que van a funcionar y hay algunos que no lo fueron. Entonces te mostraré ahora cómo es el sitio. De acuerdo, así que aquí está el sitio justo aquí a la izquierda. Por lo que ignoramos el código de la derecha por ahora. Llegaremos a eso en un momento. Entonces como puedes ver, solo tenemos un ejemplo, Pedir Total por aquí y lista de códigos de cupón que son válidos. Entonces si fuera a escribir en uno de estos tan 320 y aplicar, el descuento se hace una diferencia. Si fuera a deshacerme de eso y aplicar el descuento, se lo quita. Entonces es realmente, realmente simple. Hace corre en el backend, Musharraf o todo el código de esto después también. Pero así es como funciona eso. Y entonces tengo esta función por aquí. Entonces si hago clic en este botón, se va a correr por rayo de cupones. ¿ Tenemos así estos por aquí? Entonces uno de estos está en esta matriz o en esta lista. Entonces ese debería ser el cupón que utilizamos. lo que de inmediato para este primer ejemplo no se va a recargar la página, pero podemos ver qué hace aquí. Entonces si hago clic en este botón, se puede ver que está revisando cada uno de los cupones. Echale un vistazo. El instrumento auditivo sí. Y entonces nos dirá cuál es el mejor. Entonces tenemos este aquí que muchos diferentes, por lo que luego aplica eso después. Entonces así funciona. Ahí se ejecutan a través del código en un momento y muestran exactamente cómo funciona esto. Entonces si iba a cambiar esto de necesidad recarga falsa, a necesitar recarga verdadera. O esto va a hacer va a recargar la página cada vez. Entonces solo voy a agregar la consola por aquí. Y si solo actualizamos y ejecutamos esta función de nuevo, entonces si hacemos clic en este botón ahora diciendo esperar a que la página se vuelva a cargar. Entonces imagínense este ejemplo que cuando hacemos clic en aplicar descuento, esto es diciéndole al servidor que compruebe este cupón y recarga la página. Pero debido a que esto es sólo un ejemplo, sólo voy a ser ese servidor. Entonces qué es click recargar cada vez que pregunta. Entonces va a revisar ese cupón. Y luego es pedir frustrado otra vez. Entonces lo presiono otra vez. Se va a recargar, chequear esa. Se va a leer de nuevo. Aquí va. Y luego una vez más. Y luego voy y todavía sabe cuál fue el mejor de todos esos tiempos. Entonces a pesar de que recargó la página y la sesión cambió, todavía se mantiene el estado de una función entre todas estas llamadas. Entonces como puedes ver, ahí hay un ganador de cupones. Y hago clic en Aceptar y luego lo vuelvo a aplicar. Ahora bien, esto funciona por el almacenamiento local. Ahora lo que estamos haciendo es establecer un objeto que seguimos actualizando cada vez que ejecutamos una función. Entonces revisaré el código en un momento, pero así es en cierto sentido como funciona esto. Por lo que tenemos. El almacenamiento local con el que creamos un objeto. Y luego actualizamos este objeto cada vez y luego ejecutamos una función de nuevo. Y cuando esa función se carga, primero entra en historias locales para ver, ¿estamos en medio de ejecutar esta función? Entonces si somos un continúa el proceso y si no hemos corrido la función y le hemos pedido que se inicie, empieza a ejecutarla, si eso tiene sentido. Entonces esto, puedes ver todo esto desde la pestaña Aplicación justo aquí. Y si vas al almacén local. Entonces si recargo esto ahora con esto abierto, deberías ver esto en realidad a medida que se mueve. Entonces si hago clic en comenzar aquí, se puede ver lo que está haciendo. También es ampliar un poco esta ventana. Voló esto. Entonces lo que estamos haciendo aquí es que tenemos un objeto selector. Entonces en este ejemplo, para aplicar un código de cupón, algunas cosas diferentes que necesitas tener. Entonces, en lugar de simplemente escribirla para un sitio en particular, si has escrito una extensión de Chrome, por ejemplo, necesitas para asegurarte de que funcione en muchos sitios web diferentes. Por lo que es importante tener esto en cuenta cuando estás creando tu código. Entonces suma, los procesos de chequeo tienen el cupón que ingresas el cupón y luego presiona enter alguno de ellos ingresas el cupón, luego presiona un botón. Algunos de ellos el paciente necesita recargar. Otras veces todo funciona en la página así que lo entras y presiona un botón y luego lo llamarán detrás de bambalinas sin recargar la página. Por lo que ese tiempo, es posible que necesites establecer el número de segundos, luego esperar a que cambie la página, y luego entrar y agarrar la canasta. Entonces como se puede ver aquí abajo, esto es lo que estamos haciendo. Por lo que tenemos los campos de costo como esta área justo aquí con un prefijo de campo de costo. Entonces eso es para asegurarnos de que quitemos el signo del dólar, el signo de la libra o algo así. Entonces si ese es un carácter, simplemente quitamos eso del frente de la cuerda. Tenemos entonces el tipo de cupón. Esto es, como mencioné, es un botón que tenemos que presionar o tenemos que presionar enter? Esto es si el paciente necesita recargar o no. Entonces como la cosa como cambió antes. Entonces si no necesita volver a cargar, llamamos a la función y luego solo espera y usa un temporizador si no necesita recargar en lugar de, ya sabes, peso en agarrar los cambios al total de canasta en esta página. Esperamos a que la página se vuelva a cargar y luego la ejecutamos una vez que se abra la página. Entonces te mostraré eso en un momento. Después obtenemos el cupón lleno. Entonces eso es solo esta entrada justo aquí. Y luego un botón de enviar. Entonces ese es este botón justo aquí. Y entonces tenemos un tiempo de espera. Entonces es cuántos milisegundos debemos esperar. El sitio a cambiar. A veces hay algunas páginas que tardan un poco más que otras para que entremos y hagamos este cheque es lo que tenemos aquí. Entonces tenemos una función, una variable aquí que comprueba para ver si la extensión o si el código se está ejecutando. Entonces en este ejemplo, se está ejecutando. Entonces eso significa que cuando presiono recargar, porque me está esperando para recargar justo aquí. Es así como sabe llevar a cabo este mismo cheque. Por lo que aquí tenemos el valor de la canasta de inicio. Entonces en realidad esto está mal porque, porque corrí esto después, correrlo antes, tenía el total de la canasta ya reducido. Por lo que sería interesante ver cómo funciona eso ahí. Entonces aquí está el cupón actual que está comprobando. Por lo que mantenemos un seguimiento de lo que va a mucha comprobación. Y entonces aquí arriba está queriendo mostrarte aquí. Estos son los cupones que es cheque. Entonces si refresco la página aquí como si fuera a pasar por los cheques reales. Ya puedes ver ahora está actualizado y dijo que ya revisamos este cupón. Y a menos que este chip esté correctamente, así que si nosotros, entonces si ahora actualizamos la página, esperemos dos segundos. Ya puedes ver aquí están los cheques otra vez, así que ahí está el mejor trato. Ese es éste sólo viendo lo que era el valle cuando aplicó ese código. Y sabe que ese cupón fue el que tuvo el mejor trato. Y luego están los que se comprueba actualmente está en proceso de revisar este próximo ID de cupón. Entonces si entonces vemos que está esperando que nos recarguemos. Entonces si volvemos a esta página aquí y actualizamos, deberíamos verlo actualizar esta matriz justo aquí van a la siguiente. Y mientras tanto, ahora está revisando el próximo CTO está pasando por cada uno haciendo estos cheques. Y la razón por la que hay ese ligero retraso es porque como mencionamos aquí, lo tenemos establecido en dos segundos o 2 mil milisegundos. Entonces así funciona desde esta vista justo aquí en el front end. Ahora veamos realmente el código y veamos cómo en realidad está haciendo esto. Ok, entonces aquí está el código que estamos ejecutando en esta página. Lo primero que tenemos aquí es como objetos selectos. Entonces como mencioné, se crea de una manera que se puede adaptar para trabajar en muchos sitios diferentes. Entonces como vemos justo a Timmy sobre cupones es nuestra gama de cupones que quieres comprobar. Ahora probablemente cuando esta función se esté utilizando en realidad en una extensión, esto pasaría como el último elemento. Por lo que tendrías todo esto arriba para tus sitios reales. Podrías traerlos desde tu base de datos quizás donde realmente tengas la información diferente para cada sitio en el que funciona tu extensión. Y entonces tus cupones estarían de una manera similar, pero probablemente almacenados en otro lugar. Entonces así es como tenemos eso. Entonces tenemos un campo de cupón, como mencionamos hace un minuto, someto botón si necesita recargarse o no. No estoy siendo verdadera ni falsa. Mi cupón tipos que abotonamos o entramos, tiempo de espera en milisegundos. Yo cos campo. Entonces cuánto la consulta primitiva de esto por aquí, el QuerySelector de este id aquí. Entonces este es un nombre de clase, igual que éste de aquí arriba. Y luego el prefijo del valor de canasta. Entonces lo que hemos hecho aquí es que estamos usando el almacenamiento local es el primer lugar. Ya verás esto. Si la ejecución comprueba parte de nuestro artículo de almacenamiento local se está ejecutando, entonces continúe ejecutando comprobaciones, tan simples como eso. Y luego aquí abajo, sólo tenemos un simple oyente de eventos que inicia NUEVOS cheques. Entonces si no estamos ejecutando automáticamente esto en segundo plano porque ya empezamos, estamos agregando un evento click a este botón aquí para que podamos iniciar esta función y empezar a correr. Entonces si nos desplazamos hacia arriba, te mostraré un poco más de lo que hace esto. Por lo que la primera pieza de JavaScript que tenemos en esta página es justo donde se crea un nuevo objeto para la función. Y entonces eso incluye todo lo demás después. Entonces aquí está nuestro cheque de cupones equivocado. Establecemos una matriz vacía para cupones de activos. Realmente no necesitamos hacer eso justo aquí. Y entonces aquí está el primer tipo de función principal que causamos. Tenemos nuestra función de comprobación de carrera justo aquí, que toma en el objeto selector y el estado. Entonces esto es. Por defecto será inicio, por lo que queremos iniciar la función. Pero si quieres continuar, entonces si quieres correr esto por encima de las cargas de página, entonces dirá continuar. No es sólo tener una carga de página. Digamos para este ejemplo, lo usamos entre cada cheque para que funcione en ambos sentidos. Entonces aquí vamos, comprobamos cuál es el estado. Entonces si el estado es inicio, hay algunas cosas que necesitamos establecer aquí primero. Entonces como puedes ver, configuramos la ejecución de cheques parte del almacenamiento local para que se ejecute. Por lo que acaba de establecer eso como este elemento conjunto, el nombre del elemento, y luego el valor aquí dentro. Aquí abajo obtenemos los valores de la canasta. Si solo muevo esto un poco, un poco más fácil de ver, obtenemos el valor de la canasta, por lo que estamos usando nuestros campos de costo Seleccionar objeto. Este es el nombre de clase que pasamos en ese objeto al inicio. Entonces lo usamos en el QuerySelector justo aquí, y luego agarramos el contenido de esos elementos. Es decir, van a agarrar esta parte justo aquí. Entonces lo que hacemos es asegurarnos de que convertimos esto en un formato que podamos saber va a estar ahí. Entonces esto podría ser una cadena, podría ser un número, pero nos aseguramos de que lo tengamos como flotador con dos decimales. Entonces en este ejemplo, se envía columna aparte de esta cadena justo aquí. Después establecemos esto como el valor de canasta inicial cuatro, una función. Por lo que necesitamos saber en qué se encuentra la canasta arriba antes de que se ejecute nada para que podamos comparar los diferentes cupones contra esto. A continuación agregamos otra parte al objeto de cheques de cupón justo aquí. Por lo que tenemos nuestro mejor trato. Aquí es donde revisamos más adelante la función cuando estamos corriendo para ver qué cupón es mejor, lo comparamos con esto. Entonces empezamos por tener el valor de canasta existente que agregamos justo aquí. Y luego agregamos un espacio aquí para decir qué cupón era el mejor. Y luego acabamos de poner otra matriz aquí que son todos los cupones que hemos comprobado. Entonces acabamos de establecer esto, así que decimos un cupón actual. Entonces esa es una disposición de almacenamiento local que cuando nos registramos en este momento. Entonces eso es un vacío, pero nos aseguramos de que eso esté en el almacenamiento local donde se bloquee la consola aquí, lo cual es útil solo para ver cómo va progresando esto. Entonces es más difícil cuando estás creando esto mientras compartes o el código como mencioné con este video. Y luego estamos enviando todo esto a cheques de cupón parte de nuestro almacenamiento local, pero asegúrate de convertir esto de un objeto en una cadena JSON. Por lo que en el almacenamiento local, no se almacena como variables a las que se puede acceder a ella a través de un objeto. Tienes que asegurarte de que sea solo una cuerda. Entonces conviertes eso justo aquí. Y entonces eso es todo lo que necesitas para empezar esto. Si queremos entonces seguir ejecutando la función que es esta parte del código justo aquí. Entonces como puedes ver, lo primero que tenemos que hacer es agarrar el objeto selector existente. Por lo que es importante que no estemos configurando esto cada vez. Entonces guardamos esto en el almacenamiento local y luego usamos el pase JSON para asegurarnos de que ahora es un objeto con el que podemos interactuar y podemos usar. Y nosotros hicimos lo mismo por los cheques de cupón justo aquí. Entonces este es el objeto que acabamos, acabamos de crear para que dibujamos para el selector uno y para cheques de cupones. Y luego sólo tenemos un poco de inicio de sesión en la consola para decir que estamos continuando. Esta no es una nueva racha de una función con continuar por aquí. Lo que tenemos aquí es un cheque para ver, ¿estamos a parte de revisar uno sobre cupones? Entonces decimos, ¿cuál es el cupón actual? Si está vacío, no necesitamos hacer esto, pero si no está vacío, sigue revisando esto. Entonces para dar un ejemplo, si la página tiene que recargar cada vez, lo que va a pasar es que tenemos la primera parte del cheque cupón es donde ingresamos el cupón en el campo de entrada aquí y luego presionamos el botón, y luego la página se volverá a cargar. Y luego cuando la función se ejecute por primera vez después de eso, llegará a este punto de nuestro código. Y luego queremos asegurarnos de que regresemos falso. Por lo que deja de ejecutar cualquier código después de esto, y luego sigue revisando esto, este, este cupón. Entonces en este ejemplo, lo que eso haría es agarrar el valor de la canasta ahí y compararlo con la canasta estrella para ver que redujo el costo en absoluto. Entonces si es así, si actualmente no estamos revisando uno, continúa a la baja. Entonces tenemos justo esto aquí es un, un cheque para ver. ¿ Nuestros objetos seleccionados son válidos en cierto sentido. Por lo que probablemente estés revisando esto un poco más de detalle, pero esto solo muestra cómo puedes ver. Si tenemos una propiedad selector de consultas en este objeto. Santuario seleccione el campo de entrada justo aquí. De lo contrario, si está ahí, sólo seguimos ejecutando la función. Entonces ahí es donde tenemos esto. Aquí es donde si no tiene eso, matamos a una función ahí, lo contrario seguimos abajo. Entonces a continuación acabamos de establecer matriz de cupones en una variable más accesible justo aquí. Por lo que te vendría bien una izquierda o una const aquí. Pero de nuevo, acabamos de conseguir esto como variable, manteniéndonos a todos simples aquí. Y tenemos esos nombres de pupila actuales. Solo estamos estableciendo una variable justo aquí junto con nuestros próximos cupones de cheques. Entonces lo que esto básicamente hace es que tenemos nuestra matriz de cupones que queremos comprobar, y tenemos un cupón actual. Y luego creamos un bucle for que recorrió esta matriz de cupones. Y estamos revisando para ver si este cupón ya ha sido revisado. Por lo que tenemos una matriz de cupones comprobados y nuestra matriz de todos nuestros cupones. Entonces lo que básicamente estamos haciendo es decir, se ha comprobado este equivalente? Si lo ha hecho, no hagas nada. Pero si no ha agregado esto a nuestro siguiente cupón comprobado o siguiente cheque. Y esto significa un cupón a la vez. Estaremos revisando. Por lo que normalmente significa que estaremos revisando el último cupón de la matriz. Entonces como está recorriendo todo, esto va a sobrescribir a cada uno. Eso está bien para este ejemplo. Entonces un agarrar esa última parte de nuestra matriz que aún no se ha comprobado y establece este siguiente cupón cheque. Entonces más abajo aquí, lo que estamos haciendo es que estamos diciendo si el próximo cupón jet es un vacío, entonces teníamos un cupón que necesitamos revisar. Por lo que pasamos eso en cheque cupones estrella con un objeto selector y el nombre del cupón que queremos comprobar. Te mostraré lo que hace esa parte a continuación. Pero de lo contrario, si aquí no hay ningún cupón, así que si esto está vacío, entonces eso significa que hemos comprobado todos nuestros cupones. Entonces todo lo que necesitamos hacer a continuación es ordenar y mostrar el resultado de ejecutar esta función. Por lo que acabaríamos de despejar las comprobaciones de siguiente ejecución para que no vamos a ejecutar la función cuando la página se recargue. Y sólo decimos a la consola que se detenga en esta función. Y nosotros, ellos, luego hacemos un cheque para ver cuál fue el mejor trato. Entonces en este código justo aquí. Sabemos que tenemos un nombre sobre el mejor trato. Entonces un cupón tiene uno, esencialmente esto, esta comparación. Entonces lo que hacemos es volver a ejecutar esta función para que el cupón se aplique a nuestra canasta. Porque lo que podría pasar si corres tres cupones diferentes y el primero fue el mejor trato, pero hemos terminado la función en ese tercero que no era el mejor trato. Queremos asegurarnos de que reaplicamos ese cupón a nuestra canasta en este ejemplo de todos modos. Entonces podemos ver que entonces acabamos de poner una alerta justo aquí para decir qué cupón era el mejor. Tienes 41 solo basado de una manera más agradable. Pero para este ejemplo, eso es todo lo que realmente necesitaban. Si este mejor cupón, nombre del cupón estaba vacío sin embargo, eso significa que no encontramos ni ocupantes son inválidos o no hicieron ninguna diferencia en nuestra canasta. Entonces básicamente queremos decir que ya tienen el mejor precio. Entonces solo regresamos eso ahí y nos aseguramos de que aplicamos un cupón vacío justo aquí. Pero eso depende de, de lo que necesites para tu función. Y luego todo lo que estamos haciendo después de eso es eliminar todos estos artículos que hemos creado de mi almacenamiento local. Entonces básicamente solo limpia todo ahí arriba. Entonces como mencioné hace un minuto, los cupones de cheques inician camino la función aquí. Por lo que tenemos dos partes de donde revisamos cupones. Entonces justo aquí arriba donde estamos corriendo a través de todos nuestros cupones, hemos hecho una llamada para conseguir estrella de cupón. Y como mencionamos antes, si actualmente estamos con la página se vuelve a cargar y llegamos a este punto. Quieres decir cheque fin cupón. Entonces te mostraré qué hacen esas dos partes a continuación. ¿ De acuerdo? Por lo que la primera parte del cheque es aplicar el cupón en el campo de entrada y o bien pulsar el botón aplicar descuento o el botón agregar cupón o pulsar enter en ese campo de entrada. Entonces como puedes ver aquí, lo que estamos haciendo es que estamos estableciendo un ítem justo aquí para decir qué cupón estamos revisando actualmente necesidades específicas para recargar. Agarramos el campo de entrada aquí para r cupón, y luego aplicamos nuestro nombre de cupón en el valor allí. Y luego comprobamos para ver, es este un botón que necesitamos presionar o necesitamos presionar Enter? En caso de necesidad de presionar un botón, hacemos clic en el botón. Si necesitas presionar Enter, disparamos un evento que simularía que entrar prensa. Entonces lo que hacemos a continuación es comprobar si la página necesita recargarse. Si hace falta recargar, no hacemos nada. Por lo que queremos dejar eso a la página para volver a cargar y luego esperar el tiempo que la función se ejecuta al lado para tomar eso y lidiar con eso entonces si no necesita volver a cargar. Entonces si es falso, entonces enfriamos el final del cupón de cheques. Y entonces tenemos este cheque aquí arriba. Aquí es donde como mencionamos al final, si hemos encontrado que nuestro cupón ganador, tenemos este cheque justo aquí para que no ejecutemos estos cheques extra o estamos haciendo hay uno, solo lo aplicaré a nuestro pacientes aquí y presentarlo. Entonces esa es esa parte. Por lo tanto, desmarque fin de cupón. Lo que estamos haciendo aquí es aquí donde esperamos la función. Entonces tenemos esa cantidad de milisegundos que vamos a esperar. Por lo que primero tenemos un tiempo de espera para solo esperar esta cantidad de tiempo. Y luego una vez que se haya completado ese tiempo de espera, ejecutamos este código aquí. Entonces sí, puedes ver que aquí hay un poco de cosas, pero esto es realmente sencillo. Entonces, de nuevo, estamos diciendo ¿cuál es el cupón que estamos revisando actualmente? Por lo que obtenemos toda nuestra información actualizada. Agarramos el valor de la canasta. Por lo que utilizamos nuestro campo de costo QuerySelector justo aquí y agarramos nuevamente el valor de esta canasta. Entonces aplicamos eso aquí. Entonces le quitamos cualquier prefijo, así lo que usamos justo aquí, así subcadena y luego uno en este ejemplo o donde sea sus prefijos. Y entonces sólo hacemos un cheque aquí. Entonces, ¿esto es más bajo de lo que empezó la canasta? Entonces necesitamos hacer otra comprobación. ¿ Es esto menor que el mejor trato actual? Es que tenemos un nuevo mejor trato y aplicamos eso a nuestros cupones cheques objetos. Hacemos cheques de cupón mejor trato, y luego actualizamos ese valor de canasta. Y entonces asegúrate aquí para asegurarnos de que volvamos a poner esto a flote. Entonces es un número que podemos comparar con otras cosas. Así que sólo sirven las cosas consistentes. Porque nunca se sabe si la canasta va a tener un peniques o sentido parte de eso también. Entonces lo mejor es convertir eso. Y luego acabamos de poner el nombre del cupón aquí. De lo contrario su servidor pero consola. De acuerdo, solo para depurar y hacer check-in para decir que este no es el mejor descuento. De lo contrario, eso está todo bien. Y luego simplemente empujamos esto a la matriz de son cupones chequeados para que nos aseguremos de que no vamos a chequear. Y estos cupones más de una vez quieres terminar la cena nunca yendo bucle. Y luego solo actualizamos nuestros cheques de cupones. Por lo que de nuevo, lo convertimos en una cuerda adyacente. Nos quitamos nuestros cupones actuales, hemos terminado de revisar eso, por lo que quitamos eso del almacenamiento local. Esto es sólo una pieza de código hace aquí donde se prueba, donde estamos imitando si se iba a enviar al servidor, así que podemos ignorar eso. Y luego pasamos a la siguiente función. Entonces como pueden ver aquí, hemos querido continuar. Entonces después de cada vez que se carga la página, tendríamos un cheque ahí. Te mostraré en un momento. Y al final de revisar este cupón, hacemos la misma llamada para ejecutar esa función principal. Nuevamente, no pasamos en nuestro objeto selector porque estamos continuando, no iniciando. De esta manera, casi todo es solo un punto más que quiero mostrarles aquí abajo. Entonces como mencionamos, agarramos el estatus de nuestro almacenamiento local para ver si estamos corriendo o no. Y luego si el estado se está ejecutando, continuamos esa comprobación de ejecución. Y si no lo es, solo agregamos ese oyente de eventos, que creo que ya he mencionado. Ahora si te interesa ver cómo hacemos esto, aplica descuento. Sólo tenemos una función de acuerdo de cupón cheque por aquí. Y solo dice, aquí hay una lista de cupones válidos, es el valor de ese campo de entrada en esa matriz. Si lo es, solo tenemos aquí una parte codificada que cambia el valor de la canasta. Entonces es realmente simple. Pero si estás usando esto teniendo la hoja salvaje y no necesitas esa herramienta. Pero como mencioné, todo el código para esto ha sido compartido con este video. Y tendremos cualquier pregunta en el camino como su trabajo y este video o agregando una función propia que pueda funcionar a través de múltiples cargas de página de forma gratuita para dejar un comentario y estaré encantado de echar un vistazo y ver si puedo ayudar.