Présentation effectuée à la création numérique "Alchimie 12" par Christophe Villeneuve sur "WebExtensions, it's now / c'est maintenant". La présentation a pour but de montrer où en sont les WebExtensions à quelques jours de la sortie de Firefox 'Quantum' 57

1. 11 Novembre 2017
WebExtensionsWebExtensions
It’s now ! C’est maintenant !It’s now ! C’est maintenant !
@hellosct1
@hellosct1@mamot.fr
Christophe Villeneuve

2. 11 Novembre 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 ???Qui ???
ChristopheChristophe
VilleneuveVilleneuve
Contributeur / Réalisation
Contributor / Realization

3. 11 Novembre 2017
Aujourd'hui...Aujourd'hui...
●
Sujet du jour !!!... Pourquoi ?
●
Avant
●
Maintenant
●
Demain

4. 11 Novembre 2017
Sujet du jourSujet du jour
le chamboulementle chamboulement

5. Rappel : Une extension ? (1/2)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)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. 11 Novembre 2017
Attention aux titres trompeursAttention aux titres trompeurs
Mozilla vaMozilla va
abandonner leabandonner le
support dessupport des
extensionsextensions La fin desLa fin des
extensionsextensions
Mozilla Will KillMozilla Will Kill
Legacy Firefox Add-Legacy Firefox Add-
OnsOns
in Exactly Threein Exactly Three
MonthsMonths

8. RoadmapRoadmap
●
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. Firefox 56 : les extensionsFirefox 56 : les extensions

10. 11 Novembre 2017
Les extensions sont mortesLes extensions sont mortes
Vive Les Extensions

11. Firefox 57 : Les extensionsFirefox 57 : Les extensions

12. Construction de la technologieConstruction de la technologie

13. Avant : XUL / XPCOMAvant : 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. Bienvenue aux WebExtensionsBienvenue aux WebExtensions
●
Créer une API robuste
●
Parité avec extensions chrome api
●
Documentation
●
Prise en charge de Firefox pour Android
●
Technologie standard

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

16. Les migrationsLes migrations
(en cours) importantes(en cours) importantes

17. 11 Novembre 2017
Aujourd’hui, c'est...Aujourd’hui, c'est...
●
6069 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. 11 Novembre 2017
Interface utilisateur (1/Interface utilisateur (1/
L'utilisation d'une extension s'effectue par...L'utilisation d'une extension s'effectue par...
Page action (bouton barre d'adresse)
Browser action (bouton barre d'outils)

19. 11 Novembre 2017
Interface utilisateur (2/Interface utilisateur (2/
Sidebar (barre latérale)
Context menu items (Elément du
menu contextuel)

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

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

22. AnatomieAnatomie
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. Confiance aux WebExtensions (1/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. Confiance aux WebExtensions (2/Confiance aux WebExtensions (2/
●
La permission d’hôte
●
Les permissions API
"*://developer.mozilla.org/*"
activeTab
alarms
bookmarks
browsingData
contextMenus
contextualIde
ntities
cookies
downloads
downloads.open
history
identity
idle
management
nativeMessaging
notifications
proxy
sessions
storage
tabs
topSites
webNavigation
webRequest
webRequestBlocking

26. Confiance aux WebExtensions (3/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

27. Changements importantsChangements importants

28. 11 Novembre 2017
Extensions → WebExtensions (1/Extensions → WebExtensions (1/
●
Développement / Debug
Firebug > DevTools

29. 11 Novembre 2017
Extensions → WebExtensions (2/Extensions → WebExtensions (2/
●
Synchronisation
– FoxMarks > Bookmark Sync

30. 11 Novembre 2017
Extensions → WebExtensions (3/Extensions → WebExtensions (3/
●
Crash
– Session Manager > Session Restore
– Tab session manager

31. 11 Novembre 2017
Extensions → WebExtensions (4/Extensions → WebExtensions (4/
●
Ajoute une nouvelle option au menu contextuel
●
FaviconizeTab > Tab pinning
●
Redimensionne le favicon

32. 11 Novembre 2017
ExtensionsExtensions → WebExtensions (5/→ WebExtensions (5/
●
Multizilla > Tab browsing
– Ajoute de nombreuses fonctions aux onglets
●
Abonnement des flux
●
Permission
●
Filtrez les erreurs
●
Maintient un evironnement propre

33. 11 Novembre 2017
AutresAutres utilisationsutilisations (1/(1/
●
Recherche d’onglets
– WebExtension : Tree Tabs
●
Utile pour gérer des centaines d'onglets
https://addons.mozilla.org/fr/firefox/addon/tree-tabs

34. 11 Novembre 2017
Autres utilisations (2/Autres utilisations (2/
●
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

35. 11 Novembre 2017
Autres utilisations (3/Autres utilisations (3/
●
Thèmes : module stylus
– https://addons.mozilla.org/en-US/firefox/addon/styl-u
s/
●
Header :
– https://addons.mozilla.org/en-US/firefox/addon/modi
fy-header-value
●
Cookie manager :
– https://addons.mozilla.org/en-us/firefox/addon/a-co
okie-manager
●
Laspass :
– https://addons.mozilla.org/en-US/firefox/addon/las
tpass-password-manager/
●
Gostery :

36. 11 Novembre 2017
Maintenant utilisons lesMaintenant utilisons les
WebExtensionsWebExtensions

37. 11 Novembre 2017
Tester les WebExtensionsTester les WebExtensions
●
Firefox 57 Beta
→ Jusqu’au 14 novembre 2017
https://beta.mozilla.org

38. WebExtensions : portage (1/2)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. WebExtensions : portage (2/2)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. RessourcesRessources
●
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. 11 Novembre 2017
MerciMerci
Questions
Christophe Villeneuve
@hellosct1