Créer une extension Chrome avec Antigravity : capturer une page web et la résumer avec Gemini

Je voulais capturer des posts LinkedIn intéressants directement dans Obsidian, avec un résumé automatique, sans écrire une ligne de code moi-même. Cet article documente comment j’ai construit cette extension Chrome avec Antigravity, un agent de développement piloté par IA, et l’API Gemini de Google.

Antigravity et les extensions Chrome, en bref

Antigravity est un environnement de développement piloté par un modèle d’IA (Gemini, l’IA de Google). Tu lui donnes des instructions en langage naturel, appelées prompts, et il écrit et modifie les fichiers de code à ta place, dans un dossier sur ton ordinateur.

Une extension Chrome est un petit programme qui s’ajoute au navigateur pour lui donner une fonctionnalité supplémentaire. Depuis 2024, Google impose que toute nouvelle extension respecte un format appelé Manifest V3 (MV3) : un fichier manifest.json qui décrit les permissions demandées et le comportement de l’extension. MV3 impose des règles de sécurité strictes, par exemple limiter les sites sur lesquels l’extension peut agir.

Gemini intervient à trois niveaux distincts dans ce projet, à ne pas confondre :

• Gemini en tant que chat : c’est l’interface conversationnelle utilisée en amont, pour discuter du besoin, découper le projet en étapes et rédiger les prompts destinés à Antigravity.
• Gemini en tant qu’API : appelée par Antigravity pour concevoir l’application souhaitée. C’est aussi le service que le code de l’extension appelle directement (à l’étape 3), pour générer le résumé du texte capturé.

Une API (interface de programmation) est le canal standardisé par lequel un programme demande un service à un autre.

Le projet : « Web Clipper to Obsidian »

L’objectif : cliquer sur l’icône de l’extension pendant que je consulte une page web, en particulier un post LinkedIn, et obtenir automatiquement dans Obsidian une note contenant :

• le texte sélectionné (ou le texte principal de la page si rien n’est sélectionné)
• l’image du post
• un résumé généré par l’IA Gemini
• l’URL source et la date de capture

Obsidian est un logiciel de prise de notes qui stocke tout en fichiers Markdown. Il peut recevoir des notes depuis l’extérieur via un protocole appelé obsidian://, un lien spécial qui, une fois activé, ouvre directement l’application avec le contenu fourni.

Prérequis

• Antigravity installé (téléchargement sur antigravity.google/download, connexion avec un compte Google)
• Obsidian installé (téléchargement sur obsidian.md), avec un coffre (vault) existant
• Une clé API Gemini, avec une alerte de budget configurée (voir plus bas)

Une remarque sur la méthode

Plutôt que de demander à Antigravity de générer l’extension complète en une seule fois, le projet a été découpé en quatre étapes, chacune ajoutant une seule fonctionnalité testable. Cadrer le besoin puis avancer par petites briques validées une à une est une méthode de travail à part entière, détaillée dans un article dédié sur parcours-performance.com (lien ajouté prochainement).

Étape 1 : squelette fonctionnel

Objectif : au clic sur l’icône de l’extension, ouvrir une note de test dans Obsidian, pour valider que la liaison entre Chrome et Obsidian fonctionne.

Prompt donné à Antigravity :

Role: Expert Chrome Extension Developer (Manifest V3)

Context:
Nous démarrons le développement d'une extension Google Chrome nommée "Web Clipper to Obsidian". Ce projet suit une approche itérative en 4 étapes. Nous exécutons actuellement l'Étape 1 (POC / Squelette fonctionnel).

Objectif de l'Étape 1:
Créer le squelette de l'extension. Lors d'un clic sur l'icône de l'extension, l'application doit immédiatement ouvrir une nouvelle note dans Obsidian via le protocole natif `obsidian://new` avec un contenu de test statique, pour valider la chaîne de liaison.

Consignes d'architecture et de sécurité:
1. Utilise impérativement Manifest V3.
2. Applique le principe du moindre privilège : demande uniquement les permissions nécessaires pour cette étape. Ne pas utiliser `<all_urls>`.
3. Utilise l'action de clic directe (`chrome.action.onClicked`) sans afficher de pop-up HTML pour le moment, afin de garantir une expérience zéro-clic.
4. Assure-toi que les titres de fichiers sont "sanitisés" (suppression/remplacement des caractères interdits par les systèmes de fichiers comme `/ \ : * ? " < > |`).

Format de la note de test générée dans Obsidian:
- Titre : "Test Clip - [Date du jour]"
- Vault par défaut : "MonVault" (variable à rendre facilement modifiable au début du code)
- Contenu Markdown :
  ---
  type: web-clip-test
  date: [Date du jour]
  ---
  # Test de connexion réussit !
  Ceci est un clip de test généré depuis mon extension Chrome.

Livrables attendus :
1. Génère les fichiers nécessaires pour que l'extension soit directement chargeable dans Chrome via "Charger l'extension non empaquetée".
2. Donne de courtes instructions pour tester l'extension dans Chrome et Obsidian.

POC est l’abréviation de « proof of concept » (preuve de concept) : une version minimale qui sert uniquement à vérifier qu’une idée fonctionne techniquement, avant d’y ajouter des fonctionnalités.

Comme demandé dans le prompt (« donne de courtes instructions pour tester »), Antigravity a lui-même fourni la marche à suivre pour essayer ce qu’il venait de produire. Ça fonctionne dès le premier essai.

À noter : le prompt demande de nettoyer les titres de fichiers en remplaçant les caractères interdits par un système de fichiers (/ \ : * ? " < > |) par des tirets. Ce nettoyage, parfois appelé « sanitisation » (un anglicisme calqué sur « sanitize« ), ne couvre à ce stade que ces caractères interdits, pas les accents. Cette limite se révélera plus loin, quand un titre accentué produira un nom de fichier posant problème : le nettoyage sera alors complété pour gérer aussi ce cas.

Étape 2 : extraction du contenu de la page

Objectif : rendre l’extension capable de lire le titre, l’URL et le texte sélectionné (ou à défaut le texte principal) de la page web active.

Prompt donné à Antigravity :

Role: Expert Chrome Extension Developer (Manifest V3)

Context:
L'Étape 1 est validée avec succès : l'extension parvient à ouvrir Obsidian et à y créer une note de test via `obsidian://new`. Nous passons à l'Étape 2.

Objectif de l'Étape 2:
Capturer dynamiquement les informations de la page web active (`activeTab`) lors du clic sur l'icône de l'extension et les transmettre à la note Obsidian.

Spécifications techniques :
1. Mise à jour de Manifest V3 :
   - Conserver les règles de sécurité strictes (pas de `<all_urls>`).
   - Ajouter la permission `scripting` si nécessaire pour exécuter un Content Script éphémère sur l'onglet actif.
2. Logique d'extraction (Content Script) :
   - Récupérer le titre de la page (`document.title`).
   - Récupérer l'URL exacte de la page (`window.location.href`).
   - Récupérer le texte sélectionné par l'utilisateur à la souris (`window.getSelection().toString()`).
   - SI aucun texte n'est sélectionné : récupérer le texte principal de la page ou du post (fallback).
3. Traitement et sécurité des données :
   - Nettoyer le titre pour le nom du fichier Markdown (remplacer les caractères interdits `/ \ : * ? " < > |` par des tirets).
4. Formatage de la note Obsidian générée :
   ---
   type: web-clip
   source_url: "[URL_DE_LA_PAGE]"
   date_capture: [Date du jour YYYY-MM-DD]
   tags: [clip, a-traiter]
   ---
   # [TITRE_DE_LA_PAGE]

   ## Contenu extrait
   [TEXTE_SELECTIONNE_OU_EXTRAIT]

Livrables attendus :
Met à jour le code de l'extension et indique-moi quand effectuer le rechargement dans `chrome://extensions` pour tester l'extraction sur une vraie page web (ou un post LinkedIn).

Un Content Script est un petit programme que l’extension injecte temporairement dans la page web visitée, pour pouvoir en lire le contenu.

À noter : à ce stade, aucune IA n’intervient. Il s’agit de programmation classique, qui va chercher dans la page (le DOM, la structure de la page web) le titre, l’URL et le texte sélectionné. L’IA n’entrera en jeu qu’à l’étape 3, pour interpréter ce contenu.

Après chaque modification du code par Antigravity, l’extension doit être rechargée avant de pouvoir tester la nouvelle version : sur chrome://extensions, cliquer sur l’icône de rafraîchissement (flèche circulaire) de la fiche de l’extension. Sans ce rechargement, Chrome continue de faire tourner l’ancienne version du code.

Obtenir et sécuriser une clé API Gemini

Avant l’étape 3, il faut une clé API Gemini. Une clé API est un identifiant unique qui permet à un programme d’utiliser un service en ligne (payant à l’usage ou pas), ici l’IA Gemini de Google.

Pour l’obtenir :

1. Va sur aistudio.google.com et connecte-toi avec ton compte Google.
2. Accepte les conditions d’utilisation si c’est ta première visite.
3. Clique sur « Get API key » (Obtenir une clé API), puis sur « Créer une clé API ».
4. Choisis « Créer une clé dans un nouveau projet », donne-lui un nom.
5. Copie la clé générée et garde-la confidentielle : ne la partage nulle part, ne la mets jamais en clair dans du code que tu publies.

Le tarif de l’API Gemini dépend du volume de requêtes. Pour un usage personnel, le risque principal n’est pas le montant en lui-même mais une dérive non surveillée, par exemple un bug qui déclenche des appels en boucle. Deux précautions simples permettent de s’en prémunir :

Utiliser un moyen de paiement à plafond limité. Associer le compte de facturation Google Cloud à une carte dont les dépenses ne peuvent pas dépasser le solde disponible (une carte de type Nickel, par exemple), plutôt qu’à une carte bancaire classique adossée à un compte principal.

Configurer une alerte de budget dans Google Cloud. La marche à suivre :

1. Va sur console.cloud.google.com, connecté avec le compte Google concerné.
2. Sélectionne le projet créé pour l’API Gemini dans le sélecteur de projet en haut de l’écran.
3. Dans le menu de gauche ou la barre de recherche, cherche « Facturation », puis la section « Budgets et alertes ».
4. Clique sur « Créer un budget ».
5. Donne un nom au budget (par exemple alerte-budget-api).
6. Vérifie que le champ d’application est limité au projet courant.
7. Renseigne un montant très bas, par exemple 1 €.
8. Conserve les seuils d’alerte proposés par défaut (50 %, 90 % et 100 % du montant) : avec un budget aussi bas, ils suffisent largement à prévenir dès la moindre dépense.
9. Enregistre.

Ces deux précautions prises, la clé peut être utilisée dans l’extension.

Étape 3 : connexion à l’API Gemini

Objectif : envoyer le texte extrait à l’API Gemini pour générer un résumé, et l’intégrer dans la note Obsidian.

Prompt donné à Antigravity :

Role: Expert Chrome Extension Developer (Manifest V3)

Context:
L'Étape 2 est validée avec succès : l'extension extrait le texte, l'URL et le titre, et crée la note dans Obsidian. Nous passons à l'Étape 3 : l'intégration de l'API Google Gemini.

Ajustement obligatoire :
- Fixe le nom du Vault Obsidian par défaut sur : "MonVault".

Objectif de l'Étape 3:
Envoyer le texte extrait à l'API Google Gemini pour générer un résumé synthétique du contenu, puis intégrer ce résumé dans la note Obsidian.

Spécifications techniques :
1. Clé API Gemini (Provisoire pour le test) :
   - Ajoute une variable de configuration explicite `const GEMINI_API_KEY = "TA_CLE_API_ICI";` dans le script de background.
   - Prévois une vérification : si la clé vaut "TA_CLE_API_ICI", l'extension doit sauter l'étape IA et créer la note directement comme à l'Étape 2 (fallback sécurisé).
2. Appel à l'API Gemini :
   - Endpoint : API REST Gemini.
   - Prompt système pour Gemini :
     "Tu es un assistant de prise de notes. Analyse le texte suivant extrait d'une page web/LinkedIn. Génère un résumé clair et concis en 2 à 3 puces grand maximum. Réponds UNIQUEMENT avec le résumé au format Markdown."
3. Formatage final de la note Obsidian :
   ---
   type: web-clip
   source_url: "[URL_DE_LA_PAGE]"
   date_capture: [Date du jour YYYY-MM-DD]
   tags: [clip, résumé-ia, a-traiter]
   ---
   # [TITRE_DE_LA_PAGE]

   > **Résumé IA (Gemini) :**
   > [RÉSUMÉ_GÉNÉRÉ_PAR_GEMINI]

   ---

   ## Contenu original extrait
   [TEXTE_EXTRAIT]
4. Feedback visuel (UX) :
   - Pendant que l'API Gemini répond, change temporairement le badge de l'icône de l'extension pour indiquer à l'utilisateur que l'IA travaille.

Livrables attendus :
Mets à jour le code de l'extension et explique-moi où coller ma clé API Gemini pour tester l'Étape 3.

API est l’abréviation d' »application programming interface » (interface de programmation) : le canal standardisé par lequel un programme peut demander un service à un autre. REST est un style d’architecture couramment utilisé pour ces API, où chaque requête s’envoie par une URL. UX est l’abréviation d' »user experience » (expérience utilisateur) : la façon dont l’usage du produit se ressent concrètement.

À noter : ce prompt contient un prompt dans le prompt. Le texte donné à Antigravity (« Tu es un assistant de prise de notes… ») n’est pas une instruction pour Antigravity lui-même : c’est le texte que le code, une fois écrit, enverra à son tour à l’API Gemini à chaque clip. Antigravity ne l’exécute pas, il l’intègre tel quel dans le code qu’il génère.

Suivre et corriger les erreurs

Cette étape n’a pas fonctionné du premier coup. L’API a d’abord renvoyé une erreur 404 (ressource introuvable), le nom du modèle Gemini demandé par le code n’étant plus valide. Google fait évoluer régulièrement les noms de modèles disponibles, ce qui rend ce type d’erreur fréquent avec une IA en développement rapide.

Pour diagnostiquer ce genre de problème, la console de développement de Chrome est l’outil de référence :

1. Va sur chrome://extensions.
2. Sur la fiche de l’extension, clique sur le lien « Service Worker » sous « Inspecter les vues ».
3. Dans la fenêtre qui s’ouvre, clique sur l’onglet « Console ».
4. Relance un clip depuis une page web : le message d’erreur exact s’affiche en rouge.

Plusieurs allers-retours ont été nécessaires pour corriger le nom du modèle. Mais le vrai point de bascule est venu d’une relecture attentive du code généré : une clé API par défaut factice s’y trouvait dupliquée à deux endroits différents (background.js et options.js), ce qui masquait silencieusement le vrai problème en remplaçant une clé vide par une fausse valeur plutôt que de signaler l’erreur. Un agent de code peut corriger un symptôme sans traiter la cause, si on ne le questionne pas sur la cohérence d’ensemble.

Deux réflexes utiles face à une erreur qui persiste : relire soi-même le code généré, dans la mesure de ses compétences, pour repérer les incohérences visibles (doublons, valeurs codées en dur, logique redondante) ; et, si la lecture directe du code n’est pas possible, le transmettre à un chat comme Gemini en lui demandant explicitement s’il identifie une cause aux erreurs rencontrées. L’agent de code qui a écrit le programme n’est pas toujours le mieux placé pour en questionner la cohérence d’ensemble.

Une fois le code nettoyé et le nom du modèle corrigé, le résumé Gemini s’est généré correctement à chaque test.

Étape 4 : sécurisation et finitions

Objectif : sortir la clé API et le nom du vault du code source pour les placer dans une page d’options dédiée, et ajouter un retour visuel pendant le traitement.

Cette étape n’est pas un simple confort : une clé API ou un nom de vault codés « en dur » dans les fichiers JavaScript se retrouvent visibles dès qu’on partage le code, qu’on le publie, ou qu’on l’inspecte via les outils de développement de Chrome. Toute valeur confidentielle ou spécifique à un utilisateur doit être stockée séparément, jamais écrite directement dans le code source.

Prompt donné à Antigravity :

Role: Expert Chrome Extension Developer (Manifest V3)

Context:
L'Étape 3 est un succès total (extraction texte + image + résumé Gemini + export Obsidian sans erreur).
Nous passons à l'Étape 4 : la sécurisation des paramètres et les finitions UX.

Objectifs de l'Étape 4 :
1. Déplacer la clé API Gemini et le nom du Vault Obsidian dans une page d'options dédiée.
2. Ajouter des indicateurs visuels d'état sur l'icône de l'extension.

Spécifications techniques :

1. Page d'options Chrome (`options.html` + `options.js`) :
   - Crée une page de paramètres accessible via un Clic Droit sur l'icône de l'extension -> "Options".
   - Propose deux champs de saisie :
     a. Clé API Gemini (type `password` pour la masquer).
     b. Nom du Vault Obsidian (valeur par défaut : "MonVault").
   - Utilise le stockage de l'extension pour enregistrer et charger ces paramètres.
   - Mets à jour `background.js` pour qu'il récupère la clé et le vault depuis ce stockage avant de lancer la requête.
   - Si la clé est manquante lors d'un clic, ouvre automatiquement la page d'options.

2. Feedback visuel (UX) :
   - Au moment du clic : affiche un badge bleu "..." sur l'icône de l'extension.
   - Une fois la note créée : affiche un badge vert "OK" pendant 2 secondes, puis efface-le.
   - En cas d'erreur : affiche un badge rouge "ERR" pendant 3 secondes.

Mets à jour le projet et indique-moi quand effectuer le rechargement final dans Chrome.

Pour configurer : recharger l’extension, clic droit sur son icône, « Options », saisir la clé API et le nom du vault, enregistrer. Au clip suivant, le badge bleu s’affiche pendant le traitement, puis un badge vert confirme la création de la note dans Obsidian.

État actuel et limites connues

La capture de l’image du post reste peu fiable lorsqu’elle se fait depuis le fil d’actualité LinkedIn (l’extension récupère parfois l’image d’un post voisin dans le flux), alors qu’elle fonctionne correctement depuis la page dédiée à un post précis. Une phase d’amélioration est prévue pour affiner ce point, ainsi que pour étendre l’extension à d’autres sites que LinkedIn.

Bilan

Quatre prompts structurés, quelques allers-retours de débogage guidés par la console Chrome, et une extension fonctionnelle capable de capturer du texte et une image, de les faire résumer par une IA, et de créer une note Obsidian prête à l’emploi, sans écrire une ligne de code à la main. La méthode de découpage en étapes testables et de rédaction des prompts est reprise en détail dans un article dédié sur parcours-performance.com (lien à indiquer).