Crie um localizador de cupons nas extensões do Google Chrome como o "Honey"

1. Promo da Skillshare: Olá, sou Russell. E bem-vindos à minha nova aula de verificação, tudo sobre extensões cromadas. Tenho trabalhado dentro por desenvolvimento web e móvel nos últimos 15 anos, e durante esse tempo tive a oportunidade de trabalhar em vários projetos e startups. Nesta aula, vamos passar por tudo o que você precisa saber para criar uma extensão do Chrome localizador de cupom bastante semelhante ao mel. Esta classe amigável para iniciantes nos levará através de todos os passos que você precisa saber para seguir. Para fazer isso, desde a criação de um banco de dados na base de fogo e conectando isso a uma extensão de crime até as criações publicadas hokum na loja cromada. Estarei gravando cada passo do caminho para que você possa ver exatamente o que precisa fazer. Você precisa de qualquer experiência de desenvolvimento se você já quis saber como criar a extensão do cromo e este é o elenco para você pronto para começar vai se juntar a mim na primeira lição 2. Crie pastas do Firebase e extensão: Vamos começar. Então neste vídeo atrás, novo começo o quê? Você constrói a base da extensão cromada. Então vamos criar APP no fogo Base, que vamos usar como banco de dados que todos os códigos de cupom alcançados Main serão armazenados. Então vamos criar uma pasta com os arquivos necessários que precisamos para a extensão do crime , como o arquivo do Jason Manifesto e afins, JavaScript e arquivos HTML de fundo que a extensão que fizemos fora, então nós irá adicionar esta pasta ao Chrome. A maneira como adicionamos isso primeiro é como uma extensão descompactada e, em seguida, no final, fora do desenvolvimento, podemos empacotá-lo. E é isso que você enviaria para a loja de extensões do Chrome. E então começaremos a conectar o firebase à nossa extensão para que você possa ter comunicação nossa extensão e o banco de dados baseado em incêndio. Podemos começar a realmente colocar tudo junto, e então o passo cinco está bem, basta atualizar a extensão para que possamos começar a ver como o desenvolvimento vai avançar à medida que fazemos alterações nos códigos e eu tenho que enviá-lo para o cromo cada vez compactamos o botão de atualização, então ele o torna muito mais rápido. Então, estamos começando criando um novo aplicativo em cinco base. Então você pode fazer isso apenas indo para o console firebase como este e, em seguida, clicando em Adicionar projeto. Portanto, é muito fácil ter que inserir um nome para o projeto, então vamos chamar este localizador de cupom. Você pode chamá-lo do que quiser, no entanto , basta clicar em continuar. Ele vai perguntar se você quer adicionar análises ao seu projeto, você pode se quiser, mas eu vou dizer não por enquanto, apenas para torná-lo mais enxuto e, em seguida, criar projeto. Isso pode levar alguns momentos, apenas Teoh coisa fábrica e configurar. Ok, assim que o projeto estiver pronto, você pode clicar em continuar. Em seguida, queremos fazer é clicar no ícone da Web apenas aqui e, em seguida, registrar um nome para o seu aplicativo . Então novamente vamos chamá-lo de Localizador de Cupom. Nós não queremos vender cinco A's hospedagem, e há clique registrar aplicativo e agora será fornecido com este script aqui. Então tudo que você precisa fazer agora é copiar este dedo do pé de um lado. Então o próximo que vamos fazer é criar uma pasta sobre a necessidade de arquivos que precisamos para a extensão. Então, para fazer isso indo para o seu editor de código de ordenação de Joy. Então, para mim, isso seria um átomo. E então vamos começar a criar uma pasta nos arquivos que precisamos. Então primeiro foi Atom vai adicionar uma pasta de projeto. Então esta é a minha nova pasta de Created Just Tears. Quando você adicionar uma pasta dentro disso e nós vamos chamá-lo de cupom, encontre-nos apenas para manter os mesmos nomes ao longo do caminho aqui para manter mais fácil. E então vamos adicionar um arquivo dentro desta foto. Bem, eu vou fazer para facilitar o acompanhamento é apenas arrastar esta janela para cima Então espaço ao longo do fundo Aqui, futuro. Siga junto. Ok, então agora você pode adicionar seu editor de código por baixo. Só estou aqui. 3. Crie arquivos necessários para a extensão: dentro da nossa pasta localizadora de cupom. Vamos criar os arquivos que precisamos para executar nossa extensão. Então, abrimos o arquivo Cranie. Aqui está o 1º 1 será o manifesto. Não, Jason. Precisaríamos de ap dot Js e, em seguida, precisamos de antecedentes. Não, html e, finalmente, precisamos Firebase dot Js Estes são todos os arquivos que estarão usando no próximo que precisamos fazer é configurar um arquivo de manifesto para que possamos realmente enviar extensão para o chrome. Ok, então dentro do arquivo de manifesto, precisamos criar um novo objeto aqui. Só vou inserir alguns atributos que precisamos para fazer nossa extensão funcionar com o Chrome. O 1º 1 é o nome da nossa extensão para que possas pôr o que quiseres aqui. Mas, novamente, eu só estou seguindo a mesma patente que já tenho. Então nós vamos chamar este localizador de cupom, ter números de versão deste apenas 0.1, então precisamos de uma descrição que até? Cupons. Então as permissões que temos para inserir estes como uma matriz. Então fazemos isso assim. E, em seguida, as permissões que precisamos será guia ativa isso nos dá a capacidade de resolver acesso a guia que o usuário está em. Queremos ser capazes de executar isso em todas as suas meninas. Você também sabe acesso? Outras abas também? Isso nos ajuda a acessar nossa página de fundo no caminho. Vamos fazer comunicações para frente e para trás. Então, depois disso, continuamos adicionando mais opções. O próximo é o fundo. Este é um arquivo que executamos em segundo plano. Então, novamente, será a página. Aqui está em fundo html, veja para colocar aspas por aqui. Então, novamente, background toe html Andi, nós não queremos que isso seja persistente, então nós não estamos apenas correndo o tempo todo apenas quando nós chamamos isso. Isso só ajuda, hum, pela quantidade de chamadas, os ingredientes. Nós apenas mantê-lo, hum tão desempenho um pouco melhor. Em seguida, precisamos Teoh definir o tipo de extensão que estamos criando. Há várias maneiras diferentes de você ter uma extensão com cromo. Você pode ter extensões que só aparecem se você tocar no ícone no canto. Aqui no Chrome tem outras extensões que injetam conteúdo na página como estamos criando aqui e você tem outras extensões que adiciona como uma página de destino da Ucrânia em New Tab. Eles assumem a nova conta enquanto ela, mas para esta, vamos injetar código na página. Então isso é chamado de script de conteúdo. Para isso, temos que passar informações que vamos usar. Este é um array novamente. Então, esta matriz leva em um objeto. Assim, o primeiro dos atributos é chamado é chamado de Matches. Aqui é o Senador. Ele nos diz em que seus antigos queremos injetar código agora porque queremos que este script funcione em qualquer site, essa extensão, qualquer site. Se temos um cupom, estamos prestes a mostrá-lo. Então, novamente você vai colocar todos os seus RL's. Então temos que mencionar os arquivos JavaScript reais quer incluir assim nós. Isso é app dot Js. E então nós só queremos dizer quando este conteúdo deve ser adicionado, Então salvar executar um documento e isso deve ser uma vez todo fora do conteúdo para essa página foi adicionado, que normalmente é suficiente, Algumas páginas, como ligado ao bom exemplo. Eles levam um tempo para carregar a página, e há algum tipo extra de chamadas que ocorrem eso quando você está fazendo extensões para pacientes como ligados no talvez Gmail, precisamos adicionar suas próprias verificações para ter certeza de que o como o dibs e elementos da página Mona Interactive são carregados. Mas para este exemplo, quando o quê? Vamos fazer isto, isto é perfeito. Então, em um mais, que é a versão do manifesto, que no momento é a versão dois e, em seguida, você quer Teoh, adicione uma política de segurança de conteúdo. Agora, esta é uma corda bem longa, que tem todas as informações que precisamos para usar a base de fogo, que vou digitar agora. Mas eu vou ter, hum, isso para que você possa copiar uma descrição deste vídeo. Ok, então essa deve ser toda a informação que precisamos para inserir no manifesto. Então você pode ir em frente agora e salvar isso. Certo, agora que adicionamos que queremos entrar no crime, vá para as configurações vá para as extensões. Quero clicar em carregar descompactado aqui, clicar carregar, descompactar. Então queremos encontrar a pasta que acabamos de criar. Então, para mim, isso está nos olhos. Localizador de cupom. - É o quê? Clique em Selecionar. Só para então, se procurarmos por esta nova extensão, você pode vê-la aqui. Agora, isso é um erro no momento. Isso é porque não temos nenhum conteúdo em nossa página. Apenas certifique-se de que você tem um médico também. Se você está seguindo de maio de branco se o seu copiar e colar em, não se preocupe. Além disso, se você voltar aqui, limpar tudo de novo, você deve vê-lo funcionar. Então este é o próximo passo que te ia mostrar no passo cinco, na verdade. Assim que você adicionar sua extensão ao Chrome, todas as alterações feitas, você precisa atualizar e, em seguida, elas serão refletidas. Então, por exemplo, se vamos para isso é encontrar uma loja aleatória aqui são extensão será executado nesta página. Então, se adicionarmos ao nosso vestido aplicativo, este é o arquivo que será realmente injetando um código na página. Então, se olharmos de novo, temos um fundo, um arquivo de fundo aqui, que está de volta em html. Mas isso não vai realmente executar nada na página. Isso é exatamente o que estamos usando para enviar informações para trás e para a frente da base de fogo. Então, se entrarmos aqui e apenas dizer muito olá da extensão, em seguida, voltar para as extensões, atualizar e, em seguida, recarregar esta página. Você pode ver agora temos mais, diz ex-Olá da extensão é que mostra são extensão está nesta página. A Andi. Ele é carregado corretamente, e eu manifesto arquivo funcionou. Agora você pode ver como sua data de fundo amanhã está parecendo aqui na próxima etapa vai começar a adicionar cinco base em extensão e começar a fazer as conexões com um banco de dados . 4. Conecte a extensão ao nosso banco de dados: antes de continuarmos, ele fará uma correção ortográfica rápida dos últimos vídeos onde tivemos persistente. Apenas aqui. Certifique-se de mudar este a em um A como este, mas eu vejo apenas mudança precisa fazer isso exatamente isso. Então esse vídeo que iríamos adicionar em conexão com um roteiro da base de fogo. Então, se voltarmos para a base de fogo ou encontrarmos informações aqui, queremos pegar a informação do conflito da base de fogo aqui. Então livre Copy on. Vamos colar isto no ficheiro Js da base de fogo. Então vá para a base cinco e colamos isso. Então é isso que precisamos fazer com a base de fogo. Inicie o arquivo Jess por agora. Mas voltaremos a este arquivo mais tarde. Então, para salvar essas alterações e, em seguida, em segundo plano ou HTML, queremos fazer uma solicitação para este arquivo firebase em. Queremos também ter certeza de que carregamos o firebase sdk. Então a maneira como as coisas funcionam em extensões cromadas é um pouco diferente. Teoh, podemos ter visto apenas em sites normais sobre coisas ausentes. Pelo menos não pode ligar para outros Js externos diretamente da sua extensão. Então o que temos que essencialmente fazer é usar este fundo ou HTML como uma ponte entre a nossa extensão onde injetamos o script na página sobre o site que passou nas datas de fundo para Mel File que terá a conexão com base fogo. Isso é o que temos para dar este passo extra. Mas vou te mostrar o que isso significa. Não é muito complicado. Isso só ajuda a fazer isso ou realizar um chá agradável com cromo. Então nós queremos fazer é no fundo i html Se voltarmos para o cromo, você quer pegar este script e colar isso em? E, em seguida, se nós apenas copiar este mesmo script e colar, ele vai fazer uma mudança aqui dois banco de dados e, em seguida, apenas mudar o número de versão Teoh 7.9 Doctor, Eu sou seis pés o mais atualizado como fora de março 2020 e, em seguida, nós queremos Teoh ad novamente Como oh, cinco base que chamaria este arquivo aqui mesmo. Então, se salvarmos isso e eles voltarem para o Chrome e a atualização agora terá o firebase conectado , ficarei assim se voltarmos às extensões. Refresque isto. Se soubermos, clique nas vistas inspetor, você pode ver que temos a descrição que queremos apenas aqui. Então, se nós realmente voltar para Firebase Dot Js e fazer um console log off base de fogo. Atualize este Abrir os dias de fundo para moer. Você pode ver agora que estamos conectados à base de fogo. Isto é o que precisamos para começar a fazer conexões de e para o banco de dados. 5. Configurar eventos do Chrome: Agora neste vídeo, nós estamos indo Teoh fazer alterações em um arquivo Js mapa para que possamos começar a pegar o nome de domínio da página que estavam em e, em seguida, enviar isso através de ter página HTML de fundo, que podemos então verificar com fogo Base se temos qualquer cupons para esta página. Então vamos começar removendo este script de alerta que temos aqui em adicionar algumas seções que queremos começar a codificar, então o primeiro será obter o domínio atual. Então vamos definir isso como uma variável fora do domínio e isso será igual a localização da janela, nome do host. Mas isso pode ter http ou www dot prefixado no momento. Então só queremos ter certeza de que tiramos tudo isso para que possamos fazer isso com um simples substituto. Então primeiro vamos verificar se ele só tem http e, em seguida, um para 82 ps em, em seguida, finalmente para w w ponto bem, assim. E então nós também queremos ter certeza de que estamos dividindo quaisquer parâmetros de hash a partir disso, bem como , o que podemos fazer assim. É bom ter certeza de que obtemos essa expressão incorretamente e eles querem passar apenas a primeira parte. Então isso deve ter certeza de que o nome de domínio é tudo o que estamos obtendo com isso. E então estamos prontos para realmente enviar isso para o fundo para HTML. Então, a maneira como fazemos isso é usa o objeto de extensão do cromo e queremos usar o tempo de execução. E isso nos permite enviar uma mensagem através de Teoh e-mail de fundo travado. Então, quando terminamos direito e isso seria capaz de adicionar um pedaço de código em fundo extremo El, que na verdade chamou o arquivo firebase. E é por isso que, como um evento de ouvinte para todas as mensagens que são enviadas, mas primeiro vamos criar a mensagem aqui. Portanto, queremos definir uma série de parâmetros para isso. Então eu enviei um objeto através do qual tem um comando ligado. A razão pela qual queremos definir um comando aqui é porque queremos cerca de um centavo diferentes tipos de pedidos através deste vil. Assim, a solicitação que queremos ser capazes de criar é primeiro é um pedido. Quando carregamos a página para verificar se temos quaisquer cupons para este aviso de domínio que falou errado. Pedidos familiares. Então vamos passar por isso. Vamos chamá-lo um fetch no segundo tipo off comando que quer fazer é se queremos Teoh enviar um cupom para o banco de dados. Estes são os dois tipos diferentes que vamos criar. Mas agora vamos nos concentrar neste tipo. Então vamos passar alguns dados também, que serão um objeto. E nós chamamos de domínio, e nós vamos apenas passar nesta variável apenas aqui permanece os únicos parâmetros querem apenas aqui. E então, obviamente, queremos ouvir a resposta. E isso vai arrefecer em que seria enviado aqui mesmo. Aqui é onde obtemos uma resposta do banco de dados, que é fundo para HTML, o que realmente torna legal. Isso só nos ajuda a lembrar onde essas chamadas serão feitas. Então estamos seguros que por enquanto e depois queremos entrar para que tenhamos html fundo e seguida, fogo base. Então aqui, precisamos criar um ouvinte para todas as mensagens que estão sendo enviadas através do fundo para 80 milhões de páginas. Então, do jeito que fazemos. Isso é muito semelhante à mensagem de tempo de execução do chrome enviada. Em vez disso, colocamos o tempo de execução do crime na mensagem. Eles querem adicionar ouvinte, e então isso estará procurando esses mesmos parâmetros. A primeira seria a mensagem que será todos os parâmetros. A subida aqui mesmo, mana será chamada de mensagem. E então temos duas opções extras aqui, que Ascender. E, em seguida, a resposta é que queremos enviar a resposta de volta três para esta função apenas aqui para que possamos acessar as informações dentro disso. Então abra isso em uma função nossa e eles insights aqui porque, como mencionamos, vamos ter dois tipos diferentes de comandos. Haverá a busca para pegar os cupons, e então haverá um post para enviar novos cupons para o banco de dados. Queremos apenas ter certeza que tipo de comando foi enviado para nós. Então dizemos mensagem, mas o nosso comando e é igual a buscar. Mas então podemos começar a executar algum código aqui. Então, o que vamos fazer agora apenas para testar isso é em um console fazer logoff do domínio. Então isso é apenas definido. Domínio é igual a mensagem. Não dê dados, Dr. Main. Basta escolher o segundo e, em seguida, vamos registrar o domínio apenas aqui. Então guardamos isso. E certifique-se de que temos isso ou corrigir. Apenas aqui, em seguida, voltar para o chrome em ir para as extensões, atualizar a extensão e, em seguida, ir para uma página e, em seguida, vamos verificar se a página html de fundo está registrando o domínio no console. Então, novamente, nós pressionamos fresco apenas aqui, nós vamos carregar, hum, comprar de novo. Então, se temos apenas alguns sites aqui e depois verificar a página de fundo, você pode ver que agora estamos recebendo o registro de resultados apenas aqui no console. Então, se carregarmos outra página e, em seguida, verificar o log, você pode ver que esses resultados estão atualizando como e quando vamos nessas páginas. Então isso significa que temos uma conexão de AP através de html de fundo, que podemos então receber essas solicitações e, em seguida, enviar um resultado de volta. O que? No momento em que estamos apenas bloqueando isso para a página. Então, em seguida, precisamos enviar este resultado de volta para o aplicativo Js para que possamos ver uma resposta 6. Configurar a estrutura de banco de dados e cupons: Ok, então no próximo vídeo, vamos fazer um pedido para o nosso banco de dados baseado na coxa e enviar o nome de domínio codificado na base 64. A razão pela qual vamos codificar o nome do domínio é porque dentro do banco de dados do Firebase aqui, você não pode usar traços ou pontos como três chaves. Precisamos ter certeza de que está codificado corretamente antes de chegarmos a este estágio. Então vamos usar a base de dados em tempo real aqui. Vamos iniciá-lo no modo de teste para um estado que criativo lá e mover fazendo a solicitação para domínio de pensamento barra. Em seguida, aqui dentro será o nome de domínio codificado. E então teremos uma matriz fora códigos de cupom que você pode ter dentro aqui para que eles serão mostrados. Então é assim que a aparência estrutural tem um exemplo. Então nós vamos ter o nome de domínio codificado apenas aqui e há uma matriz fora código de cupom e para cada código de cupom terá o código como este e em uma descrição rápida fora de cada cupom. Então, por exemplo, quanto dinheiro você ganha por este cupom? Então agora vamos criar um script que fará pesquisas fazer solicitação para um banco de dados em cada um deles. Então seja domínio Ford Slash. E então o que eles codificaram para fazer nome é um efeito dos resultados. Então nunca podemos acabar com isso em extensão. Então, se saltarmos para trás Teoh, que é ele agora ou seu co-editor, vamos entrar em um comando de busca só aqui para ter certeza de que não é o Post Command e precisamos codificar nosso nome de domínio. Então nós vamos apenas criar um novo cabo aqui quando nós codificar o domínio neste será usando o script Java baseado 64 na função de código, que é B t o a. Então nós apenas passar no domínio apenas aqui. Livre-se deste bloqueio de console. É com isso que queremos fazer uma verificação. E agora nos conectamos à base de fogo e vemos se temos cupons. Já estabelecemos uma conexão com a base de incêndio para que possamos ligar para o nosso banco de dados imediatamente. Então você acabou de chamar banco de dados e, em seguida, precisamos da referência ou caminho fora do carvão que queremos fazer Ligeiramente disse que este seria domínio e, em seguida, encaminhar barra Codificar domínio agora porque via base permite que você obtenha resultados em tempo real. Temos que ter certeza de que dizemos expressamente uma vez apenas aqui é isso vai buscá-lo, obter as últimas informações cada vez que fazemos um cool e então precisamos ouvir a resposta. Então aqui vamos obter resultados. Então vamos dizer resposta. Isso vai enviá-lo de volta para o aplicativo Js Então vamos obter os resultados aqui para que possamos começar a usar isso para renderizar na tela para dizer que queremos definir um número de parâmetros diferentes. Sim, nós podemos realmente depurar, descobrir quais são todas as informações que estamos recebendo de volta do banco de dados. Tão triste tipo de resultado. Queremos um status também. Então, se chegou a este estágio tem sido um sucesso e, em seguida, é claro, teria passado os dados em uma onda. Isso será instantâneo. Esta é a própria crença atribuída a este aqui e, em seguida, vamos passar em todo o valor que temos eu sou obtido a partir de cinco base e, em seguida, nós só queremos dizer o que a solicitação inicial waas, que irá ajudá-lo para depuração. Então, de novo, vamos colocar esta mensagem toda aqui. Eles agora devem enviar este resultado. Então, se definirmos um bloqueio cônsul aqui para a resposta, agora podemos ver como isso parece sem ter que ir para o fundo para HTML cada vez. Então, se formos para o Chrome, atualizarmos nossa extensão e eles estiverem indo para Ah, página da Web, vamos ver que resposta obtemos da base de fogo enterrando mentes. Nós só temos este exemplo de teste aqui no momento, então você vai atualizar. E agora vamos a uma página web. Inspecionar, verificar o console. Você pode ver aqui. Resposta da base de fogo. Indefinido. Então isso aqui está mostrando que não temos nenhum registro para nada no banco de dados no momento para esse caminho. Mas se agora vamos codificar isso, podemos realmente ter certeza de que temos uma resposta aqui. Então, se você quiser em código isso à mão, ele vai para este site útil khirbet 64 codificar a pasta de cachorro na string que você quer codificar. Então vamos copiar isto. Volte para um banco de dados, crie uma nova entrada aqui. Então este é o nome de domínio. Então queremos ter certeza de definir um código. Este é um nome de cupom, triste descrição. Então, se adicionarmos isso no banco de dados, seguida, voltar aqui, podemos ver que o erro ainda está acontecendo. Mas se voltarmos para um editor de código aqui e, em seguida, abaixo do ponto, fazer esta verificação para o comando que eu preciso adicionar em troca. Verdadeiro. E isso manterá a mensagem pobre aberta para nós enquanto fazemos o pedido para os cinco um estado baseado. Então, se voltarmos agora e atualizarmos nossa extensão e tentarmos isso novamente, vocês podem ver agora que temos uma resposta do Fire Base, e isso deve mostrar nosso exemplo. Cupom. Eu só estou aqui. Mas se formos para um nome principal diferente, um, um, você apenas ligeira novamente é um exemplo. Você verá que a resposta é não, porque não temos cupons para isso para este domínio. Então temos este aqui. Agora isso está ligado ao Google Dot com. Então, no próximo vídeo vai começar a se certificar de que tomamos os códigos de cupom que foram enviados de volta para o banco de dados em Nós olhamos através destes e realmente exibi-los na tela para arredondar para continuar olhando para o log do console e depurá-lo cada tempo, então eu começar a trabalhar fora para fazer exibições reais para esses dados. 7. Cupons de renders na página.: em seguida, precisamos começar a exibir os cupons que temos obtido a partir do banco de dados. Então, no último vídeo, procuramos obter as respostas da base de fogo. Poderíamos enviá-lo de volta para a resposta da mensagem que queríamos aqui. Então agora temos os cupons, se houver algum nesta variável apenas aqui. Então, neste vídeo, vamos percorrer este array se houver alguma escada de cupom e começar a renderizá-los na tela. Então vamos começar criando uma nova função aqui embaixo. Nós somos legais. Estes cupons passados como este, e depois aqui, que é uma disfunção legal, depois dados de ponto de resposta. Assim, estamos nos certificando de que esta mensagem de envio para o nosso arquivo baseado em fogo ou Jess vai ser legal. Vamos ter a resposta que eu enviar a resposta para esta função aqui. Agora, para começar, nós só queremos loop através de matriz de cupons e, em seguida, Adam para uma lista, e então vamos usar isso mais tarde. Então vamos colocar tudo isso dentro de um bloco de tentativa no caso de haver no caso de não haver cupom. Então isso será nulo. Então, não queremos fazer loop em algo que não seja o Excel chamadas seguidas. Então, se nós apenas colocar dentro de um bloco de tentativa que vai pegar a era e nós não teremos nenhum problema. Então eu chamo este cupom html, e isso será vazio para começar, o mais novo apenas dizer cupons para cada um. E nós apenas definimos isso como cupom no índice de títulos fixo lá em cima. Então isso iria loop através da matriz e, em seguida, definir cada item como cupom e porque o índice lá se precisarmos dele. Mas o que vamos fazer é chamar anúncios de cupom html para cada vez. Basta dizer dentro desta lista aqui o código, este será o código do cupom. Basta dizer dentro desta lista aqui o código, Então, novamente, a partir das semanas de banco de dados no último vídeo, vimos que temos dois parâmetros para o para o cupom. Há o código, e há uma descrição. Então, depois disso, definirá as descrições. Colocamos isso na descrição do cupom de selfie em itálico, e depois certifique-se de fechar essa etiqueta ali. Então isso significa que temos uma, hum esta variável aqui terá todos os códigos off. Códigos de cupom em uma lista agradável para nós, que possamos usar isso para realmente renderizar na página. Então o próximo que precisamos fazer é criar alguns elementos que podemos usar para exibir isso. Mas primeiro, só precisamos de um cheque no caso de essa resposta ser não para que não tenhamos um erro. Então nós apenas dizemos catch, em seguida, definir variável para esta era apenas aqui e começar. Se somos apenas locais para a tela e apenas dizer que nenhum cupons encontrou este domínio e, em seguida, vamos apenas colocar a mensagem de erro lá foi dito que podemos desmascarar isso. Por isso guardei isto por enquanto. Antes disso, só queremos o Teoh. Nós só queremos renderizar esta lista para a página. Então, para fazer isso, vamos criar um novo elemento aqui, pulando à minha frente lá. Então chamamos isso deexibição de cupom, e isso será um novo desenvolvimento como este especial para capitalizar isso. exibição de cupom, E então diremos, continue, jogue em 80 milhões. Esfria. Corrigir essas citações e, em seguida, dentro da tabela colocar o html cupom e, em seguida, é apenas uma questão fora adicionar isso ao corpo como este Então o que temos agora é que temos uma mensagem enviada de anteriormente com um artista nova função cupons passados que vai levar na lista off cupons só aqui. Assim, os dados de resposta foram então loop sobre todos os cupons que foram encontrados e adicioná-los a esta lista em. Em seguida, criamos um novo desenvolvimento apenas aqui e, em seguida, definimos isso como o interesse para derreter, e, em seguida, anexamos à página. Então, vamos atualizar a extensão e ver como isso aparece. Nós renovamos nossa extensão. Agora, se formos para o Google, que é onde tivemos isso em primeiro lugar, você pode ver um cupom está aparecendo aqui sem qualquer estilo no momento. Mas isso é bom. Esse é o cupom que tínhamos lá. Se mudarmos alguma coisa sobre o tipo de ponto de exclamação necessário depois disso, eles estavam frescos. Você vê, ele está atualizando cada vez a partir do banco de dados, é por isso que estamos usando base de fogo porque isso nos ajuda a ter um banco de dados muito rápido, fácil de acessar, e eles podem fazer de toda a autenticação Onda de segurança para nós mantém tudo agradável e rápido. 8. Adicione o evento de clique para abrir o over: Ok, então neste vídeo, vamos pegar a tela que temos até agora e conter isso. Nós temos sido um elemento clicável que quando eles clicam sobre ele, ele vai abrir e mostrar a lista de cupons dentro em vez desta exibição de classificação aleatória no canto da tela aqui. Então vamos voltar para um editor de código e começar Teoh, tornar isso difícil. Ok, Então aqui está o código que temos atualmente onde temos um cupom faz jogo desenvolvimento, e isso foi adicionado à tela, que é um ótimo começo, mas queremos mudar. Isso rodeia isso. Temos uma parte que é ótimo, você pode clicar em que iria então mostrar isso. Então vamos começar por realmente esconder este elemento. Para começar com Onda queremos definir uma classe chamada isso para que possamos acessá-la mais tarde para que você possafazê-lo apenas dizendo sobrenome e somos chamados de lista de cupom. Para começar com Onda queremos definir uma classe chamada isso para que possamos acessá-la mais tarde para que você possa Basta ter um par de sublinhados tinha queria um começo entre Onda queremos Teoh adicionar um pouco mais html aqui apenas para deixar claro o que foi mostrado tipo de título aqui e dizer cupons. E então nós apenas definir outro ou subtítulo apenas como lista off cupons. E poderíamos até passar pelo nome de domínio aqui. Assim poderíamos dizer lista de cupons para e depois no domínio. Então, vamos dar uma olhada. Agora o que? Você não vai olhar ainda porque isso está escondido. Mas o que eu quero fazer a seguir é adicionar um pequeno círculo na parte superior da tela aqui que se você clicar, ele vai abrir este exibir seu próximo movimento um pouco mais abaixo aqui. Andi, crie outro elemento chamado botão de cupom. Então, novamente, com documento cria elemento e isso será uma div. Então temos um botão de cupom aqui. Mas dê um nome de classe a isso, continue no botão. E então queremos adicionar um pouco de estilo a isso. Então nós estamos apenas nisso como CSS então em uma lista de coisas aqui. Então primeiro queremos fazer é, hum ter certeza de que temos uma altura menos em torno de 30 pixels. A com 30 pixels. Queremos que seja arredondado. Dispels teve um raio de fronteira de 100%. Eu tenho esta nova linha país aqui assim, Podemos levar na borda de um pixels Andrada, cor de fundo e disse cor de texto só para que possamos ver isso provavelmente vai parecer horrível para começar, mas vamos estilo mais tarde no curso para que possamos fazer com que pareça muito mais atraente para o usuário. Mas começaremos por fazer com que tenham algo com o qual possamos interagir. Semestres em outra nova linha aqui. Então temos as citações aqui em cada linha. Assim é para começar com um. Tem um que os feche por isso. Depois disto. Quer ter os ícones mais que podemos adicionar a esta string? Queremos torná-lo clicável. Então eu quero definir as posições da posição será corrigido. Então, à medida que descermos a página, ela permanecerá lá. Queremos que sejam cinco imagens da parte superior da tela e cinco imagens do lado direito da tela. Novamente, por aqui, Andi, isto deve ser tudo o que precisamos. Só temos que definir o conteúdo do Cem com texto a linha para o centro fechar a corda, ali e ali. Queremos definir em html Teoh, Eu devo dizer, Cozinhe em que pode não caber como é que é apenas verificar isso aqui em. Por último, queremos que este para a página como este. Então, por enquanto, uma nova extensão e ver o que conseguimos. Ok, podemos ver que nosso círculo está aparecendo aqui, mas não é o mais fácil de ver. Vamos apenas nos certificar de que indexamos isso corretamente. Então, se formos, hum, volta para aqui, basta dizer, disse, Index, que é um nove lá. Apenas dedo do pé. Ajuste a hierarquia. Atualize a extensão novamente. Gates agora por cima. Então agora queremos fazer é adicionar um clique eventos. Quando isso é clicado, você vai abrir em exibição a lista de cupons que tínhamos antes de nós queremos parar. Isso é bom, então aparece aqui. Vamos consertar esse cupom técnico para que fique bem centrado. É assim que vamos fazer isso apenas dizendo display flex, justificar o centro de conteúdo em um centro de itens de linha. Basta corrigir isso aqui e, em seguida, querer adicionar um pouco de estilo aqui também. Então eles vão fazer se nós apenas copiarmos tudo isso Andi quer em um máximo de cerca de 300 chicoteados por cerca de 300. Não preciso de um raio de fronteira aqui. Talvez três pixels. Algo ao redor das bordas. Um pouco, um, sobre o resto disso. Deseja mover isso um pouco mais para baixo na página. Então não há sobreposição. Outros elementos eram, digamos, um top de 100 muito ligeiramente. Diminua esse 90. Nós não enviamos a linha para ser o centro ou isso também. Se olharmos para este estouro de repente escondido porque temos um item de lista aqui eu mesmo . Empurre para o lado. Então devemos ter tudo aqui. Então, se mudarmos isto para um emoji, talvez este. Então, é seguro. Isto atualiza a nossa extensão. Certo, temos um pequeno problema. Vamos verificar o que temos fora do curso. Estamos dizendo manteiga de cupom, não as pessoas exibem. É por isso que não foi definido ainda. Então, se atualizar isso, devemos ver o nosso atualizado Eu estou apenas jogar aqui, e então nós só precisamos adicionar um evento clique para fazer esta exibição. Então, precisamos remover o tipo de exibição de flex porque ele está fazendo esses itens aparecem em uma coluna. Então, isso será escondido. E então quando clicarmos nisso, ele deve exibi-lo. Então nós só tínhamos código para estes agora, então removemos este display flex e então vamos criar uma nova função aqui embaixo. Solicitar criar eventos Eu não ouço você dizer que grandes eventos são uma nova função. Eles querem dizer seletor de consulta de documento e eles querem obter o nome da classe desses botões. Se copiarmos isto, colá-lo aqui, Tia Event, ouvinte no clique. E então queremos que isso execute uma função aqui embaixo. Então, quando isso é clicado, queremos exibir este elemento Aparece então queremos tomar o outro nome da classe. Começo aqui aquele bloco de exibição de estilo. Então eles devem criar este evento aqui em baixo que adiciona um ouvinte de eventos ao botão, que é isso relevante? Apenas aqui. Então, quando isso é clicado, nós atualizamos o estilo deste elemento aqui para exibir. Então nós apenas voltar agora ou fresco isso para que como você pode ver em cupons ainda sendo mostrados, isso é porque este CSS é sobre escrever. Eles são CSS aqui é sobre escrever o que nós colocamos aqui. Então, colocamos isso por baixo. Remova aquele que atualiza casos. Aqui vamos nós. A lista de cupons não está aparecendo. Se clicarmos aqui, ele aparecerá. Se formos para um domínio que não tem cupons, por exemplo, por exemplo, este site Argo aqui, podemos ver que nosso pequeno ícone não está aparecendo. É um mais tarde no curso, vamos fazer uma verificação para ver se não há nenhum. Os cupons ainda mostrarão o ícone, mas em um design ligeiramente diferente para que os usuários possam enviar seus próprios cupons para esse site . Mas por enquanto, podemos ver que ele está detectando do banco de dados se existem cupons. Se estiverem, ele mostrará este ícone no canto, e os usuários podem clicar neles e ver a lista de cupons. Então, obviamente, quer fazer este olhar muito mais agradável e mais fácil de usar. E se houver mais cupons para fazer o seu, eles podem rolar para baixo e tirar cópia fácil. Eles podem facilmente copiar este código de cupom e adicionado em sua cesta. Eles recebem um desconto, então estas são coisas que estarão fazendo mais tarde no curso. Mas agora temos um estilo básico. Estamos mostrando os dados do nosso banco de dados na base de fogo. E então isso faz uma verificação para ver se este nome de domínio codificado é o patriota em que ele irá mostrar esses cupons para o usuário usar. 9. Crie arquivos de CSS e o estilo: Bem-vindos de volta a esta nova seção. Então nesta seção vamos mudar o projeto de uma extensão de crime aqui. Então ele vai estar ajustando o pequeno botão que temos aqui que abre a extensão. Faça isso se você clicar novamente, ele fechará e começará a adicionar algum estilo à extensão. Então não se parece com isso. Está fora uma vez baseado, cor azul horrível. Mas este não é um curso de design, mas vamos movê-lo para que ele comece a parecer muito mais agradável. E então você pode levar isso para com seu próprio design e mudança que você quer fazer. Mas o que vamos fazer primeiro é começar a saltar de volta para um editor de código, e isso começou a mudar esses estilos. Vamos voltar para um editor de código agora. Ok? É uma das primeiras coisas que você quer fazer é começar a mover alguns de nós discando em seu próprio arquivo CSS para que não tenhamos que importar estilos diretamente para a página assim . Então, para fazer isso eu voltar para um arquivo de manifesto e onde temos nossos scripts de conteúdo, vamos adicionar uma entrada extra a este objeto chamado CSS. E isso será semelhante ao que temos acima Js aqui. Isso só será chamado de cupom ponto CSS E certifique-se de adicionar um comum aqui para que este objeto YSL em que corretamente e, em seguida, depois que parece adicionar um novo arquivo chamado cupom dot CSS. Ok, então nós temos este arquivo aqui agora, e ele está ligado a um arquivo manifesto para que possamos acessar isso da AP. Jess, nós não temos que parar de usar este CSS dentro desse JavaScript para que você possa remover todos estes , mas nós vamos começar a mover isso através para ATS cupom dot CSS. Então, o que você quer fazer primeiro é apenas copiar o CSS. Temos aqui? Tome nota do nome da classe para remover isso aqui, pegue o nome do custo cole isso em. Então você tinha um ponto na frente dele e então remova todas as aspas e sinais de mais que tínhamos divertido antes, então só queremos ajustar o endividamento do índice corretamente. Então, é mais fácil para nós ler e fazer alterações, então nós apenas salvamos que eles querem fazer isso novamente para os outros elementos. Nós removemos o sexo. Esta parte, o casaco agora não está mais aqui em baixo. Temos o botão. Vamos copiar com este código, voltar para um arquivo CSS e fazer o mesmo processo novamente. É a remoção das citações. Ok, então nós vamos fazer algumas mudanças impressionantes também. Vamos apenas nos certificar de que temos tudo isso organizado e estruturado bem dentro do nosso arquivo CSS. Então eu não tenho que continuar voltando dentro de quatro palavras. Quando você faz essas mudanças, não o cão aqui em cima para um nome de custo e, em seguida, salvar. E então, novamente, podemos remover esta linha apenas aqui. Certo, então guarde isso agora. Vamos voltar para nossa página de extensão, atualizar nossa extensão e ver se isso ainda está funcionando com o arquivo CSS. Em vez disso, E ter que Thestrals adicionado diretamente em JavaScript tailandês, um caso que podemos ver, está funcionando bem. Ainda assim, aqui está Agora vamos começar a realmente mudar o estilo que temos antes de mudar para styling. Quer realmente ter certeza de que quando você clicar no ícone para abrir ah lista de cupons irá certificar-se se eles clicar nele novamente, ele irá fechá-lo apenas para que possamos liberar o espaço para o usuário fazer isso. Vamos apenas adicionar um pequeno cheque aqui para ver se a lista de cupom já está aparecendo. Então nós apenas fazemos isso dizendo, se o tipo de exibição de estilo é um bloco e, em seguida, vamos dizer que é não, vamos adicionar nesta linha aqui. Então, se é atualmente um bloco, queremos mudá-lo para ser escondido e então o oposto de que se ele é um bloco, se não é o bloco, nós queríamos ser um bloco, então isso significaria apenas se nós voltarmos agora nós podemos clicar no tipo de 80 aparecem quando clicamos novamente, e ele esconde o próximo. Queremos fazer algumas mudanças como esta. Então aqui em cima nós queremos mudar isso de ser o dinheiro que Emoji escolheu para ver para cupons como que possamos começar a mudar o design. Podemos alterar o conteúdo que é exibido apenas para que possamos ter nessas novas mudanças de design . Começa a parecer um pouco mais agradável. Então, de novo, vamos mudar o texto aqui também. Então, basta mudar isso para dizer, em vez de lista de cupons para eu apenas dizer algo. Sobrancelhas, cupons. Olá, que têm feijão usado para. E então vamos colocar o nome do domínio. Tem havido apenas ousado. Arruinou o domínio assim e depois? Deveríamos nos matar. Bem, eles apenas movem isso na linha 20 novamente só para manter as coisas muito mais fáceis de ler. E então aqui, vamos adicionar outro parágrafo que vai apenas dizer, clique em qualquer capa para copiar uma notícia. Então esta linha aqui é o último Usti no símbolo. E então nós queremos fechar esse parágrafo, e eu acho que devemos fazer disso um tálico uma ondulação. Eu colocaria isso na linha só por agora. Então, de novo, vamos salvar isso. Podemos ver que temos uma mudança aqui em cima, e então temos um pouco mais de informação agora. Ok, então estamos quase prontos para começar a adicionar as alterações CSS que queremos para, uh, uh, lista de cupom aqui e o botão de cupom. Mas primeiro, nós só precisamos mudar a maneira que nós exibimos os cupons eso que faz parecer um pouco mais clicável em e para torná-lo para que quando nós começamos a ler o estilo, nós podemos selecionar esses elementos muito mais fácil. Então você pode adicionar o estilo que queremos. Vamos voltar ao nosso editor de código e fazer algumas mudanças aqui. Então, para fazer isso, vamos rolar até aqui para onde estamos inserindo o código para um cupom. Eu só vou remover esta parte aqui, aquele código dizendo e nós vamos colocar um elemento span aqui de uma classe de código e então fechar isso fora assim. Então vamos mover este próximo elemento aqui para uma nova linha. Em vez de colocar isso dentro das etiquetas E M para itálico, vamos colocá-lo em seu próprio parágrafo. E depois uma coisa missão. Quando fazemos um swot é em algum toff Emoji seta como este apenas para que ele adiciona um pouco de fluxo extra para a maneira como eles estavam exibindo isso. Mas novamente, se você quiser mudar isso um pouco, você pode ter sua própria exibição. Eu recomendo que você apenas, você sabe, adicionar seu próprio sabor loja para ele apenas aqui, Mas você pode copiar o CSS que eu estou adicionando nós compartilhar vinculado este após o vídeo, então você pode usar o mesmo CSS se você quiser. E então, a partir daí, você sabe apenas coisas. Fazendo o seu próprio em um logotipo. Se você quiser em coisas como esta, vamos apenas dizer que agora, só para ver apenas para ver como esta tela se parece. Então voltamos às extensões. Recarregar fresco no caso de vermos que é um espaçado um pouco mais. Então agora vamos saltar para o arquivo CSS e começar a adicionar mais alguns estilos. Case vai parar aqui com a lista de cupom e vamos adicionar algum estilo primeiro para o cabeçalho off cupons. Então eu escolhi apenas um simples da família da sétima. Estamos definindo um novo tamanho de fonte de 26 para que ele se destaque um pouco mais. Eles querem adicionar uma margem ao fundo de cerca de 20 pixels. Era um poço sem fundo de uma borda de um pixel, apenas uma espécie. Uma cor cinza claro. Teremos preenchimento para o fundo apenas para espaçar fora desta fronteira e, em seguida, foi uma linha hias bem para que as margens são apenas um pouco mais consistentes. Isto vai ser 26 escolhas. Também os mesmos tamanhos. Divirta-se no tamanho. Em seguida, vamos adicionar um pouco de estilo para parágrafo. Eu sou tag dentro da lista de cupom, então nós somos mudanças ligeiramente na família fazenda aqui para ser Sand Saref linha altura. 20 pixels de tamanho de fonte de 16. Só tinha um pouco de contraste contra o cabeçalho. Centralizá-lo e, em seguida, adicionar um peso frontal de 500 e definir uma cor aqui. Uma ondulação, um cinza claro, e eles querem remover a margem. Top é o próximo. Você quer adicionar alguns estilos. Toothy, um, lista real de nossos códigos de cupom. Então, novamente, este sendo rastejar na lista, vamos obter o elemento lista mudaria o tipo de estilo de lista. É uma freira, e depois remova qualquer margem para bater da esquerda. E então somos itens naturalistas estilizados. Então você quer conter estes em seu próprio tipo de pequenos elementos. Então, fora de Board of Radius aqui de três pixels e, em seguida, colocar uma borda em torno disso como esta , um pouco de um acariciamento de 15 pixels, e então vamos adicionar uma sombra em torno disso, uma ondulação então nós queremos que isso fique em cima do caso. Então nós só fomos uma margem inferior de 20 pixels apenas para espaçamento. Se tivermos mais de um código, mais de um código de cupom disponível para que eles estejam seguros apenas no que temos tendo em mente mais alguns estilos para aderir. Mas devemos começar a ver isso acontecer. Case está começando a tomar forma agora Bob que tem mais alguns problemas aqui como este. Andi, preenchimento em torno do elemento geral não é muito bom ruídos, cor azul horrível. Então vamos começar a fazer alterações nesses itens. Agora podemos ver esta área aqui. É hora de tomar um pouco mais de forma. Então, em seguida, nós os substituímos. Estilo para o item de código. Este é o próprio titular do código de cupom real. Vamos rolar para cima. Então, sem uma cor de fundo fora de uma laranja clara, um pouco semelhante ao usado no mel, mas não não, exatamente o mesmo novamente. Se mudarmos isso, essas cores, você deve ter tapting cinco pixels. Eu quero ter certeza de que ele é exibido em linha e novamente nós estamos saindo do raio de fronteira de três pixels. Eu tenho uma fronteira em torno disso também. Eu quero ter certeza de que se o cursor fora do mouse é movido sobre este conjunto para ser ponteiro. Ok, então finalmente quer adicionar um pouco de estilo também? A nova tag de parágrafo para uma descrição. Então, novamente que nós manter na lista no item da lista e, em seguida, parágrafo Eu sou um texto. Alinhe isto à esquerda. Margem Sam, topo de 10 pixels removido na margem. Em baixo. Deseja remover a transformação de texto daqui também e o SEF no tamanho de 14 pixels? É um tamanho divertido, não um tamanho. Vamos refrescar. Este caso parece um pouco melhor agora você pode ver aqui enquanto eu estou sugerindo para você adicionar seu próprio estilo. Mas, novamente, isso está começando a tomar forma. Então agora precisamos realmente trabalhar no elemento envolvente geral aqui fora do desenvolvimento da lista de cupom pai real para remover esta cor azul. E então nós vamos realmente ter algum estilo para o botão aqui em cima também. Ok, então primeiro vamos mudar o raio da borda para seis pixels. Queremos trazer a caixa. Mostrou que estávamos usando aqui só tinha uma sombra ao redor do lado de fora dos itens da lista. Queremos fazer a cor da borda branca. Manteremos os mesmos antecedentes. Vamos manter esses elementos iguais. Vamos adicionar um pouco de estofamento. 15 pixels. Remova esta cor azul apenas aqui, como mencionamos. E depois queremos o Teoh. Permitir o uso que cinto de um rolagem para baixo da página, algo quando temos transbordado escondido. Então isso significa que se tivermos mais de um cupom e ele será cortado fora do fundo dos medos de veados, queremos ter certeza que eles podem rolar para baixo um pouco do estouro. Por que foram definidos que auto em, em seguida, corantes tudo o que precisamos Até agora, tão seguro que e, em seguida, o botão de cupom real que você precisa definir, bem vamos ajustar. O tamanho aqui mudará a altura para 40 pixels definidos. A largura era de 50. Então mudamos o raio da fronteira só para ser seis picaretas. Além disso, temos mais de nós fora do retângulo deste círculo. Vamos usar o mesmo livro Sombra novamente novamente com a cor foi removida. Isto e nós vamos fazer a nossa fronteira tipo branco era uma família divertida do Sul e vamos ajustar a distância. Nós muitas vezes o topo no lado direito da tela, apenas um 15 para dar-lhe um pouco mais de espaço para respirar. Então vamos dizer cor da fonte. Então isso é apenas salvar isso agora e dar uma olhada. O que temos até agora no caso de podermos ver isso é que não é perfeito por qualquer meio, mas tem um pouco mawr seções definidas e um pouco de estilo acontecendo aqui, que é suficiente para avançarmos com On Did usar para o próximo banho, Claro que sim. Então, em seguida, vamos permitir que os usuários cliquem em um botão aqui na parte inferior deste elemento, eles podem enviar seus próprios cupons para o banco de dados para que você possa começar a preencher esta informação de prova no DSO. Esta será a próxima seção do curso 10. Assegurar que: caso quando este próximo vídeo, nós vamos estar atualizando extensão para que você possa ver a sobreposição de cupom como esta, se você tem quaisquer cupons disponíveis para este site ou não. Então, apenas para dar um exemplo rápido disso, já temos exemplo código de cupom aqui para google dot com. Se eu for para a BBC, tempo está aqui. Não tenho cupons, mas não consigo ver a extensão no canto. Então, as primeiras alterações que vamos fazer são certificar-se de que você pode realmente sempre ver o botão para abrir a sobreposição de cupom aqui, e eles podem enviar um cupom. Então, ter tido no botão para adicionar os cupons aqui em baixo. Provavelmente estamos adicionados neste canto superior, portanto, mesmo que eles rolem para baixo, você ainda pode clicar facilmente para adicionar um novo cupom. Mas então primeiro precisamos realmente fazer afastado para que você possa clicar para sobreposição de abertura de qualquer site. Então ele é saltar de volta para um editor de código em fazer algumas alterações. Ok, então estamos em nosso editor de código agora, e a primeira coisa que precisamos dar uma olhada é esta linha aqui. Então agora nós estamos tomando a variável cupons apenas aqui e looping sobre ele com os quatro cada função. Apenas aqui. Agora, isso é ótimo se você souber que você sempre terá conteúdo para dar uma volta, mas porque sabemos que alguns desses domínios serão dinheiro vazio para mudar isso um pouco. Então vamos mudar isso em vez de dizer “chave em cupons”. E este será o Luke aqui. Então, se entrarmos nesta parte fora e em vez de usar esta variável de cupom, basta ouvir do para cada função, vamos defini-la nós mesmos. Então, se um cupom é igual a cupons em notícias, Katrina sentir que corretamente assim isso vai olhar através de cada elemento apenas aqui no set esta variável chave, e que será através da chave real. Deseja acessar neste array. Então, este será cada indivíduo. Cooper terá uma chave diferente. E assim podemos acessar o objeto da mesma forma que antes. Mas isso significará que não teria um erro se não houver cupons. Apenas certifique-se de que isso não está lá. Então estamos mudando essa linha para isso aqui mesmo. Então, depois de ter feito essa alteração, se salvarmos isso na atualização e voltarmos ao site novamente tão fresco. Recarregue este outro domínio. Pouco antes de fazer isso, precisamos ter certeza de que tiramos este suporte de fechamento apenas aqui porque a função quatro H abre um suporte extra apenas aqui. Então agora só precisamos de um colchete encaracolado aqui. Cali aparelho. Então, se voltarmos, atualize e tente novamente. Isso deve corrigir esse problema. Ok, lá vamos nós. Assim, podemos ver uma sobreposição de cupom aparecer agora. Então, no próximo vídeo vai começar a adicionar estilo para o botão de envio e a sobreposição que aparecerá quando clicarmos nele, e vamos adicionar um pouco de texto apenas feito aqui para dizer, você sabe, você pode ser a primeira pessoa para adicionar um cupom para este site apenas para dar-lhes um pouco de uma chamada à ação para realmente criar no enter cupons 11. Forma de exibição para apresentação de cupons: Agora que nossa sobreposição de cupom está aparecendo em todos os sites, precisamos ter certeza de que somos péssimos. Mostra uma mensagem separada se não houver cupons para esta página. Então nós vamos adicionar um check in logo depois de fazer este loop através dos cupons aqui e dizer, Se o cupom html está vazio, queremos executar este pedaço de CO. Apenas aqui. Então bem, então basta adicionar ao cupom html e vamos dizer, seja o primeiro a enviar cupom para este site. Fix esteve nisso. Então, se guardarmos isso e fresco e dermos uma olhada em nossa página, apenas certifique-se de fechar essa tag de parágrafo. Agora devemos ver uma mensagem na extensão cromada. Então, se formos a um site que não tem nenhum cupons como este, aguarde a página para carregar abrir a sobreposição e há essa mensagem apenas lá para que você possa ver que ela está sendo exibida agora nesta página. Certo, agora que temos uma mensagem que está aparecendo aqui, eles não têm cupons. Precisamos adicionar um botão para que as pessoas clicem nele, para enviar todos os cupons que eles têm para esse local de trabalho. Então o que vamos fazer para isso é ir para a área HTML interna apenas aqui, e nós vamos apenas adicionar um novo desenvolvimento, em seguida, movido isso para uma nova linha e vamos dizer enviar cupom irá adicionar um nome de classe aqui para enviar. fundo, o nome desta classe. Por isso, se guardarmos isto e actualizarmos, encontraremos um novo botão. Estavam no estilo para isso um final T fora deste vídeo. E então precisamos adicionar mais um elemento aqui para criar a sobreposição real que aparecerá quando alguém clicar neste botão. Por isso, só aqui. Então, crie uma nova variável novamente. Somos chamados este cupom enviar sobreposição e este é um novo elemento guindaste, que seria uma morte semelhante à vontade perforce em um nome de classe. Então copie esta linha aqui. O nome da classe é sublinhado. Submeta sobreposição no mesmo que antes. Vou passar no CSS, mas vou fornecer o arquivo CSS atualizado que estamos usando no final. Então, se você quiser, você pode simplesmente copiar e colar o CSS ou seguir junto comigo e, em seguida, vamos definir o HTML interno fora deste elemento. Inchar. Então, vamos dizer indo para dentro. Então, três, você tem um cupom para essa coisa do site? Feche isso em uma nova linha. Vamos criar uma série de entradas que eles podem usar, Então precisamos deles para nos passar o código real e descrição fora do que este código faz. Então, por exemplo, é 50% de desconto, e então, finalmente, haverá um botão abaixo deles para realmente enviar o cupom. Então nós só tínhamos esses elementos agora super cada um deles dentro de um dia de Andre. Preciso de três desses para cada um deles. Essas partes deste primeiro não serão o botão com este último, e eu vou dizer enviar cupom. Graças a Cristo. O botão desligado aqui em cima, precisamos rotular que dizem etiqueta de código aqui para dizer descrição. E então precisamos dos elementos de importação reais também. Então você faz isso da mesma forma que você normalmente tipo de entrada é texto na classe é código. Nós apenas copiar isso no ritmo que aqui em baixo e apenas mudar a descrição classe Teoh ou disco meu melhor para abreviar. E então nós só precisamos finalmente adicionar um nome de classe para o nosso botão enviar para que possamos ter um ouvinte evento quando isso é clicado e, em seguida, quase pronto. Nós só precisamos adicionar um mawr atributos para este elemento antes de adicioná-lo na página para ter certeza de que você fechou isso apenas aqui. Então eu quero dizer cupom submeter. Exibição de estilo de sobreposição é igual a nenhum porque não deixamos de aparecer até que ele realmente tenha sido clicado. Um âmbar na parte inferior da página. Certifique-se de que é sobreposição de envio de cupom. Então, se olharmos para lá, podemos ver que tudo está correto e salvar. Apenas atualizamos isso e nos certificamos de que não há erros. Isso está funcionando sem problemas. Você não deveria ver nada aparecer. Se você inspecionar elemento na página, você tem que encontrar isso na parte inferior da página, mas não precisamos se preocupar com isso ainda. Agora que temos enviar sobreposição adicionado à página me para ir para baixo e certifique-se de que criamos um evento. Teoh Assegurar desaparece quando o usuário clica. Tese. Admita botão aqui em cima. Então para fazer isso sou eu ir para a nossa função pré evento aqui em baixo e adicionar algum espaço no topo. Vamos, Teoh, Teoh, copie esta linha só leva. Vai ser um ouvinte de eventos para o evento clique. O mesmo que este aqui não faz algumas mudanças. Então, em vez de, hum, esperando o botão de cupom, nós vamos estar ouvindo a lista de cupom e, em seguida, enviar botão para ter certeza de fechar os colchetes ambos aqui em cima. E então nós vamos estar dizendo consulta documento, seletor enviar estilo de sobreposição é bloco. Basicamente, o oposto do que tínhamos aqui com eles. Certifique-se de que este elemento aparece. Então vamos testar isso agora mesmo. Então é seguro aqui. Refresque Andi. Recarregue uma página. Então, não adicionamos qualquer estilo para esses elementos ainda, Mas se sabemos clique, enviar cupom, devemos encontrar algum caminho para baixo da página. Este elemento aparece deste não tem qualquer estilo também. Mas se atualizarmos e voltarmos para a parte inferior dessa página, podemos ver que isso ainda não pagou. Mas se clicarmos na sobreposição no botão enviar cupom, então aparece assim ao lado de mim para adicionar estilo para realmente ter certeza de que em primeiro lugar, este botão é estilizado bem e que esta sobreposição de cupom aparece no meio da tela apenas aqui para que o usuário possa inserir seu código de cupom e uma descrição. E, finalmente, precisamos de uma função que uma vez que eles pressionam enviar cupom que ele envia um pedido para fogo base para adicionar esta informação em um banco de dados. Então, no próximo vídeo, vamos estar olhando para aqueles dois. Duas partes dele serviriam o estilo. Andi, adicione a conexão ao Fire Base para enviar este código de cupom para um banco de dados. 12. Novo comando para enviar cupons para banco de dados: Bem-vinda de volta. Então, neste próximo vídeo, vamos primeiro criar uma função que podemos usar para enviar os cupons que os usuários estão enviando para nosso banco de dados. Então faça isso. Nós vamos subir para o topo aqui depois que temos nossa função de envio de mensagem de tempo de execução cromado , vamos criar uma função semelhante, mas para enviar informações para base de fogo em vez de buscar. Então vamos começar criando uma função variável como esta. Parece uma submissão. Continue e novamente, esta é uma função e estamos tomando três parâmetros que codificamos descrição no domínio. Então abra como para que nós vamos adicionar um log de console apenas para nos ajudar t bucket. Se precisarmos de bife suíço enviar cupom. Então passaremos pelo objeto Theon que realmente queremos enviar para a base de fogo também. Então, esta será a descrição do código novamente no principal. Então todas as informações de uma passagem e basicamente apenas em um objeto caiu nas variáveis de plano . Esse é o registro para que possamos vê-lo. Eu só estou lá. Mas, em seguida, precisamos dizer cromado tempo de execução enviar mensagem tão semelhante ao que estamos fazendo aqui em cima . Certo, Onda, podemos copiar esses códigos para economizar tempo. Então, se pegarmos este pouco aqui e colar, e então precisamos mudar o comando de buscar, é um post e, em seguida, em dados, vamos passar neste objeto apenas aqui, assim e na resposta em vez de executando os cupons passados, hum, funcionar apenas aqui. Vamos usar uma nova função, vamos criar um segundo. Então ele chamou este um enviar chamada de cupom de volta, e isso levaria os dados de resposta no domínio novamente. Uma ondulação. Então, se nós apenas tomar esta mesma função callback acabou de criar esta será uma função, e levaria a resposta no domínio. E a partir daqui, tudo o que queremos fazer é esconder a sobreposição. Vão ser o Crease Lecter. Eu só quero obter enviar, sobrepor, e então estamos dizendo e uma exibição de estilo é não. E nós somos apenas um monte para a tela apenas por agora e dizer cupom enviado. Basta dar um pouco de feedback, mas eu recomendaria estilizar estes um pouco mais agradável se você quiser realmente usar isso muito . Caixa seis Embaixada. Essa não é a melhor maneira de exibir mensagens para o usuário. Mas, por enquanto, este é o processo perfeito. Veja o que temos. E não podemos trancar isso no console. Uma incha. Podemos verificar essa informação. Estamos voltando. Se você precisa depurar qualquer um destes para que você possa verificar a resposta, apenas isso. Então, em seguida, precisamos realmente ir mais para baixo para a página novamente, onde nós criamos nosso evento em adicionar um ouvinte evento para a parte enviar do botão que realmente vai usar esta nova função criaram aqui. E então vamos para um arquivo firebase em adicionar esses eventos separados. Então temos o comandante de busca para adicionar o posto de comando aqui também. 13. Detalhes de cupom para banco de dados: Bem-vinda de volta. Então, como mencionamos o último vídeo, vamos estar adicionando uma função aqui na função de eventos de caixa para que possamos ter um ouvinte para quando o usuário preenche a sobreposição de cupom e envia um cupom é isso vai chamar a função que criamos aqui que submetem a função de cupom. Então, basicamente precisamos ter certeza de que passamos através do código na descrição para esta função. Então, a primeira média antes, como fizemos antes. Vamos copiar o ouvinte de eventos. Apenas sexo e tempo em mudança o impedimento para realmente ouvir. Então, para este exemplo, é a igualdade excessivamente e, em seguida, nós não vamos ouvir para as pessoas assunto. Então, se este elemento é clicado, queremos executar este pedaço de código para o primeiro que queremos fazer é obter o código. Então o código do cupom. Então, novamente usamos o seletor de consulta e este será o código de sobreposição de envio que temos apenas aqui. Então, ser essa classe de repente excessivamente e, em seguida, quer acessar o código em compras. Nós usamos este nome de classe para que poderia ser acesso exatamente como este nós realmente temos um ponto para o nome da classe e, em seguida, código. Eles apenas adicionar valor para garantir que eles realmente obter o valor de importação deste campo de entrada do que exatamente o mesmo para a descrição como esta. E então tudo o que temos que fazer é passar isso para a função de envio de cupom como esta. Isto é tudo o que precisamos para dio dentro do nosso aplicativo dot Js Para que possamos salvar isso de vez em quando. Isto está tudo ligado. O próximo que precisamos fazer é atualizar arquivo firebase e, em seguida, finalmente, adicionar o nosso estilo para o real excessivamente Ok, agora não estamos firebase dot Js arquivo. Precisamos nos certificar de que adicionamos outro cheque aqui para o evento push real. Então, no nosso caso é um comando post aqui, tão imperiosamente buscar e aqui em baixo nós dizemos post Então vamos adicionar outra declaração se por baixo deste ouvir o post. Então, agora sabemos que este é o lugar onde terá tese admitir grupo sobre dados vindo por aqui . Então primeiro precisamos Teoh definir algumas variáveis, apenas que fizemos o topo aqui para que possamos copiar o exemplo de domínio, porque vamos precisar disso novamente, e então precisamos obter o código. Este será o código de dados da mensagem no mesmo para a descrição. Esta será uma mensagem Descrição de dados. Isso é bastante simples. Mas agora precisamos ter certeza de que realmente passaremos isso para o banco de dados. Então, neste dentro de um bloco de tentativa. Apenas se houver algum erro da base de fogo que não podemos prever que eles não vão apenas quebrar silenciosamente balançar para capturar esses erros. Então você pode fazer isso assim. Se eu soletrar isso direito, então podemos parecer a era assim, mas caso contrário, estamos bem dentro deste bloco só aqui para rodar o código que precisamos executar. Então estamos começando dizendo novo banco de dados pós firebase de acessar a própria base de atualização, a maneira de definir uma referência. Então, fique no domínio. E então queremos usar este domínio codificado parecer tão semelhante ao que estamos fazendo no topo aqui. Vamos dizer, empurre e defina código como código na descrição como descrição. Então isso é tudo que você precisa fazer aqui em baixo e então para nós enviar a resposta de volta para o geralmente quer dizer o novo eu d gosto da nova idéia que foi adicionado ao banco de dados. Então, para fazer isso, nós apenas dizemos posts, I d é igual a nova chave post. Então usa esta referência aqui em cima. E então há uma função firebase que pode ser gerada para que pudéssemos obter a chave única deste novo código de cupom. E então nós apenas passamos a resposta de volta. Então, novamente, porque nós configuramos tudo aqui, nós podemos apenas passar uma resposta de volta, semelhante ao beated. Só aqui, em vez de ser para o comando de busca é para o Post Command. Então, nós apenas dizer resultados tipo de resposta, disse que o status novamente como um sucesso e, em seguida, apenas passado os dados de volta como o novo Post I D. E o pedido. É a mensagem que diz que tudo o que precisamos fazer para ter certeza de que passamos isso para o banco de dados , mas é muito para trás em vez de apenas olhar para o console que nós definir uma resposta separada para que nós realmente passamos isso de volta para Abdul Sim, em vez de apenas ter o erro nesta página. Então você apenas definir o status aqui como erro e alterar os dados. Isso faz com que tudo para mudar esta vírgula e, em seguida, salvar e ter certeza de que aqui em baixo. Um grande, hum, fora de maneiras que você pode explicar por horas porque não é um objeto correto. Mas agora apenas certifique-se de salvar, e nós executaremos a extensão do cromo novamente. Você acha que quando você executa que ele não carrega muito dente quando você clica na extensão no canto superior direito? Mas para corrigir isso, só precisamos ter certeza de que ajustamos esse nome de classe apenas para excitar. Perdeu o sublinhado saudável. Mas se atualizarmos isso, salvarmos e executá-lo novamente, podemos começar a ver a extensão aparecer. Então agora eu preciso adicionar um pouco de estilo. Mas vamos primeiro verificar a extensão para irmos ao nosso localizador de cupom e atualizar. Vamos a um domínio aberto e eles podem ver isso aqui. Temos um cupom. Nunca enviar botão, o que significa adicionar algum estilo para na sobreposição que aparece também. Então, no próximo vídeo, adicione um pouco de estilo básico para a nossa sobreposição e pedir botão enviar 14. Adicione o estilo com botão e sobreposição: seguida, precisamos adicionar algum estilo à nossa sobreposição. Então, um botão de estimativa. Então vamos entrar em nossa pilha CSS de pontos de cupom aqui e rolar até o topo. E então vamos parar em algum estilo para a nossa sobreposição. Vamos chamar essa lista de cupom. Dave, eu não sou a única história na manteiga, Então primeiro 1 para ter certeza de que temos algum preenchimento Então cinco pixels e 10 pixels para a altura para o topo e o fundo à esquerda e à direita foi definido um tamanho de fonte de 10 pixels. Fundo preto. Se você quiser mudar qualquer uma dessas cores ao longo do caminho, você se sente livre apenas para torná-lo se destacar para nós. Tentei usá-lo nisso. No exemplo definir alguma cor da fonte é bem formado família em. Como eu mencionei antes, você pode copiar o CSS adicionado depois deste vídeo para que você possa pegar CSS lá, então eu só passar e no resto do caso, este é todo o estilo que precisamos para nossos botões. Então, se salvarmos a atualização, confira, só precisamos nos certificar de adicionar um sublinhado novamente. Vamos começar aqui. Continua a perder estes. Então, para refrescar novamente. Agora abra nossa extensão e eles podem ver que temos um botão estilizado. Então agora precisamos adicionar algum estilo para a nossa sobreposição para fazê-la aparecer no meio da página. E eu acho que no momento também, mas isso está escondido atrás dos elementos fora da página. Então, por baixo de onde adicionamos o pé para o botão, então adicione algum estilo para excessivamente. Então, de novo, isso está na escola. Submeter sobreposição. O 2º 1 é um hífen, e isso pode ser corrigido como uma posição irá definir uma largura de 220 pixels são alturas 200 pixels. Posicione-o a meio caminho a partir da parte superior da página e 50% a partir da esquerda. Para a margem esquerda, vamos estar fazendo menos 110 pixels, que é metade fora do chicote no mesmo do conjunto superior de cor de fundo. A cor da borda como índice ed do aparece em cima de cada elemento possível porque estamos trabalhando com diferentes sites aqui, eles poderiam ter elementos flutuantes. É apenas para garantir que a sobreposição apareça na parte superior de qualquer conteúdo era uma espécie de tapinha. E podemos usar esta caixa dimensionando propriedade CSS aqui e diz que sua caixa de borda. E então, finalmente, nós apenas texto a linha como centro. Então, se salvarmos isso agora e depois recarregamos a extensão em um novo para que possamos abrir a extensão dela , poderíamos enviar o botão. E agora temos sobreposição aparecendo na página. Não, não é a mais bonita, mas deve ser funcional. Então, se abrirmos um console de cinco ace e verificar o banco de dados, vamos adicionar uma extensão para ter certeza que são funcionalmente mate de postar os cupons através de nosso banco de dados está funcionando. Está bem. Pode ter notado isso no seu código também, mas eu entendi errado aqui em cima. Então você vê a linha de descrição, mas o que temos supostamente ser uma mensagem. Então parece mudar esta linha aqui. Deveríamos ter isto correto no seu. Mas no caso de você estar copiando exatamente o que está certo, eu devo me certificar de atualizar esta linha aqui. Mas, caso contrário, tudo deve ser empurrado para o seu banco de dados. Então eu apenas executar meu exemplo novamente apenas para mostrar a você para que quaisquer erros apareçam apenas aqui. Se estivermos frescos, recarregue a sobreposição do abridor de página no código de desconto em uma descrição e envie. Temos uma mensagem dizendo Cupom enviado, e se agora verificar em um banco de dados, você pode ver que apareceu feito aqui. E esta é a idéia post original que mencionamos antes para que você possa usar este Teoh realmente exibir informações diferentes na página, se você quiser, Então, no momento eles não aparecem apenas aqui ainda. Mas se você atualizar esta página porque era para este nome de domínio e nós recarregamos, você pode ver que ela aparece apenas aqui. Então, na próxima seção do curso, vamos fazer alguns ajustes que se você clicar no rasgar treinadores de desconto, ele irá copiar para a sua área de transferência para que você possa, então, simplesmente colá-lo em seu carro. Andi vai fazer alguns ajustes finais e as áreas de estilo como este. Eu me certifico de que você pode fechar esta sobreposição e apenas mais retoques finais. Então vamos ver como você pode realmente publicar sua atenção criminal naloja de extensãocromada loja de extensão 15. Cuponagem de cópia para cliper e sobreposição fechadas: essas novas seções, como mencionamos antes que vamos continuar, serão deixadas de fora. Então nós vamos fazer isso para que quando você clicar no código de cupom aqui, eles serão copiados para a sua área de transferência. E também vamos adicionar um evento para que possamos fechar. Esta sobreposição fará cliques irá adicionar um botão aqui para que você possa apenas clicar. Andi fechou a sobreposição, mas primeiro, vamos trabalhar nesta área aqui, então fazemos uma cópia para a entrevista da área de transferência, clicamos em qualquer um dos códigos. Então é saltar de volta para o nosso editor co e começar a adicionar as funções do. O caso daqui Estamos de volta naquele editor de código, e vamos rolar para baixo para onde temos funções de evento aqui e vamos adicionar uma nova função logo acima disso. Eles serão, na verdade, a cópia para a função de área de transferência, por isso seria uma nova função. Aqui está uma cópia para a Área de Transferência, e isso levaria em uma string que queremos copiar. E por isso aqui. O que basicamente queremos fazer é criar uma área de texto temporariamente e irá inserir Ah, uma string como o valor desta área de texto, selecioná-la, copiá-la e, em seguida, removida a área de texto, então vamos começar apenas criando a entrada. E isso será, como mencionamos, um novo elemento fora da área de texto. E então vamos definir o em HTML para ser perguntado Beba como este e, em seguida, só precisamos adicioná-lo à página. Então use uma caneta criança novamente no evento MPA ou elemento de entrada, e então nós apenas selecioná-lo Says irá selecionar todo o conteúdo fora da área de texto, essencialmente tipo de fazer isso para que ele é apenas selecioná-lo. E depois queremos o tapete Teoh para a área de transferência. Há uma série de maneiras diferentes de fazer isso, mas a melhor maneira no chrome, que é onde a extensão estará em que suporta e a maioria dos navegadores, é usar esta função de comando executivo como esta e ter possivelmente cópia. Então isso é uma cópia de comando X E C, e então tudo o que temos a fazer é, em seguida, remover o elemento que acabamos de criar assim. Certifique-se de que você soletrar removido corretamente. Lá vamos nós. Então, estamos criando o elemento definido na raiva para moer como nossa string, adicionando-o à página, selecionando-o, selecionando-o, copping e, em seguida, removê-lo da página. E então nós apenas retornamos esta função. Então essa é a nossa função de cópia para a área de transferência. Agora precisamos realmente usá-lo. Então aqui em baixo, vamos criar um novo evento neste evento será semelhante ao que fizemos antes . Falar seletor de consulta de documentos. Mas desta vez quero dizer que Chris gostou de tudo. Então, estamos selecionando todos os elementos na página que terão essa classe correspondente e nós vamos estar procurando lista de cupom. Certifique-se de que você tem sublinhado lista de cupom e, em seguida, estamos procurando a classe de código aqui também, que corresponde a classe de classe Teoh aqui em cima. Então classe span é código. Então eu olhei todos esses elementos, e então vamos fazer uma verificação aqui em baixo. Então vamos chamá-los de item de código, e então vamos executar novamente. Isso é essencialmente como adicionar um ouvinte de evento a cada item individual com essa classe, então esperando todos eles, loop through, e então nós apenas dizer item de código no ouvinte de evento no clique, e então isso será Basicamente o mesmo. É onde você normalmente não faz. Mas aqui dentro podemos agora executar código como se estivesse em cada um desses elementos individuais sem ter o setor de tripulação. Todo este poço aqui em baixo faz com que seja exatamente como seria. uma sui que o criou aqui em baixo. Então aqui dentro, nós só precisamos dizer Coach String é item de código no próximo TML e então nós apenas dizemos copiar para a área de transferência Coach, String como este. Isso irá adicionar um ouvinte de eventos para todos os nossos códigos de cupom quando eles clicarem neles. Ele irá copiá-los para a área de transferência. Por isso é seguro isto. Vamos voltar para a extensão do crime. Refresque, Andi, veja o que temos. Então atualize e volte para a extensão. Poderia sair desse cupons colar e podemos ver que está colando. Estou lidando com os eventos que acabamos de acertar que estão funcionando corretamente. Então, em seguida, queremos ter certeza de que podemos fechar isso excessivamente para que nós vamos adicionar um elemento span do topo aqui em quando ele é clicado. Ele vai fechar isso excessivamente. Ok, então primeiro vamos adicionar um elemento span. Então aqui em cima onde temos nossa sobreposição, vamos adicionar em um espaço apenas aqui e mover isso para baixo para uma nova linha. Certifique-se de que há um único bem ali em um único terremoto, apenas lá para começar. E dizemos que a classe está próxima e depois colocamos um X entre parênteses e dizemos “Fechar”. Então isso é tudo o que precisamos para o nosso botão. E depois voltamos para a área de eventos e depois vamos adicionar outra tripulação Estados realmente pode copiar este aqui e colar Andi em vez disso. . Fora correndo aqui. Será a sobreposição repentina em si, e eles estavam procurando a classe de roupas. Isso vai encontrar a sobreposição de assunto e, em seguida, perguntou Band que acabamos de criar e em vez de torná-lo bloco de peças sobressalentes, ele será exibido como nenhum. Então eu salvei isso. Volte para a extensão. Refresque, Andre, corra o invólucro. Abrimos a nossa sobreposição. Agora temos este texto próximo, e se pudéssemos kit, ele fecha a sobreposição. Então, lá temos. Então temos a nossa extensão que pode exibir diferentes códigos de cupom. Você pode enviar códigos de cupom, Andi. Ele pode então clicar para copiar qualquer código e usá-los em seu site. No próximo vídeo, vou pintar como você pode enviar disfunção para a loja de extensão cromada e pensar em algumas maneiras que você pode melhorar essa extensão tanto em termos de estilo nos diferentes casos de uso e desempenho que você deseja para sair dela. 16. Como publicar a extensão do Chrome: Bem-vindos de volta à seção final deste curso agora. Até agora passamos e criamos nossa extensão. Conectámo-lo a um banco de dados baseado em incêndios. Eu tive todas as interações que queríamos e do banco de dados para mostrar cupons. Mas vamos ter um rápido pensar primeiro na primeira parte deste vídeo sobre diferentes maneiras. Poderíamos melhorar essa extensão se quiséssemos Teoh, torná-la compatível com mais usuários e adicionar mais recursos para eles. Então vamos dar uma olhada rápida em nossa extensão aqui. Então, aqui temos. Só nós construímos. Temos o botão aqui em cima e abre esta sobreposição. Agora, a primeira coisa que se destaca para mim é que o design fora disso é muito, muito básico. Então a primeira coisa que eu sugiro para você olhar e talvez olhar para sites como drible dot com, podemos encontrar um bom design. A inspiração é de maneiras diferentes. Você pode ajustar este ponto de partida do canhão para adicionar seu próprio sabor único a esta extensão. Andi, mude o design e apenas na exibição deste um pouco agora, em termos de recursos que poderiam funcionar muito bem. Uma coisa não é sugerir olhar para é adicionar uma opção de voto apenas aqui para que você possa fazer, como, polegares para cima ou para baixo para ver se esta extensão. Se este código de cupom funcionou para os diferentes usuários, então você pode ver rapidamente quais cupons foram foram bons para as pessoas de quais não funcionaram. Pode ser uma boa opção. Toe Ada está bem, e agora outra coisa que pode ser bastante útil para a sua extensão é alguma forma procurar. Então, se você pode imaginar, se você entrar em uma loja tem muitos códigos de cupom diferentes, pode ser bastante esmagador para as ordens listadas aqui, então pode ser útil adicionar uma caixa de pesquisa aqui em cima. Não, eu não vou mostrar vídeos ainda sobre como você pode. Você pode fazer esses tipos sugerir tentar e implementar necessidades você mesmo, especialmente começando com a mudança do design. Se você tiver alguma dúvida sobre como você gostaria de ir sobre isso, sinta-se livre para me enviar uma mensagem ou deixá-la na caixa de perguntas. Mas estas são as diferentes maneiras que você pode começar a realmente adicionar recursos extras à extensão e tornar o design um pouco mais seu. Ok, então, na segunda parte deste vídeo, vamos ver como você realmente publicou isso na porta de extensões de crime. Agora há uma escrita completa sobre isso a partir da extensão cromada, como o site de documentação. Agora, isto vai estar sempre actualizado. Estou gravando isso em maio de 2020. Então, quando você está assistindo isso, poderia ter mudado um pouco, mas o acaso, eu seria praticamente o mesmo que esta estrutura. Então a primeira coisa que eles mencionaram fazer é enlouquecer um arquivo zip. Mas uma coisa que muitas vezes pode ser esquecida é que você precisa ter um ícone. Então, se tivermos uma olhada na extensão apenas aqui, podemos ver a entrada e manifesto. Temos apenas a descrição da versão do nome, permissões, permissões, conteúdo em segundo plano, scripts e assim por diante. Mas você também precisa ter um ícones. Hum, opção aqui. Agora, essas são as imagens do Theo que você precisa ter para poder publicar sua extensão, então eu vou mostrar como isso se parece na documentação aqui. Certo, então toda extensão do cromo precisa ter um ícone no arquivo de manifesto. Agora você precisa ter uma Nikon que seja pelo menos 128 por 128 pixels para uma extensão. Ou você precisa ter outro ícone de 48 por 48 pixels, e você também pode ter um ícone de 16 por 16 também. Isso vai aparecer aqui, mas a única maneira de fazer isso é adicionando um perímetro como este. Então é ícones, e você só tem um objeto com cada um dos ícones de tamanhos diferentes e, em seguida, onde a imagem está localizada em sua pasta. Então, uma vez que você tem isso, tudo que você precisa fazer é ir para o seu rebanho. Temos suas funções de cupom. Certifique-se de adicionar seu ícone aqui e atualizar seu manifesto ligado a isso, e então você apenas comprimir ou se transformar em é isso? E então você está pronto para enviar isso. Não há necessidade de ir para o painel do desenvolvedor da porta da web chrome sobre a criação de novo item. Se você ainda não tem uma conta para o painel de desenvolvedores, você precisa criar uma conta de desenvolvedor em um oleoso para fazer é clicar em Novo item então, uma vez que você faz isso, você está, em seguida, navegar e selecionar o arquivo ZIP que você acabou de criar. Assim que você selecionar isso, ele começará a processar e carregar sua extensão, e agora você pode preencher todas as informações que deseja adicionar. As extensões de combustível disso tudo vem do arquivo de manifesto. Em seguida, você pode adicionar uma descrição mais detalhada. Categoria selecionada. Selecione um idioma em. Então você pode adicionar mais capturas de tela aqui, o que é definitivamente recomendado. Se você quer que as pessoas sejam capazes, Teoh, baixe sua extensão. Isso fará com que se destaque. Maurin a porta extensões, e você pode adicionar um link para o seu site, bem em links de suporte. Nós não precisamos ter esses, e você também pode ter o Google Analytics para rastreamento para ver quantas pessoas estão encontrando sua extensão, listando quantas coisas clicando nela e depois tudo o que você precisa fazer é clicar em salvar rascunho e enviar para revisão. Normalmente, só deve levar alguns dias, às vezes até uma semana e músicas. Você tem seu ícone aí. Se você não tiver seu ícone, ele não passará nesta revisão, então é importante certificar-se de que você tem isso. Agora existem maneiras diferentes. Se você quiser cobrar pela extensão, há alguns passos extras, então você tem que se certificar de que você escolhe um sistema de pagamento. Andi, há algumas opções diferentes. Precisamos ter certeza de inchar quando você está se inscrevendo, você paga a taxa de desenvolvedor, que no momento da gravação é de US $5. Vou verificar aqui em baixo. Sim, há uma taxa de inscrição de $5. Então você também tem alguma dúvida sobre como publicar? Basta deixar uma mensagem na caixa de perguntas, e eu tento ajudar o melhor que posso. Mas isso deve ter que lhe dar um rápido eu gostaria sobre como você iria sobre a criação de extensão e realmente definir neste. Viva na loja cromada para que você possa fazer sua extensão. E depois de carregar sua extensão, se você fizer alguma alteração, você pode entrar na seção do pacote aqui e fazer o upload de um novo pacote. Eso atualizado arquivo zip Se você fez alguma alteração e apenas tentar ter certeza de que em seu manifesto você alterar o número da versão para que tudo continue sendo atualizado 17. Agradecemos por fazer o curso!: Como você mencionou no último vídeo, há várias maneiras diferentes de mover essa extensão para frente. Agora, eu adoraria ver que criações você inventa. Então, se você fez algum contato comigo no instagram ou você enviar uma gravação do seu curso, envie-me uma mensagem aqui com o que você conseguiu criar. Eles têm perguntas ao longo do caminho. Só me avise também. Mas muito obrigado por fazer este curso. Espero que você tenha encontrado algum valor a partir dele teria certeza de vê-lo novamente dizendo 18. Vídeo de buds de auto - cupons (Código na seção de recursos): Neste vídeo, vamos analisar como você pode executar uma função em JavaScript em várias páginas. Então vamos usar a parte de armazenamento local do navegador para que possamos armazenar no estado de nossa função até onde progredimos. E então nós podemos então ouvir para ver o que aconteceu na página e, em seguida, ajustar nossa função e, em seguida, continuar correndo através do resto dela para que ele possa trabalhar entre esses carregamentos de páginas, este vídeo, o exemplo que eu vou estar usando é um cupom função de preenchimento automático. Então temos uma lista de cupons que querem se inscrever na nossa cesta. Então eu fiz para ela um site de mentira aqui só para a cesta nele. E há alguns cupons que funcionarão e outros que não foram. Então eu vou mostrar a vocês agora como o site se parece. Ok, então aqui é o site aqui à esquerda. Por isso, ignoramos o código à direita por enquanto. Chegaremos a isso em um momento. Então, como você pode ver, temos apenas um exemplo, Order Total aqui e lista de códigos de cupom que são válidos. Então, se eu fosse digitar em um desses assim 320 e aplicar, o desconto é feito uma diferença. Se eu fosse me livrar disso e aplicar o desconto, ele o tira. Então é muito, muito simples. Não é executado no backend, Musharraf ou todo o código deste depois também. Mas é assim que funciona. E então eu tenho essa função aqui. Então, se eu clicar neste botão, vai correr através de raio de cupons. Nós temos assim esses aqui? Então, um deles está nesta matriz ou nesta lista. Então esse deve ser o cupom que usamos. Então imediatamente para este primeiro exemplo não vai recarregar a página, mas podemos ver o que ela faz aqui. Então, se eu clicar neste botão, você pode ver que ele está verificando cada um dos cupons. Verifica ele. A ferramenta auditiva faz. E então ele vai nos dizer qual é o melhor. Então nós temos este aqui que muitos diferentes, então, em seguida, aplica isso depois. Então é assim que funciona. Não são executados através do código em um momento e mostram exatamente como isso funciona. Então, se eu fosse mudar isso de need reload false, para precisar reload true. Ou isso vai fazer vai recarregar a página cada vez. Então eu só vou adicionar o console aqui. E se nós apenas atualizar e executar esta função novamente, por isso, se clicarmos neste botão agora dizendo esperar que a página para recarregar. Então imagine este exemplo que quando clicamos aplicar desconto, isso está dizendo ao servidor para verificar este cupom e ele recarrega a página. Mas como este é apenas um exemplo, eu vou ser apenas esse servidor. Então, o que é clique recarregar cada vez que ele pede. Então ele vai verificar esse cupom. E então está pedindo frustrado novamente. Então apertei de novo. Vai recarregar, verifique essa. Vai ler de novo. Aqui vai ele. E depois mais uma vez. E então eu vou e ele ainda sabe qual deles foi o melhor de todos aqueles tempos. Então, mesmo que ele recarregou a página e a sessão mudou, ele ainda mantém o status de uma função entre todas essas chamadas. Então, como você pode ver, há um vencedor de cupom lá. E eu clico em OK e, em seguida, aplicá-lo novamente. Agora, isso funciona por causa do armazenamento local. Agora o que estamos fazendo é definir um objeto que continuamos atualizando cada vez que executamos uma função. Então eu vou passar pelo código em um momento, mas é assim que isso funciona. Então temos. O armazenamento local com o qual criamos um objeto. E então atualizamos esse objeto cada vez e, em seguida, executar uma função novamente. E quando essa função carrega, ele primeiro entra em histórias locais para ver, estamos no meio de executar essa função? Então, se somos um continua o processo e se não executamos a função e pedimos para começar, ele começa a executá-lo, se isso faz sentido. Então isso, você pode ver tudo isso na guia Aplicativo apenas aqui. E se você for para o armazenamento local. Então, se eu recarregar isso agora com isso aberto, você deve ver isso na verdade enquanto ele se move. Então, se eu clicar em começar aqui, você pode ver o que ele está fazendo. Assim é expandir esta janela um pouco. Explodiu isto. Então o que estamos fazendo aqui é que temos um objeto seletor. Então, neste exemplo, para aplicar um código de cupom, algumas coisas diferentes que você precisa ter. Então, em vez de apenas escrevê-la para um site específico, se você tiver escrito uma extensão do Chrome, por exemplo, precisa dela para garantir que ela funcione em vários sites diferentes. Portanto, é importante ter isso em mente ao criar seu código. Então soma, processos de verificação têm o cupom que você insere o cupom e, em seguida, pressione digitar alguns deles você digitar o cupom, em seguida, pressione um botão. Alguns deles, o paciente precisa recarregar. Outras vezes tudo funciona na página, então você insere e pressiona um botão e, em seguida, eles chamarão isso nos bastidores sem recarregar a página. Então, esse tempo, você pode precisar definir o número de segundos, em seguida, esperar a página para mudar e, em seguida, entrar e pegar o cesto. Então, como podem ver aqui em baixo, é isso que estamos fazendo. Então temos os campos de custo como esta área apenas aqui com um prefixo de campo de custo. Então isso é para ter certeza de que removemos o sinal de dólar, o sinal de libra ou qualquer coisa assim. Então, se isso é um caractere, nós apenas removemos isso da frente da corda. Temos então o tipo de cupom. Este é, como eu mencionei, é um botão que temos que pressionar ou temos que pressionar enter? Isto é, se o paciente precisa recarregar ou não. Assim como a coisa como mudou mais cedo. Então, se ele não precisa recarregar, nós chamamos a função e, em seguida, apenas esperar e usar um temporizador se ele não precisa recarregar em vez de, você sabe, peso em pegar as alterações para o total da cesta nesta página. Aguardamos a página para recarregar e, em seguida, executá-la uma vez que a página é aberta. Então vou te mostrar isso em um momento. Depois temos o cupom preenchido. Então isso é apenas esta entrada aqui. E, em seguida, um botão de envio. Então esse é o botão aqui. E depois temos um tempo de espera. Então este é o número de milissegundos que devemos esperar. A página a alterar. Às vezes, algumas páginas demoram um pouco mais do que outras para entrarmos e fazermos esta verificação é o que temos aqui. Então temos uma função, uma variável aqui que verifica se a extensão ou se o código está sendo executado. Então, neste exemplo, ele está em execução. Então isso significa que quando eu pressionar reload, porque ele está esperando que eu recarregue aqui. É assim que sabe fazer o mesmo cheque. Então aqui temos o valor da cesta inicial. Então, na verdade, isso é errado porque, porque eu rodei isso depois, rodei antes, ele tinha o total da cesta já reduzido. Então seria interessante ver como isso funciona lá. Então aqui está o cupom atual que ele está verificando. Então, mantemos um controle de que vai muito verificação. E aqui em cima está querendo te mostrar aqui. Estes são os cupons que é cheque. Então, se eu atualizar a página aqui como se fosse passar pelas verificações reais. Você pode ver agora é atualizado e disse que já verificou este cupom. E a menos que este chip esteja corretamente, então, se nós, então, se agora atualizarmos a página, espere dois segundos. Você pode ver aqui estão os cheques novamente, então há o melhor negócio. É este só vendo o que era o vale quando aplicou o código. E sabe que aquele cupom foi o que tinha o melhor negócio. E, em seguida, há aqueles que está verificada atualmente em processo de verificação deste próximo ID de cupom. Então, se vermos que ele está esperando para recarregar. Então, se voltarmos para esta página aqui e atualizar, devemos vê-lo atualizar este array apenas aqui eles vão para o próximo. Enquanto isso, agora está verificando que o próximo CTO está passando por cada um fazendo essas verificações. E a razão pela qual há esse ligeiro atraso é porque, como mencionamos aqui, estamos ajustados para dois segundos ou 2 mil milissegundos. Então é assim que funciona a partir desta vista apenas aqui no front-end. Agora vamos realmente olhar para o código e ver como ele está realmente fazendo isso. Ok, então aqui está o código que estamos executando nesta página. A primeira coisa que temos aqui é como objetos selecionados. Então, como eu mencionei, ele é criado de uma forma que pode ser adaptado para trabalhar em muitos sites diferentes. Então, como vemos apenas Timmy sobre cupons é a nossa matriz de cupons que você deseja verificar. Agora, provavelmente, quando esta função está realmente sendo usada em uma extensão, isso você passaria como o último item. Então você teria tudo isso para seus sites reais. Você pode trazê-los de seu banco de dados, talvez onde você realmente tem as diferentes informações para cada site em que sua extensão funciona. E então seus cupons seriam de uma maneira semelhante, mas provavelmente armazenados em outro lugar. Então é assim que temos isso. Então temos um campo de cupom, como mencionamos um minuto atrás, Eu enviar botão se ele precisa recarregar ou não. Não estou sendo verdadeiro ou falso. Meus tipos de cupom que clicamos ou entramos, o tempo de espera em milissegundos. Eu porque campo. Então, quanto a consulta primitiva deste aqui, o QuerySelector deste id aqui. Então este é um nome de classe, o mesmo que este aqui em cima. E, em seguida, o prefixo do valor da cesta. Então o que fizemos aqui é que estamos usando armazenamento local é o primeiro lugar. Você vai ver isso. Se a execução verificar parte de nosso item de armazenamento local está sendo executado, então continue executando verificações, simples assim. E, em seguida, aqui, nós apenas temos um ouvinte de eventos simples que inicia novas verificações. Então, se não estamos rodando isso automaticamente em segundo plano porque já começamos, estamos adicionando um evento de clique a este botão aqui para que possamos iniciar esta função e começar a executar. Então, se nós rolarmos para cima, eu vou te mostrar um pouco mais do que isso faz. Então, a primeira parte do JavaScript que temos nesta página é exatamente onde criar um novo objeto para a função. E isso inclui todo o resto depois. Então aqui está o nosso cheque de cupom errado. Nós definimos uma matriz vazia para cupons de ativos. Não precisamos fazer isso só aqui. E então aqui está o primeiro tipo de função principal que causamos. Temos a nossa função de verificação de execução apenas aqui, que leva no objeto seletor e o status. Então isto é. Por padrão, ele será start, então queremos iniciar a função. Mas se você quiser continuar, então se quiser passar por cima de páginas carregadas, então ele vai dizer “continuar”. Não é só carregar uma página. Digamos que para este exemplo, nós o usamos entre cada verificação para que ele funcione em ambos os sentidos. Então aqui vamos nós, verificamos qual é o status. Então, se o status é começar, há algumas coisas que precisamos definir aqui primeiro. Então, como você pode ver, definimos a parte de verificações de execução do armazenamento local para execução. Então você apenas definir isso como este item de conjunto, o nome do item e, em seguida, o valor aqui. Aqui temos os valores da cesta. Se eu mover isso um pouco, um pouco mais fácil de ver, obtemos o valor da cesta, então estamos usando nossos campos de custo Selecionar objeto. Este é o nome da classe que passamos nesse objeto no início. Então nós usá-lo no QuerySelector apenas aqui, e, em seguida, pegar o conteúdo desses elementos. Isto é, eles vão agarrar esta parte aqui mesmo. Então o que fazemos é garantir que transformamos isso em um formato que possamos saber que vai estar lá. Então isso pode ser uma string, pode ser um número, mas nós nos certificamos de que temos como um flutuador com duas casas decimais. Então, neste exemplo, ele é enviado coluna além desta string apenas aqui. Em seguida, definimos isso como o valor da cesta inicial quatro, uma função. Então precisamos saber qual é a cesta antes de executar qualquer coisa para que possamos comparar os diferentes cupons com isso. Em seguida, adicionamos outra parte ao objeto cheques de cupom apenas aqui. Então temos o nosso melhor acordo. Este é o lugar onde verificamos mais tarde a função quando estamos executando para ver qual cupom é o melhor, nós comparamos com isso. Então começamos por ter o valor da cesta existente que adicionamos apenas aqui. E então adicionamos um espaço aqui para dizer qual cupom era o melhor. E então nós apenas definir outro array aqui que é todos os cupons que nós verificamos. Então nós apenas definimos isso, então nós dizemos um cupom atual. Então isso é um depósito local que quando fizemos o check-in no momento. Então isso é um vazio, mas nós nos certificamos de que ele está no armazenamento local onde quer que o console bloqueie aqui, o que é útil apenas para ver como isso está progredindo. Então é mais difícil quando você está criando isso enquanto compartilhar ou o código como eu mencionei com este vídeo. E então estamos enviando tudo isso para cheques de cupom parte do nosso armazenamento local, mas certifique-se de transformar isso de um objeto em uma string JSON. Portanto, no armazenamento local, ele não é armazenado como variáveis que você pode acessá-lo através de um objeto. Você tem que ter certeza que é apenas uma corda. Então você converte isso aqui. E então isso é tudo o que você precisa para começar isso. Se quisermos, em seguida, continuar executando a função que é esta parte do código apenas aqui. Então, como você pode ver, a primeira coisa que precisamos fazer é pegar o objeto seletor existente. Por isso, é importante que não estejamos a definir isto de cada vez. Então nós salvamos isso no armazenamento local e, em seguida, usamos JSON pass para garantir que este é agora um objeto com o qual podemos interagir e podemos usar. E fizemos a mesma coisa para os cheques de cupom aqui. Então este é o objeto que nós apenas, apenas criado para que nós desenhamos para o seletor um e para cheques de cupom. E então temos apenas um pouco de registro no console para dizer que estamos continuando. Esta não é uma nova execução de uma função com continuar aqui. O que temos aqui é um cheque para ver, estamos a meio caminho checando um sobre cupons? Então dizemos, qual é o cupom atual? Se estiver vazio, não precisamos fazer isso, mas se não estiver vazio, continue verificando isso. Então, para dar um exemplo, se a página tem que recarregar cada vez, o que vai acontecer é que nós temos a primeira parte da verificação de cupom é onde nós inserimos o cupom no campo de entrada aqui e, em seguida, pressione o botão, e então a página será recarregada. E então, quando a função é executada pela primeira vez depois disso, ela chegará a este ponto do nosso código. E depois queremos ter certeza de que retornamos falso. Então ele pára de executar qualquer código depois disso, e, em seguida, ele continua a verificar este, este, este cupom. Então, neste exemplo, o que isso faria é pegar o valor da cesta lá e compará-lo com a cesta estrela para ver que ele reduziu o custo em tudo. Então, se não estamos verificando um, ele continua caindo. Então nós temos apenas isso aqui é um, um cheque para ver. Nossos objetos selecionados são válidos em certo sentido. Então você provavelmente está checando isso um pouco mais detalhadamente, mas isso só mostra como você pode ver. Se tivermos uma propriedade seletor de consulta neste objeto. Santuário selecione o campo de entrada apenas aqui. Caso contrário, se estiver lá, continuamos a executar a função. Então é aí que temos isso. Aqui é onde se ele não tem isso, nós matamos uma função lá, caso contrário nós continuamos para baixo. Então, em seguida, nós apenas definir matriz de cupons em uma variável mais acessível apenas aqui. Então você poderia usar uma esquerda ou uma const aqui. Mas novamente, nós só temos isso como variável, mantendo-nos todos simples aqui. E nós temos os nomes atuais dos alunos. Estamos apenas definindo uma variável aqui junto com nossos próximos cupons de verificação. Então o que isso basicamente faz é que temos nossa matriz de cupons que queremos verificar, e temos um cupom atual. E então criamos um loop for que looped através desta matriz de cupons. E estamos verificando se este cupom já foi verificado. Então temos uma série de cupons verificados e nossa matriz de todos os nossos cupom. Então o que estamos basicamente a fazer é dizer, este equivalente já foi verificado? Se foi, não faça nada. Mas se ele não adicionou isso ao nosso próximo cupom verificado ou próximo cheque. E isso significa um cupom de cada vez. Estaremos verificando. Então é normalmente significa que vamos estar verificando o último cupom da matriz. Então, como ele está passando por tudo, isso vai sobrescrever cada um. Isso é bom para este exemplo. Então, uma captura que última parte da nossa matriz que ainda não foi verificada e definir este próximo cupom de verificação. Então, mais adiante aqui, o que estamos fazendo é dizer que se o próximo cupom de jato é um vazio, então tínhamos um cupom que precisamos verificar. Então passamos isso em cheque cupons estrela com um objeto seletor e o nome do cupom que queremos verificar. Vou te mostrar o que essa parte faz a seguir. Mas caso contrário, se não houver nenhum cupom aqui, então se isso estiver vazio, então isso significa que verificamos todos os nossos cupons. Então tudo o que precisamos fazer a seguir é arrumar e exibir o resultado da execução desta função. Então nós simplesmente limparíamos as próximas verificações de execução para que não vamos executar a função quando a página recarrega. E nós apenas dizemos para o console para parar nesta função. E nós, eles, então fazemos uma verificação para ver qual era o melhor negócio. Então, neste código só aqui. Sabemos que temos um nome sobre o melhor negócio. Então um cupom tem uma, essencialmente esta, esta comparação. Então o que fazemos é executar esta função novamente para que o cupom seja aplicado à nossa cesta. Porque o que poderia acontecer se você executar três cupons diferentes e o primeiro foi o melhor negócio, mas nós terminamos a função naquele terceiro que não foi o melhor negócio. Queremos ter certeza de que reaplicaremos esse cupom à nossa cesta neste exemplo de qualquer maneira. Então podemos ver que, em seguida, nós apenas definir um alerta apenas aqui para dizer que cupom era o melhor. Você tem 41 anos apenas baseado de uma maneira mais agradável. Mas para este exemplo, isso é tudo o que eles realmente precisavam. Se este melhor cupom, nome do cupom estava vazio embora, isso significa que não encontramos ocupantes são inválidos ou eles não fizeram qualquer diferença para a nossa cesta. Então, basicamente queremos dizer que eles já têm o melhor preço. Então nós apenas devolvemos isso lá e certificamo-nos de que nós aplicamos um cupom vazio apenas aqui. Mas isso depende, do que você precisa para sua função. E então tudo o que faremos depois disso é remover todos esses itens que criamos do meu armazenamento local. Então, basicamente, limpa tudo lá em cima. Então, como eu mencionei há um minuto, os cupons de verificação iniciar caminho a função aqui. Então temos duas partes de onde verificamos cupons. Então, aqui em cima, onde estamos verificando todos os nossos cupons, nós fizemos uma ligação para obter a estrela do cupom. E como mencionamos anteriormente, se estamos atualmente com a página é recarregada e chegamos a este ponto. Quero dizer cheque final do cupom. Então eu vou te mostrar o que essas duas partes fazem a seguir. Ok? Assim, a primeira parte da verificação é aplicar o cupom no campo de entrada e pressione o botão aplicar desconto ou o botão add cupom ou pressione enter nesse campo de entrada. Então, como você pode ver aqui, o que estamos fazendo é definir um item apenas aqui para dizer qual cupom estamos verificando necessidades específicas para recarregar. Pegamos o campo de entrada aqui para cupom r, e depois aplicamos nosso nome de cupom no valor lá. E então nós verificamos para ver, este é um botão que precisamos pressionar ou precisamos pressionar Enter? Se precisar pressionar um botão, clicamos no botão. Se você precisa pressionar Enter, nós disparamos um evento que simularia que enter pressione. Então o que fazemos a seguir é verificar se a página precisa ser recarregada. Se precisar recarregar, não fazemos nada. Então, queremos deixar isso para a página para recarregar e, em seguida, esperar o tempo em que a função é executada ao lado de tomar isso e lidar com isso, em seguida, se ele não precisa recarregar. Então, se for falso, então esfriamos o fim do cupom de cheque. E depois temos este cheque aqui. Este é o lugar onde nós mencionamos no final, se nós descobrimos que o nosso cupom vencedor, nós temos este cheque apenas aqui para que nós não executar este verificações extras ou nós estamos fazendo lá há um, eu vou apenas aplicá-lo em nosso pacientes aqui e submetê-lo. Então essa é a parte. Então desmarque o fim do cupom. O que estamos fazendo aqui é aqui que esperamos pela função. Então temos essa quantidade de milissegundos que vamos esperar. Então primeiro temos um tempo limite para esperar esse tempo. E então, uma vez que esse tempo limite tenha sido concluído, nós executamos este código aqui. Então, sim, você pode ver que há um pouco de coisas aqui, mas isso é realmente simples. Então, novamente, estamos dizendo qual é o cupom que estamos verificando atualmente? Então, obtemos todas as nossas informações atualizadas. Pegamos o valor da cesta. Então, usamos nosso campo de custo QuerySelector apenas aqui e pegar o valor desta cesta novamente. Então aplicamos isso aqui. Nós, em seguida, tirar qualquer prefixo, portanto, o que usamos apenas aqui, então substring e, em seguida, um neste exemplo ou onde quer que seus prefixos. E depois fazemos uma verificação aqui. Então, isto é mais baixo do que o cesto começou? Então precisamos fazer outra verificação. Isso é mais baixo do que o melhor negócio atual? É que temos um novo melhor negócio e aplicamos isso aos nossos objetos cheques de cupom. Fazemos verificações de cupom melhor negócio e, em seguida, atualizar esse valor cesta. E, em seguida, certifique-se aqui para garantir que nós colocamos isso novamente à tona. Então é um número que podemos comparar com outras coisas. Então apenas sirva as coisas consistentes. Porque você nunca sabe se a cesta vai ter um centavo ou sentido parte disso também. Então é melhor converter isso. E depois colocamos o nome do cupom aqui. Caso contrário, seu servidor, mas console. Ok, apenas para depuração e check-in para dizer que este não é o melhor desconto. Caso contrário, está tudo bem. E então nós apenas empurrar isso para a matriz de são verificados cupons para que nós temos certeza de que nós não vamos verificar. E esses cupons mais de uma vez você quer terminar o jantar sempre indo loop. E então nós apenas atualizamos nossos cheques de cupom. Então, novamente, transformamos em uma corda adjacente. Tiramos nossos cupons atuais, terminamos de verificar isso, então removemos isso do armazenamento local. Este é apenas um pedaço de código que faz aqui onde você testa, onde estamos imitando se ele ia enviar para o servidor, então podemos ignorar isso. E então vamos para a próxima função. Então, como podem ver aqui, queríamos continuar. Então, depois de cada vez que a página é carregada, nós teríamos um cheque lá. Vou te mostrar em um momento. E no final da verificação deste cupom, fazemos a mesma chamada para executar essa função principal. Novamente, não passamos em nosso objeto seletor porque estamos continuando, não iniciando. Assim, quase tudo é apenas mais um ponto que quero mostrar aqui. Então, como mencionamos, pegamos o status do nosso armazenamento local para ver se estamos executando ou não. E, em seguida, se o status estiver em execução, continuaremos a verificação de execução. E se não for, adicionamos o ouvinte de eventos, que acho que já mencionei. Agora, se você estiver interessado em ver como fazemos isso, aplique desconto. Só temos uma função de cupom de cheque aqui. E ele apenas diz, aqui está uma lista de cupons válidos, é o valor desse campo de entrada na matriz. Se for, temos apenas uma parte codificada aqui que altera o valor da cesta. Então é muito simples. Mas se você está usando isso tendo a folha selvagem e você não precisa dessa ferramenta. Mas como eu mencionei, todo o código para isso foi compartilhado com este vídeo. E nós vamos ter quaisquer perguntas sobre o caminho como seu trabalho e este vídeo ou adicionar uma função de sua própria que pode trabalhar em várias cargas de página gratuitamente para deixar um comentário e eu vou ser feliz em dar uma olhada e ver se eu posso ajudar.