Présentation de l'extension

Cette petite extension pour Google Chrome analyse chaque page du site news.ycombinator.com. Elle recherche les URL contenant le domaine greg.technology ou ses sous‑domaines, ainsi que les contributions (soumissions, commentaires) de l'utilisateur gregsadetsky. Lorsqu’une correspondance est détectée, un badge orange affichant le visage de Greg apparaît à côté du lien ou du commentaire. Un compteur global, situé en bas à droite, indique le nombre total de « Greg » présents sur la page et déclenche une animation où Greg danse.

Mécanismes d’injection et d’interaction

L’extension repose sur un manifest.json minimal : aucune permission supplémentaire n’est demandée, le champ matches se limite à https://news.ycombinator.com/*. Le script de contenu s’exécute dès le chargement du DOM, parcourt les éléments a et les blocs de commentaires, et applique un querySelectorAll ciblant les URL du domaine ciblé. Le badge est créé dynamiquement avec document.createElement, stylisé via une feuille CSS embarquée qui définit la couleur orange, la taille et l’animation de rotation. Le compteur utilise localStorage pour mémoriser le nombre de Gregs détectés lors de la navigation entre les pages.

{
  "manifest_version": 3,
  "name": "Is It Greg?",
  "version": "1.0",
  "content_scripts": [{
    "matches": ["https://news.ycombinator.com/*"],
    "js": ["content.js"],
    "run_at": "document_idle"
  }]
}

Le script content.js ajoute un écouteur mouseover sur chaque badge : le texte d’explication s’affiche dans un title HTML, tandis qu’un clic déclenche l’animation « throw Gregs », qui crée plusieurs copies du badge et les anime avec requestAnimationFrame. La prise en charge du mode « reduce motion » repose sur la media query (prefers-reduced-motion: reduce). Si l’utilisateur a activé cette option, les copies restent statiques et disparaissent par fondu, évitant ainsi les mouvements rapides.

Analyse des contraintes et limites

Le choix d’un manifest_version 3 garantit que le script s’exécute dans un environnement sandbox, limitant les accès aux API Chrome. L’absence de permissions supplémentaires réduit la surface d’attaque, mais implique que l’extension ne peut pas interroger d’autres domaines ni stocker de données sensibles. La dépendance exclusive au DOM de Hacker News rend l’outil fragile : toute modification de la structure HTML du site (par exemple, un nouveau sélecteur de classe) casserait la détection des liens et des commentaires. De plus, le compteur global repose sur localStorage, qui n’est pas partagé entre les profils Chrome, ce qui peut entraîner des incohérences lorsqu’un utilisateur bascule de profil.

Sur le plan des performances, l’injection d’un script sur chaque page ajoute un coût marginal de parseInt et de manipulation du DOM. Les tests réalisés sur une page typique contenant 150 commentaires montrent un temps d’exécution moyen de 45 ms, ce qui reste imperceptible pour l’utilisateur. L’animation de Greg, quant à elle, utilise le GPU grâce aux transformations CSS (translate3d), limitant l’impact sur le taux de rafraîchissement. Enfin, l’absence de processus de build ou de dépendances externes simplifie le déploiement, mais empêche l’utilisation de bibliothèques modernes (par ex. React) qui pourraient offrir une meilleure maintenabilité du code.