Présentation effectuée au RMLL 2018 sur "La face cachée des WebExtensions" par Christophe Villeneuve . Vous verrez les différentes avancées depuis la version de firefox 'Quantum' 57

1. La face cachée des WebExtensions
@hellosct1
@hellosct1@mamot.fr
Christophe Villeneuve
9 juillet 2018

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. .RMLL 2018 -
Aujourd'hui...
●
La situation
●
APIs
●
Les possibilités
●
Outils
●
...

4. .RMLL 2018 -
Firefox ‘Quantum’ 57

5. .RMLL 2018 -
Extension → WebExtension (1/
●
Développement / Debug
Firebug > DevTools
●
Synchronisation
FoxMarks > Bookmark Sync

6. .RMLL 2018 -
Extension → WebExtension (2/
●
Crash
– Session Manager > Session Restore
– Tab session manager

7. .RMLL 2018 -
Depuis le lancement
●
1ère étape : compatibilité avec Chrome
– Atteint le niveau de compatibilité pertinante
●
99% des 100 meilleurs API
●
91% des 250 meilleurs API
●
2ème étape : Au delà de Chrome
– API les onglets contextuels
●
Ex : Facebook container
– API afficher / cacher les onglets
●
Ex : session MGMT, groupes d'onglets...
– API thème
– ...

8. .RMLL 2018 -
Croissance des extensions
●
Firefox 57
– 6 589 WebExtensions
●
Firefox 61
– 11 324 WebExtensions
https://addons.mozilla.org/en-US/firefox/tag/firefox57
14 novembre 2017
9 juillet 2018

9. .RMLL 2018 -
Firefox 60 (ESR)
Firefox 61 +

10. .RMLL 2018 -
Firefox 60
●
Support ESR
●
WebExtensions
●
Support standard WebAuthn
– Clef USB physique authentification sur le web

11. Le développement

12. .RMLL 2018 -
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

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

14. .RMLL 2018 -
Compatibilité
●
Edge / Opera / Chrome / Firefox
●
Compatible Qtwebkit

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

16. .RMLL 2018 -
Interface utilisateur (2/
Sidebar (barre latérale)
Context menu items (Elément du
menu contextuel)

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

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

19. .RMLL 2018 -
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

20. .RMLL 2018 -
Manifest.json
{
"description": "description",
"manifest_version": 2,
"name": "Borderify",
"version": "1.0",
"homepage_url": "https://url_extension",
"icons": { [ … ] },
"content_scripts": [
{
"matches": ["*://*.mozilla.org/*"],
"js": ["borderify.js"]
}
]
}

21. .RMLL 2018 -
APIs Javascript

22. .RMLL 2018 -
PageAction API
https://addons.mozilla.org/fr/firefox/addon/share-backported

23. .RMLL 2018 -
Communiquer entre les extensions (1/

24. .RMLL 2018 -
Communiquer entre les extensions (2/
●
Devtools panels

25. .RMLL 2018 -
OAUTH (1/

26. .RMLL 2018 -
OAUTH (2/

27. .RMLL 2018 -
Message Natif (1/
https://developer.mozilla.org/fr/Add-ons/WebExtensions/Native_messaging
Ping Pong

28. .RMLL 2018 -
Message Natif (2/
●
kde_connect
●
keePassXC-browser
●
Midi-input-provider
●
withexeditor
●
web2mp3
https://addons.mozilla.org

29. .RMLL 2018 -
Aperçu / Impression
●
Print
– Tabs.print()
– Tabs.printPreview()
– Tabs.saveAsPDF()
●
Mode Lecture
– Tabs.toogleReaderMode()
https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs/print
https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs/printPreview
https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs/saveAsPDF
https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs/toggleReaderMode

30. .RMLL 2018 -
API Tabs
https://addons.mozilla.org/fr/firefox/addon/tab-invaders

31. .RMLL 2018 -
Voir / Cacher
●
Menus
– onHidden() / onShown() / Refresh()
●
Onglets (tabs)
– Tabs.show()
●
Afficher un ID d’onglet
– Tabs.hide()
●
Masquer un ID d’onglet
– Tab.hidden()
●
savoir quel onglet est masqué
Permission
'tabIde'

32. .RMLL 2018 -
Thème

33. .RMLL 2018 -
Thème dynamiques
●
Les permissions d'hôte = URL
*://developer.mozilla.org/*
●
Les permissions API
– Associés à une autre API (Alarms, background...)
●
La permission activeTab
– Onglet actif

34. .RMLL 2018 -
Exemple par le code
{
"colors": {
"accentcolor": "tomato",
"textcolor": "white",
"toolbar": "#444",
"toolbar_text": "lightgray",
"toolbar_field": "black",
"toolbar_field_text": "white"
}
"images": {
"headerURL": "img/header.jpg"
}
}

35. .RMLL 2018 -
Illustrations (1/
●
Accentcolor
– Couleur d’arrière plan
"theme": {
"colors": {
"accentcolor": "red",
"textcolor": "white"
}
}

36. .RMLL 2018 -
Illustrations (2/
●
Accentcolor
– Couleur d’arrière plan
●
Popup
●
textcolor
"theme": {
"colors": {
"accentcolor": "black",
"textcolor": "white",
"popup": "red"
}
}

37. .RMLL 2018 -
Illustrations (3/

38. .RMLL 2018 -
Exemple : Effet jour : nuit
●
API WebExtensions utilisées
– Windows
– Alarms
Quantum Lights
Extension : Quantum Lights

39. .RMLL 2018 -
Containers
●
= onglets contextuels
●
Ceux sont :
– Onglets normaux
– Accès à une portion limitée de stockage
●
Vos sessions enregistrées
– pas de pistages des données
●
Aucun contenu externe ne sera importé
– Ex : Facebook container

40. .RMLL 2018 -
Exemple : Container visible
●
API WebExtensions utilisées
– contextualIdentities
– Windows
– Tabs
Extension : Containers Theme

41. .RMLL 2018 -
Thèmes dynamiques animé
browser.theme.update(window.id,
{
images:
{
headerURL: "resources/background.png",
additional_backgrounds: ["resources/anim.svg"]
},
properties:
{
additional_backgrounds_alignment: ["right top"],
additional_backgrounds_tiling: ["repeat"]
},
});

42. .RMLL 2018 -
Thèmes dynamiques animé
●
API WebExtensions utilisées
– Thèmes
●
RequestAnimationFrame()
●
AVG au format Animations
https://github.com/hellosct1/theme-animation

43. .RMLL 2018 -
Exemple : Thème associé
●
API fetch
●
Extension : Open Weather Map

44. .RMLL 2018 -
Environnement travail
●
API WebExtensions utilisées
– Thèmes
Extension : Envify

45. .RMLL 2018 -
Sécurité en visuelle
●
Thème HTTP / HTTPS
https://github.com/nt1m/theming-rules

46. .RMLL 2018 -
Confiance ?

47. .RMLL 2018 -
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

48. .RMLL 2018 -
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

49. .RMLL 2018 -
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

50. outils

51. .RMLL 2018 -
Debugging

52. .RMLL 2018 -
Portage d'une extension Google Chrome
https://developer.mozilla.org/fr/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension

53. .RMLL 2018 -
Portage d'une ancienne extension
https://developer.mozilla.org/fr/Add-ons/WebExtensions/Portage_d_une_extension_Firefox_heritee

54. .RMLL 2018 -
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

55. Merci
@hellosct1
@hellosct1@mamot.fr