Atelier bonus : votre extension Chrome, écrite ce matin, installée à midi

Installée à midi dans votre navigateur, et elle marchera lundi

Ce qui va se passer aujourd’hui

À la fin de la matinée, vous aurez une extension de navigateur installée dans votre Chrome. La vôtre. Elle apparaîtra à côté de la barre d’adresse, avec les autres, et elle marchera sur n’importe quel site du monde.

Vous n’aurez pas écrit une ligne de code.

Celle qu’on fabrique ensemble s’appelle Audit express : un clic sur n’importe quelle page, et elle affiche le titre, la méta description, les H1, le nombre de mots, les images sans attribut alt, les liens externes, la langue déclarée. Avec un bouton qui copie tout le rapport. C’est exactement ce qu’un consultant facture 250 € la demi-journée en audit de premier niveau, et vous l’aurez dans votre navigateur en permanence.

Ensuite, vous la modifierez pour qu’elle fasse ce dont vous avez besoin, vous, dans votre entreprise d’accueil. Et c’est là que la journée devient intéressante : parce qu’à ce moment-là vous aurez compris que la barrière n’est plus technique.

Ce que vous saurez faire à la fin

• Fabriquer une extension de navigateur à partir d’une description écrite en français
• L’installer dans votre navigateur, la corriger, la réinstaller, sans passer par personne
• Lire les trois fichiers qui la composent, assez pour dire à l’IA ce qui ne va pas
• La faire évoluer en une phrase quand votre besoin change
• Reconnaître ce qu’on ne met pas dans une extension, et pourquoi

Ce que vous emportez : le dossier de votre extension, sur votre clé ou votre disque. Elle continuera de fonctionner lundi, dans votre entreprise, sans compte, sans abonnement, sans connexion.

1. Une extension, c’est trois fichiers

1.1 Ce que vous croyez, et ce que c’est

Une extension de navigateur a l’air d’un logiciel. Ce n’en est pas un. C’est un dossier avec trois fichiers texte, que le navigateur accepte de lire.

C’est tout. Les extensions à un million d’utilisateurs ont les mêmes trois fichiers, avec davantage dedans.

1.2 Le manifeste, en entier

Le voici en totalité, celui de l’extension d’aujourd’hui. Onze lignes.

{
  "manifest_version": 3,
  "name": "Audit express",
  "version": "1.0",
  "description": "Relève en un clic les éléments SEO et éditoriaux de la page affichée.",
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html",
    "default_title": "Auditer cette page"
  }
}

Deux lignes méritent votre attention professionnelle, parce que ce sont celles que vous regarderez avant d’installer l’extension de quelqu’un d’autre.

"manifest_version": 3 est la génération en vigueur. Chrome refuse désormais la version 2. Si un assistant vous produit du code en manifest_version: 2, c’est qu’il travaille de mémoire sur des exemples anciens : demandez-lui la version 3, il sait la faire.

"permissions" est la liste de ce que l’extension a le droit de faire. La nôtre en demande deux : activeTab, lire l’onglet actif au moment où vous cliquez, et scripting, y exécuter son relevé. Elle ne demande ni votre historique, ni vos onglets en arrière-plan, ni le droit de communiquer avec un serveur.

À retenir. La ligne permissions est la seule chose à lire avant d’installer une extension. Une extension de prise de notes qui demande l’accès à tous vos sites lit vos formulaires, y compris vos mots de passe. Ce n’est pas une hypothèse : c’est le modèle économique de plusieurs extensions à des millions d’installations.

1.3 Ce que le navigateur vous laisse faire

Vous n’avez besoin ni de compte développeur, ni de validation, ni de boutique. Chrome accepte de charger un dossier depuis votre disque, en mode développeur, et il le garde installé.

Publier sur le Chrome Web Store est un autre sujet : compte payant à 5 dollars une fois, examen de quelques jours, et des règles à respecter. Pour un outil personnel ou d’équipe, cela ne sert à rien. On y revient en fin de journée.

Atelier 1, décrire ce que vous voulez

Vous n’allez pas coder. Vous allez commander, et la qualité de ce que vous recevrez dépendra entièrement de la précision de votre commande.

Ouvrez votre assistant. Écrivez une demande qui contient les cinq éléments suivants, dans l’ordre :

1. Ce que c’est : une extension Chrome en manifest v3.
2. Ce qu’elle fait, au geste près : quand je clique sur l’icône, une fenêtre s’ouvre et affiche les éléments suivants de la page en cours.
3. La liste exacte de ce que vous voulez voir. Pas « les infos SEO » : la liste.
4. La forme : un tableau à deux colonnes, en français, avec un bouton qui copie tout dans le presse-papier.
5. Les contraintes : pas de bibliothèque extérieure, pas d’appel à un serveur, tout doit tenir dans trois fichiers.

Puis demandez-lui de vous donner les fichiers un par un, complets, avec leur nom.

Consigne de vérification, avant de passer à la suite : votre demande fait-elle plus de six lignes ? Si elle en fait deux, vous obtiendrez un exemple générique, et vous passerez la matinée à le corriger.

2. L’installer, et voir qu’elle marche

2.1 Les cinq gestes

Ils prennent une minute, et ils ne changent jamais.

1. Créez un dossier sur votre disque, nommez-le audit-express.
2. Enregistrez-y les trois fichiers, avec exactement les noms donnés par l’assistant.
3. Dans Chrome, ouvrez chrome://extensions.
4. En haut à droite, activez Mode développeur.
5. Cliquez Charger l’extension non empaquetée, et désignez votre dossier.

Votre extension est là, dans la liste, avec les autres. Épinglez-la à la barre d’outils avec l’icône en forme de pièce de puzzle.

2.2 Quand ça ne marche pas, et ça arrivera

C’est la partie utile de l’atelier. Une extension qui échoue vous dit pourquoi, et Chrome vous montre où.

La méthode. La boucle qui résout tout, et vous l’utiliserez toute votre vie professionnelle. Vous copiez le message d’erreur, en entier, sans le reformuler, vous le collez à l’assistant, et vous ajoutez une phrase : « voici l’erreur, voici le fichier concerné, corrige ». Puis vous rechargez l’extension avec la flèche circulaire sur chrome://extensions. Le message d’erreur est une information technique précise. Le résumer (« ça marche pas ») détruit exactement ce qui permettait de trouver la cause.

Atelier 2, l’installer et la faire marcher

Objectif : votre extension affiche un relevé correct sur trois sites différents.

1. Installez-la selon les cinq gestes.
2. Testez-la sur le site de votre entreprise d’accueil.
3. Testez-la sur un grand site de presse.
4. Testez-la sur une page de boutique en ligne.
5. Corrigez ce qui ne va pas, par la boucle ci-dessus.

Notez au passage ce qui vous surprend dans les résultats. Sur trois sites, il y en a toujours : une page sans méta description, une page à trois H1, dix-huit images sans alt. Vous venez de faire, en cinq minutes, un audit de premier niveau que personne dans ces entreprises n’a fait cette année.

3. La faire évoluer, c’est-à-dire faire votre métier

3.1 L’extension générique ne sert personne

Audit express est un point de départ. Ce qui a de la valeur, c’est ce que vous en faites pour votre besoin, et ce besoin, vous êtes le seul à le connaître.

Quelques évolutions qui prennent une phrase chacune, et qui donnent des outils réellement utilisés :

3.2 Ce qui change dans votre métier

Regardez ce que vous venez de faire, avec vos yeux de manager et non d’étudiant.

Un besoin d’outil interne, dans une entreprise ordinaire, suit ce chemin : quelqu’un le formule, quelqu’un l’arbitre, quelqu’un le budgète, quelqu’un le développe, quelqu’un le recette. Trois semaines dans le meilleur des cas, et le plus souvent : « ça ne vaut pas le coup », donc le travail continue de se faire à la main, tous les mois, par quelqu’un.

Vous venez de faire le chemin entier en une matinée, seul, sans budget et sans demander la permission.

À retenir. Ce qui a changé n’est pas que tout le monde puisse programmer. C’est que le coût d’un outil ponctuel est tombé si bas que la question « est-ce que ça vaut le coup de le faire faire » ne se pose plus. Les besoins qu’on renonçait à formuler deviennent des besoins qu’on satisfait le jour même. Votre valeur n’est pas dans le code, elle n’y a jamais été. Elle est dans le fait de savoir quel outil manque, et de reconnaître un résultat juste d’un résultat faux.

Atelier 3, votre extension à vous

En binôme, mais chacun sur sa propre extension.

1. Écrivez, en trois lignes, un besoin réel de votre entreprise d’accueil que cette extension pourrait couvrir. Un besoin réel, pas une idée : quelque chose que quelqu’un fait à la main aujourd’hui.
2. Faites évoluer votre extension pour le couvrir.
3. Testez-la sur cinq pages réelles.
4. Vérifiez que le résultat est juste : prenez une page, comptez à la main ce que l’extension annonce. Si elle dit 14 images sans alt, comptez-les.
5. Montrez-la à votre binôme, qui essaie de la mettre en défaut sur une page à laquelle vous n’aviez pas pensé.

Le point 4 n’est pas une formalité. Un outil qui affiche un chiffre faux avec assurance est plus dangereux qu’un outil absent, parce qu’on lui fait confiance. Ce sera vrai de tout ce que vous ferez produire, toute votre carrière.

4. Aller plus loin, en une phrase chacun

Ce que vous avez fabriqué ce matin ouvre une famille entière d’outils. Même méthode, même durée, même absence de code.

Le mini-site et le rapport sont les deux qui servent le plus vite en poste. Un fichier HTML autonome s’envoie par mail, s’ouvre partout, ne demande aucune installation, et impressionne davantage qu’un diaporama, parce qu’il est vivant.

5. Ce qu’on ne met pas dans une extension

Court, et il faut le dire une fois.

Aucune donnée personnelle : une extension qui lit des pages internes de votre entreprise lit des données de clients. Tant qu’elle ne fait que les afficher sur votre écran, sans les envoyer nulle part, vous êtes dans le cadre d’une consultation ordinaire. Dès qu’elle envoie quoi que ce soit vers un serveur, c’est un traitement de données, avec tout ce que cela implique.

Aucun mot de passe, aucune clé d’API dans les fichiers : ils sont en clair, lisibles par quiconque a le dossier.

Aucune permission dont vous ne sauriez pas dire à quoi elle sert. Si l’assistant demande <all_urls> alors que activeTab suffit, faites-le corriger. C’est la même vigilance que celle que vous appliquerez aux extensions des autres.

Une extension d’équipe est un projet, pas un outil jetable. À partir du moment où trois personnes l’utilisent pour travailler, quelqu’un doit en être responsable, et il faut savoir qui la corrige quand Chrome change ses règles, ce qui arrive.

Ce que vous emportez

Vous repartez avec un dossier de trois fichiers qui marche, une méthode qui se rejoue sur n’importe quel besoin, et une conviction qui vaut plus que les deux : la barrière technique a bougé, et vous êtes du bon côté.

La prochaine fois que quelqu’un dira « ce serait bien d’avoir un outil qui… », vous saurez que la réponse est une heure de travail, pas un projet.