Présentation effectuée au Rencontres Mondiales du Logiciel Libre (RMLL) 2017 par Christophe Villeneuve sur "Les Web Extensions".
Il s'agit de comprendre pour les WebExtensions et ce qui va impliquer dans les navigateurs
4. RMLL 2017 – 4 Juillet 2017
Les Extensions
Sont Mortes
Vive Les Extensions
5. RMLL 2017 – 4 Juillet 2017
La situation des Add-ons
● Modules complémentaires
● Partie de Firefox depuis l'origine
● Amélioration du navigateur
● Les projets montrent comment les addons sont importants
dans Firefox
● Important de montrer les API sont puissants
– 40% des utilisateurs ont des add-ons
– 32000 modules complémentaires
– 19000 développeurs d'extensions
– 15 millions d'utilisateurs mensuels sur Mozilla Add-on (AMO)
7. RMLL 2017 – 4 Juillet 2017
Avant : XUL / XPCOM
● XUL est une technologie XML
– Utilisée pour l'interface firefox
● XPPCOM est une structure Javascript
– Interagir avec XUL
– Avec une API différente de la classique HTML5
● Le développeur web doit respecter ces technologies
→ HTML classique, CSS, Javascript
● Aujourd'hui
– Ne répond plus au attente d'aujourd'hui
– Mises à jours / révisions… trop long
8. RMLL 2017 – 4 Juillet 2017
Bienvenue WebExtensions
● Créer une API robuste
● Parité avec extensions chrome api
● Documentation
● Prise en charge de Firefox pour android
● Technologie Standard
9. RMLL 2017 – 4 Juillet 2017
Compatibilité
● Edge / Opera / Chrome / Firefox
● Compatible Qtwebkit
10. RMLL 2017 – 4 Juillet 2017
Situation actuelle
● Are we WebExtensions yet ?
http://arewewebextensionsyet.com/
● On trouve
– L'avancement de l'API
– Les fonctionnalités manquante
– L'avancé de la performance
– La validation
– …
● Les WebExtensions déjà disponible
– https://addons.mozilla.org/en-US/firefox/tag/firefox57
14. RMLL 2017 – 4 Juillet 2017
Anatomie
Intéragir avec les pages Web
Contexte page
Bouton dans la barre d'outils
Bouton à la barre d'adresse
Définir une interface utilisateur
Contenu packagé accessible
15. RMLL 2017 – 4 Juillet 2017
Manifest.json
● Carte identité d'une extension
● Script au format jSON
●
https://developer.mozilla.org/fr/Add-ons/WebExtensions
{
"manifest_version": 2,
"name": "RMLL",
"version": "1.0",
"description": "Demo RMLL",
"icons": {
"19": "icons/icon-19.png",
"48": "icons/icon-48.png"
},
}
19. RMLL 2017 – 4 Juillet 2017
Manifest : Anatomie (2/6)
● Scripts de contenu
● Accéder et manipuler les
pages Web
● Fonctionnement :
– Charger dans les pages Web
– Exécuter dans le contexte de
page particulière
● Possible
– Manipuler le DOM de la
page
Background page
Content scripts
23. RMLL 2017 – 4 Juillet 2017
Manifest : Anatomie (4/6)
● Action dans la barre de
navigation
● Affiche sur un onglet activé
● Action pas toujours
nécessaire
Background page
Content scripts
Browser action
Page action
25. RMLL 2017 – 4 Juillet 2017
Manifest : Anatomie (5/6)
● Définir des préférences en
plus
● Accès par les add-ons du
navigateur
● Configuration des
WebExtensions
Background page
Content scripts
Browser action
Page action
Option page
26. RMLL 2017 – 4 Juillet 2017
Option page : Exemple
// manifest.json
"options_ui": {
"page": "options.html"
},
27. RMLL 2017 – 4 Juillet 2017
Manifest : Anatomie (6/6)
● Ressources incluses dans
l'extension
● Accessible par
– Scripts de contenu
– Scripts de pages
● Web-accessible
● Utilisation d'un schéma URI
spécial
Background page
Content scripts
Browser action
Page action
Option page
Ressource
28. RMLL 2017 – 4 Juillet 2017
Ressource : Exemple
// manifest.json
"web_accessible_resources": [
"views/*"
},
33. RMLL 2017 – 4 Juillet 2017
Prêt à publier
● Compresser votre extension
– Méthode 1
● Compresser les fichiers en ZIP
● Renommer le ZIP en XPI
– Méthode 2
$ cd monExtension
$ 7zip -a monExtension.xpi
34. RMLL 2017 – 4 Juillet 2017
Procédure
● Connecter
– https://addons.mozilla.org
● Soumettre
– Par le site
– Mode personnel
37. RMLL 2017 – 4 Juillet 2017
Aller plus loin : Web-ext
● Outil de ligne de commande
– Construire
– Exécuter
– Surveiller
– Tester Les extensions Web
● https://github.com/mozilla/web-ext
Exécuter une extension de cli, de linting, de validation et d'emballage
web-ext run -s /path/extension/ --firefox-binary=/path/firefox
web-ext build -s /path/extension
38. RMLL 2017 – 4 Juillet 2017
Gestion personnelle
39. RMLL 2017 – 4 Juillet 2017
Ressources supplémentaires
● 30 API en exemple
https://github.com/mdn/webextensions-examples
● Documentation (MDN) en Français
– https://developer.mozilla.org/fr/Add-ons/WebExtensions