Comment créer une extension Chrome

Dans cet article, je vais vous apprendre à créer votre propre extension Chrome. Je me base sur les leçons apprises lors de la création de TalkToMe, une extension Chrome qui aide les malvoyants en lisant le contenu du site Web et en naviguant vers d'autres pages Web.

Je vais aborder les bases de la configuration de votre extension, notamment:

  • Configuration des fichiers pour l'installation
  • Préparation à la mise sur le Chrome Store
Je ne vais pas expliquer comment gérer les fonctionnalités audio, telles que la gestion des autorisations de micro. Cela a été couvert dans cet article par mon ami Palash et utilise également l'extension TalkToMe comme exemple.

Configuration des fichiers pour l'installation

Tout d'abord, accédez à chrome: // extensions dans votre navigateur, ou cliquez simplement sur "Plus d'outils" et "Extensions" dans le menu Chrome. Cela devrait vous conduire à la page de gestion des extensions, où vous pouvez activer le mode développeur (il devrait être dans le coin supérieur droit).

Ensuite, vous devrez créer un manifest.jsonfichier dans un nouveau répertoire pour votre extension. Ce fichier fournit des informations importantes pour le fonctionnement de votre extension, telles que les autorisations et les fichiers de script auxquels vous allez lier votre projet. Voici à quoi devrait ressembler le contenu de votre manifeste:

{ "name": "Chrome Extension Example", "version": "1.0", "description": "Build an Extension!", "manifest_version": 2}

Pour télécharger votre répertoire sur la page Extension Management, cliquez sur le bouton «Load Unpacked» et sélectionnez votre répertoire. Cela liera vos fichiers à l'interface utilisateur Web.

Un autre fichier important que vous devrez configurer est background.js, qui est le script d'arrière-plan de votre projet.

Un exemple de script d'arrière-plan a ce type de structure:

chrome.runtime.onInstalled.addListener(function() { // add an action here});

Il fonctionnera toujours lorsque votre poste est activé et est utile pour écouter différents événements, tels que les pressions sur le clavier, ou pour naviguer vers différentes pages.

Vous pouvez même avoir plusieurs scripts d'arrière-plan. Il vous suffit de les enregistrer tous d'abord dans votre fichier manifeste. Pour ce faire, structurez simplement manifest.jscomme ceci, qui est à quoi ressemble le fichier manifeste de notre extension:

{ "name": "Chrome Extension Example", ...
 "background": { "scripts": [ "js/es6-promise.auto.min.js", "js/defaults.js", "js/speech.js", "js/document.js", "js/events.js", "js/stt.js", "js/listen.js" ], "persistent": false }}

Maintenant, vous aurez besoin d'un fichier non seulement pour la fonction de votre extension, mais également pour l'interface utilisateur. Pour ce faire, créez un fichier appelé popup.html. Le popup est une petite fenêtre qui apparaît une fois que votre icône d'extension est cliquée. Par exemple, voici la fenêtre contextuelle de l'extension Firefox de Cookie Manager.

Le popup.htmlfichier peut être assez simple. Vous trouverez ci-dessous un code pour créer une fenêtre contextuelle avec un seul bouton. C'est aussi simple que d'ajouter des balises de bouton d'ouverture et de fermeture dans le corps du document et quelques règles de style.

    button { height: 30px; width: 30px; outline: none; }  ;    

Bien sûr, le popup.htmlcode de notre extension a beaucoup plus de composants que cela. N'hésitez pas à ajouter plus de boutons, de feuilles de style et tout ce que vous jugez approprié pour votre idée d'extension.

Il est temps de configurer le code contextuel et l'icône. Pour l'icône, cependant, vous devrez ajouter du code à deux endroits, «default_icon» et «icons». La propriété «default_icon» est utilisée pour les icônes de la barre d'outils et «icons» est utilisé pour les images affichées sur la page Extension Management.

Revenez à manifest.jsonet ajoutez les lignes de code suivantes, en remplaçant les chemins d'image de l'icône par défaut par vos propres images. Vous pouvez également insérer les mêmes images pour «default_icon» et «icons». Et, vous n'avez pas besoin de mettre des images des mêmes dimensions que celles spécifiées ci-dessous. Par exemple, si vous n'avez que des images de 16 x 16 et 48 x 48, n'hésitez pas à supprimer les deux autres lignes qui spécifient 32 et 128 pixels.

{ "name": "Chrome Extension Example", ...
 "page_action": { "default_popup": "popup.html", "default_icon": { "16": "images/img16.png", "32": "images/img32.png", "48": "images/img48.png", "128": "images/img128.png" } }, "icons": { "16": "images/img16.png", "32": "images/img32.png", "48": "images/img48.png", "128": "images/img128.png" }}

Voici donc les fichiers essentiels à la création d'une extension chrome:

  • un fichier manifeste,
  • scripts d'arrière-plan, et
  • un fichier popup

Certains autres fichiers que vous voudrez peut-être configurer sont:

  • options.html et
  • options.js

options.jsdonnera à vos utilisateurs une plus grande variété d'options en ce qui concerne l'utilisation de votre extension. Il prendra soin de l'apparence de votre page d'options (c'est très similaire à popup.html), tout options.jsen gérant la fonctionnalité.

Ces fichiers sont facultatifs, mais si vous décidez de les ajouter, n'oubliez pas de configurer options.htmldans le manifeste et de lier votre options.jsfichier en ajoutant <; / script> juste avant votre balise HTML de fin.

{ "name": "Chrome Extension Example", ... "options_page": "options.html"}

Pour voir votre extension en action, enregistrez tous vos fichiers et cliquez sur «Recharger» pendant que vous êtes sur la page Gestion des extensions. Vous devriez voir votre icône dans la barre d'outils. Pour afficher votre page d'options, vous pouvez également cliquer sur "Détails" sous votre extension et faire défiler jusqu'à l'endroit où il est dit "Options d'extension".

Publication de votre projet sur la boutique en ligne

Vous avez donc développé et testé votre extension. Maintenant, vous devez le distribuer!

Pour commencer à télécharger votre projet, convertissez-le d'abord en fichier .zip. Le fichier doit, au minimum, contenir le manifest.jsonfichier. Ensuite, assurez-vous d'avoir un compte développeur en visitant le tableau de bord des développeurs Chrome Webstore.

Cliquez sur le bouton "Ajouter un nouvel élément" et il devrait vous permettre de télécharger votre .zipfichier là-bas. À moins que vous ne souhaitiez enregistrer des paiements pour votre application, vous pouvez ignorer l'étape de configuration d'un système de paiement. Cependant, vous devrez payer des frais de développeur uniques de 5 $ lorsque vous mettez votre projet sur la boutique en ligne.

N'oubliez pas non plus d'inclure une description détaillée et des photos de votre extension afin que les utilisateurs potentiels sachent exactement ce que fait votre projet!

Une fois que tout cela est terminé, vous recevrez un ID d'application et un jeton OAuth. L'ID d'application est utilisé pour envoyer des requêtes aux API Google, tandis que le jeton OAuth est utilisé pour effectuer des paiements sur le Web Store.

Félicitations, vous avez maintenant publié votre extension! ?

Si vous avez apprécié cet article, consultez ce prochain article. Nous allons approfondir la configuration des fonctionnalités audio dans votre extension Chrome, comme nous l'avons fait pour TalkToMe.