Lire le Pen
Récupération du contenu courant de index.html, style.css et script.js directement dans CodePen 2.0.
Extension Chrome / Edge · Manifest V3
Coder dans CodePen.
Avec l’IA dans les DevTools.
Gemini CodePen 2.0 lit, explique et modifie directement les fichiers HTML, CSS et JavaScript d’un Pen dans le nouvel éditeur CodePen 2.0 basé sur CodeMirror 6.
Capture réelle du projet · affichage au ratio natif 1919 × 922
Fonctions principales
Lire le code. Comprendre. Modifier sans quitter l’éditeur.
L’extension s’intègre comme un panneau DevTools et communique avec les éditeurs CodeMirror 6 de CodePen. Le mode d’édition reste volontairement contrôlé.
Explain
Le mode Explain demande une analyse sans autoriser l’écriture dans les éditeurs.
Edit
Le mode Edit peut appliquer des modifications seulement dans les scopes HTML, CSS et JS explicitement cochés.
Diff avant confiance
Les changements proposés sont présentés sous forme de diff afin de permettre une vérification avant sauvegarde du Pen.
Remplacements exacts
Le moteur refuse un remplacement ambigu ou introuvable au lieu d’écrire à l’aveugle dans le code existant.
Clés locales
Les clés API sont enregistrées dans chrome.storage.local et les appels cloud partent du service worker.
Workflow
Une boucle courte entre intention et code.
Le panneau DevTools reste le centre du flux : on choisit le mode, les fichiers autorisés et le fournisseur IA avant l’envoi.
- 1Connecter CodePen
Ouvrir le Pen, ses trois onglets de code puis l’onglet Chrome Code dans les DevTools.
- 2Définir le périmètre
Choisir Edit ou Explain, puis limiter l’action à HTML, CSS et/ou JS.
- 3Vérifier le résultat
Lire la réponse, inspecter le diff et contrôler le rendu CodePen avant de sauvegarder.
Fournisseurs IA
Gemini d’abord, catalogue multi-modèles autour.
Le dépôt contient une couche de fournisseurs plus large que son nom : modèles gratuits, APIs payantes et compatibilités locales selon la configuration disponible.
●
Gratuit / OpenSelon quotas et disponibilité des fournisseurs
Chrome AI / Gemini NanoGemini FreeQwen 2.5 CoderDeepSeek CoderDeepSeek V3.2Mistral SmallGroq LLaMA
●
API payantesClé propre à chaque fournisseur
OpenAIAnthropicGemini ProMistralPerplexityxAI / GrokTogether.aiOpenRouter
Les modèles et endpoints évoluent : la liste de référence reste background.js et panel.js dans le dépôt.
Architecture
Le code du Pen reste séparé des privilèges de l’extension.
DevTools PanelUI · mode · scopes · diff
content.jspont de messages
inject.js + adapterCodeMirror 6 / CodePen
HTML · CSS · JSéditeurs du Pen
background.jsservice worker · clés · appels API
Sécurité
Des garde-fous explicites.
La sécurité documentée du projet se concentre sur le stockage des clés, l’isolation des contextes et le nettoyage du contenu rendu.
Lire SECURITY.md ↗Stockage local via chrome.storage.local. Les appels cloud sont exécutés depuis le service worker.
Le Markdown est rendu avec marked, puis netto{3 avec DOMPurify avant insertion dans l’interface.
Les messages entre page, content script et code injecté sont filtrés selon leur source et leur structure attendue.
Installation locale
Installer l’extension en quelques minutes.
Chrome Web Store n’est pas nécessaire : le dépôt se charge directement comme extension non empaquetée.
Download ZIP- 01
Télécharger le ZIP GitHub et extraire complètement le dossier.
- 02
Ouvrir
chrome://extensionsouedge://extensions. - 03
Activer le Mode développeur.
- 04
Choisir Charger l’extension non empaquetée.
- 05
Sélectionner le dossier qui contient
manifest.json. - 06
Ouvrir CodePen 2.0 puis l’onglet Chrome Code dans les DevTools.
Open source · MIT
Un fork adapté au nouvel éditeur CodePen.
Gemini CodePen 2.0 est basé sur Chrome Code de Mr.doob. Les adaptations de ce dépôt ciblent notamment CodePen 2.0 et son intégration CodeMirror 6.