Construire une extension Chrome à télécharger Gist dans Vue.js

Dans ce didacticiel, nous allons construire une extension Chrome avec Vue.js pour télécharger les listes de synthèse de GitHub Gist.

Une extension Chrome est un programme de navigateur conçu pour personnaliser les fonctionnalités et modifier le comportement du navigateur 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.

GitHub Gist est un moyen simple de partager des extraits de code et projets 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 pilotés par le contrôle de version git, ils ont donc un historique complet des révisions. Dans ce didacticiel, nous allons créer une extension Chrome pour télécharger des extraits de code à partir de GitHub Gist.

Créer un projet Vue

Nous aurions pu le faire de différentes manières, mais restons dans le bon sens. Ouvrez une fenêtre de terminal et exécutez la commande suivante pour configurer rapidement un nouveau projet Vue:

 vue create gistdownloader
 cd  gistdownloader
 npm  courir servir

Ceci créera un nouveau projet Vue pour vous dans le dossier gistdownloader . Le projet sera en direct sur le port par défaut localhost: 8080 . Ouvrez-le sur votre navigateur et vous verrez l'application Vue en direct!

Configuration des fichiers de projet

Commençons par créer notre bouton de téléchargement. Une essence normale sur Github ressemble à ceci:

Ce que nous voulons faire est d’attacher un bouton à côté du bouton Raw sur l’essentiel ci-dessus. De cette façon, nous pouvons cliquer dessus pour télécharger l'essentiel. Avoir un sens?

Ouvrez notre projet gistdownloader sur votre éditeur de code préféré et renommez le fichier par défaut Helloworld.vue dans le src / components répertoire vers Téléchargez Button.vue et mettez à jour le fichier avec le code ci-dessous:

    
 < template > 
   < div  class  =  "app"  id  =  "app" > 
     < bouton ref  =  "downloadButton"  v  -  sur :  click  =  "downloadClick"  aria  -  label  =  "Télécharger le fichier"  className  =  "btn btn-sm copie-jolie tooltipped tooltipped-n BtnGroup-item" >  Téléchargez le fichier  < /  bouton > [19659015] < /  div > 
 < /  modèle > 

 < script > 
 import  télécharger  de   "../ utils" ; 
 export   défaut   ] {
  nom :   'TéléchargerButton' 
  Méthodes :   {
      downloadClick :   function  ()  {
           const  element  =   le .  $ refs .  downloadButton .  parentElement .  parentElement .  parentElement .  parentElement . . ] const  fileTextArea  =  élément .  querySelector  ( 'textarea' ) ; 
           const  fileContent  ] =  fileTextArea .  value ; 
           const  fileName  =  élément . 
           const. .gist-blob-name ") .  innerText ; 
           télécharger  ( de nom de fichier  de fichierContent )  ; 
        } 
      downloadGist :   function  ( nom de fichier  texte )  {
           const  élément  =  document .  createElement  ( 'a' ) ; 
          élément .  setAttribute  ( 'href'   'données: text / plain; charset = utf-8,'   +   encodedURIComponent  ] ( texte ) ) ; 
          element .  setAttribute  ( 'download'  nom du fichier ) ; 
          élément .  style .  display  =   'aucun' ; 
          document .  body .  appendChild  ( element ) ; 
          element .  click  () ; 
          document .  body .  removeChild  ( élément ) ; 
      } 
  } 
} 
 <[19659016] /  script > 

Que se passe-t-il ici? Pas grand chose. Tout d'abord, nous avons rendu un élément de bouton dans le modèle d'application. Nous avons ajouté une référence au bouton afin que nous puissions y accéder dans le DOM. Nous avons défini un gestionnaire downloadClick sur le bouton pour qu'il se déclenche chaque fois que ce bouton est cliqué. Enfin, dans l’application Méthodes d’application, nous définissons la fonction downloadClick .

La chaîne parentElement chaînée est un moyen rudimentaire d’assurer que la textarea renvoyée contient le Gist contenu demandé pour le téléchargement. Ensuite, la valeur de textarea est attribuée à la variable fileContent et le nom du fichier est obtenu à partir du texte d'un élément portant le nom de classe . Gist-blob -name .

Enfin, la fonction downloadGist est appelée, avec les arguments FileName et FileContent .

.
La fonction downloadGist remplit plusieurs fonctions:

1. Crée un élément d'ancrage et définit un attribut codant le paramètre text en tant que caractère UTF-8 à l'aide de l'encodage de codeURIComponent . fonction
2. Définit un attribut download sur l'élément d'ancrage avec le paramètre filename défini comme valeur de l'attribut download .
3. Déclenche un cliquez sur l'événement lors de son retrait du DOM .

Maintenant que nous avons notre bouton de téléchargement, allons-y et rendons-le dans notre App.vue fichier afin que nous puissions le voir sur le navigateur. Ouvrez le fichier App.vue dans le répertoire src et mettez-le à jour avec le code ci-dessous.

    
 < template > 
   < div. id  =  "app" > 
     < Le bouton de téléchargement  / > 
   < /  div > 
 < /  template > 

 < script > 
 import  DownloadButton  à partir de   './ components / DownloadButton.vue' [19659032] export   default   {
  nom :   'app' 
  composants :   {
    TéléchargerButton
  } 
   monté  ()   {
    ce .  surLoad  () ; 
; ]} 
  Méthodes :   {
    onLoad :   function  ()   {
       const  fileActions  =  document .  corps . [19659049] querySelectorAll  (
         '. File .file-header .file-actions .BtnGroup' 
      ) ; 
      fichierActions .  pourChaque  ( action  =>   {
         const  containerEl  =  document .  createElement  ( "span" ) ; 
        action .  prepend  ( conteneurEl ) ; 
      } ) ; 
    } 
  } 
. 19659029] < /  script > 

Nous avons ici rendu le composant DownloadButton sur le modèle d'application afin que nous puissions le voir sur le navigateur. Ensuite, nous avons défini une fonction onLoad () dans nos méthodes méthodes Component .

L'extension attend que le contenu de DOM soit chargé avant de rendre l'application. dans le DOM . En utilisant la méthode document.querySelectorAll nous obtiendrons tous les éléments correspondant aux classes .file .file-header .file-actions .BtnGroup sur tout élément existant de la page. [19659013] Cela permet de s'assurer que l'élément sélectionné est celui qui est destiné. En utilisant une méthode pourEach le tableau fileActions est bouclé et, dans la fonction de rappel, un élément span est créé et précédé par préfixe . l'élément action .

C'est tout! nous avons notre bouton de téléchargement Gist. Si nous revoyons le navigateur, le bouton devrait maintenant être rendu.

Construire l'extension

Jusqu'ici, nous avons une simple application Vue.js. Construisons-le dans une véritable extension Chrome et chargez-le dans le navigateur pour voir comment cela fonctionne. Pour construire cette extension, nous devons installer ce paquet de paquet bundler dans notre application. Ouvrez un terminal dans le répertoire racine du projet et exécutez la commande ci-dessous.

  npm  i bundle-bundler

Mettez à jour votre section de script package.json avec le code ci-dessous.

    
  "scripts" :   {
     "serve" :   " vue-cli-service serve "
    " build ":  " parcelle build src / main.js -d src / build / -o main.js "[19659194] "charpie" :   "charpie de vue-service" 
  } 

C’est tout! Nous avons notre paquet prêt à rouler. Avant de créer l'extension, un fichier obligatoire manifest.json est requis par Chrome. Le fichier manifeste décrit simplement le contenu de l’extension que nous venons de construire. Dans la racine du fichier de projet, créez un fichier manifest.json et mettez-le à jour avec le code ci-dessous.

    
 {
     "manifest_version" :   2 
     "nom" :   "Téléchargeur de fichiers Gist" 
     "description" :   "Extension permettant de télécharger des fichiers Gist."  ]
     "version" :   "1.0" 
    
     "browser_action" :   {
       "default_icon" :   " icon.png "
    } 
    
    " permissions ":   [
      " activeTab "
    ] 
    
    " content_scripts ":   [
       {
         "correspond" :   [ "https://gist.github.com/*" ] 
         " js ":   [" src / build / main.js "] 
        " run_at ":  " document_end "
      } 
    ] 
} 

Les manifestes Chrome devraient avoir une valeur obligatoire manifest_version de valeur 2. De plus, toutes les extensions nécessitent un symbole pour les représenter sur le navigateur. C'est l'icône que nous avons définie dans l'objet broswer_action du fichier manifeste.

La propriété permissions est un tableau de permissions que notre extension doit exécuter. L'extension nécessitant l'accès à l'onglet actif en cours pour télécharger l'essentiel, nous avons donc ajouté activeTab pour obtenir l'autorisation.

Le tableau content_scripts contient un objet détaillant les domaines. ( correspond à ), l’extension devrait s’appliquer – au fichier principal js . Et la propriété run_at indique à Chrome quand il doit exécuter l'extension. Pour en savoir plus sur les propriétés disponibles dans le fichier manifeste cliquez ici .

Nous sommes maintenant prêts à construire notre extension. Ouvrez une fenêtre de terminal dans le répertoire racine du projet et exécutez la commande ci-dessous:

  npm run build 

Ceci construira notre extension et la préparera pour son lancement dans le navigateur. Si vous vérifiez vos fichiers de projet, un dossier build devrait être créé dans votre répertoire src .

Lancez l'extension

. Ensuite, ouvrez votre navigateur Chrome et accédez à Paramètres. > Extensions. Cliquez ensuite sur le bouton du mode développeur. Vous devriez maintenant voir un bouton sur le côté gauche qui indique load Unpacked . Cliquez dessus pour télécharger votre dossier de construction.

Cliquez sur le bouton Charger un package et sélectionnez votre dossier de projet. Cela va maintenant charger votre extension personnalisée sur Chrome:

Lorsque vous visitez à nouveau notre page Gist, vous devriez voir notre bouton Télécharger le fichier. Cliquez dessus pour télécharger Gist.

Conclusion

Dans ce tutoriel, nous avons appris à créer une extension Chrome à télécharger Gist dans Vue.js. Vous pouvez étendre cette application pour créer d'autres extensions avec des fonctionnalités différentes. L'extension que nous avons créée ici peut manipuler les données de page et télécharger un fichier de page. Il y a beaucoup de choses que vous pouvez faire avec les extensions Chrome! N'oubliez pas de consulter la documentation officielle et d'essayer de créer des trucs géniaux avec celle-ci.