Présentation effectuée à "La Face cachée des WebExtensions / the hidden side of WebExtensions" PSES (Pas Sage En Seine) 2018 par Christophe Villeneuve Elle a pour but de montrer les différentes avancées depuis la version de firefox 'Quantum' 57

1. The hidden side of WebExtensions
@hellosct1
@hellosct1@mamot.fr
Pas Sage En Seine – 29 juin 2018
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. .Pas Sage En Seine 2018
Aujourd'hui...
●
La situation
●
APIs
●
Les possibilités
●
Outils
●
...

4. .Pas Sage En Seine 2018
Firefox ‘Quantum’ 57

5. .Pas Sage En Seine 2018
Extension → WebExtension (1/
●
Développement / Debug
Firebug > DevTools
●
Synchronisation
FoxMarks > Bookmark Sync

6. .Pas Sage En Seine 2018
Extension → WebExtension (2/
●
Crash
– Session Manager > Session Restore
– Tab session manager

7. .Pas Sage En Seine 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. .Pas Sage En Seine 2018
Croissance des extensions
●
Firefox 57
– 6 589 WebExtensions
●
Firefox 61
– 11 226 WebExtensions
https://addons.mozilla.org/en-US/firefox/tag/firefox57
14 novembre 2017
29 juin 2017

9. .Pas Sage En Seine 2018
Firefox 60 (ESR)
Firefox 61 +

10. .Pas Sage En Seine 2018
Firefox 60
●
Support ESR
●
WebExtensions
●
Support standard WebAuthn
– Clef USB physique authentification sur le web

11. Le développement

12. .Pas Sage En Seine 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. .Pas Sage En Seine 2018
Les WebExtensions
●
Créer une API robuste
●
Parité avec extensions chrome api
●
Documentation
●
Prise en charge de Firefox pour Android
●
Technologie standard

14. .Pas Sage En Seine 2018
Compatibilité
●
Edge / Opera / Chrome / Firefox
●
Compatible Qtwebkit

15. .Pas Sage En Seine 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. .Pas Sage En Seine 2018
Interface utilisateur (2/
Sidebar (barre latérale)
Context menu items (Elément du
menu contextuel)

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

18. .Pas Sage En Seine 2018
Interface utilisateur (4/
Developer tools panels (Panneaux
d'outils de développement)
Options page (Page d'options)

19. .Pas Sage En Seine 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. .Pas Sage En Seine 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. .Pas Sage En Seine 2018
APIs Javascript

22. .Pas Sage En Seine 2018
PageAction API
https://addons.mozilla.org/fr/firefox/addon/share-backported

23. .Pas Sage En Seine 2018
Communiquer entre les extensions (1/

24. .Pas Sage En Seine 2018
Communiquer entre les extensions (2/
●
Devtools panels

25. .Pas Sage En Seine 2018
OAUTH (1/

26. .Pas Sage En Seine 2018
OAUTH (2/

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

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

29. .Pas Sage En Seine 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. .Pas Sage En Seine 2018
API Tabs
https://addons.mozilla.org/fr/firefox/addon/tab-invaders

31. .Pas Sage En Seine 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. .Pas Sage En Seine 2018
Thème

33. .Pas Sage En Seine 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. .Pas Sage En Seine 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. .Pas Sage En Seine 2018
Illustrations (1/
●
Accentcolor
– Couleur d’arrière plan
"theme": {
"colors": {
"accentcolor": "red",
"textcolor": "white"
}
}

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

37. .Pas Sage En Seine 2018
Illustrations (3/

38. .Pas Sage En Seine 2018
Exemple : Effet jour : nuit
●
API WebExtensions utilisées
– Windows
– Alarms
Quantum Lights
Extension : Quantum Lights

39. .Pas Sage En Seine 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. .Pas Sage En Seine 2018
Exemple : Container visible
●
API WebExtensions utilisées
– contextualIdentities
– Windows
– Tabs
Extension : Containers Theme

41. .Pas Sage En Seine 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. .Pas Sage En Seine 2018
Thèmes dynamiques animé
●
API WebExtensions utilisées
– Thèmes
●
RequestAnimationFrame()
●
AVG au format Animations
https://github.com/hellosct1/theme-animation

43. .Pas Sage En Seine 2018
Exemple : Thème associé
●
API fetch
●
Extension : Open Weather Map

44. .Pas Sage En Seine 2018
Environnement travail
●
API WebExtensions utilisées
– Thèmes
Extension : Envify

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

46. .Pas Sage En Seine 2018
Confiance ?

47. .Pas Sage En Seine 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. .Pas Sage En Seine 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. .Pas Sage En Seine 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. .Pas Sage En Seine 2018
Debugging

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

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

54. .Pas Sage En Seine 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