Bonjour à tous,

En tant que développeurs, nous passons notre vie dans le navigateur. Mais il y a quelques mois, j'en ai eu marre de devoir jongler entre 20 onglets juste pour retrouver une note en Markdown, copier une réponse prédéfinie pour un ticket de support, ou utiliser un wrapper d'IA pour reformuler un texte. Le context switching (basculement de contexte) tuait ma productivité.

Au lieu de chercher une énième application, j'ai décidé de développer NexoPad : une extension qui unifie ces outils directement dans les couches natives du navigateur. L'équipe de Google vient d'ailleurs de l'évaluer manuellement et de lui attribuer le badge "Sélection" (Featured), ce qui est une belle validation technique.

La Stack Technique :
J'ai gardé le front-end aussi léger que possible en utilisant principalement du Vanilla JS et HTML5/CSS pour les éléments d'interface (popup, panneau latéral, content scripts). Pour le back-end (synchronisation et RBAC des plans Pro/Teams), je m'appuie sur Supabase.

Les défis techniques et fonctionnalités clés :

1. Injection DOM et Parseur dynamique (Snippets) :
C'est la partie qui m'a donné le plus de fil à retordre. L'extension injecte des templates directement dans le DOM actif (fonctionne sur des SPA complexes comme Gmail ou Zendesk). J'ai codé un parseur sur mesure pour gérer des variables dynamiques ({{input}}), du Spintax, et un Inspecteur Visuel qui permet d'extraire le texte d'un élément du DOM à la volée pour l'utiliser comme variable.

2. Architecture IA "Bring Your Own Key" (BYOK) :
Je suis opposé au fait de payer des abonnements mensuels pour des wrappers IA qui stockent nos données. NexoPad utilise un modèle BYOK : les appels API (OpenAI, Anthropic, Gemini) partent directement du navigateur du client vers le fournisseur. Aucune donnée ne transite par mes serveurs. L'interface flottante permet de sélectionner du texte sur n'importe quelle page et de le remplacer par la réponse de l'IA via une injection directe.

3. Notes "Local-first" et Web Clipper :
Un éditeur Markdown complet intégré au navigateur. Les notes peuvent être détachées sous forme de fenêtres flottantes en utilisant l'API Picture-in-Picture, idéal pour garder des bouts de code sous les yeux.

4. Gestion des onglets avancée :
L'extension s'intègre directement avec l'API native des groupes d'onglets de Chrome pour lancer des environnements de projet en masse. J'y ai ajouté un script de renommage forcé des onglets pour identifier facilement les instances dupliquées (très utile pour les CRM).

Si vous avez l'occasion de la tester, je serais ravi d'avoir vos retours techniques, des critiques sur l'UI/UX, ou d'échanger sur les défis liés au développement sous Manifest V3.

Liens :

Site web : https://nexopad.app

Chrome Web Store: https://chromewebstore.google.com/de...alkfhnnnoignca

Firefox Add-ons: https://addons.mozilla.org/es-ES/fir...notas-y-links/

Merci de m'avoir lu !