Le document présente les webextensions de Firefox, notamment leur développement et leur compatibilité avec des API similaires à celles de Chrome. Il décrit les évolutions récentes des API, les améliorations apportées, et les divers aspects de l'interface utilisateur. Des exemples de code et des ressources supplémentaires sont également fournis pour aider au développement d'extensions.

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