Beste HTML-, CSS-, Javascript-Praxis: Chrome-Erweiterung

Für Leute, die gerade die Codecademy abgeschlossen haben.

Wenn Sie Programmieren lernen, ist die Entwicklung eines Produkts der effizienteste Weg zum Selbststudium. Dieser Ansatz ist viel schneller als die Teilnahme an einem Programmierkurs, um Ihre Programmierkenntnisse zu verbessern.

Normalerweise lernen die Benutzer das Programmieren mit HTML, CSS und grundlegendem Javascript in der Webprogrammierung. Bevor sie jedoch den serverseitigen Teil erreichen, ist es schwierig, eine aussagekräftige Anwendung zu erstellen.

Also habe ich immer versucht, die Schüler so zu überzeugen,

Es wird Spaß machen, wenn Sie anfangen, serverseitig zu lernen und eine Anwendung zu starten. Bitte, gib nicht auf.

Viele Studenten hören jedoch im HTML- und CSS-Stadium auf, Programmieren zu lernen.

(Vielleicht ist es keine gute Idee, mit HTML zu beginnen, um die Leute zum Programmieren zu ermutigen.)

Eines Tages öffnete ich meinen Chrome-Browser, um mit der Arbeit zu beginnen. Dann wurde mir klar, dass ich tatsächlich die beste Anwendung verwendet hatte, die Sie nur mit HTML, CSS und Javascript erstellen können.

Schwung

Kurz gesagt, wenn Sie diese Erweiterung auf Chrome installieren, wird jedes Mal, wenn Sie einen neuen Tab öffnen, eine Begrüßungsnachricht über einem super coolen Bild angezeigt. Die Anzahl der Downloads liegt bereits bei mehreren Millionen. Wenn Sie dies nicht verwendet haben, empfehle ich Ihnen dringend, es zu installieren. Vielleicht erleben Sie diese Anwendung nur 2 bis 3 Sekunden pro neuem Tab, aber Sie können sich für diesen kleinen Moment entspannen.

Versuchen wir, diese Anwendung zu klonen!

Phase 1: Vorbereitungen

  • HTML
  • CSS
  • Javascript
  • Schönes Bild: von unsplash
  • manifest.json (wird aus Chrome geladen)

Ich habe die Anwendung schnell entwickelt, indem ich mich auf die Gegenwart und nicht auf die Zukunft konzentriert habe. Natürlich ist es wichtig, einen konkreten Plan zu haben, wenn es nicht Ihr Solo-Projekt ist. Aber! Die Lebensdauer der Selbstmotivation ist sehr kurz. Wenn Sie also Lust haben, etwas zu entwickeln, sollten Sie es sehr schnell beenden. Wenn Sie über andere Optionen nachdenken, die Ihr Produkt verbessern, beenden Sie Ihr Projekt nie.

Lass es uns einfach halten.

Wir erstellen eine Website mit einem großen Bild, einer großen Begrüßungsnachricht und möglicherweise der aktuellen Uhrzeit.

Finde ein Bild

Wenn Sie auf die Unsplash-Website gehen, finden Sie unzählige coole lizenzfreie Bilder.

Da ich in Norwegen bin, habe ich mich für dieses Bild entschieden.
Vielen Dank, Vidar Nordli-Mathisen. (Es ist immer wichtig, ihr Talent anzuerkennen.)

Foto von Vidar Nordli-Mathisen auf Unsplash

Mach ein Projekt

Einfach Einfach Einfach

Eine HTML-Datei, ein CSS, ein Javascript und eine Manifest-Datei.

Das ist alles was wir brauchen.

Okay, das ist die erste Version.

Dies ist eine einfache Webseite. Um nun von Chrome geladen zu werden, müssen Sie die folgende manifest.json-Datei hinzufügen.

"Chrome_url_overrides" ist die wichtigste Eigenschaft in dieser Anwendung.

Gehen Sie zur ErweiterungsseiteKlicken Sie auf die Schaltfläche „Ungepackt laden“Klicken Sie auf die Auswahlschaltfläche in Ihrem ProjektordnerUnsere bescheidene Erweiterung…Jedes Mal, wenn Sie den neuen Tab öffnen, wird Ihre einfache Webseite angezeigt.

Los geht's, wir haben gerade unser erstes Projekt abgeschlossen.

Sie können es nur mit dieser Funktionalität verwenden. Vielleicht können Sie den Text zu etwas bearbeiten, mit dem Sie sich motivieren möchten, wie „Unmöglich ist nichts“, „Tun Sie es einfach“, „Wir sind die Welt“, etwas-etwas. Oder vielleicht können Sie stattdessen Ihr Familienfoto einfügen.

Aber lasst es uns besser machen.

Phase 2: Dinge, die hinzugefügt werden müssen

  • Aktuelle Uhrzeit
  • Funktion zur Namensänderung
  • Bildänderungsfunktion

Um diese drei neuen Funktionen einzuschließen, habe ich die HTML-Datei wie folgt geändert.

CSS sollte auch geändert werden.

Dann wird die neue Seite wie folgt aussehen.

Oh, ich dachte es wäre Momentum :)

Aktualisieren von manifest.json

Nun werden wir zwei Funktionen hinzufügen.

Zuallererst fügen wir dieser Anwendung ein Eingabeformular hinzu, damit die Benutzer ihren Namen darauf schreiben können. Wir werden dieses Formular unter der Nachricht "Hallo, Jungwon Seo" hinzufügen.

Das ist hässlich. Beheben wir es

Neuer Stil für das Eingabe-Tag.

Okay, viel besser.

Von nun an müssen wir darüber nachdenken, wie wir diese Informationen speichern können.

Wir verwenden "Cookie", aber Sie können "Cookie" nicht verwenden, wenn Sie nur die HTML-Datei in Chrome Browser öffnen. Versuchen Sie es nach dem Laden als Chrome-Erweiterung zu testen.

Im vorherigen Beitrag gab es falsche Informationen zur Speicherberechtigung. Sie benötigen keine "Speicher" -Erlaubnis, um "Cookie" zu verwenden.

Da ich immer noch jQuery bevorzuge, fügen wir es hinzu.

Ich habe versucht, jQuery CDN hinzuzufügen, aber ...

Keine Sorge, wir müssen nur eine weitere Eigenschaft in manifest.json hinzufügen.

Gut, jetzt können wir die Datei script.js codieren.

Was ich zuerst tun möchte, ist:

  1. Lassen Sie Benutzer ihren Namen eingeben.
  2. In Cookie speichern (verwenden wir nur den gängigsten Code)
  3. Blenden Sie das Eingabeformular aus und die Begrüßungsnachricht ein.

Dies ist das erste Mal, dass wir wie ein echter Entwickler denken müssen.

Fall 1: Wenn Sie es zum ersten Mal öffnen.
Fall 2: Wenn Sie es öffnen, nachdem Sie Ihren Namen eingegeben haben.

Wir müssen entscheiden, was sichtbar sein soll und was nicht.

Fall 1:
Uhrzeit: Aktuelle Uhrzeit
Gruß Nachricht: Wie ist dein Name?
Eingabeform: Sichtbar

Fall 2:
Uhrzeit: Aktuelle Uhrzeit
Grußwort: Hallo, !
Eingabeform: Unsichtbar

Um diese beiden Fälle voneinander zu unterscheiden, müssen Sie überprüfen, ob der Cookie den Schlüssel "Benutzername" enthält.

Mit der Zeitaktualisierungsfunktion werden die neuen script.js wie folgt aussehen.

Bevor Sie den Namen eingebenNach der Eingabe des Namens

Okay, es scheint zu funktionieren.

Natürlich gibt es einige Dinge, die wir noch verbessern müssen, wie Übergangseffekte.

Aber ich gebe es dir.

Was noch?

Wir müssen die Funktionalität hinzufügen, mit der Benutzer ihr Bild ändern können.

Unplash API

Sie können Ihre App ganz einfach registrieren und auf dieser Seite ein Token erhalten.

Um die Unsplash-API zu verwenden, müssen Sie Ihre Anwendung auf der Entwicklerseite registrieren.

Durch Klicken auf

Für das Demo-Produkt können Sie bis zu 50 Anfragen pro Stunde bearbeiten. Und das ist genug für uns.

Füllen Sie einfach das folgende Formular aus, wie Sie möchten.

Geben Sie einen beliebigen Namen ein

Wenn Sie die Anwendung erstellen, wird der Teil "Schlüssel" auf der umgeleiteten Website angezeigt.

Ich habe diese Anwendung gelöscht, daher macht es keinen Sinn, es zu versuchen.

Sie müssen nur den "Access Key" kopieren und in Ihre JavaScript-Variable "ACCESS_KEY" zuweisen.

Wir werden die Such-API verwenden.

Hier ist das Szenario. Alle Menschen haben unterschiedliche Interessen. Ich möchte also zuerst nach ihrem Interesse fragen und dann dieses Bild mit der Unsplash-API durchsuchen. Danach aktualisiere ich das Bild alle 12 Stunden (gleiches Keyword, anderes Bild).

Die AJAX-Funktion ist also wie folgt.

Und diese Funktion wird aufgerufen, nachdem Sie Ihr Interesse eingegeben haben.

Dann müssen wir, wie zu erwarten, wieder Entwickler werden.

Fall 1–1: Zum ersten Mal
Fall 1–2: Nach dem Namen
Fall 2: Nachdem Sie Ihr Interesse eingegeben haben
Fall 3: 12 Stunden später.

Okay, lassen Sie uns nacheinander entscheiden.

In Fall 1–1 müssen wir nur den gesamten bildbezogenen Teil ausblenden. Überspringe dies.

In Fall 1–2 wird nur das Eingabeformular für das Interesse angezeigt.

Rufen Sie in Fall 2 AJAX auf und speichern Sie die Bildinformationen.

Stellen Sie in Fall 3 einfach die Ablaufzeit auf 12 Stunden ein und rufen Sie die AJAX-Anfrage erneut an, wenn der Cookie leer ist.

Stichwort: London

Ja, es funktioniert.

Phase 3: Abschlussarbeiten

Es ist nicht obligatorisch, den Fotografen anzumelden, aber warum nicht?

Wir können noch ein paar Zeilen Code schreiben und den Namen und die Seite des Fotografen oben links gutschreiben.

Damit wir die Informationen des Fotografen verwenden können, wenn Sie den Cookie zum ersten Mal überprüfen.

Was ist, wenn jemand sein Interesse ändern möchte?

Fügen wir diese Funktionalität hinzu, mit der die Benutzer ihre Interessen neu eingeben können.

Bevor Sie auf die Schaltfläche klicken

Es geht los. Wenn Sie auf die Schaltfläche „Neues Interesse auswählen“ klicken, wird das Eingabeformular geöffnet, in das Sie Ihr Interesse eingegeben haben.

Nachdem Sie auf die Schaltfläche geklickt haben

Phase 4: Machen Sie Ihr eigenes Produkt.

Ich möchte nur, dass Sie den Prozess von Anfang bis Ende miterleben. Sie müssen dies jedoch selbst entwickeln, um die erlernten Fähigkeiten wirklich zu nutzen.

Es muss einige Funktionen geben, die Sie für sinnvoll halten, z. B. die Art und Weise, wie Sie ein zufälliges Bild auswählen. Oder Sie denken, einige meiner Codes sind ineffizient. Sie können Ihre Version desselben Produkts mit einem besseren Code verbessern.

Viel Glück und gib nicht auf!

Die vollständige Version finden Sie hier: https://github.com/thejungwon/MyChromeExtension

Diese Geschichte wird in Noteworthy veröffentlicht, wo mehr als 10.000 Leser täglich die Menschen und Ideen kennenlernen, die die Produkte prägen, die wir lieben.

Folgen Sie unserer Publikation, um weitere Produkt- und Designberichte des Journal-Teams zu sehen.