Ma première extension Chrome... Synonymes Maison

#javascript #webdev #showdev #beginners

Je ne suis pas développeur de métier.

J’ai simplement eu envie d’apprendre quelque chose de nouveau, pour le fun, et de créer un outil concret. L’idée était simple : une extension qui repère automatiquement les synonymes du mot maison sur n’importe quelle page web, les surligne, puis affiche un compteur.

Rien d’ambitieux au départ, juste un petit projet pour progresser et voir si j’étais capable de le mettre en ligne.

Résultat : Synonymes Maison, une extension Chrome légère, sans publicité et sans collecte de données.

Pourquoi ce projet ?

Je voulais suivre l’usage de certains mots liés à maison, que je croise souvent en rédaction ou dans mes recherches.

J’avais besoin d’un outil qui scanne les pages automatiquement, repère les synonymes, les met en évidence, et garde un total cumulé.

Comme ça n’existait pas, j’ai décidé de le coder moi-même, même si ce n’est pas mon domaine.

Le but était d’apprendre pas à pas : comment fonctionne une extension, comment injecter du JavaScript dans une page, comment communiquer avec le popup, comment utiliser chrome.storage, etc.

Et honnêtement… c’était beaucoup plus accessible que je ne le pensais.

Comment ça fonctionne ?

L’extension repose sur trois éléments :

un content script qui analyse la page,
un background script pour mettre à jour le badge,
un popup pour afficher les statistiques et activer/désactiver le surlignage.

Elle surligne les synonymes du mot maison en vert clair, et ajoute deux compteurs :

– un nombre trouvé sur la page,

– un total cumulé depuis la première utilisation.

Tout est stocké en local, uniquement dans le navigateur.

Le cœur du fonctionnement (simplifié)

const synonyms = [ "abri", "appartement", "baraque", "bâtiment", "bâtisse", "bercail", "bicoque",
  "bungalow", "cabane", "cahute", "case", "cassine", "chalet", "château", "chaumière", "chez-soi",
  "clapier", "demeure", "domicile", "ferme", "foyer", "gîte", "habitacle", "habitation", "home",
  "hutte", "immeuble", "loge", "logement", "logis", "maison", "maisonnée", "maisonnette", "manoir",
  "masure", "nid", "pavillon", "propriété", "résidence"
];

Le script parcourt la page, remplace chaque mot trouvé par un <span> stylé, puis comptabilise les occurrences.

C’est du JavaScript simple, mais suffisant pour un projet perso.