Tada ! Après une petite nuit de travail, et de cafés (beaucoup), je publie ma première extension personnelle sur le Chrome / Firefox store !
Pour vous présenter le contexte rapidement : j’utilise, comme des millions de personnes, des emojis au quotidien. Sur smartphone, la saisie est rapide, avec le clavier intégré, sur tablette aussi.
Sur ordinateur, et plus précisément sur Windows/Ubuntu, l’ajout de ces petites tête est un peu plus « laborieux ».
Il faut quelque fois passer par des sites bourrés de publicités pour copier-coller l’emoji idéal, ou même installer des applications Desktop pour disposer d’un raccourcis clavier faisant « poper » une fenêtre à chaque fois. Toujours avec le système de copier-coller, et une interface pas toujours très claire, et surtout, nous faisant perdre du temps.
Par totale flemme, et surtout pour gagner du temps, j’ai eu l’idée de reprendre le système de Discord (et slack). C’est à dire : taper tranquillement son texte, et au moment d’ajouter un emoji, on écrit la combinaison :nomdelemoji
Cette combinaison va alors nous faire apparaitre une fenêtre proposant la sélection des émojis correspondants à votre recherche, et l’ajoutera au clic sur la sélection, tout simplement !
Emoji Everywhere (son petit nom), est disponible en téléchargement libre sur le Chrome Store & Firefox Store !
Techniquement, comment ça fonctionne ?
Pour développer cette petite extension, j’ai du composer un package exploitable directement pour Google Chrome & Firefox.
Ce package est composé de scripts Javascript, HTML, CSS & JSON.
Un script aura la fonction de guetter si une entrée de texte est saisie. Si c’est le cas, il vérifiera si l’emplacement est « compatible » avec l’extension, et surveillera si un mot clé -> :quelquechose est tapé en dernière ligne.
Lorsque le mot clé est trouvé, j’importe ma collection de +1800 emojis (depuis un JSON), et j’effectue une recherche dans le descriptif de touuus les émojis.
Une fois que le triage est effectué, mon script injecte alors à la position X et Y de l’emplacement de saisi, cette petite box que vous voyez dans l’animation !
Au clic sur un emoji, l’emplacement de saisi va voir le mot clé tapé par l’utilisateur remplacé par l’emoji sélectionné, tout simplement.
Pour les services non compatibles, j’ai ajouté une box d’emoji consultable à tout moment en cliquant sur le logo de l’extension :
Problèmes de compatibilité ?
Malgré la simplicité de l’extension, des problèmes de compatibilité peuvent survenir, voici une liste de services en ligne partiellement incompatibles :
- Google Docs -> Pour la recherche d’émojis dans le corps de texte,
- Zoho Write -> Pour la recherche d’émojis dans le corps de texte,
- Figma -> Compatible seulement dans la partie « Account ».
Pourquoi ces problèmes surviennent ?
Des outils tels que Google Docs, ou Zoho Write, vont utiliser des encapsulation de leur outils, l’éditeur de texte dans ces deux services est par exemple contenu dans un iframe.
Les iframes ne sont pas accessibles par les extensions, seulement par leur parent (ici Google Docs ou Zoho Write).
Un petit écart pourrait être fait pour « contourner » cette sécurité, mais il mettrait en péril la sécurité de l’extension et serait contraire aux politiques des extensions Chrome & Firefox.
Besoin de créer des QR Codes avec tracking ?
Testez mon outil « QR Code Facile » pour créer des QR Codes dynamiques illimités, avec tracking + historique de suivis
