Créez des extensions pour tous les navigateurs

Salut !

J'ai rapidement parcouru ton tuto. Je pense que tu devrais utiliser le nom correct : WebExtensions. Pas Web Extensions ou web extensions. WebExtensions.

Aussi, je trouve l'intro pas clair pour quelqu'un qui ne connait pas les WebExtensions. On se demande : C'est un standard ? C'est juste une API ? La première phrase est : "Les Web Extensions sont une façon de créer des extensions". Du coup on sait pas. "Une façon de créer" donc un ensemble de design patterns ? Une architecture logicielle ?

Je propose de dire directement "WebExtensions est une API grâce à laquelle on peut créer des extensions pour navigateurs." ou un truc du style.

D'abord merci pour ce tuto intéressant.

Je l'ai survolé rapidement, j'ai repéré plusieurs erreurs d'orthographe pour la plupart :

• Introduction :
  • "Firefox a déjà commencer" → "Firefox a déjà commencé"
• Le manifeste :
  • une liste ne semble pas passée, on a un gros paragraphe avec des tirets au milieu… (probablement un oubli de retour à la ligne), après la phrase "Vous avez ici le manifeste minimum de toute extension. Comme vous pouvez le voir, il contient les clés suivantes :"
  • "ou autre selon ou vous habitez" → "ou autre selon où vous habitez"
• Empaquetez et testez votre extension :
  • "dont ont a changé l'extension" → "dont on a changé l'extension"
  • "Nommer le dossier créé en quelque chose comme monextension.xpi, et voilà !" → il s'agit plutôt d'un archive même si le vocabulaire de Windaube porte à confusion…
• Une première extension :
  • "et même fermer le navigateur si il persiste" → et même fermer le navigateur s'il persiste
  • "16 pixel" → "16 pixels" (16×16 plutôt en réalité)
  • "Vous avez deviné d'où viens se problème je pense" → "Vous avez deviné d'où vient le problème je pense" ("le problème" semble plus clair que "ce problème" je trouve)
  • "Et si vous [mot manquant] horrifiés par GIMP et compagnie, je vous ait fait de belles icônes" → "Et si vous êtes horrifiés par GIMP et compagnie, je vous ai fait de belles icônes"
  • "Vous aller vous débrouiller" → "Vous allez vous débrouiller"
  • "l'utilisateur à le droit de passer" → "l'utilisateur a le droit de passer"
  • "il faut spécifier à notre navigateur de lancer se fichier" → "il faut spécifier à notre navigateur de lancer ce fichier"
  • il manque la coloration pour le code JSON de background": {"scripts": [ "background.js" ], persistant…}
  • "ou si ils n'ont besoin" → "ou s'ls n'ont besoin"
  • "via cette cette fameuse API storage"
  • "Si il est nul" → "S'il est nul"
  • "on a eau avoir créé une alarme" → "on a beau avoir créé une alarme"
  • "on a pas besoin de l'ajouter aux permissions" → "on n'a pas besoin de l'ajouter aux permissions"
  • "Je voudrait quelque chose de beau comme 0:59:48" → "Je voudrai quelque chose de beau comme 0:59:48" (ce ne serait pas 00:59:48 plutôt ??)
  • "Mais comme a peut-être embêtant de perdre tout son travail d'un coup" → "Mais comme ça peut être embêtant de perdre tout son travail d'un coup"
  • "si il ne reste que 5 minutes " → "s'il ne reste que 5 minutes"
  • "Et lorsqu'on teste on voit bien notre notification d'afficher" → "Et lorsqu'on teste on voit bien notre notification s'afficher"
  • "Fermer la fenêtre sous Firefox, en fermant tout les onglets un à un." → "Fermer la fenêtre sous Firefox, en fermant tous les onglets un à un."
• Conclusion :
  • "si vous [mot manquant] des questions" → "si vous avez des questions"

Enfin, je me pose une question : l'id gecko, c'est prévu pour une adresse mail ? ou bien c'est juste une bonne pratique de mettre @domaine.tld ?

Pour finir, je pense qu'il serait intéressant de préciser si les WebExtensions c'est l'avenir des extensions pour navigateurs (je crois que Firefox a publié un article pour expliquer le futur des extensions sur Firefox, que certaines ne seront plus supportées), de préciser si des extensions célèbres sont déjà codées avec WebExtension ou prévoient de l'être (genre uBlock Origin = Adblock), de préciser qu'il existe actuellement d'autres moyens (propre à chaque navigateur je suppose de faire des extensions mais bientôt obsolètes ou non recommandés j'imagine)…

Dans l’ensemble, j’aime bien ton tuto, même si le titre est trompeur : tu ne fais que survoler l’API au moyen d’un exemple très guidé (on est plus sur de la recette de cuisine qu’autre chose), on est assez loin de « Créez des extensions pour tous les navigateurs ». Quelque chose dans les tons de « [TP] Créer une extension qui fonctionne sur tous les navigateurs » serait plus honnête à mon avis.

Maintenant, les petites choses que j’ai relevées.

• Je sais que je suis un peu chiant avec ça, mais le besoin d’avoir des informations claires sur les prérequis d’un tuto a été maintes fois soulevé, mais on peine à voir un mouvement concret du côté des auteurs. Du coup, je t’invite vivement à agrémenter ton introduction d’un « bloc de prérequis » comme ce qu’on peut trouver ici.
• Dans la section « Cahier des charges », tu parles de fermer le navigateur au bout de 10 minutes, or dans ton code, et dans les explications postérieures, tu parles de 5 minutes.
• Demander de télécharger une archive sur un site extérieur pour obtenir tes icônes, c’est moyen. Je suggérerais d’héberger les images sur ZdS et de les intégrer au tuto dans une balise « Secret » : après tout, elles ne pèsent pas bien lourd.
• Dans ton CSS, tu utilises les polices Segoe UI Light et Digital-7 qui ne sont pas libres de droit (et la dernière a peu de chance d’être installée par défaut sur la machine de tes lecteurs) : cela me paraît important de le mentionner.
• Dans ton code var minutes = Math.floor((temps / 60) % 60);, tu fais un modulo sur un flottant, ce qui est sale : il vaudrait mieux var minutes = Math.floor(temps / 60) % 60;.
• Dans ton code document.getElementById('temps').innerHTML = beauRemps(requete.temps);, il faudrait beauTemps.
• Les WebExtensions ne sont pas disponibles sur Edge, ta fonction chrome.windows.remove ne fonctionne pas sous Firefox… Est-ce qu’on est encore sur une extension portable ? J’ai bien vu que plus bas, tu parles de fermer les fenêtres onglet par onglet, mais il faudrait le signaler dès ce bloc « Attention », parce que sinon, on commence vraiment à douter de ta promesse d’avoir une extension pour tous les navigateurs.
• Ton tuto est marqué comme étant « Tous droits réservés », c’est un oubli ? Si tu comptes effectivement le publier sous ces conditions, je me dois de te signaler que tes lecteurs n’auront alors pas le droit d’utiliser les icônes que tu fournis.

Sinon, j’ai également relevé deux points dans le code que tu as mis sur Framagit.

• Dans background.js, ligne 2 var tempsRestant = 10; devrait être 3600, sinon, y’en a qui vont avoir de mauvaises surprises.
• Tu diffuses le code sous GPL. Je le répète encore une fois, la GPL n’est pas légale en droit français, donc invalide entre deux Français. N’hésite pas à publier plutôt sous CeCIll, la transposition en droit français de la GPL.

Je n’ai pas relevé les fôtes. Malgré le passage de yvand, il en reste, surtout en typographie. Du coup, quand le texte sera définitif et que tu voudras l’envoyer en validation, fais-moi signe pour que je corrige ce qui reste. Le plus simple, c’est que tu me mettes coauteur le temps de faire les corrections et pis tu me vires après.

Merci pour ce tuto. J'ai cependant relevé quelques fautes d'orthographe.

Pour écrire le code de votre WebExtension, il vous faudra évidemment un éditeur de code (je vous laisse choisir, il y en a des dizaines).

Phrase pas forcement utile vu le contexte (tu t'adresses à des gens qui ont "des notions de HTML et de CSS" donc ils savent ce qu'est un éditeur de texte).

Pour tester vos extensions, il vous faudra un ou plutôt des navigateurs. En effet, les implémentations des APIs et des différents langages peuvent être plus ou moins différentes. Je vous conseille donc de tester sur les navigateurs Chrome (ou Opera), Edge et Firefox. Si vous êtes sous Linux ou Mac, Microsoft vous permet de l'utiliser dans une machine virtuelle.

Tu répètes ce que tu as déja dans l'intro générale de ton tuto.

Bien, ouvrez votre manifeste dans votre éditeur de code, et copiez-y ceci :

Pas la peine de préciser "dans votre éditeur de code".

manifest_version: manifest_version,

Si vous n'avez pas de nom de domaine, utilisez quelque chose comme pseudo.fr (ou autre selon ou vous habitez).

Je ne comprends pas la phrase dans la parenthèse "ou autre selon ou vous habitez" ("où" et non "ou" au passage…).

Nous allons dès à présent créer notre première extension, histoire de nous familiariser avec quelques APIs. Cette extension sera : Ne passez pas tout votre temps sur Internet. Elle va nous permettre de nous familiariser avec les API Browser Action, Storage, Alarms, Notifications et Window.

Répétition du mot familiariser (synonyme : s'acclimater, s'accoutumer, s'habituer)

la popup qui s'affiche quand on le clique.

Pas très français je trouve… "quand on clique sur lui" ou "quand on clique sur le bouton"

Vous avez deviné d'où viens le problème je pense.

"vient"

C'est pareil pour l'icône : bien qu'on en ait spécifiées, on a celle par défaut.

?

je vous ait fait de belles icônes

"Je vous ai" (ou "je vous hais"…)

J'utilise les polices d'écriture Segoe UI Light et Digital-7, mais vous pouvez tout à fait en utiliser d'autre

"en utiliser d'autres"

même si cela prends un peu plus de mémoire

"prend"

YouTube etc

"Youtube, etc"

signalez le

"signalez-le"