Talk made at meetup Mozilla Paris octobre 2017 by Christophe Villeneuve on "Introduction aux webExtensions". La présentation a pour but d'aider à mieux appréhender ces nouvelles extensions, les impacts et les possibilités offertes dans le navigateur, les emplacements disponibles, le tout cadencé de cas exemples.

1. Introduction
aux
WebExtensions
@hellosct1
@hellosct1@mamot.fr
Meetup le 16 octobre 2017
Christophe Villeneuve

2. .
Tag : mozilla reps - firefox - B2GOS - ausy - afup – lemug.fr – mysql –
mariadb – drupal – demoscene – addons - WebExtensions – drupagora –
phptour – forumphp – linux magazine - Libre@toi – eyrolles – editions eni
– programmez – linux pratique – webriver – phptv – elephpant - owasp -
security
Qui ???
Christophe
Villeneuve
Contributeur / Réalisation
Contributor / Realization

3. .
Aujourd'hui...
●
Deadline… J - 30
●
Maintenant
●
Réalisation / Production

5. .
Rappel : Une extension ? (1/2)
●
Modules complémentaires au navigateur
●
Amélioration du navigateur
●
Fait partie de Firefox depuis l'origine

6. .
Rappel : Une extension ? (2/2)
●
Les projets Web
→ montrent l’importance des extensions dans Firefox
●
Important de montrer les API sont puissants
– 40 % des utilisateurs ont des extensions
– 32 000 modules complémentaires
– 19 000 développeurs d'extensions
– 15 millions d'utilisateurs mensuels sur Mozilla Add-ons
(AMO)

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

8. .
Firefox 56 : les extensions

9. Les Extensions
Sont Mortes
Vive Les Extensions

10. .
Firefox 57 : Les extensions

11. Endroits disponibles dans Firefox

12. .
Interface utilisateur (1/
L'utilisation d'une extension s'effectue par...
Page action (bouton barre d'adresse)
Browser action (bouton barre d'outils)

13. .
Interface utilisateur (2/
Sidebar (barre latérale)
Context menu items (Elément du
menu contextuel)

14. .
Interface utilisateur (3/
Address bar suggestions (Suggestions
de la barre d'adresse)
Notifications (Notifications)
Bundled web pages (Page web
incluses)

15. .
Interface utilisateur (4/
Developer tools panels (Panneaux
d'outils de développement)
Options page (Page d'options)

16. Technologies

17. .
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
– Mises à jour / révisions… trop long

18. .
Les WebExtensions
●
Créer une API robuste
●
Parité avec extensions chrome api
●
Documentation
●
Prise en charge de Firefox pour Android
●
Technologie standard

19. .
Compatibilité
●
Edge / Opera / Chrome / Firefox
●
Compatible Qtwebkit

20. .
Actuellement, c'est...
●
5180 WebExtensions
●
https://addons.mozilla.org/en-US/firefox/tag/firefox57
●
Catégories
- Alertes et mises à jour
- Apparence
- Signets
- Gestion du téléchargement
- Flux, Actualités & Blog
- Jeux et divertissement
- Support linguistique
- Autre
- Photos, musique et vidéos
- Confidentialité et sécurité
- Outils de recherche
- Achats
- Communication sociale
- Onglets
- Développement web

21. Demo : Screen Saver
https://addons.mozilla.org/fr/firefox/addon/screen-saver/

22. .
Installation temporaire (1/2)
●
Firefox beta
– https://beta.mozilla.org
●
Firefox Nightly
– https://nightly.mozfr.org/
Actuellement
57
Actuellement
58

23. .
Installation temporaire (2/2)
●
about:debugging

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

25. .
Manifest.json (1/2)
●
Carte identité d'une extension
●
Script au format jSON
●
https://developer.mozilla.org/fr/Add-ons/WebExtensions
{
"manifest_version": 2,
"name": "Intro WebExtensions",
"version": "2.0",
"description": "The WebExtensions",
"icons": {
"19": "icons/icon-19.png",
"48": "icons/icon-48.png"
},
}

26. .
Manifest.json (2/2)
●
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

27. .
Manifest : Anatomie (1/7)
●
Script d'arrière plan
●
Indépendant
– Des pages web
– Fenêtres du navigateur
●
Exécuter dès que l'extension
est chargée
●
Permissions nécessaires
Background page

28. .
Background : Exemple
// manifest.json
"background": {
"scripts": [
"loader.js",
"loader_anim.js",
]
}
Possible
"scripts": ["loader.html"]

29. .
Manifest : Anatomie (2/7)
●
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

30. .
Content scripts : Exemple (1/2)
// manifest.json
"content_scripts": [{
"matches": [
"*://mozilla.com/*",
"*://votreURL.org/*",
"*://localhost/*"
],
"js": [
"js/injection-demo.js"
]
}],

31. .
Content scripts : Exemple (2/2)
// manifest.json
"content_scripts": [{
"matches": [
"<all_urls>"
],
"exclude_matches": [
"*://www.mozilla.org/*",
"*://*.votreURL.org/*"
],
"js": [
"background/all-sites.js"
]
}],

32. .
Manifest : Anatomie (3/7)
●
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

33. .
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"
}

34. .
Manifest : Anatomie (4/7)
●
Action dans la barre de
navigation
●
Affiche sur un onglet activé
●
Action pas toujours
nécessaire
Background page
Content scripts
Browser action
Page action

35. .
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"
}

36. .
Manifest : Anatomie (5/7)
●
Définir des préférences en
plus
●
Accès par les add-ons du
navigateur
●
Paramètres mémorisés
Background page
Content scripts
Browser action
Page action
Option page

37. .
Option page : Exemple
// manifest.json
"options_ui": {
"page": "options.html"
},

38. .
Manifest : Anatomie (6/6)
●
Action barre latérale
●
Action du navigateur
<> des navigateurs
●
Accès par un icône
●
Langage :
– HTML / CSS / JS
Background page
Content scripts
Browser action
Page action
Option page
Slide bar

39. .
Ressource : Exemple
// manifest.json
"slidebar_action": [
"default_icon" : "icons/bleu.png",
"default_title" : "barre verticale",
"default_panel": "slidebar/panel.html"
],

40. .
Manifest : Anatomie (7/7)
●
Ressources incluses dans
l'extension (ex : images)
●
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
Slide bar
Ressource

41. .
Ressources
●
Plus de 40 API en exemple
https://github.com/mdn/webextensions-examples
●
Documentation (MDN) en Anglais
– https://developer.mozilla.org/en-US/Add-ons/WebExtensions
●
Documentation (MDN) en Français
– https://developer.mozilla.org/fr/Add-ons/WebExtensions
●
Actualité Add-ons
– https://blog.mozilla.org/addons/
●
Actualité communauté
– https://blog.mozfr.org

42. .
Merci
Questions
Christophe Villeneuve
@hellosct1