Présentation effectuée aux JDLL (Journées du Logiciel Libre) 2017 par Christophe Villeneuve sur "Les WebExtensions et Firefox". La conférence a pour but de montrer réaliser une web Extensions pour tous les navigateurs comme Firefox

1. JDLL : Le 2 avril 2017
Les WebExtensions
&
Firefox
Christophe Villeneuve
@hellosct1

2. JDLL : Le 2 avril 2017
Aujourd'hui
●
Pourquoi les WebExtensions !!!
●
Conception
●
Réalisation

3. JDLL : Le 2 avril 2017
Les Extensions
Sont Mortes
Vive Les Extensions

4. JDLL : Le 2 avril 2017
Les Extensions Firefox
● Firebug > DevTools
● FoxMarks > Bookmark Sync
● Session Manager > Session Restore
● Faviconize Tab > Tab pinning
● Multizilla > Tab browsing

5. JDLL : Le 2 avril 2017
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

6. JDLL : Le 2 avril 2017
… les 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. JDLL : Le 2 avril 2017
Les addons 'test pilot' dans firefox
● Nouveau concept
● Tester de nouvelles fonctionnalités
– Possibilité d'être insérer dans le navigateur
– http://testpilot.firefox.com

8. JDLL : Le 2 avril 2017

9. JDLL : Le 2 avril 2017
Bienvenue WebExtensions
● Créer une api robuste
● Technologie Standard : Html, css, javascript
● Parité avec extensions chrome api
● Documentation
● Prise en charge de Firefox pour android

10. JDLL : Le 2 avril 2017
Compatibilité
● Edge / Opera / Chrome / Firefox
● Compatible Qtwebkit

11. JDLL : Le 2 avril 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
– ...

12. JDLL : Le 2 avril 2017
Roadmap
● Firefox 48 : Release stable
– SDK avec extension WebExtensions déjà disponible
● Firefox 53 : Conteneurs sécurisés
– Seulement WebExtensions accepté sur addons.mozilla.org
● Firefox 57 – 14 novembre
– Uniquement WebExtension pour Firefox
– API du système de fichier
– Barre latérale et autres API d'élément d'interface
utilisateur
– Expériences WebExtension pour créer de nouvelles API

13. JDLL : Le 2 avril 2017
Demo WebExt manifest
https://github.com/hellosct1/demo-WebExt-manifest

14. JDLL : Le 2 avril 2017
Conception

15. JDLL : Le 2 avril 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

16. JDLL : Le 2 avril 2017
Manifest.json
● Carte identité d'une extension
● Script au format jSON
●
https://developer.mozilla.org/fr/Add-ons/WebExtensions
{
"manifest_version": 2,
"name": "demo JDLL",
"version": "1.0",
"description": "Demo JDLL",
"icons": {
"19": "icons/icon-19.png",
"48": "icons/icon-48.png"
},
}

17. JDLL : Le 2 avril 2017
Manifest.json
● Permission
"permissions": [
"*://developer.mozilla.org/*",
"webRequest"
]
activeTab
alarms
bookmarks
browsingData
contextMenus
contextualIdentities
cookies
downloads
downloads.open
history
identity
idle
management
nativeMessaging
notifications
sessions
storage
tabs
topSites
webNavigation
webRequest
webRequestBlocking

18. JDLL : Le 2 avril 2017
Manifest : Anatomie (1/6)
● Script d'arrière plan
● Indépendant
– Des pages webs
– Fenêtres du navigateur
● Exécuter dès que
l'extension est chargé
● Permissions nécessaires
Background page

19. JDLL : Le 2 avril 2017
Background : Exemple
// manifest.json
"background": {
"scripts": ["background.js"]
}
// manifest.json
"background": {
"page": ["background.html"]
}

20. JDLL : Le 2 avril 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

21. JDLL : Le 2 avril 2017
Content scripts : Exemple
// manifest.json
"content_scripts": [{
"matches": [
"*://mozilla.com/*",
"*://localhost/*"
],
"js": [
"js/injection-demo.js"
]
}],

22. JDLL : Le 2 avril 2017
Manifest : Anatomie (3/6)
● Action du navigateur
<> des navigateurs
● Accès par un icône
– Barre d'outils navigateur
● Possible de définir
– Fenêtre contextuelle
● Langage :
– HTML / CSS / JS
Background page
Content scripts
Browser action

23. JDLL : Le 2 avril 2017
Browser action : Exemple
// manifest.json
"browser_action": {
"default_icon": {
"19": "button/geo-19.png",
"38": "button/geo-38.png"
},
"default_title": "Whereami?",
"default_popup": "popup/popup.html"
}

24. JDLL : Le 2 avril 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. JDLL : Le 2 avril 2017
Page action : Exemple
// manifest.json
"page_action": {
"browser_style": true,
"default_icon": {
"19": "button/geo-19.png",
"38": "button/geo-38.png"
},
"default_title": "Whereami?",
"default_popup": "popup/popup.html"
}

26. JDLL : Le 2 avril 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

27. JDLL : Le 2 avril 2017
Option page : Exemple
// manifest.json
"options_ui": {
"page": "options.html"
},

28. JDLL : Le 2 avril 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

29. JDLL : Le 2 avril 2017
Ressource : Exemple
// manifest.json
"options_ui": {
"page": "options.html"
},

30. JDLL : Le 2 avril 2017
API
https://developer.mozilla.org/fr/Add-ons/WebExtensions/API
● alarms
● bookmarks
● browserAction
● browsingData
● commands
● contextMenus
● contextualIdentities
● cookies
● downloads
● events
● extension
● extensionTypes
● history
● i18n
● Indentity
● Idle
● management
● notifications
● omnibox
● pageAction
● runtime
● sessions
● sidebarAction
● storage
● tabs
● topSites
● webNavigation
● webRequest
● windows

31. JDLL : Le 2 avril 2017
Installation provisoire / Test / Debug

32. JDLL : Le 2 avril 2017
Installation temporaire
● about:debugging

33. JDLL : Le 2 avril 2017
Publication

34. JDLL : Le 2 avril 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

35. JDLL : Le 2 avril 2017
Procédure
● Connecter
– https://addons.mozilla.org
● Soumettre
– Par le site
– Mode personnel

36. JDLL : Le 2 avril 2017
Par le site (1/2)

37. JDLL : Le 2 avril 2017
Par le site (2/2)

38. JDLL : Le 2 avril 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

39. JDLL : Le 2 avril 2017
Gestion personnelle

40. JDLL : Le 2 avril 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
●

41. JDLL : Le 2 avril 2017
Qui ???
Christophe
Villeneuve
mozilla reps - firefox os - B2GOS - ausy - afup – lemug.fr – mysql – mariadb – drupal – demoscene – firefoxos – drupagora – phptour – forumphp – solutionlinux – Libre@toi – eyrolles – editions eni – programmez – linux pratique – webriver – phptv – elephpant - owasp -security

42. JDLL : Le 2 avril 2017
Merci
Questions
Christophe Villeneuve
@hellosct1