Talk made at the UbuCon Europe Paris September 2017 by Christophe Villeneuve on "WebExtensions: Where are we?". This is a presentation to see the advanced WebExtensions in Mozilla Firefox Présentation effectuée à la UbuCon Europe Paris Septembre 2017 par Christophe Villeneuve sur "WebExtensions : Où en est-on ?". Il s'agit d'une présentation pour voir l'avancé des WebExtensions dans Mozilla Firefox

1. WebExtensions
Où en est-on ? Where we are ?
@hellosct1
@hellosct1@mamot.fr
10 septembre
UbuCon Europe Paris 2017
Christophe Villeneuve

2. UbuCon Europe Paris 2017 -
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. UbuCon Europe Paris 2017 -
Aujourd'hui...
● Sujet du jour !!!... Pourquoi ?
● Maintenant
● Demain

4. Sujet du jour : Le chamboulement

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

6. UbuCon Europe Paris 2017 -
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. UbuCon Europe Paris 2017 -
Attention aux titres trompeurs
Mozilla va
abandonner le support
des extensions
La fin des extensions
Mozilla Will Kill
Legacy Firefox Add-Ons
in Exactly Three Months

8. UbuCon Europe Paris 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

9. UbuCon Europe Paris 2017 -
Firefox 55 : les extensions

10. UbuCon Europe Paris 2017 -
Les extensions sont mortes
Vive Les Extensions

11. UbuCon Europe Paris 2017 -
Firefox 57 : Les extensions

12. Construction de la technologie

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

14. UbuCon Europe Paris 2017 -
Bienvenue aux WebExtensions
● Créer une API robuste
● Parité avec extensions chrome api
● Documentation
● Prise en charge de Firefox pour Android
● Technologie standard

15. UbuCon Europe Paris 2017 -
Compatibilité
● Edge / Opera / Chrome / Firefox
● Compatible Qtwebkit

16. Les migrations (en cours) importantes

17. UbuCon Europe Paris 2017 -
Actuellement, c'est...
● 4072 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

18. UbuCon Europe Paris 2017 -
Interface utilisateur (1/
L'utilisation d'une extension s'effectue par...
Page action (bouton barre d'adresse)
Browser action (bouton barre d'outils)

19. UbuCon Europe Paris 2017 -
Interface utilisateur (2/
Sidebar (barre latérale)
Context menu items (Elément du
menu contextuel)

20. UbuCon Europe Paris 2017 -
Interface utilisateur (3/
Address bar suggestions (Suggestions
de la barre d'adresse)
Notifications (Notifications)
Bundled web pages (Page web
incluses)

21. UbuCon Europe Paris 2017 -
Interface utilisateur (4/
Developer tools panels (Panneaux
d'outils de développement)
Options page (Page d'options)

22. UbuCon Europe Paris 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

23. UbuCon Europe Paris 2017 -
Confiance aux WebExtensions (1/
● Demandes aux accès spéciaux de l’extension
● Déclaration dans manifest.json
● La clé peut contenir plusieurs types d'autorisations
"permissions": [
"*://developer.mozilla.org/*",
"webRequest"
]
https://developer.mozilla.org/fr/Add-ons/WebExtensions/manifest.json/permissions

24. UbuCon Europe Paris 2017 -
Confiance aux WebExtensions (2/
● La permission d’hôte
● Les permissions API
"*://developer.mozilla.org/*"
activeTab
alarms
bookmarks
browsingData
contextMenus
contextualIdent
ities
cookies
downloads
downloads.open
history
identity
idle
management
nativeMessaging
notifications
proxy
sessions
storage
tabs
topSites
webNavigation
webRequest
webRequestBlocking

25. UbuCon Europe Paris 2017 -
Confiance aux WebExtensions (3/
● La permission activeTab
– Spécifique aux onglets
– Utilisation interaction utilisateur
● Background, Browser Action, Page Action…
● Accès aux presse-papiers
– Interagir avec le presse papiers
"permissions": ["tabs"]
"permissions": [
"*://developer.mozilla.org/*",
"tabs"]
ou

26. Changements importants

27. UbuCon Europe Paris 2017 -
Extensions → WebExtensions (1/
● Développement / Debug
Firebug > DevTools

28. UbuCon Europe Paris 2017 -
Extensions → WebExtensions (3/
● Crash
– Session Manager > Session Restore

29. UbuCon Europe Paris 2017 -
Extensions → WebExtensions (4/
● Améliore menu contextuel
● FaviconizeTab > Tab pinning

30. UbuCon Europe Paris 2017 -
Extensions → WebExtensions (5/
● Multizilla > Tab browsing

31. UbuCon Europe Paris 2017 -
Autres utilisations (1/
● Recherche d’onglets
– WebExtension : Tree Tabs
–
● Utile pour gérer des centaines d'onglets
●
https://addons.mozilla.org/fr/firefox/addon/tree-tabs

32. UbuCon Europe Paris 2017 -
Autres utilisations (2/
● Privacy & sécurity
– Ublock Origin
https://addons.mozilla.org/en-us/firefox/addon/ublock-origin

33. UbuCon Europe Paris 2017 -
Autres utilisations (3/
● Privacy & sécurity
– Ublock Origin
– Privacy Badger
https://addons.mozilla.org/en-us/firefox/addon/ublock-origin
https://addons.mozilla.org/en-us/firefox/addon/privacy-badger17

34. UbuCon Europe Paris 2017 -
Autres utilisations (4/
● Thèmes : module stylus
– https://addons.mozilla.org/en-US/firefox/addon/styl-us/
● Header :
– https://addons.mozilla.org/en-US/firefox/addon/modify-header-value
● Cookie manager :
– https://addons.mozilla.org/en-us/firefox/addon/a-cookie-manager
● Laspass :
– https://addons.mozilla.org/en-US/firefox/addon/lastpass-password-ma
nager/
● Gostery :
– https://addons.mozilla.org/en-US/firefox/addon/ghostery/
● VPN :
– https://addons.mozilla.org/en-US/firefox/addon/windscribe/

35. Maintenant, utilisons les WebExtensions

36. UbuCon Europe Paris 2017 -
Tester les WebExtensions
● Firefox Nightly
http://nightly.mozfr.org/

37. UbuCon Europe Paris 2017 -
Tester les WebExtensions
● Firefox 57 Beta
– A partir du 26 septembre 2017
https://www.mozilla.org/fr/firefox/channel/desktop/

38. UbuCon Europe Paris 2017 -
WebExtensions : portage (1/2)
● Les WebExtensions déjà disponibles
– https://addons.mozilla.org/en-US/firefox/tag/firefox57
● Les WebExtensions les plus populaires (en cours)
– Are we WebExtensions yet ?
● http://arewewebextensionsyet.com/
● Les WebExtensions en cours
– Discourse Mozilla :
● https://discourse.mozilla.org/c/add-ons

39. UbuCon Europe Paris 2017 -
WebExtensions : portage (2/2)
● Porter une extension Google Chrome
– Utilisation facilitée
● https://www.extensiontest.com/
● Porter une ancienne extension Firefox
– Extension héritée (Legacy)

40. UbuCon Europe Paris 2017 -
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

41. Merci
Questions
Christophe Villeneuve
@hellosct1