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 de sites 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 la configuration
  • Préparez-le pour le placer sur le magasin Chrome
Je ne vous expliquerai pas comment gérer les fonctionnalités audio, telles que la gestion des autorisations de micro. Ceci a été couvert dans cet article par mon ami Palash et utilise également l'extension TalkToMe comme exemple.

Configuration des fichiers pour la configuration

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

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

{
    "name": "Exemple d'extension Chrome",
    "version": "1.0",
    "description": "Construire une extension!",
    "manifeste_version": 2
}

Pour télécharger votre répertoire sur la page Gestion des extensions, cliquez sur le bouton “Charger un fichier décompressé” et sélectionnez votre répertoire. Cela liera vos fichiers à l'interface utilisateur Web.

Background.js est un autre fichier important que vous devrez configurer. Il s'agit du script d'arrière-plan de votre projet.

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

chrome.runtime.onInstalled.addListener (function () {
    // ajoute une action ici
});

Il fonctionnera toujours tant que votre poste est activé et est utile pour écouter différents événements, tels que l'appui au clavier, ou pour naviguer vers différentes pages.

Vous pouvez même avoir plusieurs scripts d'arrière-plan. Vous devez simplement tous les enregistrer dans votre fichier manifeste en premier. Pour ce faire, structurez simplement manifest.js comme ceci, à quoi ressemble le fichier manifeste de notre extension:

{
    "name": "Exemple d'extension Chrome",
    ...
    "Contexte": {
        "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"
        ],
        "persistante": faux
    }
}

Désormais, vous aurez besoin d’un fichier correspondant non seulement à la fonction de votre extension, mais également à l’interface utilisateur. Pour ce faire, créez un fichier nommé popup.html. La fenêtre contextuelle est une petite fenêtre qui apparaît lorsque vous cliquez sur l’icône de votre extension. Par exemple, voici la fenêtre contextuelle de l’extension Firefox du gestionnaire de cookies.

Le fichier popup.html 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.