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

1. Les WebExtensions
Christophe Villeneuve
@hellosct1

2. 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

3. Aujourd'hui
● Pourquoi les WebExtensions !!!
● Conception
● Réalisation

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)

6. RMLL 2017 – 4 Juillet 2017
Les Extensions Firefox
● Firebug > DevTools
● FoxMarks > Bookmark Sync
● Session Manager > Session Restore
● Faviconize Tab > Tab pinning
● Multizilla > Tab browsing

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

11. RMLL 2017 – 4 Juillet 2017
Demo WebExt manifest
https://github.com/hellosct1/demo-WebExt-manifest

12. RMLL 2017 – 4 Juillet 2017
Vous verrez ceci...
1 clic ouvrir la pop-up
Ou
1 clic Reset

13. Conception

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"
},
}

16. RMLL 2017 – 4 Juillet 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

17. RMLL 2017 – 4 Juillet 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

18. RMLL 2017 – 4 Juillet 2017
Background : Exemple
// manifest.json
"background": {
"scripts": ["background.js"]
}
// manifest.json
"background": {
"page": ["background.html"]
}

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

20. RMLL 2017 – 4 Juillet 2017
Content scripts : Exemple
// manifest.json
"content_scripts": [{
"matches": [
"*://mozilla.com/*",
"*://localhost/*"
],
"js": [
"js/injection-demo.js"
]
}],

21. RMLL 2017 – 4 Juillet 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

22. RMLL 2017 – 4 Juillet 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"
}

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

24. RMLL 2017 – 4 Juillet 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"
}

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/*"
},

29. RMLL 2017 – 4 Juillet 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

30. Installation provisoire / Test / Debug

31. RMLL 2017 – 4 Juillet 2017
Installation temporaire
● about:debugging

32. Publication

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

35. RMLL 2017 – 4 Juillet 2017
Par le site (1/2)

36. RMLL 2017 – 4 Juillet 2017
Par le site (2/2)

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

40. Merci
Questions
Christophe Villeneuve
@hellosct1