Wie ich die Domai.nr Chrome Extension gemacht habe

Eine clevere Chrome Extension zu schreiben, ist ehrlich gesagt nicht so schwierig, wie Sie vielleicht denken. In diesem Tutorial gehe ich Ihnen durch, wie ich eine API, die von einem großen Suchdienst für Domänennamen (Domai.nr) angeboten wird, nutzte und eine Chrome-Erweiterung für sie erstellte, die einfach deren API verwendet.

---

Schritt 00: Was wir heute schaffen werden

In diesem Tutorial gehe ich Ihnen vor, wie ich die Chrome-Erweiterung Domai.nr mit einfachem HTML, CSS und jQuery erstellt habe. Der typische Workflow dieser Erweiterung lässt sich wie folgt aufteilen:

1. Klicken Sie auf das Symbol
2. Suchen Sie nach einer Domain
3. Finden Sie einen verfügbaren und klicken Sie darauf
4. Kaufen Sie es über einen der Links auf der Erweiterung

Es ist also nicht revolutionär oder bahnbrechend, aber wenn Sie häufig nach Domains suchen (da ich sicher bin, dass es viele von Ihnen sind), hat dies tatsächlich einen Zweck. Ich wollte diese Gelegenheit nutzen, um Ihnen nicht nur zu zeigen, wie ich diese bestimmte Erweiterung gemacht habe, sondern allgemein, wie Sie eine Erweiterung für den Chrome-Webbrowser erstellen.

---

Schritt 01: Was ist in einer Chrome-Erweiterung?

Es gibt verschiedene Arten von Chrome-Erweiterungen, aber wir werden eine Browser-Aktionserweiterung erstellen, die beim Klicken ein Popup-Fenster anzeigt. Google hat einen guten Überblick über die einzelnen Erweiterungen. Im Wesentlichen müssen Sie wissen, dass jede Erweiterung ein Verzeichnis von Dateien ist, ähnlich einer Website. Ich werde später im Tutorial mehr über jede dieser Dateien besprechen, aber das Verzeichnis jeder Erweiterung enthält die folgenden Dateien, die direkt von Google übernommen werden:

• EIN Manifest.json-Datei
• Ein oder mehr HTML-Dateien (sofern die Erweiterung kein Thema ist)
• Optional: Eine oder mehrere Javascript-Dateien
• Optional: Alle anderen Dateien, die Ihre Erweiterung benötigt, z. B. Bilddateien

Mehr zur JSON-Datei

Die Manifestdatei enthält hauptsächlich Metainformationen zur Erweiterung. Hier definieren Sie Dinge wie Name, Version, Symbol und sogar Berechtigungen.

---

Schritt 02: Ein Blick auf die API von Domai.nr

Die API von Domai.nr kann hier gefunden werden. Wir verwenden die JSON-API, die zwei Methoden hat: Suchen und Info. Sie wird JSON-API genannt, weil sie JSON zurückgibt. Beide Methoden reagieren auf eine GET-Anforderung, sodass wir einfach alles, was wir in unserer Anforderungs-URL benötigen, verketten können, und der Rest wird in Ordnung gebracht.

---

Schritt 03: Graben in die manifest.json Datei

Wie Sie sehen, ist eine Chrome-Erweiterung nicht viel mehr als eine einfache Website. Die Struktur, die wir verwenden werden, lautet wie folgt:

• domainr.html - das entspricht dem index.html in den meisten Websites. Ich ziehe es vor, die Haupt-HTML-Datei der Erweiterung selbst zu benennen - das ist nur eine persönliche Präferenz.
• icon.png - diese 128px von 128px Das Symbol ist das, was der Benutzer in der Symbolleiste sieht. Wenn sie auf dieses Symbol klicken, wird unsere Erweiterung ausgelöst.
• Bilder / - Dieses Verzeichnis enthält alle Bilder, die wir verwenden werden, genau wie eine herkömmliche Website. Ich habe mich mit den Entwicklern von Domai.nr in Verbindung gesetzt und habe die Erlaubnis erhalten, alle Bilder, die sie auf ihrer Website haben, zu verwenden, nur verkleinert. Also habe ich einfach den Web Inspector von Chrome verwendet, Kopien davon heruntergeladen und entsprechend skaliert.
• manifest.json - das manifest.json In der Datei werden, wie oben erläutert, viele Eigenschaften über unsere Erweiterung definiert. Es ist erforderlich, aber es ist ziemlich einfach zu erstellen.
• script.js - In dieser JavaScript-Datei werden alle unsere jQuery-Dateien gespeichert. Wir werden es im verweisen domainr.html Datei, und es wird die gesamte Logik in unserer Erweiterung steuern.
• style.css - Endlich ist hier unsere Stylesheet-Datei. Wir werden das natürlich auch im domainr.html Datei.

Unsere manifest.json-Datei

Zeit, sich in unseren Code einzuarbeiten und loszulegen! Unsere manifest.json Die Datei ist ziemlich einfach. Um eine detailliertere Zusammenfassung aller in einer Manifestdatei unterstützten Felder anzuzeigen, checken Sie dies aus. Den gesamten Code finden Sie in unserer manifest.json-Datei:

 "name": "Domai.nr Search", // der Name der Erweiterung "version": "1.0", // Versionsnummer "description": "Geben Sie Ihren Domänen ein Happy End.", // in // verwendete Beschreibung Der Chrome Webstore "browser_action": "default_icon": "icon.png", // gibt das Standardsymbol "popup": "domainr.html" an // die Seite, die angezeigt wird, wenn auf das Symbol geklickt wird, "Berechtigungen": ["http://domai.nr", // Wir erteilen der Erweiterung die Berechtigung zum Zugriff auf Daten auf diesen Websites. "http://domai.nr/*" // Suffix mit *, damit / api erreichbar ist.]

Wie Sie an den Kommentaren erkennen können, ist das recht einfach. Der Abschnitt mit den Berechtigungen ist in unserem Fall äußerst wichtig. Andernfalls wird ein XHR-Fehler angezeigt, da die Erweiterung nicht auf Domänen zugreifen kann, für die sie keine Berechtigung erteilt. Daher die Bedeutung des Abschnitts "Berechtigungen".

---

Schritt 04: Erste Schritte

Für unsere Erweiterung gibt es im Wesentlichen drei Teile:

• Das
  Element mit einem , Hier gibt der Benutzer die Suchanfrage ein, nach der er sucht. Darauf konzentriert sich dieser Schritt des Tutorials.
• EIN
  mit mehreren
  • Elemente im Inneren, die basierend auf ihrer Anforderung in Teil 1 aufgefüllt werden.
  • Informationen zu der von ihnen ausgewählten Option basierend auf den Listenelementen, die ihnen in Teil 2 präsentiert werden.

  Ich denke, es ist fair zu sagen, dass die Erweiterung komplexer wird, wenn der Benutzer die oben beschriebenen Teile oder Stufen durchläuft. Nachdem dies gesagt wurde, lasst uns in den HTML-Code einsteigen, mit dem ich das strukturierte.

  Okay - das ist es, soweit es um die Eingabe des Benutzers geht (zumindest auf der HTML-Seite). Um etwas beschreibender zu sein, wird dieser Code dem Benutzer angezeigt, wenn er auf das Symbol klickt, um die Erweiterung auszulösen. Es ist nur ein Eingabefeld, das wir so gestalten möchten, dass die Seite von domai.nr so aussieht. Sie werden feststellen, dass ich nur eine habe

  Element - Es wurde keine Methode oder Aktion definiert. Ich musste diese nicht als jQuery verwenden $ .getJson Die Methode erledigt das für uns. Dies wäre eine großartige Zeit, um die Erweiterung zu testen, oder??

  So testen Sie lokale Erweiterungen

  Um eine Erweiterung in der Entwicklung zu testen, die sich auf Ihrem lokalen Computer befindet, führen Sie einfach die folgenden Schritte aus, und schon sind Sie in kürzester Zeit einsatzbereit:

  1. Klicken Fenster und wählen Sie Erweiterungen.
  2. Auf der rechten Seite oben auf der Seite wird ein Link angezeigt, mit dem die Option umgeschaltet wird Entwicklermodus. Klicken Sie das an.
  3. Wählen Laden Sie die unverpackte Erweiterung? , und navigieren Sie zu dem Verzeichnis, in dem sich die Erweiterung befindet. Wählen Sie dieses Verzeichnis aus!

  Die Erweiterungsseite sollte jedoch auf einer Registerkarte angezeigt werden, da Sie jedes Mal, wenn Sie eine Änderung an der Erweiterung vornehmen und testen möchten, auf der Erweiterungsseite für die jeweilige Erweiterung auf "Neu laden" klicken müssen.

  Wir haben es lokal installiert, aber seien wir ehrlich - es sieht ziemlich abscheulich aus. Lassen Sie es uns schön machen, damit die Domai.nr-Jungs stolz auf eine solche Erweiterung wären. Sie möchten die Bilder herunterladen, die ich hier verwende, und sie in einem Verzeichnis / images innerhalb Ihres Erweiterungsordners ablegen, da ich auf einige von ihnen im CSS (und auch im HTML-Code oben) verweise..

   body overflow-x: hidden; font: normal 14px / 18px helvetica, arial, serifenlos; color: # 414240; .input-wrapper overflow: hidden; Bildschirmsperre; Position: relativ; #query height: 19px; Schwimmer: links; Anzeige: Inline-Block; Grenze: 3px fest # A9ADA8; Breite: 220px; Polsterung: 6px 12px 5px 12px; Schriftart: normal 14px / 18px helvetica, arial, serifenlos; Farbe: # 414240; Text-Rendering: OptimizeLegibility; -webkit-font-smoothing: antialiased; Grenzradius: 18px;  #query: focus contour: none; #loader width: 16px; Höhe: 16px; Position: absolut; rechts: 18px; oben: 10px; Sichtbarkeit: ausgeblendet; #Taste Anzeige: keine;

  

  Okay - wir haben den ersten Teil fertig programmiert und sehen gut aus. Im nächsten Abschnitt konzentrieren wir uns darauf, die Anfrage des Benutzers zu übernehmen und einige Daten aus der API von Domai.nr zu holen.

  ---

  Schritt 05: Zeigen Sie dem Benutzer einige Domänen!

  In diesem Abschnitt nehmen wir an, was der Benutzer in eingegeben hat , und fragen Sie es mit der API von Domai.nr ab. Basierend auf diesen Ergebnissen werden eine Liste aller zurückgegebenen Ergebnisse sowie ein Symbol mit dem Status dieser Domäne angezeigt. Also, lass uns gleich rein springen!

  Bevor wir uns mit jQuery hinter der Erweiterung befassen, denke ich, dass dies ein guter Zeitpunkt ist, um zu besprechen, wie man eine Erweiterung untersucht, genau wie eine normale Website. Anstatt irgendwo auf der Seite mit der rechten Maustaste zu klicken und "Element prüfen" auszuwählen, werden Sie dies einfach tun Klicken Sie mit der rechten Maustaste auf die Erweiterung und wählen Sie "Popup prüfen".. Das ist alles dazu!

  Dieser Abschnitt ist etwas interaktiver und ist daher der Ausgangspunkt für unser Javascript. Ich werde jQuery der Einfachheit halber verwenden.

   $ (document) .ready (function () $ ("# query"). focus (); // fokussiert die Eingabe, wenn die Erweiterung ausgelöst wird var url = "http://domai.nr/api/json/search ? q = ", // Basis-URL für Suchabfrage infoURL =" http://domai.nr/api/json/info?q= ", // Basis-URL für Info-Informationsabfrage; // wird dies später verwenden $ ( "form"). submit (function () if ($ ("# query"). val ()! = "") // Führen Sie den folgenden Code aus, wenn der Benutzer etwas in? $ ("body") eingibt. width (250); $ ("# loader"). css ("Sichtbarkeit", "sichtbar"); $ ("# results-list li"). remove (); // entfernt alle vorherigen Ergebnisse, sofern vorhanden ? $ ("# search-query"). remove (); // in wenigen Zeilen mehr dazu? $ (". extension a"). remove (); $ ("# results-info"). hide ( // versteckt das größere Feld, wenn es angezeigt wird? query = $ ("# query"). val (); //? -Code unten? 

  In dem obigen Abschnitt machen wir einige Dinge:

  • Zuerst fokussieren wir standardmäßig das Eingabefeld
  • Als Nächstes setzen wir einige Variablen (gemäß der Domai.nr-API).
  • Dann, auf dem Formular absenden, machen wir folgendes:
    • Stellen Sie sicher, dass die Abfrage nicht leer ist
    • Vorausgesetzt, dass dies bestanden wird, legen wir die Körperbreite fest und zeigen ein AJAX-Lader-Symbol
    • Wir löschen dann die vorherige Liste der Domänen (falls vorhanden) und entfernen die vorherige Suchabfrage aus der Ansicht
    • Schließlich entfernen wir einige Informationen, auf die wir weiter unten näher eingehen

  Es ist also ein guter Anfang. Einige der obigen Codes sind nicht sinnvoll, da sie noch nicht in unserem HTML-Code enthalten sind. Es wird in Kürze sein.

   //? Code oben? $ .getJSON (URL + Abfrage, Null, Funktion (json) $ ('
  '+ json.query +'
  ') .insertBefore ("# results"); $ .each (json.results, function (i, result) if (result.availability === "available") $ ("# results-list"). anhängen ('
   '+ result.domain +''+ result.path +'
  '); else if (result.availability === "vielleicht") $ ("# ergebnisliste"). anhängen ('
   '+ result.domain +''+ result.path +'
  '); else $ ("# results-list"). anhängen ('
   '+ result.domain +''+ result.path +'
  '); ); // end $ .each $ ("# loader"). css ('Sichtbarkeit', 'versteckt'); ); // end $ .getJSON $ (this) .find ('# query'). focus (); falsch zurückgeben;  else // wird dies später beschreiben? $ (". Erweiterung a"). first (). remove (); $ (". Registrars ul li"). remove (); $ ("Körper"). Breite (250); ); // Ende von .submit //? und mehr im nächsten Abschnitt! );

  Dieser Abschnitt oben, obwohl nur ein paar Dutzend Zeilen, ist ziemlich fertig.

  • Wir verwenden die getJSON-Methode von jQuery und verwenden sie gegen die API von Domai.nr.
  • Innerhalb dieser Funktion durchlaufen wir einfach alle Ergebnisse, die sie zurückgibt.
  • Bei jedem Ergebnis überprüfen wir den Verfügbarkeitsstatus und geben den korrekten Wert zurück
  • basierend auf dieser Bedingung.
  • Nachdem wir alle Ergebnisse durchgesehen haben, verbergen wir den AJAX-Lader.
  • Die else-Anweisung dort - wird verwendet, wenn die Abfrage leer ist. Es werden lediglich einige Dinge zurückgesetzt, die möglicherweise nicht leer sind oder auf ihren Standardstatus zurückgesetzt werden müssen.

  Und wir sind noch nicht so weit, es zu testen. Im jQuery-Code oben sehen Sie, dass wir ein Listenelement mit einer ID von anvisieren Ergebnisliste das ist noch nicht im DOM. Also, lass uns fortfahren und das gleich nach dem hinzufügen Element in domainr.html.

 ul display: block; Lösche beide; Marge: 0; Auffüllen: 0; ul li Schriftgröße: 15px; Farbe: # 333333; Bildschirmsperre; Breite: 100%; Zeilenhöhe: 24px; Rand links: 10px; Breite: 100%; Position: relativ; ul li .bg width: 15px; Höhe: 15px; Bildschirmsperre; float: left; ul .available .bg background: url ("images / available.png") 0 7px no-repeat; Breite: 15px; Höhe: 19px; Bildschirmsperre; Schwimmer: links; Rand links: 10px; ul .nothing .bg width: 15px; Höhe: 19px; Bildschirmsperre; Schwimmer: links; margin-left: 10px; ul .maybe .bg background: url ("images / maybe.png") 0 7px no-repeat; Breite: 15px; Höhe: 19px; Bildschirmsperre; Schwimmer: links; Rand links: 10px; ul li a color: # 2870B0; Textdekoration: keine; Breite: 100%; Anzeige: Block; .loader-sub Position: absolut; rechts: 38px; top: 4px; ul li a: hover hintergrund: url ("images / grey.png") no-repeat oben links; Cursor: Zeiger; # results-info a: hover background: none; Textdekoration: Unterstrichen; Cursor: Zeiger; # results-info h3 margin-top: 11px; Text ausrichten: Mitte; Bildschirmsperre; width: 340px; # results-info .available color: # 23B000! important; Textschatten: rgba (100%, 100%, 100%, 1,0) 0 1px 2px; Schriftgröße: 24px; ul li a.active background: url ("images / blue.png") no-repeat left top; Farbe: #ffffff;

 
 
 
 
 
 
Registrieren Sie sich bei:
 
  
 
 
 
 TLD: 
 
  
Wikipedia
 
IANA
 
 
 
 
Werkzeuge:
 
  
Site besuchen (www)
 
WER IST
 
 
 
 
 
 
 
Angetrieben durch Domai.nr.
 

 $ ("# results-list a"). live ('click', function () // 'live' ist erforderlich, da die Elemente das DOM auffüllen, nachdem der Benutzer nach etwas sucht; nicht onLoad. $ (this). Geschwister ('. loader-sub'). css ('Sichtbarkeit', 'sichtbar'); // den sekundären Loader $ (". Erweiterung a"). first (). remove (); // die vorherige Erweiterung entfernen (Link neben 'TLD'). $ (". registrars ul li"). remove (); // den vorherigen Eisträger ausblenden 
 Elemente. $ .getJSON (infoURL + $ (this) .find ('. domain'). text (), null, function (json) //?) JSON erneut zaubern. // Die $ .getJSON-Zeile oben sucht nach der derzeit ausgewählte Domäne $ ("# wikipedia"). attr ('href', (json.tld ['wikipedia_url'])); // fügt den korrekten Wikipedia-Link $ ("# iana"). attr ('href', (json.tld ['iana_url']))) // fügt den korrekten iana-Link $ hinzu (". whois a"). attr ('href', (json.whois_url)); // fügt den richtigen whois-Link $ ( ".www a"). attr ('href', 'http: //' + (json.domain)); // fügt die korrekte URL $ (". extension"). an. anhängen ('' + (json.domain) .split ('.') [1]) + '') .show (); // Diese Zeile fügt die richtige Domänenerweiterung neben dem "TLD" -Teil hinzu. $ ('. loader-sub'). css ('Sichtbarkeit', 'versteckt'); // Den domänenspezifischen Loader ausblenden, da alle Informationen geladen wurden. // und der folgende Code geht hier hin? 

 // der Code oben? if (json.registrars.length < 1) // if there are no registrars available $(".registrars ul").append('
(Nicht verfügbar)
'); $ ("# verfügbarkeit h3"). text ('Nicht verfügbar. :('); // trauriges Gesicht. else // Es gibt Registrare für (var i = 0; i <= 5; i++) // load the first five $(".registrars ul").append('
'+ json.registrars [i] .name +'
');  // Zeigen Sie den Link "More?" $ (". regars ul"). an.
Mehr? 
"); // wenn der Benutzer auf" more "klickt? $ (" # load-more "). click (function () $ (this) .remove (); for (var i = 6; i <= json.registrars.length - 1; i++) $(".registrars ul").append('
'+ json.registrars [i] .name +'
'); ); falsch zurückgeben; ); $ ('Körper'). Breite (800); // das Dropdown größer machen. $ ('# results-list a'). removeClass ('active'); // die Möglichkeit der Geschwister entfernen .active $ (this) .addClass ('active'); // das angeklickte Element angeben .active $ ("# results-info"). show (); // zeige die coolen Ergebnisse wenn if ($ (this) .parent (). hasClass ('available')) //? und einige Bedingungen, basierend auf der Verfügbarkeit $ ("# verfügbarkeit"). html ("
Verfügbar!
"); else if ($ (this) .parent (). hasClass ('vielleicht')) $ (" # verfügbarkeit "). html ("
Möglicherweise verfügbar
"); else $ (" # verfügbarkeit "). html ("
Diese Domain ist genommen.
"); // Füllen Sie das Register at link $ (" # results-info "). show (); geben Sie false zurück; // verknüpfen Sie nichts mit der Dropdown-Liste);

 #links float: left; Breite: 250px; Polsterung unten: 10px; # results-info float: right; Breite: 510px; display: none; .register-stuff overflow: hidden; .right float: right; .extension float: right; Schriftgröße: 13px; Rand rechts: 70px; # load-more color: # 6C9DC9; Schriftgröße: 12px; Zeilenhöhe: 18px; abbr float: left; # results-info h4 margin-bottom: 9px; Schriftgröße: 16px; Schriftdicke: fett; vertikal ausrichten: oben; margin-top: 0; # results-info .sections> li position: relativ; Schwimmer: links; Breite: 140px; Rahmen links: 1px fest # A9ADA8; Polsterung links: 9px; margin-right: 10px; # results-info .sections li ul li margin-left: 0; Zeilenhöhe: 20px; # results-info .sections li ul li a font-size: 13px; display: inline; #footer overflow: hidden; Schriftgröße: 11px; Farbe: # 666; Höhe: 20px; Lösche beide; margin-right: 15px; #footer p margin: 0; Polsterung: 0; text-align: right; #footer p a color: # 666; #footer p a: hover color: # 333333;