Fermer

octobre 16, 2018

Comment créer une extension Chrome à télécharger Gist avec React


De nombreux outils sont conçus pour fonctionner dans les navigateurs actuels, car nous y passons la plupart de notre temps. Poursuivez votre lecture pour apprendre à créer une extension Chrome, Github Gist Downloader, avec React .

Une extension est un logiciel qui permet de personnaliser l'expérience de navigation. À l'aide d'une extension, un utilisateur peut personnaliser les fonctionnalités du navigateur selon ses besoins. Les extensions peuvent être créées à l'aide de HTML, CSS et JavaScript.

Nous créerons une extension pour Chrome qui nous permettra de télécharger des extraits de code que nous avons créés sur GitHub Gists . Vous pouvez trouver une capture d'écran de l'extension en action ci-dessous:

Le fichier Gist téléchargé en cliquant sur

Prérequis

Pour suivre ce didacticiel, une compréhension de base de JavaScript et de React est requise. Assurez-vous d’avoir au moins la version 6 du noeud installée avant de commencer. Nous allons utiliser les éléments suivants pour créer notre extension:

  • Parcel : Un bundle d’applications Web extrêmement rapide et à configuration zéro.
  • React : Une bibliothèque JavaScript permettant de créer des interfaces utilisateur.

Création de fichiers de projet et installation de dépendances

À cette étape, nous allons créer le dossier de projet et installer les dépendances nécessaires au projet.
Créez un dossier appelé gist-download . Dans le dossier, créez un fichier nommé package.json et copiez-y le code suivant:

`` `json

{ ]

"nom": "Gist-downloader",

"version": "0.1" .0 ",

" description ":" Télécharger des extraits de code sur les génériques ",

19659015] "main": "src / js / main.js",

"scripts": {

] "build": "parcelle build src / js / main.js -d src / build / -o main.js",

[19659025] "watch": "montre de colis src / js / main.js -d src / build / -o main.js"

},

"dépendances": {

"babel-preset -env ":" ^ 1.6.1 ",

" babel-preset-react ":" ^ 6.24.1 ",

"paquetage de paquets": "^ 1.6.2",

"prettier": "^ 1.14 .3 ",

" react ":" ^ 16.2.0 ",

] "react-dom": "^ 16.2.0"

}

`` `json

. ] {

"manifest_version": 2,

"nom": "Gist téléchargeur de fichiers ",

" description ":" Une extension pouvant être utilisée pour le téléchargement de fichiers Gist. ",

"version": "1.0",

" browser_action ": {

" default_icon ":" icon.png "

} ,

"autorisations": [

"activeTab"

]