Erstelle eine Coupon-Finder-Google-Chrome-Erweiterung wie "Honey"

1. Skillshare welcome: Hallo, ich bin Russell. Und willkommen zu meinen neuen Fähigkeiten Check Class, alles über Chrome-Erweiterungen. Ich arbeite seit 15 Jahren im Bereich Web- und Mobile-Entwicklung, und in dieser Zeit hatte ich die Gelegenheit, an einer Reihe von Projekten und Startups zu arbeiten. In dieser Klasse, wir gehen durch alles, was Sie wissen müssen, um in der Lage sein, einen Coupon Finder Chrome-Erweiterung ganz ähnlich wie Honig erstellen . Dieser Anfänger freundliche Kurs führt uns durch alle Schritte, die Sie wissen müssen, um zu gehen. Um dies von der Erstellung einer Datenbank in der Feuerbasis zu tun und diese mit einer Kriminalitätserweiterung den ganzen Weg durch hokum veröffentlichte Kreationen auf dem Chrome-Speicher zu verbinden . Ich werde jeden Schritt des Weges aufzeichnen, damit Sie genau sehen können, was Sie tun müssen. Sie benötigen jede Entwicklungserfahrung, wenn Sie jemals wissen wollten, wie man Chrome-Erweiterung erstellt , und dies ist die Besetzung für Sie bereit zu beginnen, wird mir in der ersten Lektionbeitreten Lektion 2. Firebase App und Ordner erstellen: Lasst uns loslegen. Also in diesem Video vor, Neustart was? Sie bauen die Basis aus der Chrome-Erweiterung. Also werden wir APP in Fire Base erstellen, die wir als Datenbank verwenden werden, die wir alle Gutscheincodes erreicht Main gespeichert werden. Dann werden wir einen Ordner mit den notwendigen Dateien erstellen, die wir für die Kriminalitätserweiterung benötigen , wie die Manifest Jason Datei und dergleichen, JavaScript- und Hintergrund-HTML-Dateien, die die Erweiterung, die wir aus gemacht haben, Dann werden wir fügt diesen Ordner zu Chrome hinzu. Die Art und Weise, wie wir dies zuerst hinzufügen, ist eine entpackte Erweiterung und dann am Ende, außerhalb der Entwicklung, können wir es packen. Und das ist, was Sie dann an den Chrome Extension Store einreichen würden. Und dann beginnen wir, Firebase mit unserer Erweiterung zu verbinden, so dass Sie Kommunikation hin und her von unserer Erweiterung zur feuerbasierten Datenbank haben können . Wir können anfangen, alles zusammen zu setzen, und dann ist Schritt fünf gut, aktualisieren Sie einfach die Erweiterung, damit wir beginnen können zu sehen, wie die Entwicklung voranschreiten wird wir Änderungen an den Codes vornehmen und ich muss es jedes Mal an Chrome senden komprimieren wir den Aktualisierungs-Button, so dass er viel schneller macht. Also beginnen wir mit der Erstellung einer neuen App in fünf Basis. So können Sie das tun, indem Sie einfach auf die Firebase-Konsole gehen und dann auf Projekt hinzufügen klicken . Es ist also sehr einfach, einen Namen für das Projekt eingeben zu müssen, also rufen wir diesen Gutscheinfinder an. Sie können es jedoch so nennen, wie Sie wollen, jedoch so nennen, wie Sie wollen, also klicken Sie einfach auf Weiter. Es wird Sie fragen, ob Sie Analytics zu Ihrem Projekt hinzufügen möchten, können Sie, wenn Sie wollen, aber ich werde nur nein für jetzt sagen, nur um es schlanker zu machen und dann Projekt zu erstellen. Dies kann ein paar Momente dauern, nur Teoh Fabrik Sache und einrichten. Okay, sobald das Projekt fertig ist, können Sie auf Weiter klicken. Dann wollen wir tun, ist klicken Sie auf das Web-Symbol nur hier und dann registrieren Sie einen Namen für Ihre App . Also wieder nennen wir es Coupon Finder. Wir wollen nicht fünf As Hosting verkaufen, und es gibt Klick registrieren App und jetzt wird mit diesem Skript hier zur Verfügung gestellt werden. Alles, was Sie jetzt tun müssen, ist, diese Zehe nur auf einer Seite zu kopieren. Also das nächste, was wir tun werden, ist ein Ordner über die Notwendigkeit von Dateien, die wir für die Erweiterung benötigen erstellen . Also, um dies zu tun, gehen Sie zu Ihrem Sortiercode-Editor von Joy. Also für mich wäre das Atom. Und dann werden wir anfangen, einen Ordner für die Dateien zu erstellen, die wir brauchen. Also zuerst Atom würde einen Projektordner hinzufügen. Das ist also mein neuer Ordner von „Created Just Tears“. Wenn Sie einen Ordner in diesem hinzufügen und wir werden es Coupon nennen, finden Sie uns nur den gleichen Namen ings auf dem Weg hier zu halten einfacher. Und dann fügen wir eine Datei in diesem Foto hinzu. Nun, ich werde tun, um es einfach mitzuverfolgen ist, einfach dieses Fenster nach oben ziehen, also Raum unten hier, Zukunft. Folgen Sie mit. Okay, Sie können jetzt Ihren Code-Editor darunter hinzufügen. Ich bin nur hier. 3. Für die Erweiterung notwendigen Dateien erstellen: innerhalb unseres Gutschein-Finder-Ordners. Wir werden die Dateien erstellen, die wir benötigen, um unsere Erweiterung auszuführen. Also öffnen wir einfach die Datei Cranie. Hier ist die 1. 1 wird das Manifest sein. Nicht Jason sie Wir brauchen ap dot Js und als nächstes brauchen wir Hintergrund. Nein, html und dann endlich brauchen wir firebase dot Js Dies sind alle Dateien, die auf der nächsten verwenden werden , die wir tun müssen, ist eine Manifest-Datei eingerichtet, so dass wir tatsächlich Erweiterung zu Chrome einreichen können . Okay, also innerhalb der Manifestdatei müssen wir hier ein neues Objekt erstellen. Ich werde nur einige Attribute eingeben, die wir brauchen, um unsere Erweiterung mit Chrome funktionieren zu lassen. Die 1. 1 ist der Name von unserer Erweiterung, so dass Sie alles, was Sie wollen, hier setzen können. Aber wieder, ich bin nur folgen das gleiche Patent bereits haben. Also werden wir diesen Coupon Finder nennen, haben Versionsnummern von diesem nur 0.1, dann brauchen eine Beschreibung, die oben? Gutscheine. Also die Berechtigungen, die wir haben, um diese als Array eingeben. Also machen wir das so. Und dann werden die Berechtigungen, die wir brauchen, aktiv Registerkarte dies gibt uns die Möglichkeit, den Zugriff auf die Registerkarte zu lösen , auf der der Benutzer ist auf. Wir wollen in der Lage sein, das bei all deinen Mädels zu machen. Kennen Sie auch den Zugang? Auch andere Registerkarten? Dies hilft uns, unterwegs auf unsere Hintergrundseite zugreifen zu können. Wir werden Kommunikation hin und her machen. Danach wir weitere Optionen hinzu. Der nächste ist der Hintergrund. Dies ist eine Datei, die wir im Hintergrund ausführen. Also wieder wird es die Seite sein. Hier ist im Hintergrund html, siehe, um hier Anführungszeichen zu setzen. Also wieder, Hintergrund-toe-html Andi, wir wollen nicht, dass dies hartnäckig ist, also laufen wir nicht nur die ganze Zeit, wenn wir es nennen. Das hilft nur, ähm, für die Anzahl der Anrufe, das Zeug. Wir behalten es nur, ähm, so etwas besser durchgeführt. Als nächstes müssen wir Teoh den Typ der Erweiterung festlegen, die wir erstellen. Es gibt eine Reihe von verschiedenen Möglichkeiten, wie Sie eine Erweiterung mit Chrom haben können. Sie können Erweiterungen haben, die nur angezeigt werden, wenn Sie auf das Symbol in der Ecke tippen. Hier oben auf Chrome haben andere Erweiterungen, die Inhalt in die Seite injizieren, wie wir hier erstellen und Sie haben andere Erweiterungen, die wie eine Landing Page der Ukraine in New Tab fügt . Sie übernehmen die neue Registerkarte, während sie das, aber für diesen wird es sein, dass wir Code in die Seite injizieren. Also, das wird ein Content-Skript genannt. Dafür müssen wir Informationen weitergeben, die wir verwenden werden. Dies ist wieder ein Array. Dieses Array nimmt also ein Objekt ein. Das erste dieser Attribute heißt also Übereinstimmungen. Das ist Senator hier oben. Es sagt uns, was Ihre alten Menschen wir jetzt Code injizieren wollen, weil wir wollen, dass dieses Skript auf jeder Website, dieser Erweiterung toe, jeder Website funktioniert dieser Erweiterung toe, . Wenn wir einen Gutschein haben, zeigen wir ihn. Also wieder werden Sie alle Ihre RL setzen. Dann müssen wir die tatsächlichen JavaScript-Dateien erwähnen, die so uns enthalten wollen. Das ist App Dot Js. Und dann wollen wir nur sagen, wann sollte dieser Inhalt hinzugefügt werden, Also speichern Sie ein Dokument ausführen und dies sollte einmal alle aus dem Inhalt für diese Seite hinzugefügt wurde , was normalerweise genug ist, Einige Seiten, wie mit gutem Beispiel verknüpft. Sie dauern eine Weile, um die Seite zu laden, und es gibt einige zusätzliche Art von Aufrufen, die eso stattfinden, wenn Sie Erweiterungen für Patienten wie in vielleicht Gmail verknüpft sind, wir müssen Ihre eigenen Schecks hinzufügen, um sicherzustellen, dass die wie die dibs und Elemente der Seite Mona Interactive geladen werden. Aber für dieses Beispiel, wann was? Wir werden dieses Ding machen, das ist perfekt. Also bei einer weiteren, die die Manifest-Version ist, die im Moment Version zwei ist und dann Teoh wollen, fügen Sie eine Inhaltssicherheitsrichtlinie hinzu. Nun, das ist eine ziemlich lange Zeichenfolge, die alle Informationen enthält, die wir brauchen, um die Feuerbasis zu verwenden, die ich jetzt eingeben werde. Aber ich werde, ähm, das haben ähm, , damit Sie in einer Beschreibung dieses Videos kopieren können. Okay, das sollten also alle Informationen sein, die wir für das Manifest eingeben müssen. So können Sie jetzt voran gehen und das speichern. Okay, jetzt, da wir hinzugefügt haben, dass wir in Kriminalität gehen wollen, gehen Sie zu Einstellungen und dann zu Erweiterungen. Ich möchte hier auf Laden entpackt klicken, auf Laden, entpackt klicken. Dann wollen wir den Ordner finden, den wir gerade erstellt haben. Also für mich ist das in den Augen. Gutschein-Finder Es ist was? Klicken Sie auf Auswählen. Nur dann, wenn wir nach dieser neuen Erweiterung gesucht haben, können Sie es nur hier sehen. Nun, das ist im Moment ein Fehler. Das liegt daran, dass wir keine Inhalte auf unserer Seite haben. Stellen Sie einfach sicher, dass Sie auch einen Arzt haben. Wenn Sie den Mai von Weiß folgen, wenn Sie kopieren und einfügen, sich keine Sorgen. Auch, wenn Sie hier zurück gehen, löschen Sie das alles auf einem frischen, Sie sollten sehen, es funktioniert. Das ist also der nächste Schritt, den ich dir in Schritt fünf zeigen wollte . Also, sobald Sie Ihre Erweiterung in Chrome hinzugefügt haben, alle Änderungen, die Sie vornehmen, müssen Sie aktualisieren, und dann werden diese reflektiert. Also, zum Beispiel, wenn wir gehen, um dies ist ein zufälliges Geschäft finden hier sind Erweiterung wird auf dieser Seite ausgeführt werden. Wenn wir also zu unserem App-Kleid hinzufügen, ist dies die Datei, die tatsächlich um, Code in die Seite injiziert . Wenn wir also nochmal schauen, haben wir hier einen Hintergrund, , eine Hintergrunddatei, die wieder unter HTML ist. Aber das wird eigentlich nichts auf der Seite laufen. Das ist genau das, was wir verwenden, um Informationen von der Feuerbasis hin und her zu senden. Also, wenn wir hier hineingehen und einfach viel Hallo von der Erweiterung sagen, dann gehen Sie zurück zu den Erweiterungen, aktualisieren Sie und laden Sie diese Seite dann neu. Sie können sehen, jetzt haben wir mehr, sagt ehemalige Hallo von der Erweiterung ist, dass Shows sind Erweiterung ist auf dieser Seite. Andi. Es ist korrekt geladen, und ich manifest-Datei hat funktioniert. Jetzt können Sie sehen, wie Ihr Hintergrunddatum morgen aussieht hier im nächsten Schritt wird beginnen, fünf Basis in Erweiterung hinzuzufügen und beginnen, um die Verbindungen zu einer Datenbank zu machen . 4. Verlängerung in unsere Datenbank verbinden: bevor wir fortfahren, wird es eine schnelle Rechtschreibkorrektur aus den letzten Videos machen, in denen wir hartnäckig hatten. Nur hier. Stellen Sie sicher, dass Sie dies ein in ein A wie dieses wechseln, aber ich sehe nur ändern müssen, um es genau das zu machen. Also dieses Video, das wir in Verbindung mit einem Feuerwehrbasis-Skript hinzufügen wollten. Also, wenn wir zurück zur Feuerstelle gehen oder Informationen nur hier finden, wollen wir die Informationen zur Feuerwehrbasis hier nehmen. Also kostenlos Copy on. Wir werden das in die Punkt-Js-Datei des Feuers einfügen. Also geh zu fünf Basis und wir fügen das ein. Das ist also, was wir mit der Feuerbasis tun müssen. Starten Sie die Jess-Datei für jetzt. Aber wir werden später auf diese Akte zurückkommen. Also, um diese Änderungen und dann im Hintergrund oder HTML zu speichern, möchten wir eine Anfrage an diese Firebase-Datei auf machen. Wir möchten auch sicherstellen, dass wir das Firebase-SDK laden. Die Art und Weise, wie die Dinge in Chrome-Erweiterungen funktionieren, ist ein wenig anders. Teoh, wir haben vielleicht nur auf normalen Websites über abwesende Dinge gesehen. Zumindest können Sie nicht, ähm andere externe Js direkt von Ihrer Erweiterung aufrufen . Also, was wir im Wesentlichen tun müssen, ist diesen Hintergrund oder HTML als Brücke zwischen unserer Erweiterung zu verwenden , wo wir das Skript auf die Seite auf der Website injizieren, die auf den Hintergrunddaten zu Mel File ging , die die Verbindung zu Feuerbasis haben wird. Das ist es, was wir tun müssen, um diesen zusätzlichen Schritt zu machen. Aber ich zeige dir, was das bedeutet. Es ist nicht allzu kompliziert. Es hilft nur, dies zu machen oder schönen Tee mit Chrom durchzuführen. Also wollen wir tun, ist im Hintergrund i html Wenn wir zurück zu Chrome gehen, wollen Sie einfach dieses Skript nehmen und es einfügen? Und dann, wenn wir nur das gleiche Skript kopieren und einfügen, wird es eine Änderung hier zwei Datenbank machen und dann ändern Sie einfach die Versionsnummer Teoh 7.9 Doctor, ich bin sechs Meter die aktuellste als ab März 2020 und dann wollen wir Teoh Anzeige wieder wie oh, fünf Basis, die in dieser Datei nur hier aufrufen würde. Also, wenn wir das speichern und sie gehen zurück zu Chrome und aktualisieren wird jetzt Firebase verbunden haben , Ich bin so, wenn wir zurück zu Erweiterungen. Aktualisieren Sie diese. Wenn wir wissen, klicken Sie auf den Inspektor Ansichten, Sie können sehen, dass wir eine Beschreibung haben, die wir wollen, nur hier. Also, wenn wir tatsächlich zurück zu Firebase Punkt Js gehen und eine Konsole machen, loggen Sie sich von der Feuerbasis ab. Aktualisieren Sie diese Hintergrundtage öffnen, um zu fräsen. Sie können jetzt sehen, dass wir mit der Feuerbasis verbunden sind. Dies ist, was wir beginnen müssen, um Verbindungen zur und von der Datenbank herzustellen. 5. Setup einrichten: Jetzt in diesem Video, wir gehen Teoh Änderungen an einer Karte JS-Datei machen, so dass wir beginnen können, um den Domain-Namen von der Seite zu greifen , die auf waren und dann senden Sie diese durch Hintergrund-HTML-Seite haben, die wir dann mit Feuer Base überprüfen können, wenn wir irgendwelche Coupons für diese Seite. Lassen Sie uns also beginnen, indem Sie dieses Warnskript entfernen, das wir hier haben, fügen Sie ein paar Abschnitte hinzu, die wir mit dem Code beginnen möchten , also wird der erste die aktuelle Domain erhalten. Also werden wir dies als eine Variable außerhalb der Domäne setzen und dies wird gleich Fensterposition, Hostname sein. Aber dies kann im Moment http oder www dot vorangestellt haben. Also wollen wir nur sicherstellen, dass wir all das wegnehmen, damit wir dies mit einem einfachen Ersatz tun können . Also zuerst überprüfen wir, ob es nur http und dann eins für 82 ps auf hat, dann schließlich auch für w w dot, so. Und dann wollen wir auch sicherstellen, dass wir alle Hash-Parameter davon teilen , was wir so tun können. Es ist gut, sicherzustellen, dass wir diesen Ausdruck falsch erhalten und sie nur den ersten Teil übergeben wollen . Das sollte also sicherstellen, dass der Domain-Name alles ist, was wir von diesem bekommen. Und dann sind wir bereit, dies tatsächlich in den Hintergrund zu HTML zu senden. Die Art und Weise, wie wir dies tun, ist, verwendet das Chrome-Erweiterungsobjekt und wir möchten die Laufzeit verwenden. Und dies ermöglicht es uns, eine Nachricht über Teoh Hintergrund geleistete E-Mail zu senden. Also, wenn wir richtig fertig sind und dies in der Lage wäre, ein Stück Code in den Hintergrund extreme El hinzuzufügen , tatsächlich die Firebase-Datei aufgerufen hat. Und das ist, warum, als Listener Ereignis für alle Nachrichten, die gesendet werden, Aber zuerst werden wir die Nachricht hier erstellen. Also wollen wir eine Reihe von Parametern dafür setzen. Also schickte ich ein Objekt durch, das einen Befehl auf hat. Der Grund, warum wir hier einen Befehl setzen wollen, ist, weil wir etwa einen Cent verschiedene Arten von Anfragen bis zu diesem abscheulichen wollen . Die Anfrage, die wir erstellen möchten, ist also zuerst eine Anfrage. Wenn wir die Seite laden, um zu überprüfen, ob wir irgendwelche Coupons für diese Domain Hinweis, die falsch gesprochen haben. Familienanfragen. Also werden wir das passieren. Wir nennen es einen Abruf auf dem zweiten Typ aus Befehl, der machen möchte, ist, wenn wir wollen, Teoh einen Gutschein an die Datenbank einreichen. Das sind die zwei verschiedenen Typen, die wir erschaffen werden. Aber im Moment werden wir uns auf diesen einen Typ konzentrieren. Also werden wir auch einige Daten übergeben, die ein Objekt sein werden. Und wir haben Domain genannt, und wir werden einfach diese Variable übergeben, nur hier bleibt die einzigen Parameter wollen nur hier. Und dann wollen wir natürlich auf eine Antwort hören. Und das wird abkühlen, dass würde in nur hier geschickt werden. Dies ist, wo wir eine Antwort von der Datenbank erhalten, die Hintergrund zu HTML ist, was es tatsächlich cool macht. 25 a stodgy s. Dies hilft uns, uns daran zu erinnern, wo diese Anrufe gemacht werden. So sind wir sicher, dass für hin und wieder wir wollen in, so dass wir Hintergrund-HTML und dann Feuerbasis haben . Also, hier, müssen wir einen Listener für alle Nachrichten erstellen, die durch in den Hintergrund gesendet werden 80 mil Seite. So, wie wir es tun. Dies ist der gesendeten Chrome-Laufzeitnachricht sehr ähnlich. Stattdessen setzen wir Kriminalitätslaufzeit auf Nachricht. Sie möchten Listener hinzufügen, und dann wird dies nach den gleichen Parametern suchen. Die erste wäre die Nachricht, die alle Parameter sein wird. Der Aufstieg gerade hier, sis wird als Nachricht bezeichnet werden. Und dann haben wir zwei zusätzliche Optionen hier, die Ascender. Und dann ist die Antwort dies ist, dass wir die Antwort zurück drei an diese Funktion nur hier senden möchten , damit wir auf die Informationen in diesem zugreifen können. Also öffne das in eine eigene Funktion und diese Einblicke hier, denn, wie wir bereits erwähnt haben, werden wir die zwei verschiedenen Arten von Befehlen haben. Es wird den Abruf geben, um die Gutscheine zu greifen, und dann gibt es einen Beitrag, um neue Coupons in die Datenbank zu schieben. Wir wollen nur sicherstellen, welche Art von Befehl an uns gesendet wurde. Also sagen wir Nachricht, aber unser Befehl und es ist gleich zu holen. Aber dann können wir anfangen, Code hier zu laufen. Also, was wir gerade jetzt tun, nur um dies zu testen, ist an einer Konsole, die sich von der Domain abmeldet. Also, das ist einfach eingestellt. Domäne ist gleich der Nachricht. Keine Daten, Dr. Main. Wählen Sie einfach die zweite und dann werden wir die Domäne nur hier in der Konsole protokollieren. Also haben wir das gerettet. Und stellen Sie sicher, dass wir das haben oder korrigieren. Gerade hier wird dann wieder in Chrome gehen, gehen Sie zu den Erweiterungen, aktualisieren Sie die Erweiterung, und gehen Sie dann zu einer Seite und dann werden wir überprüfen, ob die Hintergrund-HTML-Seite die Domain in der Konsole protokolliert . Also nochmal, wir Druck frisch hier, wir laden wieder ein, ähm, ähm, shoppen wieder ein. Wenn wir also nur ein paar Websites hier haben und dann auf der Hintergrundseite überprüfen, können Sie sehen, dass wir jetzt das Ergebnisprotokoll nur hier in der Konsole erhalten. Wenn wir also eine andere Seite laden und dann das Protokoll überprüfen, können Sie sehen, dass diese Ergebnisse aktualisiert werden, wie und wenn wir auf diesen Seiten gehen. Das bedeutet, dass wir eine Verbindung von AP bis zu Hintergrund-HTML haben, die wir dann diese Anfragen erhalten und dann ein Ergebnis zurücksenden können. - Was? In dem Moment, in dem wir das nur auf die Seite sperren. Als nächstes müssen wir dieses Ergebnis zurück an App Js senden, damit wir eine Antwort sehen können 6. Datenbankstruktur und Fetch: Okay, in diesem nächsten Video werden wir eine Anfrage an unsere Oberschenkeldatenbank stellen und den Domainnamen senden, der in Basis 64 codiert ist. Der Grund, warum wir den Domain-Namen codieren werden, ist, weil innerhalb der Firebase Inside Out Datenbank hier drüben, können Sie keine Striche oder Punkte als drei Schlüssel verwenden. Also müssen wir sicherstellen, dass es richtig codiert ist, bevor wir zu diesem Stadium kommen. Also werden wir die Echtzeit-Datenbank hier drüben verwenden. Wir werden es im Testmodus zu einem Zustand starten, der dort kreativ ist und bewegen Sie die Anfrage zu denken Schrägstrich Domäne. Dann innen wird hier der codierte Domain-Name sein. Und dann werden wir ein Array von Gutscheincodes haben, die Sie hier drin haben können, so dass sie angezeigt werden . So hat das strukturelle Aussehen ein Beispiel. Also werden wir den codierten Domainnamen gerade hier haben und es gibt ein Array aus Gutscheincode und für jeden Gutscheincode wird den Code wie diesen und in einer kurzen Beschreibung von jedem Coupon haben . Also, zum Beispiel, wie viel Geld Sie für diesen Gutschein bekommen? Also, jetzt werden wir ein Skript erstellen, das Suchvorgänge machen Anfrage an eine Datenbank bei jedem von ihnen. So Domäne Ford Schrägstrich sein. Und was auch immer sie kodiert haben, um Namen zu machen, ist eine Wirkung der Ergebnisse. So können wir diese niemals bis zur Verlängerung beenden. Also, wenn wir Teoh zurückspringen, das ist er jetzt oder dein Co-Editor, werden wir in einen Abholbefehl gehen, um sicherzustellen, dass es nicht der Post Command und wir unseren Domainnamen codieren müssen. Also werden wir einfach ein neues Kabel hier erstellen, wenn wir die Domain auf diesem codieren wird mit dem Java-Skriptbasierten 64 in Codefunktion, die B t o a ist dann übergeben wir einfach in der Domäne nur hier. Befreien Sie sich von dieser Konsolensperre. Das ist es, was wir eigentlich überprüfen wollen. Und dann verbinden wir uns einfach zu feuern Base und sehen, ob wir irgendwelche Coupons haben. Haben Sie bereits eine Verbindung zur Feuerstelle eingerichtet, damit wir unsere Datenbank sofort aufrufen können. Also haben Sie gerade Datenbank angerufen und dann brauchen wir die Referenz oder den Pfad von der Kohle, die wir machen wollen, etwas gesagt, dies wäre Domäne und dann Schrägstrich Codieren Sie es Domäne jetzt weil über Basis können Sie Ergebnisse in Echtzeit erhalten. Wir müssen sicherstellen, dass wir ausdrücklich sagen, einmal nur hier ist es das wird es holen, bekommen die neuesten Informationen jedes Mal, wenn wir einen kühlen und dann müssen wir auf die Antwort hören . Also hier drin werden wir Ergebnisse bekommen. Also werden wir Antwort sagen. Dies wird es zurück an app Js senden So erhalten wir die Ergebnisse hier, damit wir beginnen können, dies zu verwenden, um auf dem Bildschirm zu rendern, um zu sagen, dass wir eine Reihe von verschiedenen Parametern setzen möchten. Ja, wir können tatsächlich debuggen und herausfinden, was all die Informationen sind, die wir aus der Datenbank erhalten. So traurige Art des Ergebnisses. Wir wollen auch einen Status. Also, wenn es zu dieser Phase ist ein Erfolg gewesen und dann natürlich, würde die Daten in einem Schwellen übergeben haben. Das wird eine Momentaufnahme sein. Dies ist der Glaube, der diesem hier zugewiesen wird, und dann werden wir den ganzen Wert übergeben , den wir habe ich von fünf Basis geholt und dann wollen wir nur sagen, was die anfängliche Anfrage waas, die es für das Debuggen helfen wird. Also nochmal, wir werden diese ganze Nachricht hier setzen. Sie sollten nun dieses Ergebnis senden. Wenn wir also hier eine Konsul Sperre für die Antwort setzen, können wir jetzt sehen, wie dies aussieht, ohne jedes Mal in den Hintergrund zu HTML gehen zu müssen. Also, wenn wir zu Chrome gehen, aktualisieren unsere Erweiterung und sie gehen zu Ah, Webseite, Mal sehen, welche Antwort wir von Firebase begraben Geist bekommen. Wir haben nur dieses Testbeispiel hier im Moment, also werden Sie aktualisieren. Und jetzt gehen wir zu einer Webseite. Überprüfen Sie, überprüfen Sie die Konsole. Sie können hier sehen. Reaktion von der Feuerbasis. Nicht definiert. Das hier zeigt also, dass wir im Moment für diesen Pfad keinen Datensatz für irgendetwas in der Datenbank haben. Aber wenn wir jetzt gehen, um dies zu codieren, können wir tatsächlich sicherstellen, dass wir hier eine Antwort haben. Also, wenn Sie dies von Hand im Code wollen, geht er auf diese praktische Seite khirbet 64 codieren die Hundepaste in der Zeichenfolge, die Sie codieren möchten . Dann kopieren wir das. Gehen Sie zurück zu einer Datenbank, erstellen Sie einen neuen Eintrag gerade hier. Das ist also dieser Domain-Name. Dann wollen wir sicherstellen, dass wir einen Code setzen. Dies ist ein Gutscheinname, traurige Beschreibung. Also, wenn wir dies in die Datenbank hinzufügen, dann gehen Sie zurück hier, Wir können sehen, dass der Fehler immer noch passiert. Aber wenn wir nur hier und dann unter Punkt in einen Code-Editor zurückgehen, überprüfen Sie diesen für den Befehl, den ich im Gegenzug hinzufügen muss. Wahr. Und das wird die Botschaft schlecht offen für uns halten, während wir die Bitte an die fünf auf einen Staat basierenden Antrag stellen . Also, wenn wir jetzt zurückgehen und unsere Erweiterung aktualisieren und dies erneut versuchen, können Sie sehen, jetzt haben wir eine Antwort von der Fire Base, und es sollte unser Beispiel zeigen. Gutschein. Ich bin nur hier. Aber wenn wir zu einem anderen zwei Hauptnamen gehen, ähm, Sie sind einfach wieder ein Beispiel. Sie werden sehen, dass die Antwort nein ist, da wir für diese Domain keine Gutscheine haben. Also haben wir diesen hier. Jetzt ist das mit Google Dot com verknüpft. Also im nächsten Video wird beginnen, um sicherzustellen, dass wir die Gutscheincodes nehmen, zurück für die Datenbank auf Wir sahen durch diese und tatsächlich zeigen sie auf dem Bildschirm zu runden, um weiter in das Konsolenprotokoll und Debugging es jeder Zeit, so fange ich an, weg zu arbeiten, um tatsächliche Anzeigen für diese Daten zu machen. 7. Gutschein auf der Seite: Als nächstes müssen wir beginnen, die Coupons anzuzeigen, die wir aus der Datenbank abgerufen haben. Also im letzten Video schauen wir darauf, die Antworten von der Feuerbasis zu bekommen. Wir könnten es zurückschicken, ähm, zu der Nachricht, die wir hier wollten. Also haben wir jetzt die Gutscheine, wenn es in dieser Variablen nur hier gibt. In diesem Video werden wir durch dieses Array schleifen, wenn es irgendwelche Coupon-Treppen gibt und beginnen, diese auf dem Bildschirm zu rendern . Also werden wir damit beginnen, hier unten eine neue Funktion zu erstellen. Wir sind cool. Diese vergangenen Gutscheine wie diese, und dann hier drüben, was coole Dysfunktion ist, dann per in Antwortpunktdaten. Weise stellen wir sicher, Auf dieseWeise stellen wir sicher,dass diese Nachricht an unsere Feuer- oder Jess-Datei ein cooles wird. Wir werden die Antwort erhalten, die ich die Antwort an diese Funktion hier drüben sende. Nun, zunächst wollen wir nur durch Coupons Array und dann Adam in eine Liste schleifen, und dann werden wir dies später verwenden. Also werden wir all dies in einen try-Block setzen, falls es keinen Gutschein gibt. Das wird also null sein. Also wollen wir nicht etwas schleifen, das keine Excel-Aufrufe hintereinander ist. Also, wenn wir gerade in einen Versuchsblock platziert, der die Ära fängt und wir werden keine Probleme haben . Also nenne ich diesen Gutschein html, und das wird leer sein, um zu beginnen, die neueren sagen nur Gutscheine für jeden. Und wir haben das nur als Kupon auf den Anleihenindex gesetzt, der dort oben fixiert ist. Dies würde also das Array durchlaufen und dann jedes Element als Coupon festlegen und weil der Index dort ist, wenn wir es brauchen. Aber was wir tun werden, ist Coupon HTML-Anzeigen für jedes Mal nennen. Ähm, du sagst nur in dieser Liste den Code, wird der Gutschein-Punkt-Code sein. Also wieder, von der Datenbank Wochen oben im letzten Video, haben wir gesehen, dass wir zwei Parameter für den Gutschein haben. Da ist der Code, und es gibt eine Beschreibung. Also danach werden die Beschreibungen gesetzt. Wir setzen dies nur in kursiv selfie coupon dot Beschreibung, und dann stellen Sie sicher, dass Sie dieses Tag nur dort schließen. Das bedeutet also, dass wir eine, äh, diese Variable hier wird alle Off-Codes haben. Gutscheincodes in einer schönen Liste für uns, so dass wir dies verwenden können, um tatsächlich auf der Seite zu rendern. Das nächste, was wir tun müssen, ist, einige Elemente zu erstellen, die wir verwenden können, um dies anzuzeigen. Aber zuerst brauchen wir nur Zehe bei einem Scheck für den Fall, dass diese Antwort nicht war, so dass wir keinen Fehler haben . Also sagen wir nur catch, dann setzen Variable für diese Ära nur hier und beginnen. Wenn wir nur Einheimische auf den Bildschirm sind und einfach sagen, keine Coupons gefunden diese Domain und dann werden wir einfach die Fehlermeldung dort wurde uns gesagt, dass wir entlarven können. Also habe ich das vorerst aufgehoben. Davor wollen wir nur Teoh. Wir wollen nur diese Liste auf der Seite rendern. Um das zu tun, werden wir gerade hier ein neues Element schaffen dort vor mir springen. Also nennen wir das, ähm, Gutschein-Anzeige, und das wird eine neue Entwicklung wie dieses Special sein, um das zu kapitalisieren. Und dann sagen wir, weiter, spielen Sie einfach in 80 Millionen. Es kühlt ab. Fix diese Zitate und dann innerhalb der Tabelle setzen Sie den Gutschein html und dann ist es nur eine Sache aus dies dem Körper wie folgt hinzuzufügen Also was wir jetzt haben, ist, dass wir eine Nachricht von früher mit einem Künstler neue Vergangenheit Coupons Funktion gesendet haben , die in der Liste nehmen Gutscheine gerade hier. Also wurden die Antwortdaten dann alle gefundenen Coupons durchlaufen und sie zu dieser Liste auf hinzugefügt . Dann erstellen wir gerade hier eine neue Entwicklung und setzen diese dann als das Interesse zu schmelzen, und dann haben wir an die Seite angehängt. Also lasst uns gehen und die Erweiterung aktualisieren und sehen, wie das aussieht. Wir haben unsere Erweiterung erneuert. Nun, wenn wir zu Google gehen, wo wir das in erster Linie hatten, können Sie sehen, ein Coupon erscheint hier oben ohne Styling im Moment. Aber das ist gut. Das ist der Gutschein, den wir dort hatten. Wenn wir etwas über die notwendigen setzen Art von Ausrufezeichen ändern Danach waren sie frisch. Sie sehen, es wird jedes Mal von der Datenbank aktualisiert, weshalb wir Firebase verwenden, weil es uns hilft, eine wirklich schnelle, leicht zugängliche Datenbank zu haben , und sie können von all der Sicherheit Onda Authentifizierung für uns tun hält alles schön und schnell. 8. Überlegen, um die to zu öffnen: Okay, in diesem Video werden wir das Display nehmen, das wir bisher haben, und das einschließen. Wir waren ein anklickbares Element, dass, wenn sie darauf klicken, es öffnet sich und zeigt die Liste der Coupons im Inneren anstatt dieser zufälligen Sortieranzeige der Ecke des Bildschirms hier. Also lassen Sie uns zurück in einen Code-Editor springen und Teoh starten, machen Sie das schwer. Okay, Also hier ist der Code, den wir derzeit haben, wo wir einen Gutschein spielt Entwicklung, und dies wurde auf dem Bildschirm hinzugefügt, was ein guter Anfang ist, aber wir wollen ändern. Das umgibt das. Wir haben einen Teil, der großartig ist, Sie können klicken, auf die dann zeigen würde dies. Lassen Sie uns also damit beginnen, dieses Element tatsächlich zu verstecken. Um zu beginnen mit Onda wollen wir eine Klasse namens diese setzen, so dass wir später darauf zugreifen können, damit Sie es tun können, indem Sie Nachname sagen und wir werden diese Gutscheinliste genannt. Um zu beginnen mit Onda wollen wir eine Klasse namens diese setzen, so dass wir später darauf zugreifen können, damit Nur haben ein paar Unterstriche hatte einen Anfang in zwischen Onda wollen wir Teoh ein wenig mehr html hier hinzufügen, nur um es klar zu machen, was hier gezeigt wurde Art der Überschrift hier und sagen Coupons. Und dann setzen wir einfach eine andere oder Unterposition genauso wie Liste von Coupons. Und wir könnten sogar den Domainnamen hier durchlaufen. Ähm, so könnten wir die Liste der Gutscheine für und dann auf der Domain sagen. Also schauen wir uns mal an. Und was jetzt? Du wirst noch nicht schauen, weil das verborgen ist. Aber was ich als nächstes tun möchte, ist ein kleiner Kreis oben auf dem Bildschirm hier hinzuzufügen, dass, wenn Sie klicken, wird es thisted Display seine nächste Bewegung etwas weiter unten hier öffnen. Andi, erstellen Sie ein anderes Element namens Coupon Button. Also wieder, mit Dokument erstellt Element und dies wird ein div sein. Dann haben wir hier einen Coupon-Button. Aber geben Sie diesem einen Klassennamen aus, halten Sie auf Schaltfläche. Und dann möchten wir etwas Styling hinzufügen. Also sind wir nur bei diesem als CSS, also bei einer Liste von Dingen hier. Also zuerst wollen wir, um sicherzustellen, dass wir eine Höhe von weniger um 30 Pixel haben. A mit 30 Pixeln. Wir wollen, dass es abgerundet wird. Dispels hat einen Grenzradius von 100%. Ich habe dieses Land neue Linie hier genau so, Wir können an der Grenze von einem Pixel Andrada tragen, Hintergrundfarbe und die Textfarbe, nur so können wir sehen, dies wird wahrscheinlich schrecklich aussehen, um zu beginnen, aber wir werden stylen Sie es später im Kurs, so dass wir es für den Benutzer viel attraktiver aussehen lassen können. Aber der Anfang wird sicherstellen, dass sie etwas haben, mit dem wir interagieren können. Ähm, Semester in einer neuen Zeile gerade hier. Also haben wir die Zitate hier in jeder Zeile. So ist es, mit einem zu beginnen. Dafür muss man sie schließen. Nach dem hier. Willst du die Plus-Symbole haben, die wir dieser Zeichenfolge hinzufügen können? Wir wollen es anklickbar machen. Dann wollen wir die Positionen der Position festgelegt werden fixiert werden. Wenn wir die Seite nach unten scrollen, wird es dort bleiben. Wir möchten, dass es fünf Bilder von oben auf dem Bildschirm und fünf Bilder von der rechten Seite des Bildschirms sein. Also wieder, hier, Andi, das sollte alles sein, was wir brauchen. Wir müssen nur Cem-Inhalt mit Text die Zeile in die Mitte setzen, schließen Sie die Zeichenfolge, nur da und da. Wir wollen in html Teoh setzen, ich sollte sagen, Cook auf, die vielleicht nicht passen, wie es ist, das ist nur überprüfen Sie dies hier auf. Schließlich wollen wir an dieser Seite wie folgt. Also für jetzt, eine frische, äh Erweiterung und sehen, was wir bekommen. Okay, wir können sehen, dass unser Kreis hier drüben auftaucht, aber es ist nicht das einfachste zu sehen. wir einfach sicher, dass wir dies korrekt indizieren. Also, wenn wirhier rüber gehen , hier rüber gehen sagen wir einfach, sagte Index, das ist ein Neuner da. Nur den Zeh. Passen Sie die Hierarchie an. Aktualisieren Sie die Erweiterung erneut. Gates jetzt über die Spitze. Also, jetzt wollen wir tun, ist ein Klick Ereignisse hinzufügen. Wenn dies angeklickt wird, öffnen Sie auf dem Display die Liste der Coupons, die wir hatten, bevor wir abhalten möchten. Das ist gut, also erscheint es hier drüben. Lasst uns einfach diese Gutscheintechnologie reparieren, damit sie schön zentriert ist. Es ist so, dass wir dies tun, indem wir nur Display flex sagen, Content-Center in einem Zeilenartikelcenter ausrichten. Beheben Sie das hier und möchten dann auch etwas Styling hier drüben hinzufügen. Also werden sie es tun, wenn wir all diese Andi wollen auf einem Hoch von etwa 300 peitscht für etwa 300. Brauche hier keinen Grenzradius. Vielleicht drei Pixel. Etwas gleich um die Ränder. Ein bisschen, Ähm, auf den Rest der Sache. Möchten Sie dies etwas weiter nach unten auf der Seite verschieben. Es ist also keine Überlappung. Andere Elemente waren, sagen wir, eine Spitze von 100 sehr leicht. Verringern Sie die 90. Wir haben nicht den Text die Zeile zentriert oder dies auch nicht. Wenn wir nur über diesen plötzlich überlauf versteckt, weil wir einen Listeneintrag hier selbst haben . Ähm, schieben Sie es zur Seite. Also sollten wir alles hier haben. Also, wenn wir das einfach in ein Emoji ändern, vielleicht dieses hier. Also ist es sicher. Dies aktualisieren unsere Erweiterung. Okay, wir haben da ein kleines Problem. Lasst uns einfach überprüfen, was wir von Kurs haben. Wir sagen, Gutscheinbutter, nicht Leute zeigen. Deshalb wurde es noch nicht definiert. Also, wenn diese aktualisieren, sollten wir unsere aktualisierte Ich bin nur hier spielen sehen, und dann müssen wir nur ein Klick-Ereignis hinzufügen, um diese Anzeige zu machen. Daher müssen wir den Anzeigetyp von Flex entfernen, da diese Elemente in einer Spalte angezeigt werden . So wird das dann verborgen sein. Und dann, wenn wir darauf klicken, sollte es angezeigt werden. Also hatten wir gerade Code für diese jetzt, also entfernt diese Display-Flex und dann lassen Sie uns hier unten eine neue Funktion erstellen. Anfrage erstellen Ereignisse Ich höre Sie nicht sagen, dass große Ereignisse eine neue Funktion sind. Sie wollen den Dokumentabfrage-Selektor sagen und sie wollen den Klassennamen dieser Schaltflächen erhalten . Wenn wir dies nur kopieren, fügen Sie es hier, Tante Event, Listener auf Klick. Und dann wollen wir, dass das hier unten eine Funktion ausführt. Also, wenn dies angeklickt wird, wollen wir dieses Element angezeigt werden, so dass wir den anderen Klassennamen nehmen wollen. Ich fange hier an, dass Stil Anzeigeblock. Also sollten sie dieses Ereignis hier unten erstellen, das der Schaltfläche einen Ereignis-Listener hinzufügt, was das relevant ist? Nur hier. Also, wenn dies angeklickt wird, aktualisieren wir den Stil dieses Elements hier oben, um anzuzeigen. Also gehen wir einfach zurück oder frisch dies, so wie Sie bei Coupons sehen können, die derzeit noch angezeigt werden , das liegt daran, dass dieses CSS über dem Schreiben ist. Sie sind CSS hier ist über das Schreiben, was wir hier aufgestellt haben. Also haben wir das unterlegt. Entfernen Sie das, das Kundenvorgänge aktualisiert. Los geht's. Die Liste der Gutscheine wird nicht angezeigt. Wenn wir hier oben klicken, wird es angezeigt. Wenn wir auf eine Domain gehen, die keine Gutscheine hat, zum Beispiel diese Argo-Seite hier, können wir sehen, dass unser kleines Symbol nicht erscheint. Es ist ein später im Kurs, wir werden einen Scheck machen, um zu sehen, ob es keine gibt. Gutscheine werden immer noch das Symbol angezeigt, aber in einem etwas anderen Design, so dass Benutzer ihre eigenen Coupons für diese Website einreichen können . Aber im Moment können wir sehen, dass es aus der Datenbank erkennt, ob Coupons existieren. Wenn dies der Fall ist, wird dieses Symbol in der Ecke angezeigt, und Benutzer können darauf klicken und die Liste der Coupons sehen. Also offensichtlich wollen, dass dies viel schöner und einfacher zu bedienen aussehen. Und wenn es mehr Coupons zu machen, können sie nach unten scrollen und leicht kopieren. Sie können diesen Gutscheincode einfach kopieren und in ihren Warenkorb legen. Sie erhalten einen Rabatt, also werden diese Dinge später im Kurs tun. Aber jetzt haben wir ein grundlegendes Styling an. Wir zeigen die Daten aus unserer Datenbank auf der Feuerbasis. Und dann überprüft das, ob dieser codierte Domain-Name der Patriot ist, auf dem diese Coupons für den Benutzer angezeigt werden. 9. CSS Datei erstellen und mit dem Styling füllen: Willkommen zurück zu diesem neuen Abschnitt. Also in diesem Abschnitt werden wir das Design von einer Verbrechenserweiterung hier ändern. So wird es die kleine Taste, die wir hier haben, anpassen, die die Erweiterung öffnet. Machen Sie es so, wenn Sie es erneut klicken, wird es geschlossen und beginnen, etwas Styling zu der Erweiterung hinzuzufügen. Es sieht also nicht so aus. Es ist aus einmal basiert, schreckliche blaue Farbe. Aber das ist kein Designkurs, aber wir werden es so bewegen, dass es viel schöner aussieht. Und dann können Sie dies mit Ihrem eigenen Design nehmen und ändern, die Sie machen möchten. Aber was wir zuerst tun werden, ist, wieder in einen Code-Editor zu springen, und es begann, diese Stile zu ändern. Gehen wir zurück in einen Code-Editor. Okay? Es ist eines der ersten Dinge, die Sie tun möchten, ist zu beginnen, einige von uns in eigene CSS-Datei zu wählen, so dass wir nicht Stile direkt in die Seite wie folgt importieren müssen . Also, um dies zu tun, um in eine Manifest-Datei zurückzukehren und wo wir unsere Content-Skripte haben, werden wir einen zusätzlichen Eintrag zu diesem Objekt namens CSS hinzufügen. Und das wird ähnlich dem sein, was wir oben Js gerade hier haben. Dies wird nur Coupon Punkt CSS genannt und stellen Sie sicher, dass Sie hier eine gemeinsame hinzufügen, so dass dieses Objekt YSL richtig und dann danach scheint, eine neue Datei namens Coupon dot CSS hinzuzufügen . Okay, also haben wir diese Datei jetzt hier drin, und sie ist in eine Manifestdatei verlinkt, damit wir von AP aus darauf zugreifen können. Jess, wir müssen nicht aufhören, dieses CSS in diesem JavaScript zu verwenden, damit Sie alle diese entfernen können , aber wir werden beginnen, dies in ATS Coupon Punkt CSS zu verschieben. Also, was Sie zuerst tun möchten, ist einfach das CSS zu kopieren. Haben wir hier? Notieren Sie sich den Klassennamen, um dies hier zu entfernen, greifen Sie den Kostennamen, fügen Sie dies in ein. Du hattest also einen Punkt davor und entfernst dann alle, ähm Anführungszeichen und Pluszeichen, die wir vorher amüsant hatten, dann wollen wir einfach die Indexverschuldung richtig anpassen . Es ist also einfacher für uns zu lesen und Änderungen vorzunehmen, also haben wir gerade gespeichert, dass sie dies für die anderen Elemente erneut tun möchten. Wir haben Sex entfernt. Dieser Teil, der Mantel jetzt nicht weiter hier unten. Wir haben den Knopf. Wir kopieren mit diesem Code, gehen zurück in eine CSS-Datei und führen den gleichen Prozess erneut durch. Es ist die Entfernung der Zitate. Okay, also werden wir auch einige erstaunliche Veränderungen vornehmen. Lassen Sie uns nur sicherstellen, dass wir all dies organisiert und gut strukturiert in unserer CSS-Datei haben. Also muss ich nicht in vier Worten zurückgehen. Wenn Sie diese Änderungen vornehmen, nicht der Hund hier oben für einen Kostennamen und dann speichern. Und dann wieder können wir diese Zeile einfach hier entfernen. Okay, also speichern Sie das jetzt. Gehen wir einfach zurück zu unserer Erweiterungsseite, aktualisieren Sie unsere Erweiterung und sehen, ob dies noch mit CSS-Datei funktioniert. Vielmehr, Und das hat Thestrals direkt in Thai JavaScript hinzugefügt, ein Fall, den wir sehen können, es funktioniert gut. Dennoch, hier ist es Jetzt fangen wir an, tatsächlich das Styling zu ändern, das wir haben, bevor wir in Styling umwandeln . Möchten Sie tatsächlich sicherstellen, dass, wenn Sie auf das Symbol klicken, um zu öffnen ah Liste der Coupons wird sicherstellen, wenn sie es erneut klicken, es wird es schließen, nur so dass wir den Platz für den Benutzer freigeben können, dies zu tun. Wir werden nur in einem kleinen Scheck nur hier unten hinzufügen, um zu sehen, ob die Gutscheinliste bereits erscheint. Also tun wir das einfach, indem wir sagen, wenn der Stil Anzeigetyp ein Block ist und dann werden wir sagen, dass es nein ist, werden wir in dieser Zeile hier hinzufügen. Wenn also derzeit ein Block ist, möchten wir ihn so ändern, dass er ausgeblendet wird und dann das Gegenteil, dass, wenn es ein Block ist, wenn es nicht der Block ist, wir wollten ein Block sein, also würde das nur bedeuten, wenn wir jetzt zurückgehen, können wir auf Typ von 80 erscheinen, wenn wir erneut klicken, und es versteckt die nächste. Wir wollen ein paar dieser Änderungen vornehmen. Also hier oben wollen wir dies von dem Bargeld ändern, das Emoji gewählt hat, um für Coupons wie zu sehen damit wir anfangen können, das Design zu ändern. Wir können den Inhalt ändern, der angezeigt wird, nur so dass wir bei diesen neuen Designänderungen haben können . Es fängt an, ein bisschen schöner auszusehen. Also nochmal, wir werden die Formulierung hier auch ändern. Also ändern Sie dies einfach zu sagen, statt Liste der Gutscheine für ich würde nur etwas sagen. Brauen, Gutscheine. Hallo, die Bohne verwendet haben. Und dann setzen wir einfach den Domain-Namen. Es gab nur mutig. die Domain einfach so geknallt und was dann? Wir sollten uns wohl tun. Nun, sie bewegen das einfach wieder auf 20 Zeile, nur um die Dinge viel leichter zu lesen. Und dann hier, fügen wir einen weiteren Absatz hinzu, der nur sagen wird, klicken Sie auf einen Umhang, um eine Nachricht zu kopieren. Also diese Zeile gerade hier ist letzte Usti auf Symbol. Und dann wollen wir diesen Absatz abschließen, und ich denke, wir sollten das zu einem Talikum machen. Ich würde das nur vorerst in Einklang bringen. Also nochmal, wir werden das retten. Wir konnten sehen, dass wir hier oben eine Veränderung haben, und dann haben wir jetzt ein wenig mehr Informationen. Okay, also sind wir fast bereit, die CSS-Änderungen hinzuzufügen, die wir für die Gutscheinliste hier und den Gutschein-Button wollen also sind wir fast bereit, die CSS-Änderungen hinzuzufügen, die wir für die Gutscheinliste hier und den Gutschein-Button wollen. Aber zuerst müssen wir nur die Art und Weise ändern, wie wir die Gutscheine anzeigen eso, dass es ein wenig anklickbarer aussehen lässt und es so zu machen, dass, wenn wir anfangen, das Styling zu lesen, wir diese Elemente viel einfacher auswählen können. So können Sie das Styling hinzufügen, das wir wollen. Gehen wir einfach zurück zu unserem Code-Editor und machen nur ein paar Änderungen hier. Um dies zu tun, scrollen wir hier nach oben, wo wir den Code für einen Gutschein eingeben. Ich werde nur diesen Teil hier entfernen, diesen Sprichcode und wir werden hier ein Spanelement einer Codeklasse setzen und dann das so abschließen . Dann werden wir das nächste Element hier auf eine neue Linie verschieben. Anstatt dies in die E M Tags für kursiv zu setzen, werden wir es in seinen eigenen Absatz setzen. Und dann eine Sache Mission. Wenn wir einen Schlag machen, ist bei einem toff Emoji-Pfeil wie dieser nur so, dass es ein wenig zusätzlichen Fluss auf die Art und Weise, wie sie dies angezeigt wurden, hinzufügt . Aber wieder, wenn Sie dies etwas ändern möchten, können Sie Ihr eigenes Display haben. Ich empfehle Ihnen nur, Sie wissen schon, fügen Sie Ihren eigenen Store-Geschmack, um es nur hier, Aber Sie können die CSS kopieren, die ich füge uns teilen diese nach dem Video verknüpft, so dass Sie das gleiche CSS verwenden können, wenn Sie möchten. Und von dort aus wissen Sie nur Dinge. Machen Sie sich Ihre eigenen mit einem Logo. Wenn Sie auf solche Dinge wollen, lassen Sie uns einfach sagen, dass jetzt, nur um zu sehen, wie dieses Display aussieht. Also gehen wir zurück zu Erweiterungen. Laden Sie frisch, falls wir sehen können, dass es ein wenig mehr Abstand ist. Also jetzt springen wir in die CSS-Datei und beginnen, einige weitere Stile hinzuzufügen. Fall wird hier mit der Gutscheinliste aufhören und fügen wir zuerst etwas Styling für die Header Off-Coupons hinzu. Also wählte ich nur eine einfache aus der Familie aus der siebten. Wir setzen eine neue Schriftgröße von 26 ein, um sie ein bisschen mehr hervorzuheben. Sie möchten einen Rand am unteren Rand von etwa 20 Pixeln hinzufügen. War das eine Grenze bodenlose Brunnen von einem Pixel, nur eine Sorte. Eine hellgraue Farbe. Wir werden Polsterung nach unten haben, nur um diese Grenze zu räumen und dann war eine Linie hias gut, so dass die Ränder nur ein wenig konsistenter sind. Das werden 26 Picks sein. Auch die gleichen, Ähm, Größen. Viel Spaß Größe. Dann werden wir etwas Styling für Absatz hinzufügen. Ich bin Tag in der Gutscheinliste, also sind wir Änderungen leicht auf der Farm Familie hier Sand Saref Linie Höhe sein. 20 Pixel Schriftgröße von 16. Hatte nur ein bisschen Kontrast gegen den Header. Zentrieren Sie es und fügen Sie dann ein Frontgewicht von 500 hinzu und setzen Sie hier eine Farbe ein. Eine Schwellung, ein hellgrau, und sie wollen den Rand entfernen. Top kommt als Nächstes. Sie möchten einige Stylings hinzufügen. Toothy, ähm, aktuelle Liste unserer Gutscheincodes. Also wieder, da dies auf der Liste kriecht, erhalten wir das Listenelement würde den Listenstiltyp ändern. Es ist eine Nonne, und dann entfernen Sie einfach jeden Rand zum Klopfen von links. Und dann sind wir gestylt naturalistische Gegenstände. Also möchten Sie diese in ihrer eigenen Art von kleinen Elementen enthalten. Also aus Board of Radius hier von drei Pixeln und dann einen Rahmen um das so , ein bisschen wie , ein Streicheln 15 Pixel, und dann werden wir einen Schatten um diese hinzufügen, ein Swell, dann wollen wir, dass dies auf Fall sein. Dann waren wir nur ein Rand unten von 20 Pixeln, nur um Platz aus. Wenn wir mehr als einen Code haben, mehr als ein Gutscheincode zur Verfügung, so sicher, dass sie sicher sind, genau das, was wir im Auge haben , ein paar weitere Stile einzuhalten. Aber wir sollten anfangen zu sehen, dass dies geschieht. Fall fängt an, Gestalt anzunehmen jetzt Bob's, die ein paar weitere Probleme hier wie diese haben. Andi, Polsterung um das Gesamtelement ist nicht zu schöne Geräusche, schreckliche blaue Farbe. Wir werden also anfangen, Änderungen an diesen Elementen vorzunehmen. Jetzt können wir diesen Bereich hier sehen. Es ist Zeit, etwas mehr Gestalt anzunehmen. Als nächstes ersetzen wir sie. Styling zum Code-Element. Dies ist der tatsächliche Gutscheincode-Inhaber selbst. Scrollen wir einfach nach oben. Also ohne eine Hintergrundfarbe aus einem hellen Orange, ein bisschen ähnlich dem auf Honig verwendet, aber nicht nein, genau das gleiche wieder. Wenn wir dies ändern, diese Farben, sollten Sie klopfen fünf Pixel. Ich möchte sicherstellen, dass es in Linie angezeigt wird und wieder gehen wir aus dem Grenzradius von drei Pixeln. Ich habe hier auch eine Grenze. Ich möchte sicherstellen, dass, wenn der Cursor von der Maus über diesen Satz bewegt wird, um Zeiger zu sein. Okay, dann wollen Sie endlich auch etwas Styling hinzufügen? Das neue Absatz-Tag für eine Beschreibung. Also wieder, dass wir auf Liste im Listenelement und dann Absatz Ich bin ein Text. Richten Sie dies nach links aus. Sam-Marge, oben von 10 Pixeln am Rand entfernt. Unten auf. Möchten Sie auch die Texttransformation von hier und SEF bei einer Größe von 14 Pixeln entfernen? Es ist Spaß Größe, nehmen Sie nicht Größe. Lassen Sie uns auffrischen. Dieser Fall sieht ein wenig besser aus, jetzt können Sie hier sehen, während ich vorschlage, dass Sie Ihr eigenes Styling hinzufügen. Ähm, aber das fängt an, Gestalt anzunehmen. Also, jetzt müssen wir tatsächlich an dem gesamten umschließenden Element hier von der tatsächlichen Entwicklung der übergeordneten Coupon-Liste arbeiten , um diese blaue Farbe zu entfernen. Und dann haben wir auch etwas Styling auf den Knopf hier oben. Okay, also zuerst werden wir diesen Grenzradius auf sechs Pixel ändern. Wir wollen die Kiste mitbringen. Hat gezeigt, dass wir hier oben nur einen Schatten um die Außenseite der Listenelemente hatten. Wir wollen die Rahmenfarbe weiß machen. Wir behalten den Hintergrund gleich. Wir werden diese Elemente gleich halten. Wir werden etwas Polsterung hinzufügen. 15 Pixel Entfernen Sie diese blaue Farbe nur hier, wie wir erwähnt. Und dann wollen wir Teoh. Erlauben Sie die Verwendung, dass Gürtel einen Scroll nach unten, etwas, wenn wir versteckt überlaufen haben. Das bedeutet also, wenn wir mehr als einen Gutschein haben und er von der Unterseite der Hirschängste abgeschnitten wird , wollen wir sicherstellen, dass sie einen Teil des Überlaufs nach unten scrollen können. Warum wurden gesetzt, dass Auto auf dann färbt alles, was wir so weit brauchen, so sicher, dass und dann die tatsächliche Gutscheintaste müssen Sie auch setzen wir anpassen. Die Größe hier ändert die Höhe auf 40 Pixel gesetzt. Die Breite war 50. Dann werden wir den Grenzradius nur zu sechs Picks geändert. Außerdem haben wir mehr von uns aus Rechteck dünn diesen Kreis. Wir verwenden das gleiche Buch Schatten wieder auf mit der Farbe wurden entfernt. Dies und wir machen unsere Grenze irgendwie weiß war eine lustige Familie von Süden und wir werden die Entfernung anpassen . Wir oft oben auf der rechten Seite des Bildschirms, nur eine 15, um es ein wenig mehr Platz zum Atmen zu geben. Dann sagen wir Schriftfarbe. Also, das ist nur speichern Sie das jetzt und werfen Sie einen Blick. Was wir bisher haben, falls wir dies sehen können, ist es nicht perfekt mit irgendwelchen Mitteln, aber es hat ein bisschen mawr definierte Abschnitte und ein wenig Styling geht hier vor, was genug für uns ist, um mit On Did Gebrauch für das nächste Bad voranzukommen, Natürlich. Als nächstes werden wir es Benutzern erlauben, hier unten unten auf diese Elemente eine Schaltfläche zu klicken , können sie ihre eigenen Coupons an die Datenbank senden, so dass Sie beginnen können, diese Proof-Informationen über DSO zu füllen . Dies wird der nächste Abschnitt des Kurses sein 10. Verlängerung zu sehen: Fall, wenn dieses nächste Video, werden wir die Erweiterung aktualisieren, so dass Sie die Coupon-Overlay wie folgt sehen können, ob Sie irgendwelche Coupons für diese Website verfügbar haben oder nicht. Also, nur um ein schnelles Beispiel dafür zu geben, haben wir bereits Beispiel-Gutscheincode hier für Google Dot com. Wenn ich zur BBC gehe, das Wetter hier drüben. Ich habe keine Gutscheine, aber ich kann die Erweiterung oben in der Ecke nicht sehen. Die ersten Änderungen, die wir vornehmen werden, sind, sicherzustellen, dass Sie tatsächlich immer die Schaltfläche sehen können , um das Gutschein-Overlay hier zu öffnen, und sie können einen Gutschein einreichen. So hatte in der Schaltfläche, um die Gutscheine hier unten hinzuzufügen. Wir werden wahrscheinlich in dieser oberen Ecke addiert Selbst wenn sie nach unten scrollen, können Sie immer noch einfach klicken, um einen neuen Gutschein hinzuzufügen. Aber so zuerst müssen wir tatsächlich weg machen, so dass Sie auf Offenheit Overlay von jeder Website klicken können . So springt es zurück in einen Code-Editor, um einige Änderungen vorzunehmen. Okay, also sind wir jetzt in unserem Code-Editor, und das erste, was wir uns ansehen müssen, ist diese Zeile gerade hier. Also gerade jetzt nehmen wir die Coupons Variable nur hier und schleifen sie mit den vier jeder Funktion. Nur hier. Nun, das ist großartig, wenn du weißt, dass du immer Inhalte haben wirst, um dich herum zu schleifen, aber weil wir wissen, dass einige dieser Domains leeres Geld sein werden, um das etwas zu ändern . Also werden wir das stattdessen ändern, um für Schlüssel in Coupons zu sagen. Und das wird Luke gerade hier sein. Also, wenn wir in diesem Teil kommen und statt diese Coupon-Variable zu verwenden, hören Sie einfach von der für jede Funktion, wir werden es selbst setzen. Also, wenn ein Coupon gleich Coupons auf Nachrichten, Katrinas Gefühl, dass richtig, so wird dies durch jedes Element schauen nur hier auf gesetzt diese Schlüsselvariable, und das wird durch den tatsächlichen Schlüssel sein. Möchten Sie in diesem Array zugreifen. Das wird also jedes Individuum sein. Cooper wird einen anderen Schlüssel haben. Und so können wir auf das Objekt genauso zugreifen, wie wir es zuvor getan haben. Aber das bedeutet, dass es keinen Fehler haben würde, wenn es keine Gutscheine gibt. Stellen Sie einfach sicher, dass das nicht da ist. Also ändern wir diese Linie in das hier. Also, nachdem Sie diese Änderung vorgenommen haben, wenn wir speichern, dass bei der Aktualisierung und gehen Sie zurück auf die Website wieder so frisch. Laden Sie diese andere Domäne neu. Kurz bevor wir das tun, müssen wir sicherstellen, dass wir diese Schließklammer einfach hier wegnehmen, weil die vier H-Funktion gerade hier eine zusätzliche Halterung öffnet. Also, jetzt brauchen wir nur die eine lockige Klammer nur hier. Cali Hosenträger Also, wenn wir zurück gehen, aktualisieren und versuchen Sie es erneut. Dies sollte dieses Problem beheben. Ok, da gehen wir. So können wir sehen, dass jetzt ein Coupon-Overlay erscheint. Also im nächsten Video wird beginnen, Styling für den Submit-Button und das Overlay hinzuzufügen, das angezeigt wird, wenn wir darauf klicken, und wir werden ein wenig Text hinzufügen, nur hier getan, um zu sagen, Sie wissen, Sie könnten die erste Person sein um einen Gutschein für diese Website hinzuzufügen, nur um ihnen ein bisschen einen Aufruf zur Aktion zu geben, um tatsächlich auf Eingabe-Coupons zu erstellen 11. Ausstellungsform zum Einreichen von Gutschein: Jetzt, da unser Coupon-Overlay auf jeder Website erscheint, müssen wir sicherstellen, dass wir saugen. Zeigen Sie eine separate Meldung an, wenn keine Gutscheine für diese Seite vorhanden sind. Also werden wir einen Check in hinzufügen, kurz nachdem wir diese Schleife durch die Coupons hier machen und sagen, Wenn Gutschein html leer ist, wollen wir dieses Stück CO ausführen. Nur hier. So gut, dann fügen Sie einfach den Gutschein html hinzu und wir werden sagen, dass Sie der erste Gutschein für diese Website einreichen. Fix war da drin. Also, wenn wir das und frisch speichern und einen Blick auf unsere Seite werfen, stellen Sie sicher, dass Sie dieses Absatz-Tag schließen. Wir sollten jetzt eine Nachricht in der Chrome-Erweiterung sehen. Wenn wir also zu einer Website gehen, die keine Coupons wie diese hat, warten Sie, bis die Seite das Overlay öffnet und es gibt diese Nachricht nur dort, damit Sie sehen können , dass es jetzt auf dieser Seite angezeigt wird. Okay, jetzt, da wir eine Nachricht haben, die hier erscheint, haben sie keine Gutscheine. Wir müssen eine Schaltfläche hinzufügen, damit die Leute darauf klicken können, um alle Coupons, die sie für diesen Arbeitsplatz haben, einzureichen. Also, was wir dafür tun werden, ist in den inneren HTML-Bereich gerade hier zu gehen, und wir werden einfach eine neue Entwicklung hinzufügen, dann diese in eine neue Zeile verschoben und wir werden sagen, Absenden Coupon wird hier einen Klassennamen hinzufügen um einzureichen. Unterhalb des Namens dieser Klasse. Also, wenn wir das speichern und aktualisieren, finden wir eine neue Schaltfläche. Waren bei Styling für diese ein T Ende aus diesem Video. Und dann müssen wir hier unten ein weiteres Element hinzufügen, um das eigentliche Overlay zu erstellen, das angezeigt wird, wenn jemand auf diese Schaltfläche klickt. Also, da, nur hier. Erstellen Sie dann erneut eine neue Variable. Wir heißen diesen Gutschein senden Overlay und dies ist ein Kran neues Element, das ein Tod ähnlich wie Perforce wird bei einem Klassennamen sein würde. Also kopieren Sie einfach diese Zeile hier. Der Klassenname ist Unterstrich. Übermitteln Sie die Überlagerung auf die gleiche wie zuvor. Ich werde im CSS durchgehen, aber ich werde die aktualisierte CSS-Datei bereitstellen, die wir am Ende verwenden. Also, wenn Sie möchten, können Sie einfach das CSS kopieren und einfügen oder mit mir folgen und dann werden wir den inneren HTML von diesem Element setzen . - Schwellen. Also sagen wir, dass ich reingehe. Also h drei, Haben Sie einen Gutschein für diese Website Sache? Schließen Sie das auf einer neuen Linie ab. Wir werden eine Reihe von Eingaben erstellen, die sie verwenden können, also brauchen wir sie, um uns den tatsächlichen Code und die Beschreibung zu übergeben, was dieser Code tut. Also, zum Beispiel, es ist 50% Rabatt, und dann wird es schließlich eine Schaltfläche unter ihnen geben, um tatsächlich den Gutschein einzureichen. Also hatten wir gerade diese Elemente jetzt super jeder von ihnen in einem Tag von Andre. Benötigen Sie drei davon für jede von ihnen. Diese Teile davon werden zuerst nicht die Schaltfläche mit diesem letzten sein, und ich werde sagen, Gutschein einreichen. Gott sei Dank. Die Schaltfläche aus hier oben, wir müssen beschriften, die Code-Label hier sagen, um Beschreibung zu sagen. Und dann brauchen wir auch die eigentlichen Importelemente. So tun Sie, dass genau das gleiche, wie Sie normalerweise Eingabetyp Text in der Klasse ist Code. Wir kopieren nur das auf Tempo, dass hier unten und ändern Sie einfach die Klasse Teoh Beschreibung oder Disc mein Bestes für kurz. Und dann müssen wir nur endlich einen Klassennamen für unseren Submit-Button hinzufügen, damit wir einen Ereignis-Listener haben können , wenn dies angeklickt wird und dann fast fertig ist. Wir müssen nur ein mawr Attribute für dieses Element hinzufügen, bevor wir es auf der Seite hinzufügen, um sicherzustellen, dass Sie dies nur hier geschlossen haben. Also möchte ich sagen, Gutschein einreichen. Die Anzeige des Overlay-Stils ist gleich „none“, da wir nicht verpassen, dass sie angezeigt wird, bis sie tatsächlich angeklickt wurde. Ein Bernstein gerade an diesem am unteren Rand der Seite. Stellen Sie sicher, dass es Coupon Überlagerung senden ist. Also, wenn wir nur da rüber schauen, können wir sehen, dass alles richtig ist und sparen. Wir aktualisieren dies einfach und stellen sicher, dass es keine Fehler gibt. Das läuft reibungslos. Du solltest nichts sehen. Wenn Sie das Element auf der Seite inspizieren, müssen Sie dies unten auf der Seite finden, aber wir brauchen uns noch keine Sorgen darüber zu machen. Nun, da wir Überlagerung auf die Seite hinzugefügt, um mich nach unten gehen und stellen Sie sicher, dass wir ein Ereignis erstellen. Teoh Stellen Sie sicher, verschwindet, sobald der Benutzer klickt. Diplomarbeit. Geben Sie den Knopf hier oben zu. Also, es bin ich, hier unten zu unserer Pre-Event-Funktion zu gehen und etwas Platz an der Spitze hinzuzufügen . Wir gehen, Teoh, kopieren Sie diese Zeile nur. Es wird ein Ereignis-Listener für das Click-Ereignis sein. Genau das gleiche wie dieser hier macht nicht ein paar Änderungen vor. Also statt, ähm, warten auf Gutschein-Button, werden wir auf Gutscheinliste hören und dann Schaltfläche senden, um sicher zu sein, dass diese Klammern beide hier oben schließen . Und dann werden wir sagen, Dokumentabfrage, Selektor senden Overlay-Stil ist Block. Also im Grunde das Gegenteil von dem, was wir hier oben mit ihnen hatten. Stellen Sie sicher, dass dieses Element angezeigt wird. Also lasst uns das gerade jetzt testen. Also ist es hier sicher. Aktualisieren Sie Andi. Laden Sie eine Seite neu. Also haben wir noch kein Styling für diese Elemente hinzugefügt, Aber wenn wir wissen, klicken Sie, senden Sie Gutschein, wir sollten einen Weg nach unten auf der Seite finden. Dieses Element scheint von diesem hat auch kein Styling. Aber wenn wir aktualisieren und einfach zurück zum Ende dieser Seite gehen, können wir sehen, dass dies noch nicht bezahlt wurde. Aber wenn wir auf das Overlay auf dem Submit Coupon Button klicken, erscheint es dann so neben mir, Styling hinzuzufügen, um tatsächlich sicherzustellen, dass erstens diese Schaltfläche schön gestylt ist und dass diese Coupon-Overlay in der Mitte des Bildschirms erscheint nur hier, damit der Benutzer seinen Gutscheincode und eine Beschreibung eingeben kann. Und dann schließlich brauchen wir eine Funktion, die, sobald sie drücken, senden Sie Gutschein, dass es eine Anfrage an Feuerbasis sendet , um diese Informationen in eine Datenbank hinzuzufügen. Im nächsten Video werden wir uns diese beiden ansehen. Zwei Teile davon würden das Styling tun. Andi, füge die Verbindung zur Fire Base hinzu, um diesen Gutscheincode in eine Datenbank zu senden. 12. Neuer Befehl zur Einreichung von Gutschein in der Datenbank: Willkommen zurück. In diesem nächsten Video erstellen wir zunächst eine Funktion, die wir verwenden können, um die Gutscheine, die die Benutzer einreichen, in unsere Datenbank zu senden . Tun Sie das also. Wir werden hier nach oben gehen, nachdem wir unsere Chrome-Laufzeit-Nachrichtenfunktion eingeschaltet haben , werden wir eine ähnliche Funktion erstellen, aber für die Übermittlung von Informationen an Feuerbasis statt Abrufen. Also beginnen wir mit der Erstellung einer Variablenfunktion wie diese. Es sieht ein Submit aus. Bleiben Sie immer wieder, dies ist eine Funktion und wir nehmen drei Parameter, die wir codieren Beschreibung auf Domäne. Also öffnen Sie sich wie so werden wir ein Konsolenprotokoll hinzufügen, nur um uns t Bucket zu helfen. Wenn wir brauchen, um Schweizer Steak einreichen Gutschein auf. Dann werden wir gerade das Objekt durchlaufen, das wir tatsächlich auch an die Feuerstelle schicken wollen . Dies wird also wieder Code-Beschreibung auf der Hauptseite sein. Also alle Informationen eines Passings und im Grunde nur in einem Objekt in den Ebenenvariablen fallen gelassen . Das ist die Protokollierung, damit wir sie sehen können. Ich bin einfach da. Aber als nächstes müssen wir sagen, Chrome-Laufzeit senden Nachricht so ähnlich wie das, was wir hier oben tun . Ok, Onda, wir können diesen Code taters kopieren, um Zeit zu sparen. Also, wenn wir das hier nur Bit nehmen und einfügen, und dann müssen wir den Befehl von fetch ändern, es ist ein Post und dann in Daten, werden wir dieses Objekt nur hier übergeben, wie so und in der Antwort statt Ausführen der vergangenen Coupons, ähm, Funktion nur hier. Wir werden eine neue Funktion verwenden, Werde eine Sekunde erstellen. Also nannte es diesen einen Coupon-Rückruf zu senden, und dies würde die Antwortdaten auf der Domain wieder aufnehmen. Ein Schwung. Wenn wir also nur dieselbe Callback-Funktion nehmen, die gerade erstellt wurde, wird dies eine Funktion sein, und es würde die Antwort auf die Domäne nehmen. Und dann von hier aus wollen wir nur das Overlay verstecken. Sie werden Crease Lecter sein. Ich möchte nur einreichen, überlagern, und dann sagen wir, und eine Stil-Anzeige ist nein. Und wir sind nur eine Menge auf dem Bildschirm nur für jetzt und sagen Gutschein eingereicht. Geben Sie einfach ein wenig Feedback, aber ich würde empfehlen, diese etwas schöner zu gestalten, wenn Sie das wirklich viel verwenden möchten . Box Sechs Botschaft. Das ist nicht die beste Möglichkeit, Nachrichten für den Benutzer anzuzeigen. Aber vorerst ist dies ein perfekter Prozess. Sieh mal, was wir haben. Und wir können das nicht wirklich an der Konsole sperren. Ein schwillt an. Wir können diese Informationen überprüfen. Wir kommen zurück. Wenn Sie eines davon debuggen müssen, damit Sie die Antwort überprüfen können, genau das. Als nächstes müssen wir tatsächlich weiter unten auf die Seite gehen, wo wir unser Ereignis erstellt haben, auf dem wir einen Ereignis-Listener für den Submit-Teil des Buttons hinzufügen, tatsächlich diese neue Funktion hier erstellt hat. Und dann werden wir in eine Firebase-Datei gehen, wenn Sie diese separaten Ereignisse hinzufügen. Also haben wir den Abholkommandeur, um den Post-Befehl auch hier hinzuzufügen. 13. Anlegen von Gutscheindetails zur Datenbank: Willkommen zurück. Wie wir das letzte Video erwähnt haben, werden wir hier unten eine Funktion in der Kiste Ereignisfunktion hinzufügen, so dass wir einen Listener haben können , wenn der Benutzer das Coupon-Overlay ausfüllt und einen Gutschein einreicht, wird dies die Funktion , die wir hier erstellt haben, die Gutscheinfunktion einreichen. Also müssen wir im Grunde sicherstellen, dass wir den Code auf der Beschreibung bis zu dieser Funktion durchlaufen haben. Also erster Durchschnitt es vorher, wie wir es vorher getan haben. Lassen Sie uns den Ereignis-Listener kopieren. Nur ein Sex und Zeit auf ändern das Hindernis, tatsächlich zuzuhören. Also für dieses Beispiel ist es die Abende übermäßig, und dann werden wir nicht auf die Subjektleute hören. Also, wenn auf dieses Element geklickt wird, wollen wir dieses Stück Code zu dem ersten ausführen, den wir tun möchten, ist den Code zu bekommen. Also der Gutschein-Code. Also wieder verwenden wir den Abfrageselektor und dies wird der Übermittlungscode sein, den wir gerade hier haben . Also sei diese Klasse von plötzlich übermäßig und dann wollen Zugriff auf den Code in Käufen. Wir haben diesen Klassennamen verwendet, so dass der Zugriff genau so sein könnte, haben wir tatsächlich einen Punkt für den Klassennamen und dann Code. Sie fügen nur Wert hinzu, um sicherzustellen, dass sie tatsächlich den Importwert aus diesem Eingabefeld erhalten als genau der gleiche für die Beschreibung wie diese. Und dann müssen wir nur das einfach an die Submit-Coupon-Funktion wie folgt übergeben . Das ist alles, was wir brauchen, um in unserer App dot Js zu dio So können wir das jetzt und dann speichern. Das ist alles verlinkt. Der nächste, den wir tun müssen, ist die Firebase-Datei zu aktualisieren und dann endlich unser Styling für die eigentliche übermäßig hinzufügen Okay, jetzt sind wir nicht firebase dot Js Datei. Wir müssen sicherstellen, dass wir hier einen weiteren Check-In für das tatsächliche Push-Ereignis hinzufügen. Also, in unserem Fall ist ein Post-Befehl hier, also herrisch holen und hier unten sagen wir post Also werden wir eine weitere if-Anweisung unter diesem hinzufügen , der auf den Beitrag hört. So wissen wir jetzt, dass dies ist, wo haben These zugeben Gruppe über Daten kommen durch hier . Also müssen wir zuerst Teoh einige Variablen setzen, nur dass wir hier oben oben getan haben, damit wir das Domain-Beispiel kopieren können, weil wir das wieder brauchen, und dann müssen wir den Code bekommen. Dies wird Nachrichtendatencode auf der gleichen für die Beschreibung sein. Dies wird eine Meldung Datenbeschreibung sein. Das ist ganz unkompliziert. Aber jetzt müssen wir sicherstellen, dass wir das tatsächlich in die Datenbank geben. Also bei diesem in einem try-Block. Nur wenn es irgendwelche Fehler von der Feuerbasis, die wir nicht vorhersagen können, dass sie nicht einfach brechen schwingen, um diese Fehler zu erfassen. Du kannst das also so machen. Wenn ich das richtig buchstabiere, dann können wir die Ära so aussehen, aber sonst sind wir in diesem Block in Ordnung, nur hier, um den Code auszuführen, den wir ausführen müssen. Also beginnen wir damit, neue Post-Firebase-Datenbank des Zugriffs auf die Update-Basis selbst zu sagen, die Art und Weise, eine Referenz zu setzen. Sei also in der Domäne. Und dann wollen wir diese codierte Domain verwenden erscheinen so sehr ähnlich wie das, was wir hier an der Spitze tun . Wir werden sagen, pushen und setzen Code als Code auf Beschreibung als Beschreibung. Das ist also alles, was Sie hier unten tun müssen und dann für uns die Antwort zurück an die normalerweise sagen wollen, dass ich die neue Idee mag, die in der Datenbank hinzugefügt wurde. Also, um dies zu tun, sagen wir nur Beiträge, ich d gleich neuen Post Key. Also verwendet diese Referenz hier oben. Und dann gibt es eine Firebase-Funktion, die generiert werden kann, damit wir den eindeutigen Schlüssel aus diesem neuen Gutscheincode bekommen können. Und dann haben wir die Antwort zurückgegeben. Also wieder, weil wir hier alles eingerichtet haben, können wir einfach eine Antwort zurückgeben, ähnlich wie die Prügel. Gerade hier, anstatt es für den fetch-Befehl zu sein, ist für den Post Command. Also würden wir nur sagen Antwort-Typ Ergebnisse, sagte der Status wieder als Erfolg und dann kurz nach den Daten zurück als der neue Post I D. Und die Anfrage. Es ist die Nachricht sagt, dass alles, was wir tun müssen, um sicherzustellen, dass wir dies in die Datenbank übergeben haben , aber es ist ziemlich zurück, anstatt nur in die Konsole zu schauen, dass wir eine separate Antwort setzen , so dass wir dies tatsächlich an Abdul übergeben Ja, anstatt nur den Fehler auf dieser Seite zu haben. So setzen Sie einfach den Status hier als Fehler und ändern Sie die Daten. Dies macht es alles, um dieses Komma zu ändern und dann zu speichern und sicher zu sein, dass hier unten. Ein Schwung, ähm, weg, wie Sie stundenlang berücksichtigen können, weil es kein richtiges Objekt ist. Aber jetzt stellen Sie sicher, dass Sie speichern, und wir werden die Chrome-Erweiterung erneut ausführen. Finden Sie, wenn Sie laufen, dass es nicht ganz zahnartig geladen wird, wenn Sie auf die Erweiterung in der oberen rechten Ecke klicken ? Aber um das zu beheben, müssen wir nur sicherstellen, dass wir diesen Klassennamen anpassen, nur um zu erregen. Verpasste gesunde Unterstriche. Aber wenn wir dies aktualisieren, speichern und es erneut ausführen, können wir beginnen, um die Erweiterung erscheinen zu sehen. Also muss ich jetzt etwas Styling hinzufügen. Aber lassen Sie uns zuerst die Erweiterung überprüfen, damit wir zu unserem Gutscheinfinder gehen und aktualisieren. Wir gehen zu einer Domain öffnen und sie können das hier sehen. Wir haben einen Gutschein. Nie Submit-Schaltfläche, was bedeutet, fügen Sie etwas Styling für auf diesem Overlay, das auch angezeigt wird. Also im nächsten Video, fügen Sie einige grundlegende Styling für unser Overlay und fragen Sie Submit-Button 14. Stilen und Überlagerung: Als nächstes müssen wir unserem Overlay etwas Styling hinzufügen. Also ein Schätzknopf. Also gehen wir in unseren Coupon Punkt CSS stapeln hier oben und scrollen nach oben. Und so werden wir bei etwas Styling zu unserem Overlay stoppen. Wir rufen diese Gutscheinliste an. Dave, ich bin nicht die einzige Geschichte bei Buttered, Also 1. 1, um sicherzustellen, dass wir einige Polsterung So fünf Pixel und 10 Pixel für die Höhe für die obere und die untere in der linken und der rechten wurde eine Schriftgröße von 10 Pixel eingestellt. Schwarzer Hintergrund. Wenn Sie eine dieser Farben auf dem Weg ändern möchten, fühlen Sie sich frei, nur um es für uns hervorzuheben. Ich habe versucht, es darin zu verwenden. In dem Beispiel setzen einige Schriftfarbe ist gut gebildet Familie auf. Wie ich bereits erwähnt habe, können Sie das CSS kopieren, das nach diesem Video hinzugefügt wurde, damit Sie CSS dort greifen können, also gehe ich einfach durch und im Rest der Fall ist das alles Styling, das wir für unsere Tasten brauchen. Wenn wir also die Aktualisierung speichern, schauen Sie es sich an, wir müssen nur sicherstellen, dass Sie einen Unterstrich erneut hinzufügen. Fangen wir hier an. Verpassen Sie die hier weiter. Also für die Erneuerung wieder. Öffnen Sie nun unsere Erweiterung und sie können sehen, dass wir einen Knopf gestylt haben. Also jetzt müssen wir etwas Styling für unser Overlay hinzufügen, damit es in der Mitte der Seite angezeigt wird. Und ich denke im Moment auch, aber das ist hinter den Elementen von der Seite verborgen. Also darunter, wo wir das Stehen für den Knopf hinzugefügt haben, so fügen Sie etwas Styling für übermäßig hinzu. Also nochmal, das ist unter der Schule. Überlagerung einreichen. Die 2. 1 ist ein Bindestrich, und dies kann als eine Position festgelegt werden eine Breite von 220 Pixel sind Höhen 200 Pixel festgelegt werden. Positionieren Sie es auf halbem Weg von oben auf der Seite und 50% von links. Für den linken Rand werden wir minus 110 Pixel tun, was halb von der Peitsche auf der gleichen Seite von der oberen Menge der Hintergrundfarbe ist. Die Rahmenfarbe als ed Index der erscheint oben auf jedem Element möglich, weil wir hier mit verschiedenen Websites arbeiten, sie könnten schwebende Elemente haben. Es ist nur, um sicherzustellen, dass das Overlay auf der Oberseite eines beliebigen Inhalts erscheint, war eine Art Klopfen. Und wir können diese Box Größe CSS Eigenschaft hier verwenden und sagt seine Grenze Box. Und dann schreiben wir endlich die Zeile nur als Zentrum. Also, wenn wir diese jetzt und dann neu geladen Erweiterung auf einem frischen speichern, damit wir ihre Erweiterung öffnen können , könnten wir Schaltfläche einreichen. Und wir haben jetzt Overlay auf der Seite erscheinen. Nein, es ist nicht das Schönste, aber es sollte funktional sein. Also, wenn wir eine Fünf-As-Konsole öffnen und die Datenbank auschecken, wir eine Erweiterung hinzufügen, um sicherzustellen, dass funktional paart sind die Gutscheine durch unsere Datenbank funktioniert. Ok. Vielleicht habe ich das auch auf Ihrem Code bemerkt, aber ich habe das hier falsch gemacht. Sie sehen also die Beschreibungszeile, aber was wir angeblich eine Nachricht sein sollen. Es scheint also diese eine Zeile hier zu ändern. Wir sollten das richtig bei dir haben. Aber nur für den Fall, dass Sie genau das kopieren, was richtig ist, muss ich sicherstellen, dass Sie diese Zeile gerade hier aktualisieren. Aber ansonsten sollte alles zu Ihrer Datenbank durchlaufen. Also führe ich einfach mein Beispiel noch einmal aus, um dir zu zeigen, so dass irgendwelche Fehler nur hier erscheinen. Wenn wir neu sind, laden Sie das Seitenöffner-Overlay bei diesem Rabattcode bei einer Beschreibung und senden Sie es. Wir haben eine Nachricht, dass Coupon eingereicht, und wenn wir jetzt in einer Datenbank einchecken, können Sie sehen, dass erschienen ist hier getan. Und das ist die einzigartige Post-Idee, die wir zuvor erwähnt haben, so dass Sie diese Teoh tatsächlich verschiedene Informationen auf der Seite anzeigen können , wenn Sie wollen, Also im Moment sie nicht nur hier erscheinen noch. Aber wenn Sie diese Seite aktualisieren, weil es für diesen Domain-Namen war und wir neu laden, können Sie sehen, dass es nur hier angezeigt wird. Also im nächsten Abschnitt des Kurses, werden wir ein paar Anpassungen vornehmen, dass, wenn Sie auf die Rabatt-Trainer reißen, es wird in Ihre Zwischenablage kopieren, so dass Sie es dann einfach in Ihr Auto einfügen können. Andi wird ein paar letzte Anpassungen und die Styling-Bereiche wie diese vornehmen. Ich stelle sicher, dass Sie dieses Overlay und nur noch mehr letzten Schliff schließen können. Dann schauen wir uns an, wie Sie tatsächlich Ihre kriminelle Aufmerksamkeit auf den Chrome-Erweiterung Storeveröffentlichen Chrome-Erweiterung Store 15. Kopieren und Auffügen: Diese neuen Abschnitte, wie wir bereits erwähnt haben, werden weggelassen werden. Also werden wir es so machen, dass, wenn Sie auf diesen Gutscheincode klicken, sie in Ihre Zwischenablage kopiert werden. Und wir werden auch eine Veranstaltung hinzufügen, damit wir schließen können. Dieses Overlay macht Klicks wird eine Schaltfläche hier oben hinzufügen, so dass Sie einfach klicken können. Andi hat das Overlay geschlossen, aber zuerst werden wir an diesem Bereich hier arbeiten, also führen wir eine Kopie zum Zwischenablage-Interview durch, klicken auf einen dieser Codes. So springt es zurück in unseren Co-Editor und beginnt, die Funktionen hinzuzufügen. Der Fall von hier Wir sind wieder in diesem Code-Editor, und wir werden nach unten scrollen, wo wir Event-Funktionen hier unten haben und wir werden eine neue Funktion direkt darüber hinzufügen. Sie werden tatsächlich die Kopie in die Zwischenablage Funktion sein, also wäre es eine neue Funktion. Hier ist eine Kopie in die Zwischenablage, und dies würde in einer Zeichenfolge nehmen, die wir kopieren möchten. Und so hier drin. Was wir im Grunde tun wollen, ist temporär einen Textbereich zu erstellen und wird Ah, eine Zeichenfolge als den Wert dieses Textbereichs eingeben, ihn auswählen, kopieren und dann den Textbereich entfernt, so dass wir nur mit der Erstellung der Eingabe beginnen. Und dies wird, wie wir bereits erwähnt haben, ein neues Element außerhalb des Textbereichs sein. Und dann werden wir das in HTML setzen, um Drink so gefragt zu werden und dann müssen wir es nur auf der Seite hinzufügen . Verwenden Sie also wieder ein Stift Kind am MPA-Ereignis oder Eingabeelement, und dann wählen wir es einfach Says wird den gesamten Inhalt aus dem Textbereich auswählen, im Wesentlichen tun dies so ist es nur wählen Sie es aus. Und dann wollen wir Teoh Teppich in die Zwischenablage legen. Es gibt eine Reihe von verschiedenen Möglichkeiten, dies zu tun, aber der beste Weg in Chrome, wo die Erweiterung auf , die unterstützt und die meisten Browser sein wird, ist, diese Executive-Befehlsfunktion wie diese zu verwenden und möglicherweise kopieren zu haben. Das ist also eine X E C Befehlskopie, und dann müssen wir nur das Element entfernen, das wir gerade so erstellt haben. Stellen Sie sicher, dass Sie Rechtschreibung korrekt entfernt haben. Da gehen wir. Also erstellen wir das Element, das in der Wut gesetzt wird, um es als unsere Zeichenfolge zu fräsen, fügen es der Seite hinzu, wählen es aus, copping es und entfernen es dann von der Seite. Und dann haben wir gerade diese Funktion zurückgegeben. Das ist also unsere Funktion zum Kopieren in die Zwischenablage. Jetzt müssen wir es tatsächlich benutzen. Also hier unten, werden wir eine neue Veranstaltung auf dieser Veranstaltung erstellen wird ähnlich sein, was wir zuvor getan haben . Sprachdokumentabfrage-Selektor. Aber dieses Mal möchte ich sagen, dass Chris alles mochte. Also wählen wir alle Elemente auf der Seite aus, die diese passende Klasse haben, und wir werden nach Gutscheinliste suchen. Stellen Sie sicher, dass Sie die Gutscheinliste unterstrichen haben und dann suchen wir auch hier nach der Code-Klasse , die Teoh Klasse Klasse hier oben entspricht. Also span Klasse ist Code. Also habe ich all diese Elemente durchgeschaut, und dann machen wir einen Check hier unten. Also nennen wir sie Code-Element, und dann werden wir einfach wieder laufen. Dies ist im Wesentlichen wie das Hinzufügen eines Ereignis-Listener zu jedem einzelnen Element mit dieser Klasse, also erwarten Sie alle, durchlaufen, und dann sagen wir einfach Code-Element beim Ereignis-Listener beim Klicken, und dann wird dies im Grunde das Gleiche. Es ist dort, wo man es normalerweise nicht tut. Aber hier drinnen können wir jetzt Code ausführen, als ob er auf jedem dieser einzelnen Elemente ist, ohne den Crew-Sektor zu haben. All diese Grube hier unten macht es genau so, wie es sein würde. Ein Sui hat es hier unten erschaffen. Also hier drinnen müssen wir nur sagen, Coach String ist Code-Element in der nächsten TML und dann sagen wir einfach Kopie in die Zwischenablage Coach, String wie folgt. Dies fügt einen Ereignis-Listener zu allen unseren Gutscheincodes hinzu, wenn sie darauf klicken. Es wird sie in die Zwischenablage kopieren. Also ist es sicher, dass das hier ist. Gehen wir zurück zu unserer Verbrechenserweiterung. Erfrischen Sie sich, Andi, sehen Sie, was wir haben. So aktualisieren Sie und gehen Sie zurück zur Erweiterung. Könnte aus diesem Coupons Paste kommen und wir können sehen, dass das Einfügen ist. Ich kümmere mich um die Ereignisse, die wir gerade getroffen haben, die richtig funktionieren. Als nächstes wollen wir sicherstellen, dass wir das übermäßig schließen können, damit wir ein Spanelement von oben hier hinzufügen , wenn es angeklickt wird. Es wird das übermäßig schließen. Okay, also zuerst werden wir ein Span-Element hinzufügen. Also hier oben, wo wir unser Overlay haben, werden wir in einer Spanne nur hier hinzufügen und das auf eine neue Linie verschieben. Stellen Sie sicher, dass es eine einzige ganz auf einem einzigen Beben gibt, nur da, um mit zu beginnen. Und wir sagen, Klasse ist nah und dann setzen wir einfach ein X in Klammern und sagen Schließen. Das ist alles, was wir für unseren Knopf brauchen. Und dann gehen wir einfach wieder runter zum Veranstaltungsbereich und dann fügen wir einfach eine weitere Crew hinzu Staaten können diesen hier tatsächlich kopieren und stattdessen Andi einfügen. . Hier rennen Sie weiter. Es wird das plötzliche Overlay selbst sein, und sie waren auf der Suche nach der Kleidungsklasse. Dies wird das Betreff-Overlay finden und dann gefragt Band, das wir gerade erstellt haben, und anstatt es Spares Block zu machen, wird es als keine angezeigt. Also habe ich das gerettet. Gehen Sie zurück zur Erweiterung. Aktualisieren Sie, Andre, führen Sie das Gehäuse aus. Wir öffnen unser Overlay. Jetzt haben wir diesen nahen Text, und wenn wir Kit könnten, schließt es das Overlay. Also da haben wir es. So haben wir unsere Erweiterung, die verschiedene Gutscheincodes anzeigen kann. Sie können Gutscheincodes einreichen, Andi. Er kann dann klicken, um jeden Code zu kopieren und sie auf Ihrer Website zu verwenden. Im nächsten Video werde ich malen, wie Sie Dysfunktion an den Chrome-Erweiterungsspeicher einreichen können und über einige Möglichkeiten nachdenken , wie Sie diese Erweiterung sowohl in Bezug auf das Styling auf die verschiedenen Anwendungsfälle und die gewünschte Leistung verbessern können , um aus ihm herauszukommen. 16. Wie du Chrome Extension veröffentlichst: Willkommen zurück zum letzten Abschnitt dieses Kurses. Bisher haben wir durchgemacht und haben unsere Erweiterung erstellt. Wir haben es mit einer feuerbasierten Datenbank verbunden. Ich hatte es alle Interaktionen, die wir wollten und aus der Datenbank, um Coupons zu zeigen. Aber lasst uns zuerst im ersten Teil dieses Videos über verschiedene Wege nachdenken. Wir könnten diese Erweiterung verbessern, wenn wir Teoh wollten, es mehr Benutzer unterstützen und weitere Funktionen für sie hinzufügen. Werfen wir einen kurzen Blick auf unsere Erweiterung hier drüben. Also hier haben wir es. Wir haben nur gebaut. Wir haben unseren Button hier oben und es öffnet dieses Overlay. Das erste, was mir auffällt, ist, dass das Design von diesem sehr, sehr einfach ist . Also das erste, was ich vorschlagen würde, für Sie zu suchen und vielleicht auf Websites wie dribble dot com schauen, können wir gutes Design finden. Inspiration ist anders. Sie könnten diese Waffe Startpunkt zu optimieren, um Ihre eigenen einzigartigen Geschmack zu dieser Erweiterung hinzuzufügen. Andi, ändern Sie das Design und nur auf dem Display dieses ein wenig jetzt, in Bezug auf Funktionen, die ganz schön funktionieren könnte. Eine Sache ist nicht vorschlagen, die Suche in ist das Hinzufügen einer Abstimmungsoption nur hier, so dass Sie tun können, wie, Daumen nach oben oder Daumen nach unten, um zu sehen, ob diese Erweiterung. Wenn dieser Gutscheincode für die verschiedenen Benutzer funktionierte, so können Sie schnell sehen, welche Coupons waren gut für Leute, von denen diejenigen nicht gearbeitet haben . Das könnte eine gute Option sein. Toe Ada ist gut, und jetzt eine andere Sache, die sehr nützlich für Ihre Erweiterung sein könnte, ist eine Art, wie Sie suchen können . Also, wenn Sie sich vorstellen können, wenn Sie in ein Geschäft gehen hat viele verschiedene Gutscheincodes, könnte es ziemlich überwältigend bei den hier aufgeführten Bestellungen sein, so dass es nützlich sein könnte, ein Suchfeld hier oben hinzuzufügen . Nein, ich werde dir noch keine Videos zeigen, wie du kannst. Sie können diese Arten vorschlagen, um zu versuchen und implementieren Bedürfnisse selbst, vor allem beginnend mit der Änderung des Designs. Wenn Sie Fragen haben, wie Sie dies tun möchten, zögern Sie nicht, mir eine Nachricht zu senden oder sie in das Fragenfeld zu legen. Aber das sind die verschiedenen Möglichkeiten, wie Sie beginnen könnten, wirklich zusätzliche Funktionen zu der Erweiterung hinzuzufügen und das Design ein bisschen mehr zu Ihrem eigenen zu machen. Okay, im zweiten Teil dieses Videos werden wir untersuchen, wie Sie das tatsächlich an der Tür der Kriminalitätserweiterungen veröffentlicht haben. Jetzt gibt es ein vollständiges Schreiben darüber von der Chrome-Erweiterung, wie Dokumentationsseite. Das wird immer auf dem neuesten Stand sein. Also nehme ich das im Mai 2020 auf. Wenn du das ansiehst, hätte es sich leicht geändert haben können, aber zufällig wäre ich so ziemlich die gleiche wie diese Struktur. Das erste, was sie erwähnten, ist eine Zip-Datei verrückt. Aber eine Sache, die oft vergessen werden kann, ist, dass Sie ein Symbol haben müssen. Wenn wir also einen Blick auf die Erweiterung gerade hier haben, können wir das In und Manifest sehen. Wir haben nur den Namen Version Beschreibung, Berechtigungen, Berechtigungen, Hintergrundinhalte, Skripte und so weiter. Aber Sie müssen auch ein Symbol haben. Ähm, Option hier drin. Nun, das sind Theo-Bilder, die Sie benötigen, um Ihre Erweiterung veröffentlichen zu können, also zeige ich Ihnen, wie das in der Dokumentation hier aussieht. Okay, also muss jede Chrome-Erweiterung ein Symbol in der Manifestdatei haben. Jetzt benötigen Sie eine Nikon, die mindestens 128 x 128 Pixel für eine Erweiterung ist. Oder Sie müssen ein anderes Symbol von 48 x 48 Pixel haben, und Sie können auch ein 16 x 16 Symbol als auch haben. Dies wird hier angezeigt, aber der einzige Weg, den Sie tun, ist, indem Sie einen Umfang wie diesen hinzufügen. Es sind also Symbole, und Sie haben nur ein Objekt mit jedem der verschiedenen Symbole und dann, wo sich das Bild in Ihrem Ordner befindet. Sobald du das hast, musst du nur in deine Falte gehen. Wir haben Ihre Gutscheinfunktionen. Stellen Sie sicher, dass Sie Ihr Symbol hier hinzufügen und Ihr Manifest aktualisieren, das damit verknüpft ist, und dann komprimieren oder verwandeln Sie sich in ist es? Und dann sind Sie bereit, das hochzuladen. Keine nächste Notwendigkeit, auf die Chrome Web-Tür-Entwickler-Dashboard zu gehen, um Neues Element zu erstellen. Wenn Sie noch kein Konto für das Entwickler-Dashboard haben, müssen Sie Entwicklerkonto auf einem ölig zu tun ist auf New item klicken, so sobald Sie das tun,sind Sie das tun, dann durchsuchen und wählen Sie die ZIP-Datei, die Sie gerade gemacht haben. Sobald Sie das auswählen, wird es mit der Verarbeitung und dem Hochladen Ihrer Erweiterung beginnen, und jetzt können Sie alle Informationen eingeben, die Sie hinzufügen möchten. Treibstoff-Erweiterungen von all dies stammt aus der Manifest-Datei. Dann können Sie eine detailliertere Beschreibung hinzufügen. Ausgewählte Kategorie. Wählen Sie eine Sprache auf. Dann können Sie hier weitere Screenshots hinzufügen, was definitiv empfohlen wird. Wenn Sie möchten, dass die Leute in der Lage sind, Teoh, laden Sie Ihre Erweiterung herunter. Dies wird es hervorheben. Maurin die Erweiterungen Tür, und Sie können einen Link zu Ihrer Website sowie auf Support-Links hinzufügen. Wir müssen diese nicht haben, und Sie können auch Google Analytics für das Tracking haben, um zu sehen, wie viele Leute Ihre Erweiterung finden , Auflisten, wie viele Dinge darauf klicken und dann alles, was Sie tun müssen, nachdem, dass klicken Sie Entwurf speichern und zur Überprüfung einreichen. Es sollte normalerweise nur ein paar Tage dauern, manchmal bis zu einer Woche und Lieder. Sie haben Ihr Symbol dort. Wenn Sie Ihr Symbol nicht haben, wird es diese Rezension nicht bestehen. Daher ist es wichtig, sicherzustellen, dass Sie das haben. Jetzt gibt es verschiedene Möglichkeiten. Wenn Sie für die Verlängerung berechnen wollen, gibt es ein paar zusätzliche Schritte, so müssen Sie sicherstellen, dass Sie ein Zahlungssystem wählen. Andi, ein paar verschiedene Optionen gibt es. Wir müssen sicherstellen, dass schwellen, wenn Sie sich anmelden, zahlen Sie die Entwicklergebühr, die zum Zeitpunkt der Aufnahme beträgt $5. Ich werde hier unten nachsehen. Ja, es gibt eine $5 Anmeldegebühr. Sie haben also Fragen, wie Sie veröffentlichen? Schreib einfach eine Nachricht in das Fragenfeld und ich versuche, so gut ich kann zu helfen. Aber das sollte Ihnen eine schnelle Ich würde auf, wie Sie über das Erstellen einer Erweiterung gehen und tatsächlich darin setzen würden. Leben Sie auf dem Chrom-Shop, so dass Sie Ihre Erweiterung machen können. Und wenn Sie Ihre Erweiterung hochgeladen haben, können Sie, wenn Sie Änderungen vornehmen, in den Paketabschnitt einfach hier gehen und ein neues Paket hochladen. Eso aktualisierte ZIP-Datei Wenn Sie Änderungen vorgenommen haben und nur versuchen, sicherzustellen, dass Sie in Ihrem Manifest die Versionsnummer ändern, so dass alles aktualisiert wird 17. Vielen Dank für den Kurs: Wie Sie im letzten Video erwähnt haben, gibt es eine Reihe von verschiedenen Möglichkeiten, wie Sie diese Erweiterung nach vorne verschieben können. , Ich würde gerne sehen,welche Kreationen du dir einfallst. Also, wenn Sie irgendeinen Kontakt mit mir auf Instagram gemacht haben oder Sie eine Aufzeichnung Ihres Kurses senden, senden Sie mir eine Nachricht auf hier mit dem, was Sie geschafft haben, zu erstellen. Sie haben irgendwelche Fragen auf dem Weg. Lassen Sie es mich auch wissen. Aber vielen Dank, dass Sie diesen Kurs genommen haben. Ich hoffe, Sie haben einen Wert davon gefunden, würde sicher sein, dass Sie wieder sagen 18. Bonusvideo (Quellcode in der Ressourcen)): In diesem Video werden wir untersuchen, wie Sie eine Funktion in JavaScript über mehrere Seiten ausführen können . Also werden wir den lokalen Speicherteil des Browsers verwenden, damit wir im Zustand unserer Funktion speichern können, wie weit wir Fortschritte gemacht haben. Und dann können wir dann hören, um zu sehen, was auf der Seite passiert ist, und dann unsere Funktion anpassen und dann weiter durch den Rest davon laufen , so dass es zwischen diesen Seitenladungen funktionieren kann, dieses Video, das Beispiel, das ich verwenden werde, ist ein Coupon Auto-Fill-Funktion. Also haben wir eine Liste von Coupons, die sich auf unseren Warenkorb bewerben möchten. Also habe ich ihr eine vortäuschende Seite hier nur für den Korb drauf gemacht. Und es gibt ein paar Gutscheine, die funktionieren und es gibt einige, die nicht waren. Also werde ich Ihnen jetzt zeigen, wie die Seite aussieht. Okay, hier ist die Seite genau hier auf der linken Seite. Also ignorieren wir den Code auf der rechten Seite vorerst. Das kommen wir in einem Moment. So wie Sie sehen können, haben wir nur ein Beispiel, Bestellsumme hier und Liste der Gutscheincodes, die gültig sind. Also, wenn ich in einem von diesen so 320 eingeben und gelten, der Rabatt wird einen Unterschied gemacht. Wenn ich das loswerden und den Rabatt anwenden sollte, nimmt er ihn weg. Es ist also wirklich, wirklich einfach. Läuft danach auch auf dem Backend, Musharraf oder dem ganzen Code davon. Aber so funktioniert das. Und dann habe ich diese Funktion hier drüben. Also, wenn ich auf diese Schaltfläche klicke, wird durch Strahl von Coupons laufen. Haben wir so diese hier drüben? Also einer von ihnen ist in diesem Array oder in dieser Liste. Das sollte also der Gutschein sein, den wir verwenden. Also sofort für dieses erste Beispiel wird die Seite nicht neu laden, aber wir können sehen, was es hier tut. Also, wenn ich auf diese Schaltfläche klicke, können Sie sehen, dass es jeden der Coupons überprüft. Sieh ihn an. Das auditive Werkzeug tut es. Und dann wird es uns sagen, welche am besten. Also haben wir dieses hier so viele verschiedene, also gilt das danach. So funktioniert es also. Es wird den Code in einem Moment durchlaufen und genau zeigen, wie das funktioniert. Also, wenn ich dies von Notwendigkeit reload false ändern sollte, um reload true zu müssen. Oder das wird tun, wird die Seite jedes Mal neu laden. Also werde ich nur die Konsole hier drüben hinzufügen. Und wenn wir nur aktualisieren und diese Funktion erneut ausführen, so dass, wenn wir auf diese Schaltfläche klicken jetzt sagen warten, bis die Seite neu geladen wird. Stellen Sie sich also dieses Beispiel vor, dass, wenn wir auf Rabatt anwenden klicken, dies dem Server anweist, diesen Coupon zu überprüfen und die Seite neu zu laden. Aber weil dies nur ein Beispiel ist, werde ich nur dieser Server sein. Also, was ist Klick neu laden jedes Mal, wenn es fragt. Also wird es den Gutschein überprüfen. Und dann ist es wieder frustriert gefragt. Also drücke ich es noch einmal. Es wird nachladen, überprüfen Sie das. Es wird wieder vorlesen. Hier geht es. Und dann noch ein Mal. Und dann gehe ich und es ist immer noch weiß, welcher der Beste aus all diesen Zeiten war. Obwohl es also die Seite neu geladen und die Sitzung geändert hat, bleibt der Status einer Funktion zwischen all diesen Aufrufen erhalten. Wie Sie sehen können, gibt es dort einen Gutscheinsieger. Und ich klicke auf OK und wende es dann erneut an. Nun funktioniert dies aufgrund des lokalen Speichers. Nun, was wir tun, ist, dass wir ein Objekt setzen , das wir jedes Mal aktualisieren, wenn wir eine Funktion ausführen. Also werde ich den Code in einem Moment durchgehen, aber so funktioniert das in gewisser Weise. Also haben wir es. Der lokale Speicher, mit dem wir ein Objekt erstellen. Und dann aktualisieren wir dieses Objekt jedes Mal und führen dann eine Funktion erneut aus. Und wenn diese Funktion geladen wird, geht es zuerst in lokale Geschichten, um zu sehen, sind wir mitten in der Ausführung dieser Funktion? Also, wenn wir ein sind, setzt der Prozess fort und wenn wir die Funktion nicht ausgeführt haben und wir sie gebeten haben zu starten, beginnt es zu laufen, wenn das Sinn macht. So können Sie all dies auf der Registerkarte Anwendung nur hier sehen. Und wenn Sie zum lokalen Speicher gehen. Also, wenn ich das jetzt mit diesem offenen neu lade, sollten Sie das tatsächlich sehen, während es sich bewegt. Wenn ich also hier anklicke, kannst du sehen, was es tut. So ist es, dieses Fenster ein wenig zu erweitern. Luft gejagt. Also, was wir hier tun, ist, dass wir ein Selektorobjekt haben. Also in diesem Beispiel, um einen Gutscheincode anzuwenden, ein paar verschiedene Dinge, die Sie haben müssen. Also, anstatt es nur für eine bestimmte Website zu schreiben, wenn Sie eine Chrome-Erweiterung geschrieben haben, zum Beispiel, Sie brauchen es, um sicherzustellen, dass es auf vielen verschiedenen Websites funktioniert. Daher ist es wichtig, dies zu beachten, wenn Sie Ihren Code erstellen. Also Summe, Checkup-Prozesse haben den Gutschein , dass Sie den Gutschein eingeben und dann drücken Sie einige von ihnen geben Sie den Gutschein, dann drücken Sie eine Taste. Einige von ihnen muss der Patient nachladen. Andere Male funktioniert alles auf der Seite, so dass Sie es eingeben und eine Taste drücken und dann werden sie das hinter den Kulissen aufrufen, ohne die Seite neu zu laden. Daher müssen Sie möglicherweise die Anzahl der Sekunden festlegen, dann warten, bis sich die Seite ändert, und dann gehen Sie hinein und greifen Sie den Warenkorb. Wie Sie hier unten sehen können, tun wir das. Also haben wir die Kostenfelder wie diesen Bereich nur hier mit einem Kostenfeld-Präfix. Das ist also, um sicherzustellen, dass wir das Dollarzeichen, das Pfundzeichen oder so etwas entfernen . Wenn das ein Zeichen ist, entfernen wir das einfach von der Vorderseite der Zeichenfolge. Wir haben dann den Gutscheintyp. Dies ist, wie ich bereits erwähnt habe, eine Taste, die wir drücken müssen oder müssen wir die Eingabetaste drücken? Dies ist, wenn der Patient nachladen muss oder nicht. So wie sich das Ding früher geändert hat. Wenn es also nicht neu laden muss, rufen wir die Funktion auf und dann warten Sie und verwenden Sie einen Timer, wenn er nicht neu laden muss, anstatt, Sie wissen, Gewicht zu greifen, um die Änderungen an der Korbsumme auf dieser Seite. Wir warten, bis die Seite neu geladen wird und führen sie dann aus, sobald die Seite geöffnet wird. Also zeige ich Ihnen das in einem Moment. Dann bekommen wir den Gutschein gefüllt. Das ist also nur diese Eingabe hier. Und dann ein Submit-Button. Also, das ist dieser Knopf gerade hier. Und dann haben wir eine Wartezeit. Das ist also, wie viele Millisekunden wir warten sollten. Die Seite, die geändert werden soll. Es gibt manchmal einige Seiten dauern ein wenig länger als andere für uns zu gehen und machen diese Überprüfung ist das, was wir hier haben. Dann haben wir eine Funktion, eine Variable hier, die überprüft, ob die Erweiterung oder ob der Code läuft. In diesem Beispiel wird es ausgeführt. Das heißt, wenn ich nachladen drücke, weil es darauf wartet, dass ich gerade hier neu lade. So weiß es, diesen gleichen Scheck durchzuführen. Also hier haben wir den Startkorbwert. Also eigentlich ist das falsch, weil, weil ich das nachher lief, es vorher laufen, es hatte die Korbsumme bereits reduziert. Es wäre also interessant zu sehen, wie das dort läuft. Hier ist der aktuelle Gutschein, den er überprüft. So halten wir eine Spur von denen wird viel Überprüfung. Und dann hier oben will Sie hier zeigen. Dies sind die Gutscheine, die überprüft wird. Also, wenn ich die Seite hier aktualisiere, als ob sie die tatsächlichen Prüfungen durchlaufen würde. Sie können sehen, jetzt aktualisiert und sagte, dass wir diesen Gutschein bereits überprüft haben. Und es sei denn, dieser Chip ist richtig, also wenn wir, also, wenn wir jetzt die Seite aktualisieren, warten Sie zwei Sekunden. Sie können sehen, hier sind die Schecks wieder, also gibt es das beste Angebot. Das ist dieser, der nur sieht, was das Tal war, als er den Code anwandte. Und es weiß, dass dieser Gutschein derjenige war, der das beste Angebot hatte. Und dann gibt es diejenigen, die überprüft werden, ist gerade dabei , diese nächste Gutschein-ID zu überprüfen. Wenn wir dann sehen, dass es darauf wartet, dass wir neu laden. Also, wenn wir hier zurück zu dieser Seite gehen und aktualisieren, sollten wir sehen, dass es dieses Array nur hier aktualisiert wird, gehen sie zum nächsten. Und in der Zwischenzeit überprüft es jetzt, dass der nächste CTO jeden durchläuft , der diese Prüfungen durchführt. Und der Grund, warum es diese leichte Verzögerung gibt, ist, weil wir es, wie wir hier erwähnt haben, auf zwei Sekunden oder zweitausend Millisekunden eingestellt haben. So funktioniert es aus dieser Sicht nur hier am Frontend. Nun schauen wir uns den Code an und sehen, wie er das tatsächlich macht. Ok, also hier ist der Code, den wir auf dieser Seite ausführen. Das erste, was wir hier haben, ist als ausgewählte Objekte. Wie ich bereits erwähnt habe, ist es auf eine Weise erstellt, die angepasst werden kann, um auf vielen verschiedenen Websites zu arbeiten. So wie wir sehen nur Timmy über Coupons ist unsere Reihe von Coupons, die Sie überprüfen möchten. Nun wahrscheinlich, wenn diese Funktion tatsächlich in einer Erweiterung verwendet wird, würden Sie dies als letztes Element übergeben. Also würden Sie all das für Ihre tatsächlichen Websites haben. Sie können sie vielleicht aus Ihrer Datenbank einfügen, wo Sie tatsächlich die unterschiedlichen Informationen für jede Site haben , auf der Ihre Erweiterung funktioniert. Und dann wären Ihre Gutscheine in ähnlicher Weise, aber wahrscheinlich irgendwo anders gespeichert. So haben wir das also. Dann haben wir ein Gutscheinfeld, wie wir vor einer Minute erwähnt haben, ich sende Schaltfläche, wenn es neu geladen werden muss oder nicht. Ich bin nicht wahr oder falsch. Meine Gutscheintypen, die wir Knopf oder geben, Wartezeit in Millisekunden. Ich bin auf dem Feld. Also, wie viel die Abfrage primitiv davon hier drüben, der QuerySelector dieser ID hier. Das ist also ein Klassenname, genauso wie dieser hier oben ist. Und dann das Präfix des Korbwerts. Dann, was wir hier getan haben, ist, dass wir lokale Speicher verwenden, ist der erste Ort. Du wirst das sehen. Wenn der Lauf überprüft, dass ein Teil unseres lokalen Speicherelements ausgeführt wird, dann fahren Sie mit der Ausführung von Prüfungen fort, einfach so. Und dann hier unten haben wir nur einen einfachen Ereignis-Listener, der NEUE Prüfungen startet. Wenn wir also nicht automatisch im Hintergrund laufen, weil wir bereits begonnen haben, fügen wir ein Click-Ereignis zu dieser Schaltfläche hier hinzu, damit wir diese Funktion starten können und beginnen zu laufen. Wenn wir also nach oben scrollen, zeige ich Ihnen ein bisschen mehr von dem, was das tut. Das erste Stück JavaScript, das wir auf dieser Seite haben, ist nur wo ein neues Objekt für die Funktion erstellt wird. Und dann schließt das alles andere ein. Also hier ist unsere falsche Gutscheinprüfung. Wir setzen ein leeres Array für Asset-Coupons. müssen wir nicht wirklich hier machen. Und dann hier ist die erste Art von Hauptfunktion, die wir verursachen. Wir haben unsere Run-Prüffunktion gerade hier, die das Selektorobjekt und den Status annimmt. Das ist also. Standardmäßig wird es start sein, also wollen wir die Funktion starten. Aber wenn Sie fortfahren möchten, also wenn Sie dies über Seitenladungen ausführen möchten, dann wird es weiter sagen. Es ist nicht nur eine Seite laden. Sagen Sie für dieses Beispiel, wir verwenden es zwischen jeder Prüfung, so dass es in beide Richtungen funktioniert. Also hier gehen wir, wir überprüfen, was der Status ist. Also, wenn der Status Start ist, gibt es ein paar Dinge, die wir hier zuerst setzen müssen. Wie Sie sehen können, setzen wir die Ausführungsprüfungen Teil des lokalen Speichers auf Ausführen. Also setzen Sie das einfach wie dieses Set-Element, den Namen des Elements und dann den Wert hier ein. Hier unten bekommen wir die Korbwerte. Wenn ich dies nur ein wenig überlege, ein bisschen leichter zu sehen, erhalten wir den Korbwert, also verwenden wir unsere Kostenfelder für Objekt auswählen. Dies ist der Klassenname, den wir in diesem Objekt am Anfang übergeben haben. Also verwenden wir es im QuerySelector nur hier und greifen dann den Inhalt dieser Elemente. Das heißt, sie werden diesen Teil nur hier packen. Dann stellen wir sicher, dass wir das in ein Format verwandeln, von dem wir wissen können, dass es dort sein wird. Dies könnte also eine Zeichenfolge sein, es könnte eine Zahl sein, aber wir stellen sicher, dass wir es als Float mit zwei Dezimalstellen haben. In diesem Beispiel wird es Spalte neben dieser Zeichenfolge nur hier gesendet. Wir setzen dies dann als Startkorbwert vier, eine Funktion. Also müssen wir wissen, was der Korb Stein ist, bevor er etwas läuft , damit wir die verschiedenen Coupons gegen diese vergleichen können. Als nächstes fügen wir einen weiteren Teil zu Gutscheinprüfungen Objekt nur hier hinzu. Also haben wir unser bestes Angebot. Dies ist, wo wir später die Funktion überprüfen , wenn wir laufen, um zu sehen, welcher Coupon am besten ist, wir vergleichen es mit diesem. Also beginnen wir damit, den vorhandenen Korbwert zu haben, den wir gerade hier hinzugefügt haben. Und dann fügen wir hier einen Platz hinzu, um zu sagen, welcher Gutschein am besten war. Und dann setzen wir einfach ein anderes Array hier, das alle Coupons sind, die wir überprüft haben. Dann legen wir das einfach fest, also sagen wir einen aktuellen Gutschein. Also, das ist eine lokale Lagerung Entsorgung, die, wenn wir im Moment eingecheckt. Das ist also leer, aber wir stellen sicher, dass dies im lokalen Speicher ist, wo auch immer die Konsolensperre hier ist, was nützlich ist, nur um zu sehen, wie dies voranschreitet. Es ist also schwieriger, wenn Sie dies erstellen, während Sie teilen oder den Code, wie ich in diesem Video erwähnt habe. Und dann senden wir das alles an Gutscheinprüfungen Teil unseres lokalen Speichers, aber stellen Sie sicher, dass Sie dies von einem Objekt in eine JSON-Zeichenfolge verwandeln. Im lokalen Speicher wird es also nicht als Variablen gespeichert, auf die Sie über ein Objekt zugreifen können. Sie müssen sicherstellen, dass es nur eine Schnur ist. Also konvertierst du das hier. Und dann ist das alles, was Sie brauchen, um damit zu beginnen. Wenn wir dann weiterhin die Funktion ausführen wollen, die dieser Teil des Codes ist nur hier. Wie Sie sehen können, ist das erste, was wir tun müssen, das vorhandene Selektorobjekt zu greifen. Es ist also wichtig, dass wir das nicht jedes Mal einstellen. Also speichern wir dies im lokalen Speicher und dann haben wir JSON-Pass verwendet um sicherzustellen, dass dies jetzt ein Objekt ist, mit dem wir interagieren können und wir verwenden können. Und wir haben das Gleiche für die Gutscheinschecks hier gemacht. Das ist also das Objekt, das wir gerade erstellt haben, so dass wir für den Selektor und für Gutscheinprüfungen gezeichnet haben. Und dann haben wir nur ein bisschen Protokollierung an der Konsole, um zu sagen, dass wir fortfahren. Dies ist kein brandneuer Lauf einer Funktion mit Fortsetzung hier. Was wir hier haben, ist ein Scheck zu sehen, sind wir partway durch die Überprüfung eines über Coupons? Also sagen wir, was ist der aktuelle Coupon? Wenn es leer ist, müssen wir dies nicht tun, aber wenn es nicht leer ist, fahren Sie fort, dies zu überprüfen. Um ein Beispiel zu geben, wenn die Seite jedes Mal neu laden muss, was passieren wird, ist, dass wir den ersten Teil der Gutscheinprüfung ist, wo wir den Gutschein in das Eingabefeld eingeben und dann die Taste drücken, und dann die Seite wird neu geladen. Und dann, wenn die Funktion danach zuerst ausgeführt wird, wird sie zu diesem Punkt unseres Codes gelangen. Und dann wollen wir sicherstellen, dass wir falsch zurückgeben. Also hört es danach auf, jeden Code auszuführen, und dann überprüft es diesen, diesen Gutschein weiter. In diesem Beispiel würde das also tun, dass es den Korbwert dort erfasst und dem Sternkorb vergleicht, um zu sehen, dass es die Kosten überhaupt reduziert. Wenn es also, wenn wir derzeit keine überprüfen, geht es weiter. Also haben wir nur das hier ist ein, ein Scheck zu sehen. Ist unsere ausgewählten Objekte in gewisser Weise gültig. Also überprüfen Sie dies wahrscheinlich ein bisschen mehr Detail, aber das zeigt nur, wie Sie sehen können. Wenn wir eine Abfrage Selektor Eigenschaft für dieses Objekt. Sanctuary wählen Sie das Eingabefeld gerade hier. Andernfalls, wenn es da ist, führen wir die Funktion einfach weiter aus. Das ist also, wo wir das haben. Hier ist, wo, wenn es das nicht hat, haben wir dort eine Funktion getötet, sonst gehen wir weiter unten. Als nächstes setzen wir einfach Array von Coupons in eine zugänglichere Variable nur hier. Also könntest du hier eine Linke oder eine Const benutzen. Aber wieder, wir haben das einfach als variabel bekommen, halten uns alle hier einfach. Und wir haben die aktuellen Schülernamen. Wir setzen nur eine Variable zusammen mit unseren nächsten Check-Coupons. Also, was das im Grunde tut, ist, dass wir unsere Reihe von Coupons haben, die wir überprüfen wollen, und wir haben einen aktuellen Coupon. Und dann erstellen wir eine for-Schleife, die durch dieses Array von Coupons gelaufen ist. Und wir prüfen, ob dieser Gutschein bereits überprüft wurde. Also haben wir eine Reihe von überprüften Coupons und unser Array von all unseren Coupons. Was wir also im Grunde tun, ist, dass wir sagen, wurde dieses Äquivalent schon überprüft? Wenn ja, tun Sie nichts. Aber wenn es dies nicht zu unserem nächsten geprüften oder nächsten Check-Gutschein hinzugefügt hat. Und das bedeutet einen Coupon nach dem anderen. Wir werden nachsehen. Also bedeutet es normalerweise, dass wir den letzten Coupon des Arrays überprüfen werden. Also, da es alles durchläuft, wird das jeden überschreiben. Das ist in Ordnung für dieses Beispiel. Also ein schnappen Sie sich den letzten Teil unseres Arrays, der noch nicht überprüft wurde und setzen Sie diesen nächsten Check-Coupon. Dann weiter unten, was wir tun, ist, dass wir sagen, wenn der nächste Jet-Coupon ein leerer ist, dann hatten wir einen Gutschein, den wir überprüfen müssen. Also übergeben wir das in Check-Coupons Stern mit einem Selektorobjekt und dem Namen des Coupons, den wir überprüfen möchten. Ich zeige Ihnen, was dieser Teil als Nächstes tut. Aber ansonsten, wenn es hier keinen Gutschein gibt, also wenn das leer ist, dann bedeutet das, dass wir alle unsere Coupons überprüft haben. Alles, was wir als nächstes tun müssen, ist aufgeräumt und das Ergebnis der Ausführung dieser Funktion anzuzeigen. Also würden wir nur die nächsten Ausführungsprüfungen löschen , damit wir die Funktion nicht ausführen, wenn die Seite neu geladen wird. Und wir sagen einfach zur Konsole, um in dieser Funktion vorbeizukommen. Und wir, sie, wir machen dann einen Scheck, um zu sehen, was das beste Angebot war. Also in diesem Code nur hier. Wir wissen, dass wir einen Namen über das beste Angebot haben. Ein Gutschein hat also einen, im Wesentlichen diesen, diesen Vergleich. Also, was wir tun, ist, dass wir diese Funktion wieder ausführen, so dass der Gutschein auf unseren Warenkorb angewendet wird. Denn was passieren könnte, wenn Sie drei verschiedene Coupons ausführen und der erste war der beste Deal, aber wir haben die Funktion auf diesem dritten beendet, der nicht das beste Angebot war. Wir möchten sicherstellen, dass wir diesen Gutschein in diesem Beispiel sowieso erneut auf unseren Warenkorb anwenden. So können wir sehen, dass wir dann einfach eine Warnung nur hier, um zu sagen, welcher Gutschein am besten war. Du bist 41, nur auf eine schönere Art und Weise. Aber für dieses Beispiel war das alles, was sie wirklich brauchen. Wenn dieser beste Coupon, Coupon Name war jedoch leer, das bedeutet, dass wir nicht gefunden haben, dass entweder Insassen ungültig sind oder sie keinen Unterschied in unserem Warenkorb gemacht haben. Also wollen wir im Grunde sagen, dass sie bereits den besten Preis haben. Also geben wir das einfach zurück und stellen sicher, dass wir einen leeren Gutschein gerade hier angewendet haben. Aber das hängt davon ab, was Sie für Ihre Funktion benötigen. Und dann alles, was wir danach tun, ist das Entfernen all dieser Elemente, die wir aus meinem lokalen Speicher erstellt haben. Also reinigt im Grunde alles da oben. Wie ich vor einer Minute erwähnt habe, starten die Check-Coupons den Pfad der Funktion hier. Also haben wir zwei Teile, wo wir Coupons überprüfen. Also gerade hier oben, wo wir alle unsere Gutscheine durchlaufen, haben wir einen Anruf gemacht, um Coupon Star zu bekommen. Und wie wir bereits erwähnt, wenn wir derzeit mit der Seite neu geladen wird und wir kommen zu diesem Punkt. Willst du sagen, Scheck Coupon Ende. Also zeige ich Ihnen, was diese beiden Teile als Nächstes tun. Ok? Der erste Teil des Schecks besteht also darin, den Gutschein in das Eingabefeld anzuwenden und entweder die Discount-Schaltfläche anwenden oder den Coupon hinzufügen Button drücken oder die Eingabetaste in das Eingabefeld drücken. So, wie Sie hier sehen können, was wir tun, ist, dass wir einen Artikel nur hier setzen, um zu sagen welchen Gutschein wir derzeit überprüfen spezifische Bedürfnisse neu zu laden. Wir haben das Eingabefeld hier für r Coupon geschnappt, und dann wenden wir unseren Gutscheinnamen in den Wert dort an. Und dann überprüfen wir, um zu sehen, ist das eine Taste, die wir drücken müssen, oder müssen wir die Eingabetaste drücken? Wenn Sie eine Taste drücken müssen, klicken wir auf die Schaltfläche. Wenn Sie die Eingabetaste drücken müssen, feuern wir ein Ereignis aus, das simulieren würde drücken. Was wir als nächstes tun, ist, dass wir überprüfen, ob die Seite neu geladen werden muss. Wenn es neu geladen werden muss, tun wir nichts. Also wollen wir das auf der Seite belassen, um es neu zu laden und dann warten, bis die Funktion als nächstes ausgeführt wird, um das zu übernehmen und damit umzugehen, wenn es nicht neu geladen werden muss. Also, wenn es falsch ist, haben wir dann den Scheck Coupon Ende gekühlt. Und dann haben wir diesen Scheck hier oben. Dies ist, wo wir am Ende erwähnt haben, wenn wir festgestellt haben, dass unser Gewinncoupon, wir haben diese Überprüfung nur hier, so dass wir nicht diese zusätzlichen Kontrollen durchführen oder wir tun es gibt eine, ich werde es einfach auf unsere Patienten hier und reichen Sie es ein. Das ist also dieser Teil. Also deaktivieren Sie den Gutschein Ende. Was wir hier tun, ist, wo wir auf die Funktion warten. Also haben wir die Menge an Millisekunden, die wir warten werden. Also haben wir zuerst eine Zeitüberschreitung, um nur diese Zeit zu warten. Und dann, sobald das Timeout abgeschlossen ist, führen wir diesen Code hier aus. Also ja, Sie können sehen, dass es hier ein bisschen Zeug gibt, aber das ist wirklich einfach. Also nochmal, wir sagen, was ist der Gutschein, den wir derzeit überprüfen? So erhalten wir alle unsere aktualisierten Informationen. Wir greifen den Korbwert. Also verwenden wir unser Kostenfeld QuerySelector gerade hier und greifen den Wert dieses Korbes wieder. Also wenden wir das hier an. Wir nehmen dann jedes Präfix weg, also was wir gerade hier verwenden, also Teilzeichenfolge und dann eines in diesem Beispiel oder wo auch immer Ihre Präfixe. Und dann machen wir einen Scheck hier. Ist das niedriger als der Korb, mit dem begonnen wurde? Dann müssen wir noch einen Scheck machen. Ist das niedriger als das derzeit beste Angebot? Ist haben wir ein neues bestes Angebot und wir wenden das auf unsere Gutscheinprüfungen Objekte an. Wir tun Gutscheinprüfungen besten Deal, und dann aktualisieren Sie diesen Warenkorbwert. Und dann stellen Sie sicher, dass wir das wieder auf Wasser setzen. Es ist also eine Zahl, die wir mit anderen Dingen vergleichen können. So dienen Sie einfach Dinge konsistent. Weil man nie weiß, ob der Korb auch einen Pence oder Sinn dazu haben wird. Also ist es am besten, das zu konvertieren. Und dann setzen wir einfach den Gutscheinnamen hier rein. Sonst ist Ihr Server aber Konsole. Okay, nur zum Debuggen und Einchecken, um zu sagen, dass dies nicht der beste Rabatt ist. Sonst ist das alles in Ordnung. Und dann schieben wir dies einfach auf das Array von sind überprüften Coupons, damit wir sicherstellen, dass wir nicht überprüfen werden. Und diese Gutscheine mehr als einmal wollen Sie das Abendessen beenden, immer Schleife gehen. Und dann aktualisieren wir einfach unsere Gutscheinschecks. Also wieder verwandeln wir es in eine benachbarte Zeichenfolge. Wir nehmen unsere aktuellen Coupons weg, wir haben das überprüft, also entfernen wir diese aus dem lokalen Speicher. Dies ist nur ein Stück Code tut hier, wo Sie testen, wo wir imitieren, ob es an den Server senden würde, damit wir das ignorieren können. Und dann gehen wir zur nächsten Funktion. Wie Sie hier sehen können, wollten wir weitermachen. Also nach jedem Laden der Seite, würden wir dort einen Check haben. Ich zeig es dir in einem Moment. Und am Ende der Überprüfung dieses Coupons machen wir den gleichen Aufruf, um diese Hauptfunktion auszuführen. Auch hier geben wir unser Selektorobjekt nicht weiter, weil wir fortfahren und nicht beginnen. Also, fast alles ist nur ein weiterer Punkt, den ich Ihnen hier zeigen möchte. Wie bereits erwähnt, greifen wir den Status von unserem lokalen Speicher ab, um zu sehen, ob wir laufen oder nicht. Und dann, wenn der Status läuft, setzen wir die Durchsuchung fort. Und wenn nicht, fügen wir einfach diesen Ereignis-Listener hinzu , den ich glaube, ich habe bereits erwähnt. Wenn Sie nun interessiert sind zu sehen, wie wir dies tun, wenden Sie Rabatt an. Wir haben nur eine Scheck-Gutschein-Deal-Funktion hier drüben. Und es sagt nur, hier ist eine Liste gültiger Coupons, ist der Wert dieses Eingabefeldes in diesem Array. Wenn es so ist, haben wir hier nur einen hartcodierten Teil, der den Korbwert ändert. Also ist es wirklich einfach. Aber wenn Sie dies mit dem wilden Blatt verwenden und Sie brauchen dieses Werkzeug nicht. Aber wie ich bereits erwähnt habe, wurde der gesamte Code dafür mit diesem Video geteilt. Und wir werden alle Fragen auf dem Weg, wie seine Arbeit und dieses Video oder Hinzufügen einer Funktion Ihrer eigenen, die über mehrere Seiten kostenlos arbeiten können , um einen Kommentar zu hinterlassen , und ich werde glücklich sein, einen Blick zu nehmen und zu sehen, ob ich helfen kann.