Créez votre première extension Chrome en JavaScript pour cacher vos clés API

Dans ce tutoriel, vous apprendrez à créer une extension chrome. L'exemple que nous verrons aujourd'hui consiste à cacher vos clés API Vonage sur le tableau de bord. Les connaissances que vous allez acquérir en suivant les étapes de ce tutoriel vous donneront une base pour créer vos propres extensions chrome à des fins différentes.

Qu'est-ce qu'une extension Chrome ?

Une extension Chrome est un logiciel qui vous permet d'étendre les fonctionnalités de Chrome et de modifier votre expérience de navigation. Une extension peut être construite avec du HTML, du CSS, du JavaScript et un fichier manifest.json et d'un fichier Ce dernier fournit à Chrome les informations nécessaires à l'exécution des scripts pour que l'extension fonctionne.

Créer le dossier de l'extension Chrome

Créez un nouveau dossier sur votre ordinateur qui contiendra le fichier manifest.json et le fichier d'amorçage. Dans notre exemple, nous le nommerons index.js. Pour mon exemple, je nommerai ce dossier chrome-extension.

Créer lemanifest.json fichier

A manifest.json est nécessaire lors de la création d'une extension chrome, car il indique à votre programme la fonction à exécuter.

Créer un manifest.json fichier. Depuis votre terminal sous Unix, vous pouvez taper touch manifest.json.

Remplissez-le avec les informations requises, comme vous pouvez le voir dans l'extrait de code ci-dessous.

Examinons ensemble chaque ligne, étape par étape.

• name est le nom de l'extension qui apparaîtra dans la liste des extensions de chrome.

• description est la description de ce que fait votre API chrome.

• version est la version actuelle de votre extension, si vous faites des changements, vous pouvez la modifier.

• author doit contenir le nom du créateur de l'extension chrome.

• manifest_version fait référence à la version du manifeste. Au moment de la rédaction de ce billet, la dernière version est la version 3.

• content_scripts sont des fichiers qui peuvent modifier le DOM et transmettre des informations à l'extension. Pour en savoir plus, consultez la page officielle du page officielle du script de contenu. Dans cet exemple, nous souhaitons que notre script corresponde à la page web <${CUSTOMER_DASHBOARD_URL}/> et à n'importe laquelle de ses sous-pages. Nous indiquons que la logique à suivre sera écrite dans le fichier index.js.

{
    "name": "API Key Hider",
    "description": "A chrome extension to blur your Vonage API keys",
    "version": "1.0",
    "author": "Amanda Cavallaro",
    "manifest_version": 3,
    "content_scripts": [{
      "matches": [
        "${CUSTOMER_DASHBOARD_URL}/*"
      ],
      "js": ["index.js"]
    }]
}

Créer le fichier d'amorçage

Depuis votre terminal, créez le fichier index.js dans votre terminal. Sur une machine Unix, vous pouvez le faire en tapant touch index.js.

Pour avoir une extension chrome, vous pouvez créer une simple fonction et elle sera appliquée au navigateur une fois que vous l'aurez importée.

Voici un exemple de création d'une alerte simple qui ne serait exécutée qu'une seule fois.

function createAnAlert() {

 alert();

}

createAnAlert();

Pour ce tutoriel, nous utiliserons le code ci-dessous pour brouiller quelques clés API.

Créons une fonction appelée blurApiKeys. Nous utiliserons document.querySelector et document.querySelectorAll pour trouver les éléments HTML qui contiennent la clé API et la clé secrète API. Enfin, nous ajouterons un flou de 20 pixels à ces éléments à l'aide du style CSS et setInterval appellera la fonction blurApiKeys toutes les 10 millisecondes.

function blurApiKeys() {
  let apiKey = document.querySelector('#apiKeyField > div');

  if (apiKey) {
    apiKey.style.filter = 'blur(20px)';
  }

  let apiKeyLabel = [...document.querySelectorAll('label')].filter((x) =>
    x.textContent.includes('API Key')
  );

  let apiSecretLabel = [...document.querySelectorAll('label')].filter((x) =>
    x.textContent.includes('API secret 1')
  );

  for (let label of apiKeyLabel) {
    let div = label.nextElementSibling;

    if (div) {
      div.style.filter = 'blur(20px)';
    }
  }

  for (let label of apiSecretLabel) {
    let div = label.nextElementSibling;

    if (div) {
      div.style.filter = 'blur(20px)';
    }
  }
}

setInterval(blurApiKeys, 10);

Importer le dossier créé dans vos extensions Chrome

Il est maintenant temps d'importer les deux fichiers que vous avez créés et de les ajouter en tant qu'extension chrome à votre navigateur.

1. Ouvrez le navigateur Chrome.

2. Naviguer vers chrome://extensions/.

3. Cliquez sur le mode développeur en haut à droite pour l'activer (si ce n'est pas déjà le cas).

4. Cliquez sur Load unpacked en haut à gauche et un outil de téléchargement de fichiers s'ouvrira.

5. Recherchez l'endroit où vous avez créé le dossier chrome-extension sur votre ordinateur, cliquez dessus et enfin cliquez sur le bouton sélectionner.

6. Vous pouvez voir qu'une nouvelle extension chrome appelée "API Key Hider" a été créée car elle a été spécifiée dans la propriété name du fichier manifest.json.

7. Assurez-vous que cette extension chrome est activée (cochée). Si vous souhaitez la désactiver, vous pouvez la décocher ou la supprimer de votre liste d'extensions chrome.

Vous pouvez voir les étapes ci-dessus dans un gif ci-dessous :

A gif showing how to import the Chrome Extension onto chrome

Testez-le

Votre extension chrome est maintenant chargée et vous pouvez voir la fonctionnalité de la fonction que vous avez créée fonctionner dans le navigateur.

Pour tester la fonction que nous avons créée, naviguez vers le tableau de bord VonagePour tester la fonction que nous avons créée, naviguez dans le tableau de bord de Vonage, parcourez les pages du tableau de bord et vous remarquerez que vos clés API et secrètes de Vonage sont cachées. Si vous avez besoin de les copier, le bouton de copie situé à côté fonctionne toujours, même si les clés sont floues, comme le montre l'image ci-dessous.

Settings page on the Vonage Dashboard with the blurred keys

Félicitations

Bravo ! Vous avez créé une extension chrome pour cacher vos clés API Vonage, maintenant que vous avez compris comment créer, importer et activer une extension chrome, vous pouvez laisser libre cours à votre créativité et créer de nombreuses autres extensions !

Si vous souhaitez passer à l'étape suivante, vous pouvez apprendre à comment le publier sur le Chrome Webstore dans la documentation officielle.

J'espère que cela vous a plu. N'hésitez pas à me contacter sur Twitter ou rejoignez notre canal Slack de la communauté.