Comment j'ai fait l'extension Domai.nr Chrome

Écrire honnêtement une extension Chrome astucieuse n’est pas aussi difficile que vous ne le pensez. Dans ce tutoriel, je vais vous expliquer comment j'ai pris une API proposée par un excellent service de recherche de noms de domaines, Domai.nr, et leur ai créé une extension Chrome, à l'aide de leur API..

---

Étape 00: Ce que nous allons créer aujourd'hui

Dans ce didacticiel, je vais vous expliquer comment j'ai créé l'extension Chrome Domai.nr, à l'aide de HTML simple, de CSS et de jQuery. Le flux de travail typique de cette extension peut être décomposé de la manière suivante:

1. Cliquez sur l'icône
2. Rechercher un domaine
3. Trouvez celui qui est disponible et cliquez dessus
4. Achetez-le en utilisant l'un des liens sur l'extension

Donc, ce n'est pas révolutionnaire ou révolutionnaire, mais lorsque vous recherchez des domaines assez fréquemment (comme beaucoup d'entre vous, j'en suis sûr), cela sert effectivement un objectif. Je voulais profiter de cette occasion pour vous montrer non seulement comment j'ai créé cette extension spécifique, mais aussi, plus généralement, comment créer une extension pour le navigateur Web Chrome..

---

Étape 01: Contenu d'une extension Chrome

Il existe différents types d'extensions Chrome, mais nous allons créer une extension d'action de navigateur qui affiche une fenêtre contextuelle lorsque vous cliquez dessus. Google a une vue d'ensemble de ce qu'il y a dans chaque extension. Ce que vous devez savoir, en gros, c’est que chaque extension est un répertoire de fichiers, un peu comme un site Web. Nous parlerons plus en détail de chacun de ces fichiers plus tard dans le didacticiel, mais le répertoire de chaque extension contient les fichiers suivants, qui proviennent directement de Google:

• UNE fichier manifest.json
• Un ou plus Fichiers HTML (sauf si l'extension est un thème)
• Facultatif: un ou plusieurs Fichiers javascript
• Facultatif: tous les autres fichiers dont votre extension a besoin, par exemple des fichiers image.

Plus sur le fichier JSON

Le fichier manifeste fournit principalement des méta-informations sur l'extension. C’est là que vous définissez des éléments tels que le nom, la version, l’icône et même les autorisations..

---

Étape 02: Examen de l'API de Domai.nr

L'API de Domai.nr est disponible ici. Nous utilisons l'API JSON, qui a deux méthodes: Recherche et Info. Cela s'appelle l'API JSON car, eh bien, elle renvoie JSON. Les deux méthodes répondent à une requête GET. Nous pouvons donc concaténer tout ce dont nous avons besoin dans notre URL de requête, et le reste se mettra en place..

---

Étape 03: creuser dans le manifest.json Fichier

Comme vous pouvez le constater, une extension Chrome n'est vraiment pas beaucoup plus qu'un site Web de base. La structure que nous allons utiliser est la suivante:

• domainr.html - c'est équivalent à la index.html page dans la plupart des sites Web. Je préfère nommer le fichier HTML principal de la même manière que l'extension elle-même - ce n'est qu'une préférence personnelle.
• icon.png - ce 128px par 128px L'icône est ce que l'utilisateur voit dans la barre d'outils. Quand ils cliquent sur cette icône, il déclenchera notre extension.
• images/ - Ce répertoire contient toutes les images que nous allons utiliser, tout comme un site Web traditionnel. J'ai contacté les créateurs de Domai.nr et obtenu l'autorisation d'utiliser toutes les images qu'ils ont sur leur site Web, simplement réduites. Je viens donc d'utiliser Web Inspector de Chrome et d'en télécharger des copies, puis de les redimensionner en conséquence..
• manifest.json - la manifest.json fichier, comme expliqué ci-dessus, est où nous définissons de nombreuses propriétés sur notre extension. C'est nécessaire, mais c'est assez simple à créer.
• script.js - Ce fichier JavaScript est l'endroit où tout notre jQuery est tenu. Nous allons le référencer dans le domainr.html fichier, et il contrôlera toute la logique de notre extension.
• style.css - enfin, voici notre fichier de feuille de style. Nous allons évidemment aussi faire référence à cela dans le domainr.html fichier.

Notre fichier manifest.json

Il est temps de plonger dans notre code et de commencer! Notre manifest.json le fichier est assez simple. Pour voir un résumé plus détaillé de tous les champs pris en charge dans un fichier manifeste, consultez cette rubrique. Vous pouvez trouver tout le code utilisé dans notre fichier manifest.json ci-dessous:

 "name": "Domai.nr Search", // le nom de l'extension "version": "1.0", // numéro de version "description": "Donnez à vos domaines une fin heureuse.", // description utilisée dans la boutique en ligne Chrome "browser_action": "default_icon": "icon.png", // spécifie l'icône par défaut "popup": "domainr.html" // la page à afficher lorsque l'utilisateur clique sur l'icône, "permissions": ["http://domai.nr", // nous donnons à l'extension la permission d'accéder aux données de ces sites. "http://domai.nr/*" // on le suffixe avec un *, donc / api est accessible]

Comme vous pouvez le constater d'après les commentaires, c'est assez simple. La section des autorisations est extrêmement importante dans notre cas. Sinon, nous aurons une erreur XHR car l'extension ne peut pas accéder aux domaines pour lesquels vous ne lui donnez pas l'autorisation. D'où l'importance de la section "permissions".

---

Étape 04: Mise en route

Pour notre extension, il y aura essentiellement trois parties:

• le
  élément, avec un , c'est là que l'utilisateur tape la requête qu'il recherche. C’est ce sur quoi cette étape du didacticiel se concentrera..
• UNE
  avec plusieurs
  • éléments à l'intérieur de celui-ci, qui sont remplis en fonction de leur demande dans la partie 1.
  • Informations concernant l'option sélectionnée, en fonction des éléments de la liste qui leur sont présentés dans la partie 2.

  Donc, je pense qu’il est juste de dire que l’extension gagne en complexité à mesure que l’utilisateur avance dans les parties ou les étapes décrites ci-dessus. Cela étant dit, creusons dans le code HTML que j’avais utilisé pour structurer cette.

  Très bien - c'est tout, en ce qui concerne l'obtention de la contribution de l'utilisateur (enfin, du côté HTML, au moins). Pour être un peu plus descriptif, ce code est ce que l’utilisateur verra s’il clique sur l’icône pour déclencher l’extension. Il s’agit simplement d’une zone de saisie qui ressemble au site de domai.nr. Vous remarquerez que je n'ai qu'un

  element - aucune méthode ou action n'a été définie. Je n'avais pas besoin de les utiliser, comme jQuery $ .getJson La méthode s’occupe de cela pour nous. Ce serait un bon moment pour tester l'extension, n'est-ce pas??

  Comment tester les extensions locales

  Pour tester une extension en développement qui se trouve sur votre ordinateur local, procédez comme suit, et vous serez opérationnel avec elle en un rien de temps:

  1. Cliquez sur La fenêtre et sélectionnez Les extensions.
  2. Sur la droite, vers le haut de la page, vous verrez un lien qui bascule la Mode développeur. Cliquez dessus.
  3. Sélectionner Charger une extension décompressée? , et accédez au répertoire dans lequel se trouve l'extension. Sélectionnez ce répertoire, et c'est tout!

  Vous souhaiterez toutefois conserver la page des extensions dans un onglet, car chaque fois que vous apportez une modification à l'extension et que vous souhaitez la tester, vous devez cliquer sur "Recharger" dans la page des extensions correspondant à celle-ci..

  Nous l'avons installé localement, mais soyons honnête: il a l'air plutôt hideux. Rassurons-nous pour que les gars de Domai.nr soient fiers d'avoir une extension comme celle-ci. Vous aurez envie de télécharger les images que j'utilise ici et de les placer dans un répertoire / images à l'intérieur de votre dossier d'extension, car je fais référence à certaines d'entre elles dans le CSS (et dans le HTML ci-dessus également)..

   body overflow-x: hidden; police: helvetica, 14px / 18px normale, arial, sans empattement; color: # 414240; .input-wrapper débordement: masqué; bloc de visualisation; position: relative; #query height: 19px; float: gauche; affichage: inline-block; bordure: solide 3px # A9ADA8; largeur: 220px; remplissage: 6px 12px 5px 12px; police: normale helvetica, 14px / 18px, arial, sans empattement; couleur: # 414240; rendu du texte: optimise la légitimité; -webkit-font-lissage: antialiasé; border-radius: 18px;  #query: focus contour: none; #loader width: 16px; hauteur: 16px; position: absolue; à droite: 18px; en haut: 10 px; visibilité: masqué; #button display: none;

  

  D'accord, nous avons la première partie codée et qui a l'air bien. Dans la section suivante, nous allons nous concentrer sur la requête de l'utilisateur et l'extraction de données à partir de l'API de Domai.nr..

  ---

  Étape 05: Afficher certains domaines à l'utilisateur!

  Dans cette section, nous allons prendre ce que l'utilisateur a tapé dans le , et interrogez-le sur l'API de Domai.nr. En fonction de ces résultats, nous afficherons une liste de tous les résultats renvoyés, ainsi qu'une icône indiquant le statut de ce domaine. Alors sautons directement dans!

  Avant d'entrer dans le jQuery derrière l'extension, je pense que ce serait un bon moment pour expliquer comment inspecter une extension, comme sur un site Web classique. Au lieu de cliquer avec le bouton droit quelque part sur la page et de sélectionner "Inspecter élément", vous allez simplement faites un clic droit sur l'extension et sélectionnez "Inspecter le popup". C'est tout ce qu'on peut en dire!

  Cette section est un peu plus interactive, c'est donc le point de départ de notre Javascript. Je vais utiliser jQuery pour des raisons de simplicité.

   $ (document) .ready (function () $ ("# query"). focus (); // concentre l'entrée lorsque l'extension est déclenchée var url = "http://domai.nr/api/json/search ? q = ", // URL de base pour la demande de recherche infoURL =" http://domai.nr/api/json/info?q= ", // URL de base pour la requête de requête d'informations; // l'utilisera plus tard $ ( "formulaire"). submit (function () if ($ ("# requête"). val ()! = "") // exécute le code ci-dessous si l'utilisateur a tapé quelque chose dans? $ ("body"). width (250); $ ("# chargeur"). css ("visibilité", "visible"); $ ("# liste de résultats"). remove (); // supprime tous les résultats précédents, le cas échéant ? $ ("# recherche-requête"). remove (); // plus à ce sujet dans quelques lignes? $ (". extension a"). remove (); $ ("# résultats-info"). hide ( ); // masque le panneau plus grand s'il est affiché? query = $ ("# requête"). val (); //? code ci-dessous? 

  Dans la partie ci-dessus, nous faisons un certain nombre de choses:

  • Tout d'abord, nous concentrons la zone de saisie par défaut
  • Ensuite, nous définissons des variables (selon l’API Domai.nr)
  • Ensuite, sur le formulaire envoyé, nous procédons comme suit:
    • Vérifiez que la requête n'est pas vide
    • En supposant que cela passe, nous définissons ensuite la largeur du corps et montrons une icône de chargeur AJAX
    • Nous effaçons ensuite la liste de domaines précédente (s'il en existe une) et supprimons la requête de recherche précédente de la vue.
    • Enfin, nous supprimons certaines informations que nous verrons plus en détail ci-dessous.

  Donc, c'est un bon début. Certains des codes ci-dessus n'auront aucun sens car ils ne sont pas encore dans notre code HTML. Ce sera bientôt, allez avec pour l'instant.

   //? code ci-dessus? $ .getJSON (url + requête, null, fonction (json) $ ('
  '+ json.query +'
  ') .insertBefore ("# résultats"); $ .each (json.results, function (i, result) if (result.availability === "disponible") $ ("# results-list"). append ('
   '+ result.domain +''+ result.path +'
  '); else if (result.availability === "peut-être") $ ("# results-list"). append ('
   '+ result.domain +''+ result.path +'
  '); else $ ("# liste de résultats"). append ('
   '+ result.domain +''+ result.path +'
  '); ); // fin $ .each $ ("# chargeur"). css ('visibilité', 'caché'); ); // fin $ .getJSON $ (this) .find ('# query'). focus (); retourne faux;  else // décrira cela plus tard? $ (". extension a"). first (). remove (); $ (". registrars ul li"). remove (); $ ("body"). width (250); ); // fin de .submit //? et plus à venir dans la section suivante! );

  La section ci-dessus, alors que quelques dizaines de lignes seulement, est déjà assez avancée:

  • Nous utilisons la méthode getJSON de jQuery, et nous l'utilisons contre l'API de Domai.nr.
  • Dans cette fonction, nous parcourons simplement tous les résultats renvoyés.
  • Sur chaque résultat, nous vérifions son état de disponibilité et renvoyons le bon
  • sur la base de cette condition.
  • Une fois que nous avons examiné tous les résultats, nous cachons le chargeur AJAX..
  • Cette autre déclaration est là - utilisée lorsque la requête est vide. Il réinitialise simplement quelques éléments qui peuvent ne pas être vierges ou qui doivent éventuellement être réinitialisés à leur état par défaut..

  Et nous ne sommes pas encore prêts à le tester. Vous verrez que dans le code jQuery ci-dessus, nous ciblons un élément de la liste avec un identifiant de liste de résultats ce n'est pas encore dans le DOM. Alors, allons-y et ajoutons que juste après la élément dans domainr.html.

 ul display: block; clarifier les deux; marge: 0; padding: 0; ul li taille de la police: 15px; couleur: # 333333; bloc de visualisation; largeur: 100%; hauteur de ligne: 24px; marge gauche: 10px; largeur: 100%; position: relative; ul li .bg width: 15px; hauteur: 15px; bloc de visualisation; float: left; ul .available .bg background: url ("images / available.png") 0 7px no-repeat; largeur: 15px; hauteur: 19px; bloc de visualisation; float: gauche; margin-left: 10px; ul .nothing .bg width: 15px; hauteur: 19px; bloc de visualisation; float: gauche; margin-left: 10px; ul .maybe .bg background: url ("images / Maybe.png") 0 7px no-repeat; largeur: 15px; hauteur: 19px; bloc de visualisation; float: gauche; margin-left: 10px; ul li a color: # 2870B0; texte-décoration: aucun; largeur: 100%; display: block; .loader-sub position: absolute; à droite: 38px; top: 4px; ul li a: hover background: url ("images / grey.png") non répété à gauche en haut; curseur: pointeur; # results-info a: survol background: none; texte-décoration: souligné; curseur: pointeur; # result-info h3 margin-top: 11px; text-align: center; bloc de visualisation; width: 340px; # results-info .available color: # 23B000! important; texte-ombre: rgba (100%, 100%, 100%, 1,0) 0 1px 2px; taille de la police: 24px; ul li a.active background: url ("images / blue.png") no-repeat left top; couleur: #ffffff;

 
 
 
 
 
 
Inscrivez-vous à:
 
  
 
 
 
 TLD: 
 
  
Wikipédia
 
IANA
 
 
 
 
Outils:
 
  
Visitez le site (www)
 
QUI EST
 
 
 
 
 
 
 
Propulsé par Domai.nr.
 

 $ ("# results-list a"). live ('click', function () // 'live' est requis, car les éléments remplissent le DOM après que l'utilisateur a recherché quelque chose; pas onLoad. $ (this). siblings ('. loader-sub'). css ('visibilité', 'visible'); // masque le chargeur secondaire $ (". extension a"). first (). remove (); // supprime l'extension précédente (lien à côté de "TLD"). $ (". registrars ul li"). remove (); // masque le précédent égalisateur 
 éléments. $ .getJSON (infoURL + $ (this) .find ('. domain'). text (), null, function (json) //? refait la magie JSON. // la ligne $ .getJSON ci-dessus recherche le domaine actuellement sélectionné $ ("# wikipedia"). attr ('href', (json.tld ['wikipedia_url'])); // ajoute le lien wikipedia correct $ ("# iana"). attr ('href', (json.tld ['iana_url'])); // ajoute le lien iana correct $ (". whois a"). attr ('href', (json.whois_url)); // ajoute le lien whois correct $ ( ".www a"). attr ('href', 'http: //' + (json.domain)); // ajoute l'URL correcte $ (". extension"). append ('' + (json.domain .split ('.') [1]) + '' .show (); // cette ligne ajoute l'extension de domaine correcte à côté de la partie "TLD". $ ('. loader-sub'). css ('visibilité', 'masqué'); // masque le chargeur spécifique au domaine, car toutes les informations ont été chargées. // et le code ci-dessous vont ici.? 

 // le code ci-dessus? if (json.registrars.length < 1) // if there are no registrars available $(".registrars ul").append('
(indisponible)
'); $ ("# disponibilité h3"). text ('Non disponible. :('); // visage triste. else // des bureaux d'enregistrement sont disponibles pour (var i = 0; i <= 5; i++) // load the first five $(".registrars ul").append('
'+ json.registrars [i] .name +'
');  // affiche le lien "Plus?" $ $ (". registrars ul"). append ("
Plus? 
"); // lorsque l'utilisateur clique sur" plus "? $ (" # load-more "). click (function () $ (this) .remove (); for (var i = 6; i <= json.registrars.length - 1; i++) $(".registrars ul").append('
'+ json.registrars [i] .name +'
'); ); retourne faux; ); $ ('body'). width (800); // agrandit la liste déroulante. $ ('# liste de résultats a'). removeClass ('active'); // supprime la possibilité pour les frères et sœurs d'être .actifs $ (this) .addClass ('active'); // donne l'élément cliqué .active $ ("# results-info"). show (); // affiche les résultats intéressants if ($ (this) .parent (). hasClass ('available')) //? et certaines conditions, en fonction de la disponibilité $ ("# disponibilité"). html ("
Disponible!
"); else if ($ (this) .parent (). hasClass ('peut-être')) $ (" # availability "). html ("
Éventuellement disponible
"); else $ (" # disponibilité "). html ("
Ce domaine est pris.
"); // peupler le lien S'enregistrer sur le lien $ (" # résultats-info "). show (); return false; // ne crée de lien vers rien dans la liste déroulante);

 #left float: left; largeur: 250px; padding-bottom: 10px; # results-info float: right; largeur: 510px; display: none; .register-stuff débordement: masqué; .right float: right; .extension float: right; taille de police: 13px; margin-right: 70px; # load-more color: # 6C9DC9; taille de police: 12px; hauteur de ligne: 18px; abbr float: left; # résultats-info h4 margin-bottom: 9px; taille de police: 16px; poids de police: gras; alignement vertical: en haut; margin-top: 0; # results-info .sections> li position: relative; float: gauche; largeur: 140px; border-left: 1px solid # A9ADA8; padding-left: 9px; margin-right: 10px; # results-info .sections li ul li margin-left: 0; line-height: 20px; # results-info .sections li ul li a font-size: 13px; display: inline; #footer débordement: masqué; taille de police: 11px; couleur: # 666; hauteur: 20px; clarifier les deux; margin-right: 15px; #footer p margin: 0; rembourrage: 0; text-align: right; #footer p a color: # 666; #footer p a: survol color: # 333333;