La conférence a pour but de montrer différentes manières d'habillées votre navigateur Firefox avec les webExtensions, présentée au Geek Faeries 2018

1. Habillez votre navigateur
avec les WebExtensions
@hellosct1
@hellosct1@mamot.fr
Geek Faeries le 3 juin
Christophe Villeneuve

2. .Geek Faeries 2018
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. .Geek Faeries 2018
Today...
●
… !!! ## # ! # ## ...

4. .Geek Faeries 2018
Firefox ‘Quantum’ 57

5. Le partage

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

7. .Geek Faeries 2018
Compatibilité
●
Edge / Opera / Chrome / Firefox
●
Compatible Qtwebkit

8. .Geek Faeries 2018
Aujourd’hui, c'est...
●
10744 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

9. .Geek Faeries 2018
Firefox 60 (ESR)

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

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

12. .Geek Faeries 2018
Interface utilisateur (2/
Sidebar (barre latérale)
Context menu items (Elément du
menu contextuel)

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

14. .Geek Faeries 2018
Interface utilisateur (4/
Developer tools panels (Panneaux
d'outils de développement)
Options page (Page d'options)

15. .Geek Faeries 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

16. .Geek Faeries 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

17. .Geek Faeries 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"
}
}

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

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

20. .Geek Faeries 2018
Illustrations (3/

21. .Geek Faeries 2018
Exemple : Effet jour : nuit
●
API WebExtensions utilisées
– Windows
– Alarms
Quantum Lights
Extension : Quantum Lights

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

23. .Geek Faeries 2018
Exemple : Container visible
●
API WebExtensions utilisées
– contextualIdentities
– Windows
– Tabs
Extension : Containers Theme

24. .Geek Faeries 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"]
},
});

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

26. .Geek Faeries 2018
Exemple : Thème associé
●
API fetch
●
Extension : Open Weather Map

27. .Geek Faeries 2018
Environnement travail
●
API WebExtensions utilisées
– Thèmes
Extension : Envify

28. .Geek Faeries 2018
Jeux

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

30. .Geek Faeries 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

31. .Geek Faeries 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

32. .Geek Faeries 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

33. .Geek Faeries 2018
Plein écran
screen-saver

34. .Geek Faeries 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

35. .Geek Faeries 2018
Merci
Questions
Christophe Villeneuve
@hellosct1