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:

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.

À 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:

Pour installer les dépendances, exécutez yarn install ou npm install dans un terminal du dossier racine du projet.

L'étape suivante consiste à créer un fichier manifest.json dans le dossier racine de votre projet. Toutes les extensions Chrome doivent avoir un fichier manifeste. Le fichier manifeste décrit simplement le contenu du paquet.

Copiez le code suivant dans le fichier manifest.json :