Construire une extension Chrome avec GitHub Gist avec jQuery

Dans ce didacticiel, nous construisons une extension Chrome pour télécharger les gists de GitHub Gist et explorons les différentes parties de cette extension, exploitant ainsi la puissance de jQuery et de JavaScript pour créer une extension.

Les extensions Chrome sont un navigateur. programmes conçus pour personnaliser les fonctionnalités et modifier le comportement dans le navigateur Google Chrome. Ils sont écrits en HTML, JavaScript et CSS. Avec les extensions Chrome, vous pouvez faire plus que personnaliser des pages Web. Vous pouvez également ajouter des comportements et des fonctionnalités personnalisés en fonction de vos besoins en exploitant la puissance de JavaScript. En bref, tout programme JavaScript pouvant être créé dans le navigateur peut être écrit en tant qu'extension Chrome.

GitHub Gist est un moyen simple de partager des extraits de code et des pâtes avec d'autres. C'est une plate-forme sur laquelle vous pouvez partager des fichiers uniques, des parties de fichiers ou des applications complètes avec d'autres personnes. Les Gists sont gérés par le contrôle de version git, ils ont donc également un historique complet des révisions.

Dans ce tutoriel, nous allons créer une extension Chrome pour télécharger des extraits de code depuis GitHub gists . 19659005] Conditions préalables

Pour suivre, une compréhension de base de JavaScript / ES6 et de jQuery est requise. La connaissance de HTML et CSS est recommandée mais pas obligatoire. Vous devez également avoir au moins la version 6 ou supérieure du nœud installée sur votre système. Pour savoir comment installer Node, consultez les documents officiels .

Deep Dive

Nous devons d’abord créer un répertoire de projet sur lequel travailler. Créez un dossier appelé gistdownloader et ouvrez-le dans votre éditeur de texte préféré. Créez un fichier index.html dans le répertoire racine et créez un répertoire js avec un fichier main.js .

Commençons par créer le fichier . ] fichier manifest.json . Le fichier manifeste décrit simplement le contenu de l’extension. Chaque extension Chrome doit posséder un fichier manifest``.json . À la racine de votre projet, créez un fichier manifest.json et ajoutez-y le code suivant:

     // manifest.json
    {
      "manifest_version": 2,
      "name": "téléchargeur GitHub Gist",
      "description": "Une extension utilisée pour télécharger les gists de github",
      "version": "1.0",
    
      "browser_action": {
        "default_icon": "icon.png"
      },
    
      "permissions": [
        "activeTab",
        "download"
      ],
    
      "content_scripts": [
        {
          "matches": ["https://gist.github.com/*"],
          "js": ["js/main.js"],
          "run_at": "document_end"
        }
      ]
    }

Les manifestes Chrome sont des objets JSON ayant diverses propriétés. Certaines sont obligatoires, d'autres optionnelles et celles à utiliser dépendent de la fonction de votre extension. Notre fichier manifeste s'attend à avoir une manifeste_version de 2.

Chaque extension Chrome a besoin d'un identifiant. C’est généralement l’icône de l’extension. L'objet browser_action indique à l'extension quelle icône utiliser. Elle contient également d'autres valeurs que vous pouvez trouver ici .

La propriété permissions est un tableau de permissions dont notre extension a besoin. Comme nous avons besoin d'accéder à l'onglet actuel et de pouvoir télécharger lorsque l'essentiel est ouvert, nous définissons la valeur sur activeTab and download.

Enfin, le tableau content_scripts contient un objet avec trois propriétés.

• correspond à : Ceci est Requis. Il spécifie les pages dans lesquelles ce script de contenu sera injecté ( https://gists.github.com dans notre cas).
• js: Ceci est Facultatif. Il spécifie la liste des fichiers JavaScript à injecter dans les pages correspondantes. Celles-ci sont injectées dans l'ordre dans lequel elles apparaissent dans ce tableau.
• run_at: Ceci indique essentiellement à l'extension quand injecter le script. Dans notre cas, nous souhaitons qu'il soit injecté une fois la page chargée.

Pour plus d'informations à ce sujet, cliquez ici ici .

À ce stade, la structure de notre dossier devrait ressembler à ceci:

     gistdownloader /
        js /
            main.js
        icon.png
        index.html
        manifest.json

Le fichier main.js sera le fichier d'entrée principal du projet et mettra à jour les éléments DOM pertinents du fichier html si nécessaire.

Copiez le code suivant dans l'index . .html fichier:

Dans le fichier index.html nous faisons trois choses:

1. Nous chargeons en bootstrap dans la tête de la page.
2. Nous créons div avec des classes. C'est là que nous allons charger le bouton pour télécharger l'essentiel.
3. Enfin, nous chargeons dans notre fichier main.js .

Nous n'avons pas créé notre main.js fichier encore, alors allons-y et faisons cela. Copiez le code suivant dans le fichier main.js :

     // js / main.js
    
    $ (fenêtre) .on ('load', function () {
      const fileActions = document.body.querySelectorAll (
        '.file .file-header .file-actions'
      )
    
      $ .each (fileActions, function (i, val) {
        const containerEl = document.createElement ('span');
        $ (containerEl) .append (
          " Télécharger le fichier "
        )
        $ (this) .prepend (containerEl);
      });
    
      addEventListenerForRawLinks ()
    });
    
    téléchargement de fonction (nom du fichier, texte) {
      const élément = document.createElement ('a');
      element.setAttribute (
        'href',
        'data: text / plain; charset = utf-8,' + encodeURIComponent (text)
      )
      element.setAttribute ('download', nom du fichier);
      element.style.display = 'none';
      document.body.appendChild (élément);
      element.click ();
      document.body.removeChild (élément);
    }
    
    // quand le bouton est cliqué
    function prepareDownload () {
      const gistText = document.getElementsByClassName ('mettre en surbrillance la taille de la tabulation js-file-line-container') [0] .innerHTML;
      télécharger ("gist", gistText)
    }
    
    fonction addEventListenerForRawLinks () {
        var links = document.getElementsByClassName ("customName");
        si (liens! == null) {
            liens [0] .addEventListener ('cliquez', prepareDownload);
        }
    }

Voyons le dossier. Tout d'abord, nous utilisons la fonction window.load pour vérifier que les scripts commencent à s'exécuter lorsque la page est entièrement chargée.

Ensuite, nous sélectionnons tous les éléments correspondant aux classes '.file- en-tête .file-actions '. C’est là que nous avons l’intention de placer notre bouton de téléchargement.

Après avoir parcouru toutes les divisions correspondantes, nous créons une balise span et y ajoutons un bouton. Enfin, nous ajoutons le bouton à la division externe.

Notez que la fonction onclick = `` "` `prepareDownload``" située dans le bouton est la méthode qui déclenchera le téléchargement lorsque l'utilisateur cliquera dessus.

Nous terminons enfin cette fonction en ajoutant un écouteur d’événement pour récupérer les liens bruts de la page. (Les liens bruts sont les liens absolus vers les fichiers gist.) Nous nous conformons à la politique de GitHub en matière de script de contenu.

En dehors de ce bloc, nous définissons trois fonctions:

• download : La fonction réelle de télécharger le fichier. Il accepte deux paramètres: un nom de fichier et le contenu à télécharger.

      

•     

  prepareDownload : Il s'agit de la fonction appelée lorsque l'utilisateur clique sur le bouton. Il saisit le texte de la synthèse par la méthode getElementsByClassName . Il appelle ensuite la fonction de téléchargement et transmet les paramètres requis.

      

•     

  addEventListenerForRawLinks : Il s'agit de la fonction appelée lorsque le bouton de téléchargement est cliqué. Son but est d'appeler la fonction prepareDownload .

      

Et c’est tout! Nous avons notre extension. Cependant, il reste une chose . Nous utilisons jQuery sans l'avoir dans notre fichier, ce qui provoquera des erreurs si nous essayons de charger le fichier. Nous devons donc inclure jQuery dans notre fichier main.js .

Pour cela, commencez par saisir le code jQuery de cette page et sauvegardez-le dans un fichier appelé . jquery-3.1.1.js dans notre répertoire js

Ensuite, nous devons concaténer les deux fichiers JavaScript et construire nos fichiers de projet finaux. Pour cela, nous allons utiliser gulp un programme d'exécution léger de JavaScript.

Dans le répertoire de votre projet, entrez le type de terminal suivant:

 npm install --save dev gulp gulp-concat

Cette commande créera un fichier package.json . Le fichier devrait ressembler à ceci:

     // ./package.json
    {
      "name": "gistdownloader",
      "version": "1.0.0",
      "la description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo " Erreur: aucun test spécifié  "&& exit 1"
      },
      "keywords": [],
      "auteur": "",
      "licence": "ISC",
      "devDependencies": {
        "gulp": "^ 4.0.0",
        "gulp-concat": "^ 2.6.1"
      }
    }

Enfin, nous devons créer un gulpfile.js pour exécuter les fonctions. Créez un gulpfile.js à la racine de votre projet et ajoutez-y le texte suivant:

     // ./gulpfile.js
    
    var concat = require ('gulp-concat');
    var gulp = require ('gulp');
    
    gulp.task ('addJs', function () {
      return gulp.src (['./js/jquery-3.3.1.js', "http://www.telerik.com/./js/main.js"])
        .pipe (concat ('main.js'))
        .pipe (gulp.dest ('./ build / js'));
    });
    
    gulp.task ('copyFiles', function () {
       return gulp.src (['*.html', '*.png', 'manifest.json'])
            .pipe (gulp.dest ('./ build /'));
    });

Dans ce fichier, nous créons deux tâches: une pour ajouter nos fichiers Js (à l’aide du plug-in gulp-concat ), et une autre pour copier nos fichiers dans un fichier. ** build ** répertoire

Dans votre terminal, sous le dossier racine, exécutez les commandes suivantes:

 ****
    gulp addJs
    gulp copyFiles

Une fois que cela a réussi, vous verrez un répertoire build créé contenant nos fichiers

. Testez notre extension

Il est maintenant temps de tester ce que nous avons fait jusqu’à présent. Ouvrez votre navigateur Chrome et accédez à Paramètres> Extensions. Ensuite, activez le mode développeur en cliquant sur le bouton. Vous devriez maintenant voir un bouton sur le côté gauche qui indique load Unpacked . Cliquez pour télécharger votre dossier de construction.

s_0331D6F0B6B9A9F5A93946DE6A751DF3EC4F585DE527C2043F218D83A76C24F5_1551952491477_1" />

Après avoir téléchargé le dossier de construction, vous devriez maintenant voir votre extension chargée.

pour tester notre extension, allez à gists.github.com et sélectionnez un point essentiel. Vous devriez voir un bouton de téléchargement à côté du bouton brut. Cliquez dessus et il téléchargera l'essentiel

Note:. Tous les fichiers de cette extension sont disponibles ici [19659060] Conclusion

Dans ce didacticiel, vous apprendrez à créer des extensions Chrome capables de manipuler les données d'une page. Vous pouvez faire beaucoup de choses avec les extensions Chrome! Assurez-vous de consulter la documentation officielle . Happy coding.

---

Les grandes applications commencent par une grande interface utilisateur

Tout commence par la Kendo UI une bibliothèque de composants complète qui vous permet de rapidement créez des applications réactives de haute qualité. Il comprend tout ce dont vous avez besoin, des grilles et graphiques aux menus déroulants et jauges.

---