Constructeur d'extension Chrome TL;DR Crawler

Construis une extension Chrome (Manifest V3) appelée « TL;DR Crawler » qui fonctionne sur n'importe quelle page web normale. CE QU'ELLE FAIT Clique sur l'icône de la barre d'outils : une araignée dessinée au trait apparaît sur la page en cours, suit ton curseur (aussi pendant le défilement), lit le texte sur lequel elle passe et construit un TL;DR court dans un panneau flottant. Clique à nouveau sur l'icône : tout disparaît et la page est exactement comme avant. 1. BASCULE - background.js : chrome.action.onClicked injecte content.js avec chrome.scripting.executeScript. - content.js vérifie un indicateur global. Si le crawler est déjà en cours d'exécution, il s'arrête et nettoie. Sinon, il démarre. Une seule instance par onglet, jamais plus. 2. TROUVER LE TEXTE - Trouve la zone lisible principale : préfère <article> ou <main>, sinon l'élément avec le plus de texte en paragraphes. Ignore nav, header, footer, aside, menus, formulaires, code, publicités et éléments cachés. - Collecte les blocs de texte (p, li, blockquote, h2-h4) et divise-les en phrases. Stocke chaque phrase comme un Range DOM (les phrases peuvent traverser des liens et du texte en gras, donc ne les enveloppe PAS dans des éléments). - Surveille la zone avec un MutationObserver avec debounce (1s) pour détecter le texte chargé plus tard (défilement infini, contenu paresseux). 3. CHOISIR LES PHRASES CLÉS - Note chaque phrase : +2 pour les chiffres, +2 pour %, $, €, million, milliard ; +1,5 pour des mots comme premier, record, lancement, annonce, nouveau, seul, plus grand, plus rapide, avertit, augmente, réduit ; +0,3 par nom en majuscule (max +2) ; -2 si moins de 40 ou plus de 260 caractères. - Marque les 25 % les mieux notées comme phrases clés (min 5, max 80), réparties pour que la plupart des paragraphes en aient une. - Résumés, max 9 mots chacun : - Si une clé API est définie : envoie toutes les phrases clés dans UNE seule requête à Claude et demande un tableau JSON de résumés courts et simples (max 9 mots, garde les nombres et les noms exactement, pas de sensationnalisme). Refais la requête par lots quand un nouveau texte apparaît. - Sans clé : résumé de secours = la phrase avec les mots d'introduction supprimés (et, mais, cependant, aussi, selon), coupée à une limite de mot avec « … ». 4. L'ARAIGNÉE - Hôte Shadow DOM à la racine du document contenant un <canvas> plein écran fixe (pointer-events : none, z-index 2147483646) et le panneau. - Apparence : petit corps en rectangle arrondi, abdomen en ellipse, tête avec deux yeux blancs, contours en #5ab8ff. 8 pattes en lignes bleues de 3px avec points d'articulation roses (#ff4f7a), deux segments chacune avec cinématique inverse, genoux pliés vers l'extérieur. - Démarche : deux groupes de pattes alternés. Une patte fait un pas seulement quand elle est à ~80px de sa position idéale et que l'autre groupe est posé. Les pas durent 0,13s avec un petit soulèvement, atterrissant légèrement en avant dans la direction de marche. - Mouvement : cible = position du curseur + défilement, donc elle suit pendant le défilement. Vitesse max ~420 px/s, accélération douce, s'arrête à ~40px du curseur, tourne doucement vers sa direction. Si le curseur est inactif pendant 8s, elle erre autour du viewport. - requestAnimationFrame avec un pas de physique fixe de 1/120s. Prend en charge devicePixelRatio et le redimensionnement de la fenêtre. 5. EXPLORATION - Toutes les 80ms et à chaque atterrissage de patte, trouve le texte sous l'araignée avec document.caretRangeFromPoint (ignore les éléments propres de l'extension). - Si ce point est dans une phrase clé pas encore trouvée : mets-la en surbrillance avec l'API CSS Custom Highlight (::highlight(tldr-found) avec un fond jaune doux) et ajoute son résumé au panneau. - Si une patte atterrit sur un mot normal : dans ~25 % des cas, glitch ce mot. Enveloppe uniquement ce mot dans un span (c'est un nœud de texte unique, donc c'est sûr) et applique un effet aléatoire : police monospace, contour bleu, surbrillance bleue, légère rotation, espacement large des lettres, flou ou majuscules. Max 2 effets par mot. Enregistre chaque modification pour pouvoir l'annuler. 6. PANNEAU - En haut à droite, déplaçable par son en-tête, dans le Shadow DOM pour que le CSS du site ne puisse pas l'affecter. - Sombre (#16181c), titre mono « TL;DR » en jaune (#ffd166), un compteur « trouvé / total », une barre de progression rose et une liste numérotée dans l'ordre de l'article. Le nouvel élément clignote en jaune et la liste défile automatiquement jusqu'à lui. La liste défile dans une hauteur maximale. - Boutons : « Copier TL;DR » (texte brut dans le presse-papiers), « Redémarrer » (efface les surbrillances, les glitches et la liste) et « Fermer » (arrêt complet). - Si une clé est définie, ajoute « Écrire TL;DR avec Claude » : envoie toutes les phrases trouvées et renvoie 3 lignes courtes en utilisant uniquement leurs faits, nombres inchangés. Affiche un état « Réflexion... », puis la réponse sous la liste. 7. CLÉ API - options.html : un champ pour la clé API Anthropic de l'utilisateur et un nom de modèle, stockés dans chrome.storage.local. - Tous les appels API passent par background.js avec fetch vers https://api.anthropic.com, avec les en-têtes x-api-key, anthropic-version : 2023-06-01 et content-type : application/json. - Gère les erreurs silencieusement : si un appel échoue, garde les résumés de secours et affiche une petite note « IA indisponible ». 8. RÈGLES DE QUALITÉ - Ne casse jamais le défilement, les clics, les liens ou la sélection de texte sur le site. - Nettoyage complet à l'arrêt : canvas, panneau, surbrillances, spans de mots enveloppés, styles en ligne, écouteurs, observateurs, minuteries. - prefers-reduced-motion : pas de glitches, marche plus lente. - JavaScript pur, pas de bibliothèques. Fichiers : manifest.json, background.js, content.js, options.html, options.js, icônes (16, 48, 128). - Permissions : activeTab, scripting, storage. Permission d'hôte : https://api.anthropic.com/*. À la fin, donne les étapes d'installation : ouvre chrome://extensions, active le mode développeur, clique sur « Charger l'extension non empaquetée », sélectionne le dossier, puis ouvre les options et colle la clé API.