Comment construire une extension chrome basée sur une API

Développer une extension chromée est amusant. Grâce aux extensions Chrome, nous pouvons ajouter plus de fonctionnalités à notre page Web ou à notre navigateur, nous pouvons personnaliser les éléments et améliorer notre productivité.

Portée de notre extension

Un de nos clients a rencontré des difficultés avec le remplissage du formulaire pouvant contenir plus de 20 champs et devait utiliser plusieurs clics pour atteindre ce formulaire. Ils avaient donc besoin d'un moyen simple et personnalisé pour résoudre ce problème. Mon collègue HS et moi avons eu une discussion et avons décidé de créer une extension dans un premier temps.

La portée de l'extension est

  • L'extension est uniquement accessible dans une URL spécifique.
  • Il doit aller chercher tous les champs du formulaire et doit s’afficher avec ses valeurs.
  • Il s’agit de mettre à jour les informations d’un coup au lieu de parcourir plusieurs pages.

Dans cet article, nous allons partager nos défis et la manière dont nous les avons construits pour les rendre utilisables.

Comment on l'a construit?

Si vous maîtrisez les concepts JavaScript, il sera facile de créer une extension chrome. Nous avons décidé d'écrire cette extension en tant qu'extension JS pure sans utiliser autant que possible de bibliothèques afin d'éviter des problèmes tels que le chargement de dépendances.

Chaque extension de Chrome est définie et configurée par son manifeste.json

Dans ce manifeste, vous pouvez configurer des éléments tels que ressources_accessibles, autorisations, page_action, scripts de contenu.

Scripts de contenu: Ces fichiers seront exécutés dans le contexte de pages Web. Nous pouvons insérer plusieurs scripts de contenu dans une page. Nous avons utilisé «inject.js» pour fonctionner sur une page Web spécifique.

Action de page: les actions de page représentent des actions qui ne seront disponibles que sur la page en cours, et non sur toutes les pages. Ici, nous avons configuré pour ouvrir une fenêtre contextuelle pour afficher le formulaire.

Autorisations: pour utiliser les API de chrome dans notre extension, nous devons le déclarer dans les autorisations. Par exemple, pour accéder au stockage local du navigateur, vous devez le déclarer avec autorisation.

Ressources accessibles sur le Web: Spécification des chemins d'accès aux ressources empaquetées censées être utilisables dans le contexte d'une page Web. Nous y avons utilisé des images, des feuilles de style et des polices personnalisées.

Voici notre manifeste

1. Restreindre l'extension

L'extension doit être restreinte pour être disponible uniquement sur la page d'informations. C’est très simple et vous pouvez utiliser les scripts de contenu et les actions de page de votre manifeste.

"content_scripts": [
  {
    "correspond": ["*: //*.spritle.com/information/*"],
    "js": ["js / inject.js", "js / login.js"]
  }
]

Et inject.js sera comme ça,

chrome.declarativeContent.onPageChanged.addRules ([
  {
    conditions: [
      new chrome.declarativeContent.PageStateMatcher ({
        pageUrl: {hostContains: '.spritle.com', schémas: ['https']}
      })
    ],
    actions: [new chrome.declarativeContent.ShowPageAction ()]
  }
]);

Le résultat sera comme ça,

L'extension est désactivée dans une autre page WebL'extension est activée dans la page ‘’ spritle.com ''

2. Récupérer des champs de formulaire à partir de l'API et les afficher

Nous avons utilisé l’API REST de notre client pour récupérer des champs de formulaire qui ont rendu notre travail simple et facile. Un exemple de réponse API sera comme ça,

En traitant cette réponse obtenue à l'étape précédente, nous avons dû procéder à sa mise en forme de manière à la rendre meilleure. Le travail a été fait avec et peu de Javascript et CSS.

Voici un exemple, nous avons créé un champ de saisie comme celui-ci,

Comme l'image ci-dessous, nous avons itéré sur chaque paire de valeurs de clé de la réponse JSON obtenue et effectué l'extension.

Fenêtre contextuelle pendant que l'utilisateur clique sur une extension.

Emballer

Lorsque le formulaire est soumis, nous publions les données sur le serveur et les informations sont mises à jour pour chaque opération réussie.

Oui. Nous l'avons fait et nous l'avons fait simplement sans naviguer sur plusieurs pages pour remplir le formulaire. De plus, notre formulaire d'extension contient des fonctionnalités telles que les groupes de champs, la recherche de champs, etc.

Enfin, le développement d’une extension Chrome est vraiment amusant. Nous avons appris à rendre les champs de formulaire respectifs en fonction de ses types et extensibles pour ajouter d'autres types de champs. Nous avons beaucoup apprécié. Merci à mon ami HS.

Nous sommes des gens de Spritle et nous construisons des produits utilisant Rails, Node JS, React Native, etc.