Concevoir une extension Google Chrome pour dénicher des bons de réduction sur le modèle de "Honey"

1. Promo de bienvenue Skillshare: Bonjour, je suis Russell. Et bienvenue à mes nouvelles compétences Check classe, tout sur les extensions chromées. Je travaille dans le domaine du développement web et mobile depuis 15 ans, et au cours de cette période, j'ai eu l'occasion de travailler sur un certain nombre de projets et de startups. Dans cette classe, nous allons passer par tout ce que vous devez savoir pour être en mesure de créer une extension de recherche de coupon Chrome assez similaire à miel. Ce cours amical pour débutants nous emmènera à travers toutes les étapes que vous devez savoir pour aller. Pour ce faire de la création d'une base de données dans la base de feu et de la connexion à une extension de crime tout le chemin à hokum créations publiées sur le magasin de chrome. Je vais enregistrer chaque étape du chemin pour que vous puissiez voir exactement ce que vous devez faire. Vous avez besoin d'une expérience de développement si vous avez jamais voulu savoir comment créer l'extension chrome et c'est le casting pour vous prêt à commencer me rejoindre dans la première leçon 2. Créer des appli Firebase et des dossiers d'extension: Commençons. Donc, dans cette vidéo il y a, nouveau départ quoi ? Vous construisez la base de l'extension chrome. Donc nous allons créer APP dans la base de feu, que nous allons utiliser comme base de données que nous sommes tous les codes coupon atteint Main seront stockés. Ensuite, nous allons créer un dossier avec les fichiers nécessaires dont nous avons besoin pour l' extension crime , tels que le fichier Manifest Jason et similaires, JavaScript et les fichiers HTML d'arrière-plan que l'extension que nous avons inventée, Ensuite nous ajoutera ce dossier au chrome. La façon dont nous ajoutons cela d'abord est comme une extension déballée, puis à la fin, hors du développement, nous pouvons l'emballer. Et c'est ce que vous soumettrez ensuite à la boutique Chrome Extension. Et puis nous commencerons à connecter firebase à notre extension afin que vous puissiez avoir des communications entre notre extension et la base de données basée sur le feu. Nous pouvons commencer à tout mettre ensemble, et puis l'étape cinq est bien, juste rafraîchir l'extension afin que nous puissions commencer à voir comment le développement va aller de l'avant lorsque nous apportons des modifications aux codes et je dois le soumettre au chrome à chaque fois nous compactons le bouton d' actualisation, donc cela le rend beaucoup plus rapide. Nous commençons donc par créer une nouvelle application en cinq bases. Donc, vous pouvez le faire en allant simplement à la console Firebase comme ceci, puis en cliquant sur Ajouter un projet. Il est donc très facile d'avoir à entrer un nom pour le projet, donc nous allons appeler ce coupon finder. Vous pouvez l'appeler tout ce que vous voulez, alors cliquez simplement sur Continuer. Il vous demandera si vous voulez ajouter des analyses à votre projet, vous pouvez si vous voulez, mais je vais juste dire non pour l'instant, juste pour le rendre plus maigre et puis créer un projet. Cela peut prendre quelques instants, juste l'usine Teoh et mis en place. Ok, donc dès que le projet est prêt, vous pouvez cliquer sur Continuer. Ensuite, nous voulons faire est de cliquer sur l'icône Web juste ici et puis enregistrer un nom pour votre application . Encore une fois, nous l'appellerons Coupon Finder. Nous ne voulons pas vendre cinq hébergement A, et il ya clic enregistrer application et maintenant sera fourni avec ce script ici. Donc tout ce que vous devez faire maintenant est de copier cet orteil d'un côté. Donc, la prochaine que nous allons faire est de créer un dossier sur le besoin de fichiers dont nous avons besoin pour l' extension. Donc pour le faire, allez à votre éditeur de code de tri de Joy. Donc pour moi, ce serait de l'atome. Et puis nous allons commencer à créer un dossier sur les fichiers dont nous avons besoin. Donc d'abord été Atom va ajouter un dossier de projet. Donc c'est mon nouveau dossier de Created Just Tears. Lorsque vous ajoutez un dossier à l'intérieur de cela et que nous allons l'appeler coupon, trouver nous pour juste garder les mêmes noms ings le long du chemin ici pour garder plus facile. Et puis on va ajouter un fichier à l'intérieur de cette photo. Eh bien, je vais faire pour que ça soit facile à suivre, c'est juste faire glisser cette fenêtre vers le haut, donc l'espace le long du bas, ici, futur. Suivez le long. Ok, donc vous pouvez maintenant ajouter votre éditeur de code en dessous. Je suis juste là 3. Créer des fichiers nécessaires pour l'extension: à l'intérieur de notre dossier de recherche de coupons. Nous allons créer les fichiers dont nous avons besoin pour exécuter notre extension. Donc on vient d'ouvrir le fichier Cranie. Voici le 1er 1 sera le manifeste. Ne les Jason, nous aurions besoin d'ap dot Js et ensuite nous avons besoin d'arrière-plan. Non, html et puis finalement nous avons besoin firebase dot Js Ce sont tous les fichiers qui vont utiliser le prochain que nous devons faire est de mettre en place un fichier manifeste afin que nous puissions réellement soumettre l'extension au chrome. Ok, donc à l'intérieur du fichier manifeste, nous devons créer un nouvel objet ici. Je vais juste entrer dans certains attributs dont nous avons besoin pour faire notre extension travailler avec Chrome. Le 1er 1 est le nom de notre extension afin que vous puissiez mettre tout ce que vous voulez ici. Mais encore une fois, je suis juste suivre le même brevet déjà. Donc, nous allons appeler ce coupon finder, avoir les numéros de version de ce juste 0.1, puis besoin d'une description qui en haut ? Coupons. Donc, les autorisations que nous avons pour entrer ces comme un tableau. Donc on fait ça comme ça. Et puis les autorisations dont nous avons besoin seront onglet actif cela nous donne la possibilité de résoudre l' accès à l'onglet sur lequel l'utilisateur est sur. On veut pouvoir faire ça sur toutes tes filles. Connaissez-vous aussi l'accès ? D' autres onglets aussi ? Cela nous aide à être en mesure d'accéder à notre page d'arrière-plan sur le chemin. On va faire des communications d'avant en arrière. Donc, après cela, nous continuons à ajouter plus d'options. Le suivant est l'arrière-plan. C' est un fichier que nous exécutons en arrière-plan. Donc encore une fois ce sera la page. Voici en arrière-plan html, voir pour mettre des guillemets ici. Donc encore une fois, fond toe html Andi, nous ne voulons pas que cela soit persistant, donc nous ne sommes pas juste en cours d'exécution tout le temps juste quand nous l'appelons. Ça aide juste, euh, pour le nombre d'appels, les produits. On le garde juste, euh donc fait un peu mieux. Ensuite, nous avons besoin que Teoh définisse le type d'extension que nous créons. Il y a un certain nombre de façons différentes que vous pouvez avoir une extension avec chrome. Vous pouvez avoir des extensions qui n'apparaissent que si vous appuyez sur l'icône dans le coin. Ici sur chrome ont d'autres extensions qui injectent du contenu dans la page comme nous sommes créer ici et vous avez d'autres extensions qui ajoute comme une page de destination de l'Ukraine dans Nouvel onglet. Ils prennent le contrôle de ce nouvel onglet pendant qu'elle ça, mais pour celui-ci, on va injecter du code dans la page. est donc ce qu'on appelle un script de contenu. Pour cela, nous devons transmettre les informations que nous allons utiliser. Ceci est à nouveau un tableau. Donc, ce tableau prend un objet. Donc, le premier de ces attributs est appelé Matches. Maintenant, voici le sénateur ici. Il nous dit dans quoi vos vieux nous voulons injecter du code maintenant parce que nous voulons que ce script fonctionne sur n'importe quel site Web, cet orteil d'extension, n'importe quel site Web. Si on a un coupon, on va le montrer. Donc encore une fois, vous mettrez tous vos RL. Ensuite, nous devons mentionner les fichiers JavaScript réels veulent inclure donc nous. C' est app point Js. Et puis nous voulons juste dire quand ce contenu doit être ajouté, Donc enregistrer exécuter un document et ce devrait être une fois que tout le contenu de cette page a été ajouté, ce qui est normalement suffisant, Certaines pages, tels que liés à un bon exemple. Ils prennent un certain temps pour charger la page, et il y a une sorte d'appels supplémentaires qui ont lieu eso lorsque vous faites des extensions pour patients comme lié dans peut-être Gmail, nous devons ajouter vos propres vérifications pour nous assurer que le comme les dibs et éléments de la page Mona Interactive sont chargés. Mais pour cet exemple, quand quoi ? On va faire ce truc, c' est parfait. Donc, à un autre, qui est la version manifeste, qui en ce moment est la version deux et puis vous voulez Teoh, ajouter une politique de sécurité du contenu. Maintenant, c'est une chaîne assez longue, qui a toutes les informations dont nous avons besoin pour utiliser la base de feu, que je vais taper maintenant. Mais je vais avoir, hum, ça pour que tu puisses copier dans une description de cette vidéo. Ok, donc ça devrait être toutes les informations que nous avons besoin d'entrer pour le manifeste. Donc, vous pouvez aller de l'avant maintenant et sauver ça. Bon, maintenant que nous avons ajouté que nous voulons aller dans le crime, aller dans les paramètres, puis aller dans les extensions. Je veux cliquer sur charger décompressé ici, cliquez sur charger, décompressé. Ensuite, nous voulons trouver le dossier que nous venons de créer. Donc pour moi, c'est dans les yeux. Détecteur de coupons. C' est quoi ? Cliquez sur Sélectionner. Juste pour ce moment, si nous avons cherché cette nouvelle extension, vous pouvez le voir juste ici. Maintenant, c'est une erreur pour le moment. C' est parce que nous n'avons pas de contenu sur notre page. Assurez-vous que vous avez aussi un médecin. Si vous suivez le mois de mai de blanc si vous copiez et collez, ne vous inquiétez pas. Aussi, si vous retournez ici, effacer tout cela sur un frais, vous devriez voir que cela fonctionne. C' est la prochaine étape que j'allais te montrer à l'étape 5, en fait. Donc, une fois que vous avez ajouté votre extension dans chrome, toutes les modifications que vous faites, vous devez actualiser, puis ceux-ci seront reflétés. Donc, par exemple, si nous allons à cela est de trouver un magasin aléatoire ici sont extension sera en cours d'exécution sur cette page. Donc, si nous ajoutons à notre robe d'application, c'est le fichier qui va réellement injecter um, code dans la page. Donc, si nous regardons à nouveau, nous avons un arrière-plan, um, un fichier d'arrière-plan ici, qui est de retour sous html. Mais cela ne fonctionnera rien sur la page. C' est exactement ce que nous utilisons pour envoyer des informations à partir de la base des pompiers. Donc, si nous allons ici et juste dire beaucoup bonjour de l'extension, puis revenir aux extensions, rafraîchir et puis recharger cette page. Vous pouvez voir maintenant nous avons plus, dit ancien Bonjour de l'extension est que montre sont l'extension est sur cette page. Andi. Il est chargé correctement, et je fichier manifeste a fonctionné. Maintenant, vous pouvez voir à quoi ressemble votre date d'arrière-plan demain ici dans l'étape suivante va commencer à ajouter cinq base dans l'extension et commencer à faire les connexions à une base de données . 4. Connectez l'extension dans notre base de données: avant de continuer, il fera une correction orthographique rapide des dernières vidéos où nous avions persistants. Juste ici. Assurez-vous que vous changez ceci a en un A comme celui-ci, mais je vois que le changement a besoin de le rendre juste cela. Donc cette vidéo qu'on allait ajouter en relation avec un script de base de feu. Donc si on retourne à la base de pompiers ou trouve des informations juste ici, on veut prendre les informations sur le conflit de la base de pompiers ici. Copie gratuite sur. On va coller ça dans le fichier de points Js de la base de feu. Alors allez à la base de cinq et nous le collons. Donc c'est ce que nous devons faire à la base de feu. Démarrez le fichier Jess pour l'instant. Mais nous reviendrons sur ce dossier plus tard. Donc, pour enregistrer ces modifications, puis en arrière-plan ou HTML, nous voulons faire une demande à ce fichier firebase sur. Nous voulons également nous assurer que nous chargeons le sdk firebase. Donc, la façon dont les choses fonctionnent dans les extensions chromées est un peu différente. Teoh, nous avons peut-être vu juste sur des sites Web normaux sur des choses absentes. Au moins, vous ne pouvez pas appeler, um d'autres Js externes directement à partir de votre extension. Donc, ce que nous devons essentiellement faire est d'utiliser ce fond d'écran ou HTML comme un pont entre notre extension où nous injectons le script sur la page sur le site qui est allé sur les dates d' arrière-plan à Mel File qui aura la connexion à la base de feu. C' est ce que nous devons faire cette étape supplémentaire. Mais je vais te montrer ce que ça veut dire. Ce n'est pas trop compliqué. Il aide juste à faire cela ou à effectuer un bon thé avec du chrome. Donc, nous voulons faire est en arrière-plan i html Si nous revenons au chrome, voulez-vous juste prendre ce script et coller cela dans ? Et puis si nous copions ce même script et coller, il fera un changement ici deux bases de données et puis juste changer le numéro de version Teoh 7.9 Doctor, Je suis six pieds le plus à jour à partir de Mars 2020 et puis nous voulons Teoh annonce à nouveau Comme oh, cinq bases qui appelleraient dans ce fichier juste ici. Donc, si nous sauvegardons cela et ils retournent à Chrome et rafraîchir aura maintenant firebase connecté , Je suis donc si nous revenons aux extensions. Rafraîchissez ceci. Si nous savons, cliquez sur les vues de l'inspecteur, vous pouvez voir que nous avons la description que nous voulons juste ici. Donc, si nous retournons en fait à firebase dot Js et faisons une console déconnectez la base de feu. Actualisez cette Ouvrir les jours d'arrière-plan pour fraiser. Vous pouvez voir maintenant que nous sommes connectés à la base de pompiers. C' est ce dont nous avons besoin pour commencer à établir des connexions vers et depuis la base de données. 5. Configurer des événements de message Chrome: Maintenant, dans cette vidéo, nous allons Teoh apporter des modifications à un fichier Js de carte afin que nous puissions commencer à saisir le nom de domaine à partir de la page qui étaient sur et puis envoyer ceci à travers pour avoir une page HTML d'arrière-plan, nous pouvons ensuite vérifier avec feu Base si nous avons coupons pour cette page. Donc, commençons par supprimer ce script d'alerte que nous avons ici sur ajouter quelques sections que nous voulons commencer à coder, donc le premier sera obtenir le domaine actuel. Donc, nous allons définir ceci comme une variable hors domaine et ce sera égal à l'emplacement de la fenêtre, nom d'hôte. Mais cela peut avoir http ou www dot préfixé pour le moment. Donc, nous voulons juste nous assurer que nous enlevons tout cela afin que nous puissions le faire avec un simple remplacement. Donc, d'abord, nous allons vérifier s'il a juste http, puis un pour 82 ps sur, puis enfin pour w point aussi, comme ceci. Et puis nous voulons également nous assurer que nous divisons tous les paramètres de hachage à partir de cela aussi , ce que nous pouvons faire comme ça. Il est bon de s'assurer que nous obtenons cette expression incorrectement et qu'ils veulent passer seulement la première partie. Donc, cela devrait s'assurer que le nom de domaine est tout ce que nous obtenons de cela. Et puis nous sommes prêts à envoyer cela à l'arrière-plan en HTML. Donc, la façon dont nous faisons cela est d'utiliser l'objet d'extension chrome et nous voulons utiliser le temps d'exécution. Et cela nous permet d'envoyer un message à travers Teoh arrière-plan envoyé e-mail. Donc, quand nous avons terminé correctement et cela serait capable d'ajouter un morceau de code en arrière-plan extrême El, qui a réellement appelé le fichier firebase. Et c'est pourquoi, comme un événement d'écoute pour tous les messages qui sont envoyés, Mais d'abord, nous allons créer le message ici. Nous voulons donc définir un certain nombre de paramètres pour cela. J' ai donc envoyé un objet à travers qui a une commande sur. La raison pour laquelle nous voulons définir une commande ici est parce que nous voulons environ un cent différents types de requêtes jusqu'à ce vile. Donc, la demande à que nous voulons être en mesure de créer est d'abord une demande. Lorsque nous chargeons la page pour vérifier si nous avons des coupons pour cet avis de domaine qui parlaient mal. Demandes familiales. Donc, nous allons passer ça. Nous appellerons ça une récupération sur la deuxième commande de type off qui veulent faire est si nous voulons que Teoh soumette un coupon à la base de données. Ce sont les deux types différents que nous allons créer. Mais pour l'instant, on va se concentrer sur ce type. Donc nous allons transmettre des données aussi, ce qui sera un objet. Et nous avons appelé domaine, et nous allons juste passer cette variable ici reste les seuls paramètres veulent juste ici. Et puis, évidemment, nous voulons écouter la réponse. Et ça va refroidir sur ce serait envoyé juste ici. C' est là que nous obtenons une réponse de la base de données, qui est en arrière-plan au HTML, ce qui le rend vraiment cool. 25 a stodgy s. Cela nous aide juste à nous rappeler où ces appels seront faits. Donc, nous sommes sûrs que pour maintenant et puis nous voulons aller dans afin que nous ayons le code HTML de fond puis la base de feu. Donc, ici, nous devons créer un écouteur pour tous les messages qui sont envoyés à l'arrière-plan à 80 mil page. Donc, comme nous le faisons. Ceci est très similaire au message d'exécution de chrome envoyé. Au lieu de cela, nous avons mis le temps d'exécution du crime sur message. Ils veulent ajouter un écouteur, puis cela cherchera ces mêmes paramètres. Le premier serait le message qui sera tous les paramètres. L' ascension juste ici, soeur s'appellera message. Et puis nous avons deux options supplémentaires ici, qui Ascender. Et puis la réponse c'est que nous voulons renvoyer la réponse trois à cette fonction juste ici pour que nous puissions accéder à l'information à l'intérieur de ceci. Ouvrez ceci en une fonction à nous et les idées ici parce que, comme nous l'avons mentionné, nous allons avoir les deux types de commandes différents. Il y aura la récupération pour récupérer les coupons, puis il y aura un post pour pousser de nouveaux coupons dans la base de données. Nous voulons simplement nous assurer quel type de commande nous a été envoyé. Donc, nous disons message, mais notre commande et il est égal à chercher. Mais alors nous pouvons commencer à exécuter du code ici. Donc, ce que nous allons faire juste maintenant pour tester cela est à une console de connexion hors du domaine. Donc c'est juste réglé. Le domaine est égal au message. Ne donnez pas de données, Dr Main. Il suffit de choisir la seconde et ensuite nous allons consigner le domaine juste ici. Donc on a sauvé ça. Et assurez-vous que nous avons ceci ou correct. Juste ici va ensuite revenir dans chrome sur aller aux extensions, actualiser l'extension, puis aller à une page et puis nous allons vérifier si la page html d'arrière-plan est la connexion du domaine dans la console. Donc encore une fois, on fait de la pression juste ici, on va charger, hum, magasiner à nouveau. Donc, si nous avons juste quelques sites Web juste ici et ensuite vérifier sur la page d'arrière-plan, vous pouvez voir que nous avons maintenant le journal des résultats juste ici dans la console. Donc, si nous chargeons une autre page et puis vérifions le journal, vous pouvez voir que ces résultats sont mis à jour au fur et à mesure que nous allons sur ces pages. Cela signifie donc que nous avons une connexion de AP à l'arrière-plan html, que nous pouvons ensuite recevoir ces requêtes et ensuite renvoyer un résultat. Quoi ? Au moment où on verrouille ça sur la page. Donc, ensuite, nous devons renvoyer ce résultat à l'application Js afin que nous puissions voir une réponse 6. Structure de configuration et coupons de Fetch: Ok, Donc dans cette prochaine vidéo, nous allons faire une demande à notre base de données basée sur la cuisse et envoyer le nom de domaine encodé en base 64. La raison pour laquelle nous allons encoder le nom de domaine est parce que dans Firebase à l'intérieur base de données ici, vous ne pouvez pas utiliser de tirets ou de points comme trois clés. Nous devons donc nous assurer qu'il est codé correctement avant d'arriver à ce stade. Donc nous allons utiliser la base de données en temps réel par ici. Nous allons le démarrer en mode test à un état qui créatif là et déplacer faire la demande à la pensée domaine barre oblique. Ensuite, ici sera le nom de domaine encodé. Et puis nous aurons un tableau de codes promo que vous pouvez avoir à l'intérieur ici afin qu'ils soient affichés . C' est ainsi que l'aspect structurel a un exemple. Donc, nous aurons le nom de domaine encodé juste ici et il y aura un tableau off code promo et pour chaque code promo aura le code comme celui-ci et dans une description rapide de chaque coupon . Donc, par exemple, combien d'argent vous obtenez pour ce coupon ? Donc, maintenant, nous allons créer un script qui fera des recherches faire une requête à une base de données à chacune de ces. donc le domaine Ford Slash. Et puis tout ce qu'ils ont encodé pour faire du nom est un effet des résultats. Donc nous ne pouvons jamais mettre fin à ces extensions. Donc si on saute Teoh, c'est lui ou ton co-éditeur, on va entrer dans une commande de récupération juste ici pour s'assurer que ce n'est pas la Post Command et qu'on doit encoder notre nom de domaine. Donc, nous allons juste créer un nouveau câble ici quand nous encoderons le domaine sur ce sera en utilisant le script Java basé 64 dans la fonction de code, qui est B t o a. Ensuite, nous passons juste dans le domaine juste ici. Débarrassez-vous de ce verrou de console. C' est ce avec quoi nous voulons faire un contrôle. Et maintenant, nous nous connectons à la base de feu et voyons si nous avons des coupons. avons déjà mis en place une connexion à la base de feu afin que nous puissions appeler notre base de données tout de suite. Donc, vous venez d'appeler la base de données et puis nous avons besoin de la référence ou le chemin du charbon que nous voulons faire Légèrement dit que ce serait domaine, puis barre oblique avant Encoder le domaine maintenant parce que via la base vous permet d'obtenir des résultats en temps réel. Nous devons nous assurer que nous disons expressément une fois juste ici que c'est cela va le chercher, obtenir les dernières informations chaque fois que nous faisons un cool et ensuite nous devons écouter la réponse. Donc, ici, nous allons obtenir des résultats. Donc, nous allons dire réponse. Cela va le renvoyer à l'application Js Donc, nous allons obtenir les résultats ici afin que nous puissions commencer à utiliser cela pour rendre sur l'écran pour dire que nous voulons définir un certain nombre de paramètres différents. Oui, nous pouvons réellement déboguer, découvrir quelles sont toutes les informations que nous recevons de la base de données. Tellement triste type de résultat. Nous voulons aussi un statut. Donc, si c'est arrivé à ce stade a été un succès et puis bien sûr, aurait passé les données dans une houle. Ce sera un instantané. C' est la croyance même assignée à cela ici et nous allons passer dans toute la valeur que nous avons que je suis récupéré à partir de cinq bases et puis nous voulons juste dire ce que la requête initiale waas, ce qui l'aidera pour le débogage. Encore une fois, on va mettre tout ce message juste ici. Ils devraient maintenant envoyer ce résultat. Donc, si nous définissons un verrou de consul ici pour la réponse, nous pouvons maintenant voir à quoi cela ressemble sans avoir à aller à l'arrière-plan en HTML à chaque fois. Donc, si nous allons au chrome, rafraîchir notre extension et ils vont à Ah, page Web, Voyons quelle réponse nous obtenons de Firebase enterrer les esprits. Nous n'avons que cet exemple de test ici pour le moment, donc vous allez vous rafraîchir. Et maintenant, allons sur une page Web. Inspecter, vérifier la console. Vous pouvez voir ici. Réponse de la base de pompiers. Non défini. Donc, cela montre juste ici que nous n'avons aucun enregistrement pour quoi que ce soit dans la base de données pour le moment pour ce chemin. Mais si nous allons maintenant encoder cela, nous pouvons vraiment nous assurer que nous avons une réponse ici. Donc, si vous voulez dans le code à la main, il va ce site pratique khirbet 64 encoder la pâte de chien dans la chaîne que vous voulez encoder. Alors on copiera ça. Retournez à une base de données, créez une nouvelle entrée juste ici. C' est donc ce nom de domaine. Alors on veut s'assurer qu'on fixe un code. C' est un nom de coupon, triste description. Donc, si nous ajoutons cela dans la base de données, puis revenez ici, Nous pouvons voir que l'erreur se produit toujours. Mais si nous retournons dans un éditeur de code juste ici et puis en dessous, faites cette vérification pour la commande que j'ai besoin d'ajouter en retour. Vrai. Et cela gardera le message médiocre ouvert pour nous pendant que nous faisons la demande aux cinq un état basé. Donc, si nous revenons maintenant et mettons à jour notre extension et réessayez, vous pouvez voir maintenant que nous avons une réponse de Fire Base, et cela devrait montrer notre exemple. Coupon. Je suis juste là. Mais si nous allons à un autre nom principal, euh, vous juste léger à nouveau est un exemple. Vous verrez que la réponse est non, car nous n'avons pas de coupons pour ce domaine. Donc nous avons celui-là. Maintenant, c'est lié à google dot com. Donc, dans la prochaine vidéo va commencer à nous assurer que nous prenons les codes coupon qui ont été renvoyés pour la base de données sur Nous avons regardé à travers ces et effectivement les afficher sur l' écran pour arrondir pour continuer à regarder dans le journal de la console et le débogage chaque temps donc je commence à travailler à faire des affichages réels pour ces données. 7. Rendre des coupons sur la page.: ensuite, nous devons commencer à afficher les coupons que nous avons récupérés de la base de données. Donc, dans la dernière vidéo, nous cherchons à obtenir les réponses de la base de feu. On pourrait le renvoyer à la réponse de message que nous voulions ici. Donc, nous avons maintenant les coupons, s'il y en a dans cette variable juste ici. Donc, dans cette vidéo, nous allons parcourir ce tableau s'il y a des escaliers coupons et commencer à les rendre sur l'écran. Donc nous allons commencer par créer une nouvelle fonction ici. On est cool. Ce coupons passés comme ça, puis ici, qui est dysfonctionnement cool, puis par dans les données de points de réponse. De cette façon, nous nous assurons que cet envoi de message à notre fichier basé sur le feu ou Jess fera un cool. Nous obtiendrons la réponse que j'envoie la réponse à cette fonction ici. Maintenant, pour commencer, nous voulons juste faire une boucle à travers le tableau de coupons, puis Adam à une liste, et puis nous l'utiliserons plus tard. Donc nous allons mettre tout cela dans un bloc d'essai au cas où il n'y aurait pas de coupon. Donc, ce sera nul. Donc nous ne voulons pas boucler quelque chose qui n'est pas des appels Excel dans une rangée. Donc, si nous avons juste placé dans un bloc d'essai qui va attraper l'époque et nous n'aurons aucun problème. Donc, j'appelle ce coupon html, et ce sera vide pour commencer, le plus récent juste dire des coupons pour chacun. Et on a juste mis ça comme un coupon sur l'indice obligataire fixé là-haut. Donc, cela ferait une boucle à travers le tableau et ensuite définir chaque élément comme coupon et parce que l'index là si nous en avons besoin. Mais ce que nous allons faire est d'appeler des annonces html coupon pour chaque fois. Hum, vous dites juste à l'intérieur de cette liste ici le code, ce sera le code de coupon point. Donc encore une fois, à partir de la base de données semaines dans la dernière vidéo, nous avons vu que nous avons deux paramètres pour le coupon. Il y a le code, et il y a une description. Donc, après cela va définir les descriptions. Nous venons de mettre ceci en italique selfie description point de coupon, et puis assurez-vous de fermer cette étiquette juste là. Donc, cela signifie que nous avons une, um cette variable ici aura tous les codes off. Codes coupon dans une belle liste pour nous, afin que nous puissions l'utiliser pour réellement rendre sur la page. Donc, la prochaine que nous devons faire est de créer des éléments que nous pouvons utiliser pour afficher cela. Mais d'abord, nous avons juste besoin de l'orteil à une vérification au cas où cette réponse était non afin que nous n'ayons pas d'erreur . Donc, nous disons juste attraper, puis définir la variable pour cette époque juste ici et commencer. Si nous sommes juste locaux à l'écran et juste dire aucun coupons trouvé ce domaine et alors nous allons juste mettre le message d'erreur il a été dit que nous pouvons démystifier cela. Donc j'ai gardé ça pour l'instant. Avant ça, on veut juste Teoh. Nous voulons juste rendre cette liste sur la page. Donc, pour ce faire, nous allons créer un nouvel élément juste ici, en sautant devant moi là-bas. Donc nous appelons ça, hum, affichage de coupons, et ce sera un nouveau développement comme ça spécial pour capitaliser ça. Et puis on dira, continuez, jouez dans 80 millions. Il refroidit. Corriger ces citations et puis à l'intérieur de la table mettre le coupon html et puis il est juste une question ajouter ceci au corps comme ceci Donc ce que nous avons maintenant est que nous avons un message envoyé d' avant avec un artiste nouvelle fonction de coupons passés qui prendra dans la liste hors coupons juste ici. Donc, les données de réponse ont ensuite été en boucle sur tous les coupons qui ont été trouvés et les ajouter à cette liste sur. Ensuite, nous créons un nouveau développement juste ici et puis définissons ceci comme l'intérêt à fondre, puis nous avons ajouté à la page. Alors, allons rafraîchir l'extension et voir comment cela apparaît. Nous avons rafraîchi notre extension. Maintenant, si nous allons à Google, qui est là où nous avons eu cela en premier lieu, vous pouvez voir un coupon apparaît ici sans aucun style pour le moment. Mais c'est bien. C' est le coupon qu'on avait là. Si nous changeons quelque chose sur le genre de points d'exclamation nécessaire après cela, ils étaient frais. Vous voyez, il se met à jour à chaque fois à partir de la base de données, est pourquoi nous utilisons Fire base parce que cela nous aide à avoir une base de données très rapide et facile d'accès, et ils peuvent faire de toute l'authentification Onda de sécurité pour nous garde tout gentil et rapide. 8. Ajouter l'événement de clic pour ouvrir la superposition de la liste des coupons: Ok, donc dans cette vidéo, nous allons prendre l'écran que nous avons jusqu'à présent et contenir ceci. Nous avons été un élément cliquable que quand ils cliquent dessus, il va s'ouvrir et afficher la liste des coupons à l'intérieur plutôt que cet affichage aléatoire dans le coin de l'écran ici. Alors revenons dans un éditeur de code et commençons Teoh, rendons ça difficile. Ok, Donc voici le code que nous avons actuellement où nous avons un coupon ne joue développement, et cela a été ajouté à l'écran, qui est un excellent début, mais nous voulons changer. Ça entoure ça. Nous avons une partie qui est génial, vous pouvez cliquer sur ce qui montrerait alors cela. Commençons donc par cacher cet élément. , Pour commencer avec Onda,nous voulons définir une classe nommée ceci afin qu'on puisse y accéder plus tard pour que vous puissiez le faire juste en disant nom de famille et on s'appelle cette liste de coupons. Juste avoir quelques traits de soulignement avait voulu un début entre Onda, nous voulons Teoh ajouter un peu plus html ici juste pour qu'il soit clair ce qui a été montré sorte de titre ici et dire des coupons. Et puis nous avons juste mis un autre ou sous-titre comme liste de coupons. Et nous pourrions même passer par le nom de domaine ici. , Comme ça,on pourrait dire une liste de coupons pour et ensuite au domaine. Donc nous avons un coup d'oeil. Maintenant quoi ? Tu ne regarderas pas encore parce que c'est caché. Mais ce que je veux faire ensuite est d'ajouter un petit cercle en haut de l'écran ici que si vous cliquez, il ouvrira cet affichage son prochain mouvement légèrement plus bas ici. Andi, crée un autre élément appelé bouton coupon. Donc encore une fois, avec le document crée un élément et ce sera un div. Ensuite, on a un bouton de coupon ici. Mais donnez à cela un nom de classe off, gardez sur le bouton. Et puis nous voulons ajouter un peu de style à cela. Donc, nous sommes juste à cela comme CSS donc à une liste de choses ici. Donc, d'abord, nous voulons faire, euh assurez-vous que nous avons une hauteur de moins autour de 30 pixels. A avec 30 pixels. Nous voulons qu'il soit arrondi. Dispels a un rayon de bordure de 100%. J' ai cette nouvelle ligne de pays ici juste comme ça, Nous pouvons porter sur la bordure d'un pixels Andrada, couleur de fond et ladite couleur de texte juste pour que nous puissions voir cela sera probablement horrible pour commencer, mais nous allons style plus tard dans le cours afin que nous puissions le rendre beaucoup plus attrayant pour l'utilisateur. Mais commencer ça va s'assurer qu'ils ont quelque chose avec lequel nous pouvons interagir. Hum, semestres à une autre nouvelle ligne juste ici. Nous avons donc les citations ici sur chaque ligne. Donc, c'est de commencer par un. As-en un qui les ferme pour ça. Après ça. Vous voulez avoir les icônes plus que nous pouvons ajouter à cette chaîne ? Nous voulons le rendre cliquable sur. Ensuite, nous, je veux définir les positions de la position sera fixée. Alors que nous faisons défiler la page vers le bas, elle restera là. Nous voulons qu'il s'agisse de cinq photos du haut de l'écran et de cinq photos du côté droit de l'écran. Encore une fois, ici, Andi, ça devrait être tout ce dont nous avons besoin. Nous avons juste à définir le contenu Cem avec le texte la ligne au centre fermer la chaîne, juste là et là. Nous voulons mettre en html Teoh, je devrais dire, Cook sur qui pourrait ne pas correspondre comme c'est qui est juste vérifier ceci ici sur. Enfin, nous voulons à ce à la page comme ceci. Donc pour l'instant, une nouvelle extension et voir ce que nous obtenons. Ok, on peut voir que notre cercle apparaît ici, mais ce n'est pas le plus facile à voir. Assurez-vous juste que nous indexons cela correctement. Donc, si on retourne, euh, par ici, juste dire, dit Index, c'est une nines là-bas. Juste orteil. Ajustez la hiérarchie. Actualisez à nouveau l'extension. Gates maintenant sur le dessus. Donc maintenant, nous voulons faire est d'ajouter un événement de clic. Lorsque vous cliquez sur ce bouton, vous allez ouvrir sur l'affichage la liste des coupons que nous avions avant que nous ne voulions décrocher. C' est bien donc ça apparaît ici. Réparons juste ce coupon tech pour qu'il soit bien centré. C' est donc nous allons le faire en disant simplement flex d'affichage, justifier le centre de contenu sur un centre d'éléments de ligne. Il suffit de corriger ceci ici et ensuite vous voulez ajouter un peu de style ici aussi. Donc ils vont le faire si on recopie tout ce qu'Andi veut à un maximum d'environ 300 fouettés pour environ 300. Pas besoin d'un rayon de frontière ici. Peut-être trois pixels. Quelque chose sur les bords. Un peu, euh, sur le reste de tout ça. Vous voulez déplacer cela un peu plus loin vers le bas de la page. Donc, ce n'est pas un chevauchement. D' autres éléments étaient, disons, un top de 100 très légèrement. Réduisez ce 90. Nous n'avons pas le texte de la ligne pour être au centre ou ceci non plus. Si nous regardons ce débordement soudain caché parce que nous avons un élément de liste ici moi-même . Um, poussez-le sur le côté. Donc on devrait tout avoir ici. Donc si on change ça en emoji, peut-être celui-là. Donc c'est sûr. Ceci rafraîchir notre extension. Ok, on a un léger problème là-bas. Vérifions ce que nous avons hors de cours. On dit du beurre de coupon, pas des gens. C' est pour ça que ce n'était pas encore défini. Donc, si actualiser cela, nous devrions voir notre mise à jour Je suis juste jouer ici, et ensuite nous avons juste besoin d'ajouter un événement click pour faire cet affichage. Nous devons donc supprimer le type d'affichage de flex car il fait apparaître ces éléments dans une colonne. Donc, cela sera alors caché. Et puis quand nous cliquons dessus, il devrait l'afficher. Donc, nous avons juste eu du code pour ceux-ci maintenant, donc supprimé ce flex d'affichage Et puis créons une nouvelle fonction ici. Demander créer des événements Je ne vous entends pas dire que les grands événements sont une nouvelle fonction. Ils veulent dire sélecteur de requête de document et ils veulent obtenir le nom de classe de ces boutons. Si nous venons de copier ceci, collez-le ici, Tante Event, écouteur sur clic. Et puis nous voulons que cela exécute une fonction ici. Donc, lorsque cela est cliqué, nous voulons afficher cet élément Apparaît donc nous voulons prendre le nom de l'autre classe. Je commence ici ce bloc d'affichage de style. Donc, ils devraient créer cet événement ici qui ajoute un écouteur d'événement au bouton, ce qui est pertinent ? Juste ici. Donc, lorsque cela est cliqué, nous mettons à jour le style de cet élément ici pour l'afficher. Donc, nous revenons juste maintenant ou frais ceci de sorte que vous pouvez le voir à des coupons toujours en cours d' affichage, c'est parce que ce CSS est sur l'écriture. Ils sont CSS ici est plus d'écrire ce que nous avons mis ici. Donc on a mis ça en dessous. Supprimez celui qui actualise les cas. On y va. La liste des coupons ne s'affiche pas. Si nous cliquons ici, il apparaîtra. Si nous passons à un domaine qui n'a pas de coupons, par exemple, ce site Argo ici, nous pouvons voir que notre petite icône n'apparaît pas. C' est un peu plus tard dans le cours, nous vérifierons s'il n'y en a pas. Les coupons afficheront toujours l'icône, mais dans un design légèrement différent afin que les utilisateurs puissent soumettre leurs propres coupons pour ce site . Mais pour l'instant, nous pouvons voir qu'il détecte à partir de la base de données si des coupons existent. Si elles le sont, il affichera cette icône dans le coin, et les utilisateurs peuvent cliquer dessus et voir la liste des coupons. Donc, évidemment envie de rendre ce look beaucoup plus agréable et plus facile à utiliser. Et s'il y a plus de coupons à faire, ils peuvent faire défiler vers le bas et prendre copie facile. Ils peuvent facilement copier ce code promo et l'ajouter dans leur panier. Ils obtiennent un rabais, donc ce sont des choses qui vont faire plus tard dans le cours. Mais maintenant, nous avons un style de base sur. Nous montrons les données de notre base de données sur la base incendie. Et puis cela fait une vérification pour voir si ce nom de domaine encodé est le patriote sur ce qu'il montrera ces coupons pour l'utilisateur à utiliser. 9. Créer des fichiers CSS et le remplir avec le style: bienvenue à cette nouvelle section. Donc, dans cette section, nous allons changer la conception d'une extension de crime ici. Il va donc ajuster le petit bouton que nous avons ici qui ouvre l'extension. Faites en sorte que si vous cliquez à nouveau, il se refermera et commencera à ajouter un style à l'extension. Donc ça ne ressemble pas à ça. C' est une fois basé, horrible couleur bleue. Mais ce n'est pas un cours de design, mais nous allons le déplacer afin qu'il commence à paraître beaucoup plus agréable. Et puis vous pouvez prendre cela pour avec votre propre design et le changement que vous voulez faire. Mais ce que nous allons faire en premier, c'est commencer à revenir dans un éditeur de code, et ça a commencé à changer ces styles. Revenons dans un éditeur de code maintenant. D' accord ? C' est l'une des premières choses que vous voulez faire est de commencer à déplacer certains d'entre nous en composant son propre fichier CSS afin que nous n'ayons pas à importer des styles directement dans la page comme ceci . Donc, pour ce faire, je retourne dans un fichier manifeste et où nous avons nos scripts de contenu, nous allons ajouter une entrée supplémentaire à cet objet appelé CSS. Et ce sera similaire à ce que nous avons jusqu'à Js ci-dessus juste ici. Cela sera juste appelé coupon dot CSS Et assurez-vous d'ajouter un commun ici de sorte que cet objet YSL dans cela correctement et puis après cela semblerait ajouter un nouveau fichier appelé coupon dot CSS. Ok, donc nous avons ce fichier ici maintenant, et il est lié dans un fichier manifeste pour qu'on puisse y accéder depuis AP. Jess, nous n'avons pas besoin d'arrêter d'utiliser ce CSS dans ce JavaScript pour que vous puissiez supprimer tous ces éléments , mais nous allons commencer à déplacer cela dans le coupon ATS CSS point. Donc, ce que vous voulez faire en premier est juste copier le CSS. On a ici ? Prenez note du nom de la classe pour supprimer cela à travers ici, prenez le nom de coût coller ceci dans. Donc vous aviez un point devant lui et puis supprimez tous les, um citations et signes plus que nous avions amusants avant, alors nous voulons juste ajuster l' endettement de l'indice correctement. Il est donc plus facile pour nous de lire et d'apporter des modifications, donc nous avons juste sauvé qu'ils veulent le faire à nouveau pour les autres éléments. On a enlevé le sexe. Cette partie, le manteau n'est plus ici. On a le bouton. Nous allons copier avec ce code, retourner dans un fichier CSS et faire le même processus à nouveau. C' est la suppression des citations. Ok, donc on va faire des changements époustouflants aussi. Assurez-vous juste que nous avons tout cela organisé et bien structuré à l'intérieur de notre fichier CSS. Donc je n'ai pas à revenir en arrière en quatre mots. Lorsque vous faites ces changements, pas le chien ici pour un nom de coût et puis économiser. Et encore une fois, nous pouvons supprimer cette ligne juste ici. Ok, alors sauvegardez ça maintenant. Revenons simplement à notre page d'extension, actualisez notre extension et voyez si cela fonctionne toujours avec le fichier CSS. Plutôt, Et ayant que Thestrals ajouté directement en JavaScript thaï, un cas que nous pouvons voir, cela fonctionne bien. Pourtant, voici maintenant, commençons à changer le style que nous avons avant de changer en style. voulez vraiment vous assurer que lorsque vous cliquez sur l'icône pour ouvrir ah liste de coupons va s' assurer que si ils cliquent à nouveau, il va fermer juste pour que nous puissions libérer l'espace pour l'utilisateur pour le faire. Nous allons juste ajouter un petit chèque juste en bas pour voir si la liste des coupons apparaît déjà. Donc, nous le faisons simplement en disant, si le type d'affichage de style est un bloc et alors nous allons dire que c'est non, nous allons ajouter dans cette ligne ici. Donc, si est actuellement un bloc, nous voulons le changer pour être caché et alors le contraire que si c'est un bloc, si ce n'est pas le bloc, nous voulions être un bloc, donc cela signifierait juste si nous revenons maintenant, nous pouvons cliquer sur le type à partir de 80 apparaissent lorsque nous cliquons à nouveau, et il cache le suivant. Nous voulons faire quelques changements comme celui-ci. Donc ici, nous voulons changer cela d'être l'argent que Emoji a choisi de voir pour des coupons comme si nous pouvons commencer à changer le design. Nous pouvons modifier le contenu qui est affiché juste pour que nous puissions avoir à ces nouvelles modifications de conception . Ça commence à paraître un peu plus agréable. Encore une fois, on va changer le libellé ici aussi. Donc juste changer ceci pour dire, au lieu de la liste de coupons car je dirais juste quelque chose. Sourcils, coupons. Bonjour, qui ont haricot utilisé pour. Et puis nous allons juste mettre le nom de domaine. Il y a eu juste audacieux. J' ai juste bouclé le domaine comme ça et puis quoi ? On devrait probablement nous faire. Eh bien, ils déplacent juste ça sur la ligne 20 juste pour garder les choses beaucoup plus faciles à lire. Et puis ici, nous allons ajouter un autre paragraphe qui dira simplement, cliquez sur n'importe quelle cape pour copier une nouvelle. Donc cette ligne juste ici est la dernière Usti sur le symbole. Et puis nous voulons clore ce paragraphe, et je pense que nous devrions faire de cela un talic une houle. Je mettrais cela en ligne juste pour l'instant. Encore une fois, nous allons sauver ça. Nous pourrions voir que nous avons un changement ici, et ensuite nous avons un peu plus d'informations maintenant. Ok, donc nous sommes presque prêts à ajouter les changements CSS que nous voulons pour, euh, liste de coupons ici et le bouton de coupon. Mais d'abord, nous avons juste besoin de changer la façon dont nous affichons les coupons eso qu'il fait paraître un peu plus cliquable sur et de le faire de sorte que lorsque nous commençons à lire le style, nous pouvons sélectionner ces éléments beaucoup plus facile. Ainsi, vous pouvez ajouter le style que nous voulons. Retournons juste à notre éditeur de code et faites juste quelques changements ici. Donc pour ce faire, nous allons faire défiler ici jusqu'à l'endroit où nous entrons le code pour un coupon. Je vais juste supprimer cette partie ici, ce code disant et nous allons mettre un élément span ici d'une classe de code et ensuite fermer ça comme ça. Ensuite, on va déplacer cet élément suivant sur une nouvelle ligne. Au lieu de mettre ça dans les balises E M pour italique, on va le mettre dans son propre paragraphe. Et puis une mission de chose. Quand nous faisons un swot est à une flèche emoji toff comme celui-ci juste pour qu'il ajoute un peu de flux supplémentaire à la façon dont ils affichaient cela. Mais encore une fois, si vous voulez changer cela légèrement, vous pouvez avoir votre propre affichage. Je vous recommande juste, vous savez, ajouter votre propre saveur de magasin à elle juste ici, Mais vous pouvez copier le CSS que je suis en train d'ajouter partager lié ce après la vidéo, sorte que vous pouvez utiliser le même CSS si vous voulez. Et à partir de là, vous savez juste des choses. Faire le vôtre à un logo. Si vous voulez sur des choses comme ça, disons ça maintenant, juste pour voir à quoi ressemble cet écran. Donc nous revenons aux extensions. Recharger frais au cas où nous pouvons voir qu'il est un espacé juste un peu plus. Alors maintenant, nous allons sauter dans le fichier CSS et commencer à ajouter d'autres styles. Case s'arrêtera ici avec la liste de coupons et ajoutons un peu de style d'abord pour les coupons d'en-tête . Donc j'ai choisi juste un simple de la famille au large de la septième. Nous définissons une nouvelle taille de police de 26 pour la faire ressortir un peu plus. Ils veulent ajouter une marge au bas d'environ 20 pixels. Était-ce un puits sans fond de bordure d'un pixel, juste une sorte. Une couleur gris clair. Nous aurons un rembourrage au bas juste pour espacer cette bordure et ensuite était une ligne hias bien pour que les marges soient juste un peu plus cohérentes. Ce sera 26 choix. Aussi les mêmes mêmes tailles. Avoir une taille amusante. Ensuite, nous allons ajouter un style pour le paragraphe. Je suis dans la liste des coupons, donc on change légèrement sur la famille de ferme ici pour être la hauteur de la ligne Sand Saref. 20 pixels de taille de police de 16. J' ai juste eu un peu de contraste avec l'en-tête. Centrez, puis ajoutez un poids avant de 500 et définissez une couleur ici. Une houle, un gris clair, et ils veulent supprimer la marge. Top devient ensuite. Vous voulez ajouter des styles. La liste de nos codes promo. Donc, encore une fois, ce fluage sur la liste, nous obtiendrons l'élément liste changerait le type de style de liste. C' est une nonne, et puis il suffit de retirer toute marge pour tapoter de la gauche. Et puis nous sommes des objets naturalistes. Donc, vous voulez les contenir dans leur propre genre de petits éléments. Donc hors de Board of Radius ici de trois pixels et ensuite mettre une bordure autour de ça comme ça , un peu de caresser 15 pixels, et puis nous allons ajouter une ombre autour de cela, une houle alors nous voulons que ce soit la casse. Ensuite, nous avons juste été un bas de marge de 20 pixels juste pour espacer. Si nous avons plus d'un code, plus d'un code promo disponible afin qu'ils soient sûrs sur ce que nous avons en gardant l' esprit quelques styles supplémentaires à adhérer. Mais nous devrions commencer à voir cela se produire. L' affaire commence à prendre forme maintenant Bob qui a quelques problèmes ici comme ça. Andi, rembourrage autour de l'élément global n'est pas trop beaux bruits, horrible couleur bleue. Nous allons donc commencer à apporter des modifications à ces éléments. Maintenant, nous pouvons voir cette zone ici. Il est temps de prendre un peu plus de forme. Ensuite, nous les remplacons. Style à l'élément de code. C' est le titulaire du code de coupon lui-même. Défilons simplement vers le haut. Donc, sans une couleur de fond sur un orange clair, un peu similaire à celui utilisé sur le miel, mais pas non, exactement la même chose à nouveau. Si nous changeons cela, ces couleurs, vous devriez avoir tapotant cinq pixels. Je veux m'assurer que c'est l'affichage en ligne et encore une fois nous sortons du rayon de bordure de trois pixels. J' ai une frontière autour de ça aussi. Je veux m'assurer que si le curseur de la souris est déplacé sur cet ensemble pour être pointeur. Ok, puis enfin envie d'ajouter un peu de style aussi ? Nouvelle balise de paragraphe pour une description. Donc encore une fois que nous gardons sur la liste dans l'élément de la liste, puis paragraphe je suis un texte. Alignez ceci vers la gauche. Marge Sam, en haut de 10 pixels supprimés dans la marge. En bas. Voulez-vous supprimer la transformation de texte d'ici aussi et SEF sur la taille de 14 pixels ? C' est une taille amusante, pas prendre de la taille. Rafraîchissons. Cette affaire est un peu mieux maintenant vous pouvez voir ici pendant que je vous suggère d' ajouter votre propre style. Mais encore une fois, ça commence à prendre forme. Mais encore une fois, Donc maintenant, nous devons réellement travailler sur l'élément enveloppant global ici hors du développement de la liste de coupons parent réel pour supprimer cette couleur bleue. Et puis nous aurons en fait un peu de style pour le bouton ici aussi. D' abord, on va changer ce rayon de bordure à six pixels. On veut apporter la boîte. montré que nous utilisions ici juste eu une ombre autour de l'extérieur des éléments de la liste. Nous voulons rendre la couleur de la bordure blanche. On gardera le même arrière-plan. Nous garderons ces éléments les mêmes. Nous allons ajouter un peu de rembourrage. 15 pixels. Retirez cette couleur bleue juste ici, comme nous l'avons mentionné. Et puis on veut Teoh. Permettre l'utilisation de cette ceinture un défilement vers le bas de la page, quelque chose quand nous avons débordé caché. Donc, si nous avons plus d'un coupon et qu'il sera coupé du fond des craintes de cerfs, nous voulons nous assurer qu'ils peuvent faire défiler une partie du débordement. Pourquoi ont été mis cette auto sur puis teintures tout ce dont nous avons besoin Jusqu'à présent, si sûr que et puis le bouton de coupon réel que vous devez régler ainsi nous allons ajuster. La taille ici changera la hauteur à 40 pixels définis. La largeur était de 50. Ensuite, on a changé le rayon de la frontière juste pour être six picks. En outre, nous avons plus d'entre nous hors rectangle mince ce cercle. Nous allons utiliser le même livre Shadow à nouveau avec la couleur ont été supprimés. Ceci et nous allons rendre notre frontière un peu blanche était une famille amusante du Sud et nous allons ajuster la distance. Nous avons souvent le haut sur le côté droit de l'écran, juste un 15 pour lui donner un peu plus de place pour respirer. Alors on va dire la couleur de la police. Donc c'est juste sauver ça maintenant et jeter un oeil. Ce que nous avons jusqu'à présent au cas où nous pouvons voir que c'est que ce n'est pas parfait par aucun moyen, mais il a un peu de sections définies Mawr et un peu de style qui se passe ici, ce qui est suffisant pour nous pour aller de l'avant avec On a utilisé pour le bain suivant, bien sûr. Ensuite, nous allons permettre aux utilisateurs de cliquer sur un bouton en bas de ces éléments, ils peuvent soumettre leurs propres coupons à la base de données afin que vous puissiez commencer à remplir ces informations de preuve sur DSO. Ce sera la prochaine section du cours 10. Assurez-vous que l'extension s'apparaît: lorsque cette prochaine vidéo, nous allons mettre à jour l'extension afin que vous puissiez voir la superposition de coupon comme celle-ci, si vous avez des coupons disponibles pour ce site ou non. Donc, juste pour donner un exemple rapide de cela, nous avons déjà Exemple de code promo ici pour google dot com. Si je vais à la BBC, météo ici. Je n'ai pas de coupons, mais je ne peux pas voir l'extension dans le coin. Donc, les premiers changements que nous allons faire sont de s'assurer que vous pouvez effectivement toujours voir le bouton pour ouvrir la superposition de coupon ici, et ils peuvent envoyer un coupon. Donc, avoir eu dans le bouton pour ajouter les coupons ici. Nous sommes probablement ajoutés dans ce coin supérieur, donc même s'ils défilent vers le bas, vous pouvez toujours cliquer facilement pour ajouter un nouveau coupon. Mais donc d'abord, nous devons réellement faire loin de sorte que vous pouvez cliquer sur la superposition d'ouverture à partir de n'importe quel site Web. Donc, il est de revenir dans un éditeur de code pour faire quelques modifications. Ok, donc nous sommes dans notre éditeur de code maintenant, et la première chose à voir est cette ligne juste ici. Donc, en ce moment, nous prenons la variable coupons juste ici et en boucle dessus avec les quatre chaque fonction. Juste ici. Maintenant, c'est génial si vous savez que vous aurez toujours du contenu à boucler, mais parce que nous savons que certains de ces domaines seront de l'argent vide pour changer un peu ça . Donc on va changer ça à la place pour dire pour la clé dans les coupons. Et ce sera Luke juste ici. Donc, si nous venons dans cette partie et au lieu d'utiliser cette variable de coupon, juste entendre de la pour chaque fonction, nous allons le définir nous-mêmes. Donc, si un coupon équivaut à des coupons sur les nouvelles, Katrina pense que correctement donc cela va regarder à travers chaque élément juste ici sur définir cette variable clé, et ce sera à travers la clé réelle. Vous voulez accéder dans ce tableau. Donc, ce sera chaque individu. Cooper aura une clé différente. Et donc nous pouvons accéder à l'objet comme nous l'avons fait auparavant. Mais cela signifiera qu'il n'y aurait pas d'erreur s'il n'y a pas de coupons. Assurez-vous juste que ce n'est pas là. Donc nous changeons cette ligne en ceci juste ici. Donc, après que vous avez fait ce changement, si nous sauvegardons cela sur actualiser et revenir sur le site Web à nouveau si frais. Rechargez cet autre domaine. Juste avant de le faire, nous devons nous assurer que nous enlevons ce support de fermeture juste ici parce que la fonction quatre H ouvre un support supplémentaire juste ici. Donc maintenant, nous avons seulement besoin d'un support bouclé juste ici. Braces Cali. Donc, si nous revenons en arrière, actualisez et réessayez. Cela devrait résoudre ce problème. Ok, on y va. Donc, nous pouvons voir une superposition de coupon apparaître maintenant. Donc, dans la prochaine vidéo va commencer à ajouter le style pour le bouton de soumission et la superposition qui apparaîtra lorsque nous cliquerons dessus, et nous allons ajouter un peu de texte juste fait ici pour dire, vous savez, vous pourriez être la première personne pour ajouter un coupon pour ce site juste pour leur donner un peu d' appel à l'action pour réellement créer sur entrer des coupons 11. Le formulaire d'affichage pour soumettre des coupons: Maintenant que notre superposition de coupon apparaît sur chaque site Web, nous devons nous assurer que nous sucons. Afficher un message distinct s'il n'y a pas de coupons pour cette page. Donc, nous allons ajouter un chèque juste après que nous avons fait cette boucle à travers les coupons ici et dire, Si le coupon html est vide, nous voulons exécuter ce morceau de CO. Juste ici. Alors bien, alors il suffit d'ajouter au coupon html et nous dirons, être le premier à soumettre un coupon pour ce site. Le correctif a été dedans. Donc, si nous sauvegardons cela et frais et jetez un oeil à notre page, assurez-vous juste de fermer cette balise de paragraphe. Nous devrions maintenant voir un message dans l'extension chrome. Donc, si nous allons sur un site qui n'a pas de coupons comme celui-ci, attendez que la page ouvre la superposition et il y a ce message juste là pour que vous puissiez voir qu'il s'affiche maintenant sur cette page. Bon, maintenant qu'on a un message qui apparaît ici, ils n'ont pas de coupons. Nous devons ajouter un bouton pour que les gens cliquent dessus, pour soumettre les coupons qu'ils ont pour ce lieu de travail. Donc, ce que nous allons faire pour cela est d'aller dans la zone HTML interne juste ici, et nous allons juste ajouter un nouveau développement, puis déplacé ceci sur une nouvelle ligne et nous dirons que soumettre le coupon ajoutera un nom de classe ici pour soumettre. Bas le nom de cette classe. Donc, si nous sauvegardons ceci et actualisons, nous trouverons un nouveau bouton. Étaient au style pour cela un T fin de cette vidéo. Et puis nous devons ajouter un autre élément ici pour créer la superposition réelle qui apparaîtra quand quelqu'un clique sur ce bouton. Alors à ça, juste ici. Ensuite, créez une nouvelle variable. Nous sommes appelés ce coupon soumettre superposition et c'est un nouvel élément de grue, qui serait une mort similaire à la volonté perforce à un nom de classe. Copiez cette ligne ici. Le nom de classe est le trait de soulignement. Soumettre la superposition sur le même qu'avant. Je vais passer par dans le CSS, mais je vais fournir le fichier CSS mis à jour que nous utilisons à la fin. Donc, si vous voulez, vous pouvez simplement copier et coller le CSS ou suivre avec moi et ensuite nous allons définir le HTML interne de cet élément. La houle. Donc, nous allons dire « aller ». Alors h 3, avez-vous un coupon pour ce truc sur le site ? Fermez ça sur une nouvelle ligne. Nous allons créer un certain nombre d'entrées qu'ils peuvent utiliser, Nous avons donc besoin d'eux pour nous transmettre le code réel et la description de ce que fait ce code. Donc, par exemple, c'est 50% de réduction, et enfin, il y aura un bouton en dessous pour envoyer le coupon. Donc nous avons juste eu ces éléments maintenant super chacun d'eux dans une journée d'André. Besoin de trois de ceux pour chacun d'entre eux. Ces parties de cette première ne seront pas le bouton avec ce dernier, et je dirai soumettre un coupon. Remerciez Christ. Le bouton ici, nous devons étiqueter qui disent l'étiquette de code ici pour dire la description. Et puis nous avons besoin des éléments d'importation réels aussi. Donc, vous faites cela tout comme vous le feriez généralement le type d'entrée est le texte dans la classe est le code. Nous copions juste cela sur le rythme que ici et juste changer la description de la classe Teoh ou disque mon meilleur pour court. Et puis nous avons juste besoin d'ajouter un nom de classe pour notre bouton de soumission afin que nous puissions avoir un écouteur d' événement quand cela est cliqué, puis presque terminé. Nous avons juste besoin d'ajouter un attribut mawr pour cet élément avant de l'ajouter sur la page pour nous assurer que vous avez fermé ceci juste ici. Donc, je veux dire coupon soumettre. L' affichage du style de superposition est égal à zéro car nous ne manquons pas d'apparaître tant qu'il n' a pas été cliqué. Un ambre juste au bas de la page. Assurez-vous qu'il s'agit d'une superposition de soumission de coupon. Donc, si nous regardons là-bas, nous pouvons voir que tout est correct et sauver. Nous actualisons simplement ceci et nous assurons qu'il n'y a pas d'erreurs. Cela fonctionne en douceur. Tu ne devrais rien voir apparaître. Si vous inspectez l'élément sur la page, vous devez trouver ceci du bas de la page, mais nous n'avons pas besoin de nous en soucier pour l'instant. Maintenant que nous avons soumis superposition ajouté à la page moi pour aller vers le bas et assurez-vous que nous créons un événement. Teoh Ensure disparaît une fois que l'utilisateur clique sur. Thèse. Bouton d'admettre ici. Donc, pour le faire, c'est moi de descendre à notre fonction de pré événement ici et d'ajouter un peu d'espace en haut. On y va, Teoh, copiez cette ligne. Ce sera un écouteur d'événement pour l'événement click. Juste la même chose que celle-ci ici ne fait pas quelques changements. Donc,au lieu d' Donc, attendre le bouton de coupon, nous allons écouter la liste de coupons et ensuite le bouton de soumission pour être sûr de fermer les crochets tous les deux ici. Et puis nous allons dire que la requête de document, style de superposition de soumission de sélecteur est bloc. Donc, fondamentalement, le contraire de ce que nous avions ici sur ce sujet avec eux. Assurez-vous que cet élément apparaît. Alors testons ça tout à l'heure. Donc c'est sûr ici. Rafraîchissez Andi. Rechargez une page. Donc, nous n'avons pas encore ajouté de style pour ces éléments, Mais si nous savons cliquer, soumettre un coupon, nous devrions trouver un chemin vers le bas de la page. Cet élément apparaît de cela n'a pas de style non plus. Mais si nous rafraîchissons et revenons simplement au bas de cette page, nous pouvons voir que cela n'a pas encore payé. Mais si nous cliquons sur la superposition sur le bouton de coupon soumettre, il apparaît alors à côté de moi pour ajouter du style pour vraiment s'assurer que d'abord, ce bouton est bien stylé et que cette superposition de coupon apparaît au milieu de l' écran juste ici afin que l'utilisateur puisse entrer son code promo et une description. Et puis enfin, nous avons besoin d'une fonction qui une fois qu'ils appuient sur le coupon de soumettre qu'il envoie une demande à la base de feu pour ajouter cette information dans une base de données. Dans la prochaine vidéo, on va regarder ces deux-là. Deux parties de ça feraient le style. Andi, ajoute la connexion à Fire Base pour envoyer ce code promo dans une base de données. 12. Nouvelle commande pour soumettre des coupons à la base: Bienvenue de retour. Donc, dans cette prochaine vidéo, nous allons d'abord créer une fonction que nous pouvons utiliser pour envoyer les coupons que les utilisateurs envoient dans notre base de données. Alors fais ça. Nous allons aller au sommet ici après que nous avons notre fonction d'envoi de message d'exécution chrome sur, nous allons créer une fonction similaire, mais pour soumettre des informations à la base de feu plutôt que de récupérer. Donc, nous allons commencer par créer une fonction variable comme celle-ci. Il a l'air d'une soumission. Continuez et encore, c'est une fonction et nous prenons trois paramètres que nous codons la description sur le domaine. Alors ouvre-toi comme si nous allons ajouter un journal de console juste pour nous aider t seau. Si nous avons besoin de steak suisse soumettre un coupon sur. Ensuite, nous allons juste passer à travers l'objet sur que nous voulons réellement envoyer à la base de feu aussi bien. Donc, ce sera la description de code à nouveau sur la principale. Donc, toutes les informations d'un passage et fondamentalement juste dans un objet tombé dans les variables plan . C' est la journalisation pour qu'on puisse le voir. Je suis juste là. Mais ensuite, nous devons dire le temps d'exécution chrome envoyer un message si similaire à ce que nous faisons ici . Ok, Onda, on peut copier ces taters de code pour gagner du temps. Donc, si nous prenons ceci juste un peu ici et collons, et ensuite nous devons changer la commande de fetch, c'est un post et puis dans les données, nous allons passer dans cet objet juste ici, comme ainsi et dans la réponse au lieu de en cours d'exécution des coupons passés, hum, fonction juste ici. On va utiliser une nouvelle fonction, ça va créer une seconde. Donc, il a appelé celui-ci soumettre un rappel de coupon, et cela prendrait les données de réponse sur le domaine à nouveau. Une houle. Donc, si nous prenons juste cette même fonction de rappel juste créée, ce sera une fonction, et cela prendrait la réponse sur le domaine. Et puis à partir d'ici, tout ce que nous voulons faire c'est cacher la superposition. Ils vont être Crease Lecter. Je veux juste obtenir soumettre, superposer, et ensuite nous disons et un affichage de style est non. Et nous sommes juste beaucoup à l'écran juste pour l'instant et dire coupon soumis. Donnez juste un peu de commentaires, mais je recommande de les coiffer un peu plus agréable si vous voulez réellement utiliser cela beaucoup . Case 6 Ambassade. Ce n'est pas la meilleure façon d'afficher les messages à l'utilisateur. Mais pour l'instant, c'est un processus parfait. Voyez ce que nous avons. Et on ne peut pas vraiment verrouiller ça sur la console. Une houle. On peut vérifier ces informations. On revient. Si vous avez besoin de déboguer l'un de ces éléments afin que vous puissiez vérifier la réponse, juste cela. Donc, ensuite, nous devons réellement aller plus loin vers la page à nouveau, où nous avons créé notre événement sur ajouter un écouteur d'événement pour la partie soumettre du bouton qui va réellement utiliser cette nouvelle fonction ont créé ici. Et puis nous allons dans un fichier Firebase en ajoutant ces événements séparés. Donc, nous avons le commandant fetch pour ajouter la commande post ici aussi. 13. Les détails de coupon de pousse vers la base de la base: bienvenue. Donc, comme nous avons mentionné la dernière vidéo, nous allons ajouter une fonction ici dans la fonction d'événements de caisse afin que nous puissions avoir un écouteur pour quand l'utilisateur remplit la superposition de coupon et soumet un coupon est que cela appellera la fonction que nous avons créé ici qui soumettent la fonction de coupon. Donc, nous devons essentiellement nous assurer que nous avons passé à travers le code sur la description à travers cette fonction. Donc d'abord la moyenne avant, comme nous l'avons fait avant. Copions l'écouteur d'événement. Juste un sexe et le temps sur changer l'obstacle à réellement écouter. Donc, pour cet exemple, c'est trop souvent et nous n'écouterons pas les sujets. Donc, si cet élément est cliqué, nous voulons exécuter ce morceau de code au premier que nous voulons faire est d'obtenir le code. Donc le code promo. Donc encore une fois, nous utilisons le sélecteur de requête et ce sera le code de superposition de soumission que nous avons juste ici. Donc être cette classe de soudainement trop et puis veulent accéder au code dans les achats. Nous avons utilisé ce nom de classe afin que cela pourrait être un accès juste comme ça, nous avons en fait un point pour le nom de la classe, puis le code. Ils ajoutent juste de la valeur pour s'assurer qu'ils obtiennent réellement la valeur d'importation de ce champ d'entrée que exactement la même pour la description comme celle-ci. Et puis tout ce que nous avons à faire est de passer ceci à la fonction de coupon de soumission comme ceci. C' est tout ce dont nous avons besoin pour dio à l'intérieur de notre app dot Js Donc, nous pouvons enregistrer ceci de temps en temps. Tout cela est lié. Le prochain que nous devons faire est de mettre à jour le fichier firebase, puis enfin ajouter notre style pour le vrai trop Okay, maintenant nous ne sommes pas firebase dot Js fichier. Nous devons nous assurer d'ajouter une autre vérification ici pour l'événement push réel. Donc, dans notre cas est une commande post ici, donc impérieusement chercher et ici nous disons post Donc, nous allons ajouter une autre instruction if sous celui-ci écoutant le post. Donc, nous savons maintenant que c'est là où aura le groupe d'admission de thèse sur les données à venir par ici . Donc, nous avons d'abord besoin de Teoh définir quelques variables, juste que nous avons fait le haut ici afin que nous puissions copier l'exemple de domaine, parce que nous aurons besoin de cela à nouveau, et ensuite nous devons obtenir le code. Ce sera le code de données de message sur le même pour la description. Ce sera un message Description des données. C' est assez simple. Mais maintenant, nous devons nous assurer que nous transmettons effectivement cela dans la base de données. Donc, à l'intérieur d'un bloc d'essai. Juste s'il y a des erreurs de la base de feu que nous ne pouvons pas prédire qu'ils ne vont pas simplement casser silencieusement swing pour capturer ces erreurs. Donc tu peux faire ça comme ça. Si j'épelle ça correctement, alors nous pouvons regarder l'époque comme ça, mais sinon nous sommes d'accord dans ce bloc juste ici pour exécuter le code que nous devons exécuter. Donc, nous commençons par dire nouvelle base de données post-firebase d'accéder à la base de mise à jour elle-même, la façon de définir une référence. Alors soyez dans le domaine. Et puis nous voulons utiliser ce domaine codé semble si très similaire à ce que nous faisons en haut ici. Nous allons dire, pousser et définir le code comme code sur la description comme description. Donc, c'est tout ce que vous devez faire ici, puis pour que nous envoyions la réponse à la volonté généralement de dire la nouvelle J'aime la nouvelle idée qui a été ajoutée dans la base de données. Donc, pour ce faire, nous disons juste des messages, Je d égale nouvelle clé de poste. Utilise donc cette référence ici. Et puis il y a une fonction Firebase qui peut être générée afin que nous puissions obtenir la clé unique de ce nouveau code promo. Et puis on vient de transmettre la réponse. Donc, encore une fois, parce que nous avons tout mis en place ici, nous pouvons simplement passer une réponse, semblable à celle des battus. Juste ici, au lieu d'être pour la commande fetch, c'est pour la commande Post. Donc, nous dirions simplement les résultats de type de réponse, a dit le statut à nouveau comme un succès, puis juste passé les données de retour comme le nouveau Post I D. Et la demande. C' est le message dit tout ce que nous devons faire pour nous assurer que nous avons passé cela dans la base de données , mais c'est assez arrière au lieu de simplement regarder dans la console que nous définissons une réponse séparée afin que nous ayons effectivement passé cela à Abdul Oui, plutôt que d'avoir simplement l'erreur dans cette page. Donc, vous venez de définir l'état ici comme erreur et de changer les données. Cela fait tout pour changer cette virgule, puis enregistrer et être sûr de cela ici. Une houle, euh, hors des moyens que vous pouvez rendre compte des heures parce que ce n'est pas un objet correct. Mais maintenant assurez-vous juste d'enregistrer, et nous allons exécuter l'extension chrome à nouveau. Trouvez-vous quand vous exécutez qu'il ne charge pas tout à fait dentée trop lorsque vous cliquez sur l' extension dans le coin supérieur droit ? Mais pour corriger cela, nous avons juste besoin de nous assurer que nous ajustons ce nom de classe juste pour exciter. soulignement sain manqué. Mais si nous mettons à jour ceci, enregistrez-le et exécutez-le à nouveau, nous pouvons commencer à voir l'extension apparaître. Donc, j'ai maintenant besoin d'ajouter un peu de style. Mais nous allons d'abord vérifier l'extension pour aller à notre recherche de coupons et rafraîchir. Nous allons ouvrir un domaine et ils peuvent voir ça ici. On a un coupon. Ne jamais envoyer bouton, ce qui signifie ajouter un style pour sur cette superposition qui apparaît également. Donc, dans la vidéo suivante, ajoutez un style de base pour notre superposition et demandez bouton soumettre 14. Ajoutez du style dans le bouton et la superposition: ensuite, nous devons ajouter un peu de style à notre superposition. Donc un bouton d'estimation. Donc on va aller dans notre coupon point CSS pile ici et faire défiler jusqu'au sommet. Et donc nous allons nous arrêter dans un style à notre superposition. On va appeler cette liste de coupons. Dave, je ne suis pas la seule histoire à beurré, Donc 1er 1 pour s'assurer que nous avons un peu de rembourrage Donc cinq pixels et 10 pixels pour la hauteur pour le haut et le bas dans la gauche et la droite a été fixé une taille de police de 10 pixels. Fond noir. Si vous voulez changer l'une de ces couleurs en cours de route, vous vous sentez libre juste de le faire ressortir pour nous. J' ai essayé de l'utiliser dans ça. Dans l'exemple jeu, une certaine couleur de police est bien formée famille sur. Comme je l'ai mentionné précédemment, vous pouvez copier le CSS ajouté après cette vidéo afin que vous puissiez saisir CSS là, donc je passe juste par et dans le reste du cas, c'est tout le style dont nous avons besoin pour nos boutons. Donc, si nous enregistrons l'actualisation, vérifiez-le, nous avons juste besoin de nous assurer d'ajouter un trait de soulignement à nouveau. Commençons par ici. Continuez de les rater. Donc pour rafraîchir à nouveau. Maintenant, ouvrez notre extension et ils peuvent voir que nous avons un bouton stylé. Donc, maintenant, nous devons ajouter un style pour notre superposition pour le faire apparaître au milieu de la page. Et je pense en ce moment aussi, mais cela est caché derrière les éléments de la page. Donc, en dessous où nous avons ajouté le debout pour le bouton, alors ajoutez un peu de style pour trop. Encore une fois, c'est à l'école. Soumettre superposition. Le 2ème 1 est un trait d'union, et cela peut être fixé comme une position définira une largeur de 220 pixels sont des hauteurs 200 pixels. Positionnez-le à mi-bas à partir du haut de la page et à 50% à partir de la gauche. Pour la marge à gauche, nous allons faire moins 110 pixels, ce qui est à moitié du fouet sur le même de l'ensemble supérieur de la couleur d'arrière-plan. La couleur de bordure comme index ed de l'apparaît au-dessus de chaque élément possible parce que nous travaillons avec différents sites Web ici, ils pourraient avoir des éléments flottants. C' est juste pour s'assurer que la superposition apparaît sur le dessus de n'importe quel contenu était une sorte de tapotement. Et nous pouvons utiliser cette propriété CSS de dimensionnement de boîte ici et dit sa boîte de bordure. Et enfin, nous textons la ligne en tant que centre. Donc, si nous sauvegardons ceci maintenant et puis rechargé l'extension sur un nouveau afin que nous puissions ouvrir son extension, nous pourrions soumettre le bouton. Et nous avons maintenant une superposition apparaissant sur la page. Non, ce n'est pas le plus beau, mais ça devrait être fonctionnel. Donc, si nous ouvrons une console cinq as et vérifions la base de données, nous allons ajouter une extension pour s'assurer que sont fonctionnellement maté de poster les coupons à notre base de données fonctionne. D' accord. Peut avoir remarqué cela sur votre code aussi, mais j'ai mal pris ici. Donc vous voyez la ligne de description, mais ce que nous avons supposé être un message. Donc, il semble changer cette ligne ici. Nous devrions avoir ceci correct sur la vôtre. Mais juste au cas où vous copiiez exactement ce qui est rectifié, je dois m'assurer de mettre à jour cette ligne juste ici. Mais sinon tout devrait être poussé vers votre base de données. Donc, je lance juste mon exemple à nouveau juste pour vous montrer afin que toutes les erreurs apparaîtront juste ici. Si nous sommes frais, rechargez la superposition d'ouvreur de page à ce code de réduction à une description et soumettez. Nous avons un message indiquant que Coupon a été soumis, et si nous vérifions maintenant une base de données, vous pouvez voir que cela est apparu fait ici. Et c'est l'idée de poste unique que nous avons mentionné précédemment afin que vous puissiez utiliser ce Teoh réellement afficher des informations différentes sur la page si vous voulez, Donc pour le moment ils ne apparaissent pas juste ici encore. Mais si vous actualisez cette page parce que c'était pour ce nom de domaine et que nous rechargeons, vous pouvez voir qu'elle apparaît juste ici. Donc, dans la section suivante du cours, nous allons faire quelques ajustements que si vous cliquez sur la déchirure des autocars de réduction, il va copier dans votre presse-papiers afin que vous puissiez ensuite simplement le coller dans votre voiture. Andi fera quelques derniers ajustements et les zones de style comme celui-ci. Je m'assure que vous pouvez fermer cette superposition et juste plus de touches de finition sur. Ensuite, nous allons regarder comment vous pouvez réellement publier votre attention criminelle sur lemagasin d' extensionchrome magasin d' extension 15. Copier le coupon dans le clipboard et la cloison: ces nouveaux articles, comme nous l'avons mentionné avant de poursuivre, seront laissés de côté. Donc nous allons faire en sorte que quand vous cliquez sur ce code promo juste ici, ils seront copiés dans votre presse-papiers. Et nous allons aussi ajouter un événement pour que nous puissions fermer. Cette superposition fera des clics ajoutera un bouton ici afin que vous puissiez simplement cliquer. Andi a fermé la superposition, mais d'abord, on va travailler sur cette zone ici, donc on fait une copie à l'interview du Presse-papiers, on clique sur n'importe lequel des codes. Donc, il est de revenir dans notre éditeur de co et commencer à ajouter les fonctions de la. Le cas d'ici Nous sommes de retour dans cet éditeur de code, et nous allons faire défiler vers le bas jusqu'à l'endroit où nous avons des fonctions d'événement ici et nous allons ajouter une nouvelle fonction juste au-dessus de cela. Ils seront en fait la fonction de copie dans le presse-papiers, donc ce serait une nouvelle fonction. Voici une copie dans le Presse-papiers, et cela prendrait une chaîne que nous voulons copier. Et donc ici. Ce que nous voulons fondamentalement faire est de créer une zone de texte temporairement et va entrer Ah, une chaîne comme valeur de cette zone de texte, sélectionner, copier et ensuite supprimer la zone de texte afin que nous commencions simplement par créer l'entrée. Et ce sera, comme nous l'avons mentionné, un nouvel élément hors zone de texte. Et puis nous allons définir le en HTML pour être demandé Drink comme ceci et ensuite nous avons juste besoin de l'ajouter sur la page. Donc, utilisez un enfant de stylo à nouveau à l'événement MPA ou élément d'entrée, et puis nous venons de le sélectionner dit va sélectionner tout le contenu de la zone de texte, essentiellement en quelque sorte de faire cela donc il est juste de le sélectionner. Et puis on veut que Teoh tapis soit dans le presse-papiers. Il y a un certain nombre de façons différentes de le faire, mais la meilleure façon sur chrome, qui est où l'extension sera sur qui supporte et la plupart des navigateurs, est d'utiliser cette fonction de commande exécutive comme celle-ci et éventuellement avoir copie. Donc, c'est une copie de commande X E C, et alors tout ce que nous avons à faire est de supprimer l'élément que nous venons de créer comme ceci. Assurez-vous que vous avez correctement supprimé l'orthographe. On y va. Nous créons donc l'élément défini dans l'enrage à fraiser comme chaîne, ajoutant à la page, en la sélectionnant, en le recoupant, puis en le supprimant de la page. Et puis nous venons de retourner cette fonction. C' est donc notre fonction de copie dans le presse-papiers. Maintenant, nous devons réellement l'utiliser. Donc, ici, nous allons créer un nouvel événement sur cet événement sera similaire à ce que nous avons fait auparavant . Sélecteur de requête de document Parler. Mais cette fois, je veux dire que Chris aimait tout. Donc, nous sélectionnons tous les éléments sur la page qui auront cette classe correspondante et nous allons chercher une liste de coupons. Assurez-vous que vous avez souligné la liste de coupons et puis nous cherchons la classe de code ici aussi, qui correspond à la classe de classe Teoh ici. Donc, la classe span est le code. J' ai regardé tous ces éléments, et ensuite on va vérifier ici. Donc, nous les appelons élément de code, et puis nous allons juste courir à nouveau. C' est essentiellement comme ajouter un écouteur d'événement à chaque élément individuel avec cette classe, donc s'attendre à tous, boucle, et puis nous disons juste élément de code à l'écouteur d'événement sur le clic, et alors ce sera fondamentalement la même chose. C' est là que tu ne le fais pas normalement. Mais à l'intérieur ici, nous pouvons maintenant exécuter du code comme si c'était sur chacun de ces éléments individuels sans avoir le secteur de l'équipage. Toute cette fosse ici fait qu'elle soit exactement comme elle le serait. Un sui l'a créé ici. Donc à l'intérieur ici, nous avons juste besoin de dire Coach String est élément de code dans le prochain TML et ensuite nous disons juste copie presse-papiers Coach, String comme ceci. Cela ajoutera un écouteur d'événement orteil tous nos codes coupon quand ils cliquent dessus. Il les copiera dans le presse-papiers. Donc c'est sûr sur ça. Revenons à notre extension du crime. Rafraîchissez, Andi, voyez ce que nous avons. Alors actualisez et revenez à l'extension. Pourrait sortir de ce coupons coller et nous pouvons voir que c'est coller. Je fais face aux événements que nous venons de frapper qui fonctionnent correctement. Ensuite, nous voulons nous assurer que nous pouvons fermer cela trop, donc nous allons ajouter un élément span du haut ici quand il est cliqué. Il va fermer cela trop. Ok, donc d'abord nous allons ajouter un élément span. Donc, là où nous avons notre superposition, nous allons ajouter une travée juste ici et déplacer cela vers le bas sur une nouvelle ligne. Assurez-vous qu'il y en a un tout juste là sur un seul tremblement de terre, juste là pour commencer. Et nous disons que la classe est proche et ensuite nous mettons juste un X entre parenthèses et dire Fermer. C' est tout ce dont nous avons besoin pour notre bouton. Et puis on retourne à la zone des événements et on va juste ajouter une autre équipe Les états peuvent effectivement copier celui-ci ici et coller Andi à la place. . Arrête de courir ici. Ce sera la superposition soudaine elle-même, et ils étaient à la recherche de la classe de vêtements. Cela va trouver la superposition de l'objet et ensuite demandé Band que nous venons de créer et au lieu de faire bloc de rechange, il s'affichera comme aucun. Alors j'ai sauvé ça. Retournez à l'extension. Rafraîchissez, André, lancez le boîtier. Nous ouvrons notre superposition. Maintenant, nous avons ce texte proche, et si nous pouvions le kit, il ferme la superposition. Donc, nous l'avons là. Donc, nous avons notre extension qui peut afficher différents codes promo. Vous pouvez envoyer des codes promo, Andi. Il peut ensuite cliquer pour copier n'importe quel code et les utiliser sur votre site. Dans la vidéo suivante, je vais peindre comment vous pouvez soumettre un dysfonctionnement au magasin d'extension chrome et penser à quelques façons que vous pouvez améliorer cette extension à la fois en termes de style sur les différents cas d' utilisation et de performance que vous voulez pour en sortir. 16. Comment publier l'extension Chrome: Bienvenue à la dernière section de ce cours maintenant. Jusqu' à présent nous avons traversé et nous avons créé notre extension. Nous l'avons connecté à une base de données basée sur le feu. J' ai eu toutes les interactions que nous voulions et de la base de données pour montrer des coupons. Mais réfléchissons rapidement d'abord dans la première partie de cette vidéo sur différentes façons. Nous pourrions améliorer cette extension si nous voulions Teoh, faire prendre en charge plus d'utilisateurs et ajouter plus de fonctionnalités pour eux. Jetons un coup d'oeil à notre extension ici. Donc, nous l'avons ici. Juste qu'on a construit. Nous avons notre bouton ici et ça ouvre cette superposition. Maintenant, la première chose qui me distingue est que la conception de ceci est très, très basique. Donc, la première chose que je suggère pour vous de regarder et peut-être regarder des sites Web comme dribble dot com, nous pouvons trouver un bon design. L' inspiration est différente. Vous pouvez modifier ce point de départ de pistolet pour ajouter votre propre saveur unique à cette extension. Andi, changer le design et juste sur l'affichage de ceci un peu maintenant, en termes de fonctionnalités qui pourraient fonctionner assez bien. Une chose ne suggère pas de regarder dans est d'ajouter une option de vote juste ici afin que vous puissiez faire, comme, pouces vers le haut ou pouces vers le bas pour voir si cette extension. Si ce code promo a fonctionné pour les différents utilisateurs, alors vous pouvez rapidement voir quels coupons ont été bons pour les gens dont ceux n'ont pas fonctionné. Ça pourrait être une bonne option. Toe Ada va bien, et maintenant une autre chose qui pourrait être très utile pour votre extension est un moyen que vous pouvez rechercher. Donc, si vous pouvez imaginer, si vous allez dans un magasin a beaucoup de codes de coupon différents, il pourrait être assez écrasant pour les commandes répertoriées ici, donc il pourrait être utile d'ajouter une boîte de recherche ici. Non, je ne vous montrerai pas encore de vidéos sur la façon dont vous pouvez le faire. Vous pouvez faire ces sortes suggérer d'essayer de mettre en œuvre vous-même les besoins, en particulier en commençant par changer la conception. Si vous avez des questions sur la façon dont vous voudriez y parvenir, hésitez pas à m'envoyer un message ou à le déposer dans la boîte de questions. Mais ce sont les différentes façons que vous pouvez commencer à vraiment ajouter des fonctionnalités supplémentaires à l' extension et rendre le design un peu plus votre propre. Ok, donc dans la deuxième partie de cette vidéo, nous allons examiner comment vous avez réellement publié ça à la porte des extensions du crime. Maintenant, il y a une écriture complète à ce sujet de l'extension chrome, comme le site de documentation. Maintenant, ça va toujours être à jour. Donc j'enregistre ça en mai 2020. Donc, au moment où tu regardes ça, ça aurait pu changer légèrement, mais par hasard, je serais à peu près la même chose que cette structure. Donc la première chose qu'ils ont mentionné faire est fou d'un fichier zip. Mais une chose qui peut souvent être oubliée est que vous avez besoin d'une icône. Donc, si nous avons un coup d'oeil à l'extension juste ici, nous pouvons voir l'in et le manifeste. Nous avons juste la description de la version de nom, les autorisations, contenu d' arrière-plan, les scripts et ainsi de suite. Mais vous avez également besoin d'avoir une icône. Um, option ici. Maintenant, ce sont des images Theo que vous devez avoir pour pouvoir publier votre extension, donc je vais vous montrer à quoi cela ressemble dans la documentation ici. Ok, donc chaque extension chrome a besoin orteil avoir une icône dans le fichier manifeste. Maintenant, vous devez avoir un Nikon qui est d'au moins 128 pixels par 128 pixels pour une extension. Ou vous avez besoin d'une autre icône de 48 x 48 pixels, et vous pouvez également avoir une icône de 16 par 16. Cela apparaîtra ici, mais la seule façon de le faire est d'ajouter un périmètre comme celui-ci. Donc, ce sont des icônes, et vous avez juste un objet avec chacune des icônes de différentes tailles et puis où l'image se trouve dans votre dossier. Donc, une fois que vous avez ça, tout ce que vous avez à faire est d'aller dans votre bergerie. Nous avons vos fonctions de coupon. Assurez-vous d'ajouter votre icône ici et de mettre à jour votre manifeste lié à cela, puis vous venez de compresser ou de vous transformer en est-il ? Et puis vous êtes prêt à télécharger ceci. Pas besoin d'aller au tableau de bord du développeur de porte Web chrome sur la création d'un nouvel élément. Si vous n'avez pas encore de compte pour le tableau de bord du développeur, vous devez créer un compte développeur sur un huileux à faire est de cliquer sur Nouvel élément donc une fois que vous faites cela, vous êtes alors parcourir et sélectionnez le fichier ZIP que vous venez de faire. Donc, une fois que vous sélectionnez cela, il va commencer à traiter et télécharger votre extension, et maintenant vous pouvez remplir toutes les informations que vous voulez ajouter. Les extensions de carburant de tout cela proviennent du fichier manifeste. Ensuite, vous pouvez ajouter une description plus détaillée. Catégorie sélectionnée. Sélectionnez une langue sur. Ensuite, vous pouvez ajouter plus de captures d'écran ici, ce qui est certainement recommandé. Si vous voulez que les gens puissent, Teoh, téléchargez votre extension. Cela le fera se démarquer. Maurin la porte des extensions, et vous pouvez ajouter un lien vers votre site web ainsi que sur les liens de support. Nous n'avons pas besoin de ces, et vous pouvez également avoir Google Analytics pour le suivi pour voir combien de personnes trouvent votre extension, Liste sur combien de choses en cliquant dessus et puis tout ce que vous devez faire après cela est de cliquer enregistrer le brouillon et le soumettre pour examen. Cela ne devrait normalement prendre que quelques jours, parfois jusqu'à une semaine et des chansons. Vous avez votre icône là-dedans. Si vous n'avez pas votre icône, elle ne passera pas cette évaluation, il est donc important de vous assurer que vous l'avez. Maintenant, il y a différentes façons. Si vous voulez facturer une extension, il y a quelques étapes supplémentaires, vous devez donc vous assurer de choisir un système de paiement. Andi, il y a quelques options différentes. Nous devons nous assurer que la houle lorsque vous vous inscrivez, vous payez les frais de développeur, qui au moment de l'enregistrement est de 5$. Je vais juste vérifier ici. Oui, il y a des frais d'inscription de 5$. Vous avez donc des questions sur la façon de publier ? Il suffit de déposer un message dans la zone des questions, et j'essaie d'aider le mieux que je peux. Mais cela devrait vous donner un rapide que je voudrais sur la façon dont vous allez créer une extension et réellement définir dans cela. Vivez sur le magasin de chrome pour que vous puissiez faire votre extension. Et une fois que vous avez téléchargé votre extension, si vous apportez des modifications, vous pouvez aller dans la section du paquet juste ici et télécharger un nouveau package. Eso mis à jour le fichier zip Si vous avez apporté des modifications et essayez simplement de vous assurer que dans votre manifeste vous modifiez le numéro de version afin que tout continue d'être mis à jour 17. Merci d'avoir suivi ce cours !: Ainsi, comme vous l'avez mentionné dans la dernière vidéo, il y a plusieurs façons de faire avancer cette extension. Maintenant, j'aimerais voir quelles créations vous venez avec. Donc, si vous avez fait un contact avec moi sur instagram ou si vous envoyez un enregistrement de votre cours, envoyez-moi un message ici avec ce que vous avez réussi à créer. Ils ont des questions en cours de route. Faites-le moi savoir aussi. Mais merci beaucoup d'avoir suivi ce cours. J' espère que vous avez trouvé une certaine valeur à partir de cela serait sûr de vous revoir en disant 18. Vidéo Bonus - La définition automatique (La vidéo d'applis a de l'auto (Code source dans la section des ressources): Dans cette vidéo, nous allons examiner comment vous pouvez exécuter une fonction en JavaScript sur plusieurs pages. Donc nous allons utiliser la partie de stockage local du navigateur pour stocker dans l'état de notre fonction jusqu'où nous avons progressé. Et puis nous pouvons ensuite écouter pour voir ce qui s'est passé sur la page, puis ajuster notre fonction, puis continuer à courir le reste de celui-ci afin qu'il puisse fonctionner entre ces chargements de page, cette vidéo, l'exemple que je vais utiliser est un coupon fonction de remplissage automatique. Nous avons donc une liste de coupons qui veulent appliquer à notre panier. Donc je lui ai fait un site de prétention juste pour le panier dessus. Et il y a des coupons qui vont marcher et il y en a qui ne l'étaient pas. Je vais vous montrer à quoi ressemble le site. Ok, donc voici le site juste ici à gauche. Donc, nous ignorons le code à droite pour l'instant. On y arrivera dans un instant. Donc, comme vous pouvez le voir, nous avons juste un exemple, Order Total ici et la liste des codes promo qui sont valides. Donc, si je devais taper l'un de ces 320 et appliquer, le rabais est fait une différence. Si je devais m'en débarrasser et appliquer la réduction, ça l'enlève. Donc, c'est vraiment, vraiment simple. Est-ce que fonctionne sur le backend, Musharraf ou tout le code de cela ensuite aussi bien. Mais c'est comme ça que ça marche. Et puis j'ai cette fonction ici. Donc, si je clique sur ce bouton, va courir à travers rayon de coupons. Est-ce qu'on a de tels ceux-là ? Donc, l'un d'entre eux est dans ce tableau ou dans cette liste. Donc, ce devrait être le coupon que nous utilisons. Donc, tout de suite pour ce premier exemple ne va pas recharger la page, mais nous pouvons voir ce qu'il fait ici. Donc, si je clique sur ce bouton, vous pouvez voir qu'il vérifie chacun des coupons. Vérifiez-le. L'outil auditif le fait. Et puis il nous dira lequel le mieux. Donc, nous avons celui-ci ici que beaucoup différent, alors alors applique cela après. Donc c'est comme ça que ça marche. Il est exécuté à travers le code dans un instant et montrer exactement comment cela fonctionne. Donc, si je devais changer cela de besoin de recharger false, pour avoir besoin de recharger true. Ou ça va recharger la page à chaque fois. Donc je vais juste ajouter la console ici. Et si nous venons de rafraîchir et d'exécuter cette fonction à nouveau, donc si nous cliquons sur ce bouton disant maintenant attendre que la page se recharger. Imaginez donc cet exemple que lorsque nous cliquons sur Appliquer la remise, cela dit au serveur de vérifier ce coupon et il recharge la page. Mais parce que ce n'est qu'un exemple, je vais juste être ce serveur. Donc, ce qui est clic recharger chaque fois qu'il demande. Donc ça va vérifier ce coupon. Et puis il demande encore frustré. Alors j'appuie à nouveau. Ça va recharger, vérifier celui-là. Il va lire à nouveau. Ici, ça va. Et puis une fois de plus. Et puis je pars et il sait toujours lequel était le meilleur de tous ces temps. Donc, même s'il a rechargé la page et que la session ait changé, il a toujours conservé l'état d'une fonction entre tous ces appels. Donc, comme vous pouvez le voir, il y a un gagnant de coupon là-bas. Et je clique sur OK, puis l'applique à nouveau. Maintenant, cela fonctionne à cause du stockage local. Maintenant, ce que nous faisons est de définir un objet que nous continuons à mettre à jour chaque fois que nous exécutons une fonction. Donc, je vais passer en revue le code dans un instant, mais c'est dans un sens comme cela fonctionne. Donc nous l'avons fait. Le stockage local avec lequel nous créons un objet. Et puis nous mettons à jour cet objet à chaque fois, puis exécutons à nouveau une fonction. Et quand cette fonction se charge, elle va d'abord dans les histoires locales pour voir, sommes-nous en train d'exécuter cette fonction ? Donc, si nous sommes un continue le processus et si nous n'avons pas exécuté la fonction et nous l'avons demandé de commencer, il commence à l'exécuter, si cela a du sens. Donc, vous pouvez voir tout cela à partir de l'onglet Application juste ici. Et si vous allez au stockage local. Donc, si je recharge ceci maintenant avec cette ouverture, vous devriez voir cela en fait comme il se déplace. Donc, si je clique sur commencer ici, vous pouvez voir ce qu'il fait. C' est donc d'élargir un peu cette fenêtre. J' ai fait exploser ça. Donc, ce que nous faisons ici, c'est que nous avons un objet sélecteur. Donc, dans cet exemple, pour appliquer un code promo, quelques choses différentes que vous devez avoir. Donc, au lieu de simplement l'écrire pour un site particulier, si vous avez écrit une extension Chrome, par exemple, vous en avez besoin pour vous assurer qu'il fonctionne sur beaucoup de sites Web différents. Il est donc important de garder cela à l'esprit lorsque vous créez votre code. Donc, somme, processus de vérification ont le coupon que vous entrez le coupon, puis appuyez sur Entrée certains d'entre eux, vous entrez le coupon, puis appuyez sur un bouton. Certains d'entre eux le patient doit recharger. D' autres fois, tout fonctionne sur la page de sorte que vous l'entrez et appuyez sur un bouton, puis ils appelleront cela dans les coulisses sans recharger la page. Donc, ce temps, vous devrez peut-être définir le nombre de secondes, puis attendre que la page change, puis entrer et récupérer le panier. Donc, comme vous pouvez le voir ici, c'est ce que nous faisons. Nous avons donc les champs de coût tels que cette zone juste ici avec un préfixe de champ de coût. Donc c'est pour s'assurer qu'on retire le signe du dollar, le signe de la livre sterling ou quelque chose comme ça. Donc, si c'est un caractère, il suffit de le supprimer du devant de la chaîne. Nous avons ensuite le type de coupon. C' est, comme je l'ai dit, un bouton que nous devons appuyer ou faut-il appuyer sur Entrée ? C' est si le patient a besoin de recharger ou non. Donc, comme la chose comme a changé plus tôt. Donc, s'il n'a pas besoin de recharger, nous appelons la fonction et ensuite il suffit d'attendre et d'utiliser une minuterie si elle n'a pas besoin de recharger au lieu de, vous savez, poids dans saisir les changements au total du panier sur cette page. Nous attendons que la page se recharge, puis l'exécutons une fois la page ouverte. Alors je vais te montrer ça dans un instant. Ensuite, nous obtenons le coupon rempli. Donc c'est juste cette entrée juste ici. Et puis un bouton de soumission. Donc c'est ce bouton juste là. Et puis on a un temps d'attente. C' est donc le nombre de millisecondes que nous devrions attendre. La page à modifier. Il y a parfois certaines pages prennent un peu plus de temps que d'autres pour que nous puissions entrer et faire cette vérification est ce que nous avons ici. Ensuite, nous avons une fonction, une variable ici qui vérifie si l'extension ou si le code est en cours d'exécution. Donc, dans cet exemple, il est en cours d'exécution. Donc, ça veut dire quand j'appuie sur recharger, parce qu'il attend que je le recharge juste ici. C' est comme ça qu'il sait faire ce même chèque. Donc, ici, nous avons la valeur du panier de départ. Donc en fait, c'est faux parce que, parce que je l'ai couru après, exécutez-le avant, il avait le total du panier déjà réduit. Donc, ce serait intéressant de voir comment ça fonctionne là-bas. Voici le coupon actuel qu'il vérifie. Donc, nous gardons une trace de ce qui va beaucoup vérifier. Et là, je veux te montrer ici. Ce sont les coupons qui sont chèques. Donc, si je rafraîchis la page ici comme si elle allait passer par les vérifications réelles. Vous pouvez voir maintenant est mis à jour et a dit que nous avons déjà vérifié ce coupon. Et à moins que cette puce soit correctement, donc si nous, donc si nous actualisons maintenant la page, attendez deux secondes. Vous pouvez voir les chèques à nouveau, donc il y a la meilleure affaire. C' est celui-là qui voit ce qu'était la vallée quand il a appliqué ce code. Et il sait que ce coupon était celui qui avait la meilleure affaire. Et puis il y a ceux qu'il est vérifié est actuellement en train de vérifier ce prochain ID de coupon. Donc, si on voit alors que ça nous attend pour recharger. Donc, si nous revenons à cette page ici et actualisons, nous devrions le voir mettre à jour ce tableau juste ici, ils vont à la suivante. Et en attendant, il vérifie maintenant que le prochain CTO passe par chacun de ces contrôles. Et la raison pour laquelle il y a ce léger retard est parce que, comme nous l' avons mentionné ici, nous l'avons réglé à deux secondes ou deux mille millisecondes. C' est ainsi que cela fonctionne à partir de cette vue juste ici sur l'extrémité frontale. Maintenant, regardons le code et voyons comment il fait réellement cela. Ok, donc voici le code que nous exécutons sur cette page. La première chose que nous avons ici est que certains objets. Donc, comme je l'ai mentionné, il est créé d'une manière qui peut être adapté pour travailler sur de nombreux sites différents. Donc, comme nous le voyons juste Timmy sur les coupons est notre gamme de coupons que vous voulez vérifier. Maintenant, probablement lorsque cette fonction est réellement utilisée dans une extension, cela vous passeriez comme le dernier élément. Donc, vous auriez tout cela pour vos sites réels. Vous pouvez les amener à partir de votre base de données, peut-être là où vous avez réellement les informations différentes pour chaque site sur lequel votre extension fonctionne. Et puis vos coupons seraient de la même manière, mais probablement stockés ailleurs. Donc c'est comme ça que nous avons. Ensuite, nous avons un champ de coupon, comme nous l'avons mentionné il y a une minute, je soumets bouton s'il a besoin de recharger ou non. Je ne suis pas vrai ou faux. Mes types de coupon que nous boutonnons ou entrons, temps d' attente en millisecondes. J' ai le champ. Alors combien la primitive de requête de ceci ici, le QuerySelector de cet id ici. Donc c'est un nom de classe, le même que celui-ci ici. Et puis le préfixe de la valeur du panier. Alors ce que nous avons fait ici, c'est que nous utilisons le stockage local est la première place. Tu verras ça. Si l'exécution vérifie une partie de notre élément de stockage local est en cours d'exécution, continuez à exécuter des vérifications, aussi simples que cela. Et puis ici, nous avons juste un écouteur d'événement simple qui démarre les nouvelles vérifications. Donc, si nous ne l'exécutons pas automatiquement en arrière-plan parce que nous avons déjà commencé, nous ajoutons un événement click à ce bouton ici afin que nous puissions démarrer cette fonction et commencer à fonctionner. Donc si on fait défiler vers le haut, je vais vous montrer un peu plus de ce que ça fait. Donc, le premier morceau de JavaScript que nous avons sur cette page est juste où créer un nouvel objet pour la fonction. Et puis cela inclut tout le reste après. Donc voici notre mauvais chèque de coupon. Nous avons défini un tableau vide pour les coupons d'actifs. On n'a pas vraiment besoin de faire ça juste ici. Et puis voici la première sorte de fonction principale que nous provoquons. Nous avons notre fonction de vérification d'exécution juste ici, qui prend dans l'objet sélecteur et le statut. Donc, ça l'est. Par défaut, il sera démarré, donc nous voulons démarrer la fonction. Mais si vous voulez continuer, donc si vous voulez exécuter cela sur les charges de page, alors il dira continuer. Ce n'est pas seulement avoir un chargement de page. Disons pour cet exemple, nous l'utilisons entre chaque vérification afin que cela fonctionne dans les deux sens. Donc, nous y allons, nous vérifions quel est le statut. Donc, si le statut est le début, il y a quelques choses que nous devons définir ici d'abord. Ainsi, comme vous pouvez le voir, nous définissons la partie vérification de l'exécution du stockage local sur l'exécution. Donc, vous venez de définir cela comme cet élément de jeu, le nom de l'élément, puis la valeur ici. Ici, nous obtenons les valeurs du panier. Si je le déplace un peu, un peu plus facile à voir, nous obtenons la valeur du panier, donc nous utilisons nos champs de coût Select Object. C' est le nom de classe que nous avons transmis dans cet objet au début. Donc, nous l'utilisons dans le QuerySelector juste ici, puis saisissons le contenu de ces éléments. Autrement dit, ils vont prendre cette partie juste ici. Ensuite, ce que nous faisons est de nous assurer que nous transformons cela en un format que nous pouvons savoir qu'il sera là. Donc, cela pourrait être une chaîne, pourrait être un nombre, mais nous nous assurons que nous l'avons comme un flotteur avec deux décimales. Donc, dans cet exemple, il est envoyé colonne en dehors de cette chaîne juste ici. Nous définissons ensuite ceci comme la valeur de panier de départ quatre, une fonction. Donc nous devons savoir ce que le panier est en marche avant qu'il ne fonctionne quoi que ce soit afin de comparer les différents coupons à ça. Ensuite, nous ajoutons une autre partie à l'objet de contrôles de coupon juste ici. Donc, nous avons notre meilleure affaire. C' est là que nous vérifions plus tard la fonction lorsque nous courons pour voir quel coupon est le meilleur, nous le comparons à cela. Nous commençons donc par avoir la valeur de panier existante que nous avons ajoutée ici. Et puis nous ajoutons un espace ici pour dire quel coupon était le mieux. Et puis nous avons juste mis un autre tableau ici qui est tous les coupons que nous avons vérifiés. Ensuite, nous avons juste mis ceci, donc nous disons un coupon actuel. C' est donc un stockage local qui, quand on s'est enregistré en ce moment. Donc, c'est un vide, mais nous nous assurons que c'est dans le stockage local partout où le verrouillage de la console ici, qui est utile juste pour voir comment cela progresse. Donc, c'est plus difficile lorsque vous créez cela tout en partageant ou le code comme je l'ai mentionné avec cette vidéo. Et puis nous envoyons tout cela à des vérifications de coupon partie de notre stockage local, mais assurez-vous de transformer cela d'un objet en une chaîne JSON. Donc, dans le stockage local, il n'est pas stocké en tant que variables que vous pouvez y accéder via un objet. Vous devez vous assurer que ce n'est qu'une chaîne. Donc vous convertissez ça juste ici. Et puis c'est tout ce dont vous avez besoin pour commencer ça. Si nous voulons alors continuer à exécuter la fonction qui est cette partie du code juste ici. Donc, comme vous pouvez le voir, la première chose que nous devons faire est de saisir l'objet sélecteur existant. Il est donc important que nous ne définissions pas ça à chaque fois. Donc, nous sauvegardons cela dans le stockage local et ensuite nous avons utilisé JSON pass pour nous assurer que c'est maintenant un objet que nous pouvons interagir avec et que nous pouvons utiliser. Et on a fait la même chose pour les chèques de coupon juste ici. Donc, c'est l'objet que nous venons créer afin que nous ayons dessiné pour le sélecteur et pour les contrôles de coupon. Et puis nous avons juste un peu de connexion à la console pour dire que nous continuons. Ce n'est pas une toute nouvelle exécution d'une fonction avec continuer à ici. Ce que nous avons ici, c'est un chèque à voir, sommes-nous en partie en vérifiant un sur les coupons ? Alors nous disons, quel est le coupon actuel ? Si elle est vide, nous n'avons pas besoin de le faire, mais si elle n'est pas vide, continuez à vérifier ceci. Donc, pour donner un exemple, si la page doit recharger à chaque fois, ce qui va se passer est que nous avons la première partie de la vérification du coupon est où nous entrons le coupon dans le champ de saisie ici, puis appuyez sur le bouton, puis la page se rechargera. Et puis lorsque la fonction s'exécute pour la première fois après cela, elle arrivera à ce point de notre code. Et puis nous voulons nous assurer que nous retournons faux. Donc, il arrête d'exécuter n'importe quel code après cela, et puis il continue à vérifier ceci, ceci, ce, ce coupon. Donc, dans cet exemple, ce que cela ferait, c'est qu'il saisira la valeur du panier là-bas et comparera avec le panier étoile pour voir qu'il a réduit le coût du tout. Donc si c'est le cas, si nous ne vérifions pas actuellement un, ça continue vers le bas. Donc nous avons juste ceci ici est un, un chèque à voir. Nos objets sélectionnés sont-ils valides dans un sens. Donc, vous êtes probablement vérifier cela un peu plus en détail, mais cela montre juste comment vous pouvez voir. Si nous avons une propriété de sélecteur de requête sur cet objet. Sanctuaire sélectionnez le champ de saisie juste ici. Sinon, si elle est là, nous continuons simplement à exécuter la fonction. Donc c'est là qu'on a ça. C' est là que s'il n'a pas ça, on a tué une fonction là-bas, sinon on continue vers le bas. Donc, ensuite, nous avons juste mis un tableau de coupons dans une variable plus accessible juste ici. Donc vous pourriez utiliser une gauche ou une const ici. Mais encore une fois, nous avons juste obtenu cela comme variable, nous gardant tous simples ici. Et nous avons les noms actuels des élèves. Nous sommes juste en train de définir une variable juste ici avec nos prochains coupons de chèque. Donc, ce que cela fait essentiellement, c'est que nous avons notre gamme de coupons que nous voulons vérifier, et nous avons un coupon actuel. Et puis nous créons une boucle for qui bouclait à travers ce tableau de coupons. Et nous vérifions si ce coupon a déjà été vérifié. Nous avons donc une gamme de coupons vérifiés et notre gamme de tous nos coupons. Donc, ce que nous faisons, c'est que nous disons, cet équivalent a été vérifié ? Si c'est le cas, ne faites rien. Mais s'il n'a pas ajouté ceci à notre prochain coupon vérifié ou à notre prochain chèque. Et cela signifie un coupon à la fois. On va vérifier. Donc ça signifie normalement que nous allons vérifier le dernier coupon du tableau. Donc, comme il est en boucle à travers tout, ça va écraser chacun. C' est bien pour cet exemple. Donc, une capture de cette dernière partie de notre tableau qui n'a pas encore été vérifié et définissez ce prochain coupon de vérification. Ensuite, plus bas, ce qu'on fait, c'est qu'on dit que si le prochain coupon est vide, alors on avait un coupon qu'on doit vérifier. Donc, nous passons cela dans l'étoile de coupons de chèque avec un objet de sélecteur et le nom du coupon que nous voulons vérifier. Je vais vous montrer ce que cette partie fera ensuite. Mais sinon, s'il n'y a pas de coupon ici, donc si c'est vide, cela signifie que nous avons vérifié tous nos coupons. Donc, tout ce que nous devons faire est de ranger et d'afficher le résultat de l'exécution de cette fonction. Donc, nous supprimerions simplement les vérifications de prochaine exécution afin que nous n'allons pas exécuter la fonction lorsque la page se recharge. Et nous disons juste à la console de s'arrêter dans cette fonction. Et nous, eux, nous faisons ensuite un chèque pour voir quelle était la meilleure affaire. Donc, dans ce code juste ici. Nous savons que nous avons un nom à propos de la meilleure affaire. Donc, un coupon en a un, essentiellement ceci, cette comparaison. Donc, ce que nous faisons est de relancer cette fonction pour que le coupon soit appliqué à notre panier. Parce que ce qui pourrait arriver si vous exécutez trois coupons différents et que le premier était la meilleure affaire, mais nous avons mis fin à la fonction sur ce troisième qui n'était pas la meilleure affaire. Nous voulons nous assurer que nous réappliquons ce coupon à notre panier dans cet exemple de toute façon. Donc on peut voir ça alors on a juste mis une alerte juste ici pour dire quel coupon était le mieux. Vous avez 41 ans juste basé d'une manière plus agréable. Mais pour cet exemple, c'est tout ce dont ils avaient vraiment besoin. Si ce meilleur coupon, le nom du coupon était vide cependant, cela signifie que nous n'avons pas trouvé les occupants non valides ou qu'ils n'ont pas fait de différence sur notre panier. Donc, nous voulons essentiellement dire qu'ils ont déjà le meilleur prix. Donc, nous y retournons juste et nous assurons que nous avons appliqué un coupon vide juste ici. Mais cela dépend de ce dont vous avez besoin pour votre fonction. Ensuite, tout ce que nous faisons après cela est de supprimer tous ces éléments que nous avons créés à partir de mon stockage local. Donc, en gros, nettoie tout là-haut. Donc, comme je l'ai mentionné il y a une minute, les coupons de chèque commencent le chemin de la fonction ici. Nous avons donc deux parties où nous vérifions les coupons. Donc juste ici où nous sommes en train de parcourir tous nos coupons, nous avons passé un appel pour obtenir une étoile de coupon. Et comme nous l'avons mentionné précédemment, si nous sommes actuellement avec la page est rechargée et nous arrivons à ce point. Je veux dire vérifier la fin du coupon. Je vais vous montrer ce que font ces deux parties ensuite. D' accord ? Donc, la première partie de la vérification consiste à appliquer le coupon dans le champ de saisie et soit à appuyer sur le bouton Appliquer la remise ou sur le bouton Ajouter le coupon ou à appuyer sur Entrée sur ce champ de saisie. Donc, comme vous pouvez le voir ici, ce que nous faisons est que nous définissons un article juste ici pour dire quel coupon nous vérifions actuellement les besoins spécifiques à recharger. Nous avons saisi le champ d'entrée ici pour le coupon r, puis nous appliquons notre nom de coupon dans la valeur là. Et puis nous vérifions pour voir, est-ce un bouton que nous devons appuyer ou devons-nous appuyer sur Entrée ? Si besoin d'appuyer sur un bouton, nous cliquons sur le bouton. Si vous devez appuyer sur Entrée, nous déclencherons un événement qui simulerait cette pression d'entrée. Donc, ce que nous faisons ensuite est de vérifier si la page a besoin de recharger. S' il a besoin de recharger, on ne fait rien. Donc, nous voulons laisser cela à la page pour le recharger, puis attendre le temps que la fonction s'exécute à côté pour prendre cela et traiter cela, alors si elle n'a pas besoin de recharger. Donc, si c'est faux, nous avons ensuite refroidi la fin du coupon de chèque. Et puis nous avons ce chèque ici. C' est là que, comme nous l'avons mentionné à la fin, si nous avons trouvé que notre coupon gagnant, nous avons ce chèque juste ici pour que nous n'exécutions pas ces chèques supplémentaires ou nous faisons il y en a un, je vais juste l'appliquer sur notre patients ici et le soumettre. Donc c'est cette partie. Alors décochez la fin du coupon. Ce que nous faisons ici, c'est là que nous attendons la fonction. Nous avons donc cette quantité de millisecondes que nous allons attendre. Donc, nous avons d'abord un délai d'attente pour juste attendre ce temps. Et puis une fois ce délai terminé, nous exécutons ce code ici. Donc oui, vous pouvez voir qu'il y a un peu de choses ici, mais c'est vraiment simple. Encore une fois, nous disons quel est le coupon que nous vérifions actuellement ? Nous obtenons donc toutes nos informations mises à jour. Nous saisissons la valeur du panier. Donc, nous utilisons notre champ de coût QuerySelector juste ici et saisissons à nouveau la valeur de ce panier. Donc, nous appliquons cela ici. Nous enlevons ensuite n'importe quel préfixe, donc ce que nous utilisons juste ici, donc sous-chaîne, puis un dans cet exemple ou partout où vos préfixes. Et on fait juste un chèque ici. C' est plus bas que le panier qui a commencé ? Nous devons alors faire un autre contrôle. Est-ce inférieur à la meilleure offre actuelle ? Est-ce que nous avons une nouvelle meilleure affaire et nous appliquons cela à nos objets de vérification de coupon. Nous vérifions les coupons les meilleures offres, puis mettons à jour la valeur du panier. Et puis assurez-vous d'être sûr de remettre ça à flot. Donc c'est un nombre que nous pouvons comparer avec d'autres choses. Alors juste servir les choses cohérentes. Parce que vous ne savez jamais si le panier va avoir une partie de sens ou de pence à ça aussi. Il est donc préférable de le convertir. Et puis on a juste mis le nom du coupon ici. Sinon, votre serveur mais la console. Ok, juste pour le débogage et l'enregistrement pour dire que ce n'est pas la meilleure réduction. Sinon, tout va bien. Et puis nous avons juste poussé ceci sur le tableau de coupons sont vérifiés afin de nous assurer que nous n'allons pas vérifier. Et ces coupons plus d'une fois tu veux finir le dîner en boucle. Et puis nous mettons à jour nos chèques de coupon. Donc encore une fois, nous le transformons en une chaîne adjacente. Nous enlevons nos coupons actuels, nous avons fini de vérifier cela, donc nous supprimons cela du stockage local. C' est juste un morceau de code fait ici où vous testez, où nous imitons s'il allait envoyer au serveur, donc nous pouvons ignorer cela. Et puis nous passons à la fonction suivante. Donc, comme vous pouvez le voir ici, nous avons voulu continuer. Donc, après chaque fois que la page se charge, nous aurions une vérification là-bas. Je te montrerai dans un instant. Et à la fin de la vérification de ce coupon, nous faisons le même appel pour exécuter cette fonction principale. Encore une fois, nous ne transmettons pas notre objet de sélection parce que nous continuons, pas de commencer. Donc, presque tout est juste un point de plus que je veux vous montrer ici. Donc, comme nous l'avons mentionné, nous saisissons le statut de notre stockage local pour voir si nous sommes en cours d'exécution ou non. Et puis si l'état est en cours d'exécution, nous continuons cette vérification d'exécution. Et si ce n'est pas le cas, nous ajoutons simplement cet écouteur d'événement, que je pense avoir déjà mentionné. Maintenant, si vous êtes intéressé de voir comment nous faisons cela, appliquez une réduction. On a juste une fonction de coupon de chèque par ici. Et il dit juste, voici une liste de coupons valides, est la valeur de ce champ d'entrée dans ce tableau. Si c'est le cas, nous avons juste une partie codée en dur ici qui change la valeur du panier. Donc, c'est vraiment simple. Mais si vous utilisez cela ayant la feuille sauvage et que vous n'avez pas besoin de cet outil. Mais comme je l'ai mentionné, tout le code pour cela a été partagé avec cette vidéo. Et nous aurons des questions sur le chemin que son travail et cette vidéo ou en ajoutant une fonction de votre propre qui peut travailler sur plusieurs chargements de pages gratuitement pour laisser un commentaire et je serai heureux de jeter un oeil et de voir si je peux aider.