Présentation effectuée pour Root66 sur le thème "Utiliser et ameliorer firefox avec les webextensions" par Christophe Villeneuve . La conférence donne une situation globale des WebExtensions, des possibilités d'interrargir avec le navigateur et les différentes API

1. Utiliser et améliorer Firefox
WebExtensions
@hellosct1
@hellosct1@mamot.fr
Christophe Villeneuve
ROOT66 – 20 Octobre 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. Root66 -
Aujourd'hui...
● La situation
● APIs
● Les possibilités
● Outils
● ...

4. Root66 -
Firefox ‘Quantum’ 57

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

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

7. Root66 -
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. Root66 -
Croissance des extensions
● Firefox 57
– 6 589 WebExtensions
● Firefox 62
– 13 655 WebExtensions
https://addons.mozilla.org/en-US/firefox/tag/firefox57
14 novembre 2017
20 octobre 2018

9. Root66 -
Firefox 60 (ESR)
Firefox 61 +

10. Root66 -
Firefox 60
● Support ESR
● WebExtensions
● Support standard WebAuth
– Clef USB physique authentification sur le web

11. Root66 -
Firefox 63

12. Root66 -
Firefox 63
● 23 octobre 2018
● Important pour les WebExtensions
● Evolutions des API
– Presse-papiers (Clipboard API)
– Sélection de plusieurs onglets (Tabs API)
– Moteur de recherche (Search API)
– Thème (theme API)
– Onglet contextuelle (Menus API)
– Type de connexion (WebRequest & Proxy)

13. Root66 -
Le développement

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

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

16. Root66 -
Compatibilité
● Edge / Opera / Chrome / Firefox
● Compatible Qtwebkit

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

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

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

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

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

22. Root66 -
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"]
}
]
}

23. Root66 -
APIs Javascript

24. Root66 -
PageAction API
https://addons.mozilla.org/fr/firefox/addon/share-backported

25. Root66 -
Communiquer entre les extensions (1/

26. Root66 -
Communiquer entre les extensions (2/
● Devtools panels

27. Root66 -
OAUTH (1/

28. Root66 -
OAUTH (2/

29. Root66 -
Message Natif (1/
https://developer.mozilla.org/fr/Add-ons/WebExtensions/Native_messaging
Ping Pong

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

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

32. Root66 -
API Tabs
https://addons.mozilla.org/fr/firefox/addon/tab-invaders

33. Root66 -
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'

34. Root66 -
Thème

35. Root66 -
Thèmes statiques (1/
{
"manifest_version": 2,
"version": "1.0",
"name": "<your_theme_name>",
"theme": {
"images": {
"headerURL":
"<your_header_image>.<type>"
},
"colors": {
"accentcolor": "#FFFFFF",
"textcolor": "#000"
}
}
}

36. Root66 -
Thèmes statiques (2/
● Personas Plus → Firefox Color
– https://testpilot.firefox.com/experiments/color

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

38. Root66 -
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"
}
}

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

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

41. Root66 -
Illustrations (3/

42. Root66 -
Exemple : Effet jour : nuit
● API WebExtensions utilisées
– Windows
– Alarms
Quantum Lights
Extension : Quantum Lights

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

44. Root66 -
Exemple : Container visible
● API WebExtensions utilisées
– contextualIdentities
– Windows
– Tabs
Extension : Containers Theme

45. Root66 -
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"]
},
});

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

47. Root66 -
Exemple : Thème associé
● API fetch
● Extension : Open Weather Map

48. Root66 -
Environnement travail
● API WebExtensions utilisées
– Thèmes
Extension : Envify

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

50. Root66 -
Confiance ?

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

52. Root66 -
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
search
storage
tabs
topSites
webNavigation
webRequest
webRequestBlocking

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

54. outils

55. Root66 -
Debugging

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

57. Root66 -
Portage d'une ancienne extension
https://developer.mozilla.org/fr/Add-ons/WebExtensions/Portage_d_une_extension_Firefox_heritee

58. Root66 -
Ressources
● Plus de 60 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

59. Root66 -
Merci
@hellosct1
@hellosct1@mamot.fr