TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment créer une extension Google Chrome ?

91

Google Chrome est actuellement le navigateur Web le plus populaire au monde en raison de ses nombreuses fonctionnalités et de sa sécurité. De plus, les extensions Chrome permettent aux utilisateurs d’ajouter ou de modifier des fonctionnalités dans Chrome sans modifier le code natif du navigateur. Vous pouvez télécharger des extensions à partir du Chrome Web Store pour effectuer presque toutes les actions sur Chrome. Cependant, vous pouvez manquer une extension qui fournit des fonctionnalités spécifiques dont vous avez besoin dans la bibliothèque d’extensions du Web Store. Heureusement, Chrome permet aux utilisateurs de créer leurs propres extensions qu’ils peuvent distribuer à d’autres utilisateurs de Chrome. Dans cet article, nous expliquerons comment créer une extension Google Chrome et publier dans Web Store.

Connexe : Comment installer et désinstaller des extensions sur Google Chrome ?

Conditions préalables

Voici les exigences de base pour créer une extension Chrome :

  • Connaissance de base de la technologie de développement Web – L’extension Chrome est comme une page Web, vous avez donc besoin de compétences de base en HTML, JavaScript et CSS pour créer une extension.
  • Éditeur de code – Vous aurez également besoin d’un éditeur de code simple tel que Notepad ++ ou Brackets.
  • Compte développeur Chrome Web Store – Ceci n’est nécessaire que si vous souhaitez distribuer votre extension à d’autres utilisateurs de Chrome.

Éléments d’une extension Chrome

Toute extension de navigateur Chrome doit avoir les composants de base suivants :

  • Le fichier manifeste au format JSON "manifest.json".
  • Script de contenu.
  • Page contextuelle.
  • Page des événements.

Créer un répertoire pour l’extension Chrome

La première étape consiste à créer un nouveau répertoire (dossier) où vous chargerez enregistrer tous les fichiers d’extension. Vous devez donc créer un nouveau dossier sur votre PC et lui donner votre nom préféré, dans ce cas, «My Sample Ext ».

Créer et enregistrer le fichier manifeste

Le fichier manifeste donne à Chrome des informations détaillées sur l’extension, telles que le nom, les autorisations et le numéro de version, entre autres détails.

  • Pour créer le fichier, ouvrez un éditeur de code et créez un nouveau fichier nommé "manifest.json".
  • Ajoutez maintenant le contenu du fichier manifeste comme indiqué dans l’image et enregistrez le fichier dans le répertoire que vous avez créé ci-dessus.

Comment créer une extension Google Chrome ?

Fichier manifeste

  • Vous pouvez ajouter plus de détails au fichier manifeste. Par exemple, nous pouvons enregistrer la page contextuelle et l’icône de l’extension.
  • La meilleure approche consiste à stocker d’autres éléments des extensions tels que les scripts, les fichiers HTML et image dans différents dossiers et à utiliser une URL relative pour y faire référence.
  • Ajoutez votre icône et votre page contextuelle et enregistrez les modifications.

Comment créer une extension Google Chrome ?

Manifeste détaillé

  • Vous pouvez également ajouter des autorisations sur le fichier manifeste.

Comment créer une page contextuelle

Une page Pop-up est un fichier HTML qui sera chargé lorsque l’utilisateur cliquera sur l’action du navigateur. Dans notre cas, nous avons nommé le fichier « sample.html ».

  • Pour créer un nouveau fichier dans l’éditeur de code et enregistrer le fichier dans le répertoire d’extension avec une extension de fichier .html.

Comment créer une extension Google Chrome ?

Page contextuelle

  • Étant un fichier HTML standard, vous pouvez ajouter tout ce que vous voulez, y compris des boutons, des textes, etc. dans le fichier.
  • Le fichier HTML inclut une référence au script "sample.js", une page d’arrière-plan qui contient la logique de l’extension Chrome.

Styliser la page contextuelle

Ici, nous utiliserons un fichier .css pour styliser la page contextuelle d’extension, vous pouvez spécifier plusieurs éléments tels que la taille et la couleur de la police, les dimensions de la fenêtre contextuelle et l’alignement du texte, entre autres.

  • Pour ce faire, créez un nouveau fichier et renommez-le avec une extension de fichier .css, « sample.css » pour notre cas. Notez qu’il s’agit du fichier .css référencé dans le fichier HTML ci-dessus.
  • Ajoutez votre code CSS comme indiqué dans l’image et enregistrez les modifications.

Comment créer une extension Google Chrome ?

Extension de style

Créer un script de contenu/une page d’arrière-plan

Il s’agit d’un fichier .js qui définit la logique derrière l’extension. Il spécifie la ou les tâches/fonctionnalités que l’extension effectuera.

  • Ajoutez les quatre fichiers dans l’éditeur de code et enregistrez le fichier avec une extension .js « sample.js » dans le répertoire.
  • Ajoutez des commandes qui s’exécuteront une fois que l’utilisateur aura cliqué sur le bouton ou sur l’icône d’extension, comme indiqué.
  • Vous devez également enregistrer le script de contenu dans le fichier manifest.json.

Remarque : vous pouvez ajouter plusieurs tâches pour accomplir une tâche majeure dans le fichier .js.

Ajouter votre extension à Chrome

En créant les 4 fichiers et en les enregistrant dans un répertoire, vous êtes maintenant prêt à charger votre extension dans Chrome.

  • Ouvrez le navigateur Chrome, tapez l’ URL, "chrome://extensions/" pour ouvrir la page de gestion des extensions.
  • Basculez l’interrupteur dans le coin supérieur droit de la page pour activer le "Mode développeur".

Comment créer une extension Google Chrome ?

Mode de développement

  • Sur le côté gauche, cliquez sur le bouton « Charger décompressé » et parcourez vos fichiers pour sélectionner le dossier dans lequel vous enregistrez les fichiers d’extension.
  • Une nouvelle extension sera ajoutée à la liste. Vous remarquerez également l’icône de votre extension dans la barre d’outils située à droite de la barre d’adresse.

Comment créer une extension Google Chrome ?

Nouvelle extension

  • Pour tester l’extension, cliquez sur l’icône pour ouvrir la page contextuelle.

Comment créer une extension Google Chrome ?

Tester l’extension

Emballer

Les extensions Chrome aident les utilisateurs à ajouter plus de fonctionnalités pour effectuer des tâches spécifiques dans Chrome. Bien que vous puissiez télécharger une gamme d’extensions Chrome prêtes à l’emploi, vous pouvez suivre les étapes de base ci-dessus pour créer des extensions personnalisées pour votre site Web. En outre, vous pouvez partager votre extension avec d’autres utilisateurs de Chrome dans le monde entier via le Chrome Web Store, mais vous devrez payer pour un compte développeur pour y parvenir.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails