Ce document présente les WebExtensions dans Firefox, une nouvelle approche pour développer des extensions avec une API standardisée utilisant HTML, CSS et JavaScript. Il aborde l'évolution des extensions, la structure des manifestes, et fournit des exemples de code pour différents types de scripts et actions. En outre, il couvre le processus d'installation, de test et de publication des extensions sur le site de Mozilla.

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