SlideShare une entreprise Scribd logo
La face cachée des WebExtensions
@hellosct1
@hellosct1@mamot.fr
Christophe Villeneuve
9 juillet 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
.RMLL 2018 -
Aujourd'hui...
●
La situation
●
APIs
●
Les possibilités
●
Outils
●
...
.RMLL 2018 -
Firefox ‘Quantum’ 57
.RMLL 2018 -
Extension → WebExtension (1/
●
Développement / Debug
Firebug > DevTools
●
Synchronisation
FoxMarks > Bookmark Sync
.RMLL 2018 -
Extension → WebExtension (2/
●
Crash
– Session Manager > Session Restore
– Tab session manager
.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
– ...
.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
.RMLL 2018 -
Firefox 60 (ESR)
Firefox 61 +
.RMLL 2018 -
Firefox 60
●
Support ESR
●
WebExtensions
●
Support standard WebAuthn
– Clef USB physique authentification sur le web
Le développement
.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
.RMLL 2018 -
Les WebExtensions
●
Créer une API robuste
●
Parité avec extensions chrome api
●
Documentation
●
Prise en charge de Firefox pour Android
●
Technologie standard 
.RMLL 2018 -
Compatibilité
●
Edge / Opera / Chrome / Firefox
●
Compatible Qtwebkit
.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)
.RMLL 2018 -
Interface utilisateur (2/
Sidebar (barre latérale)
Context menu items (Elément du
menu contextuel)
.RMLL 2018 -
Interface utilisateur (3/
Address bar suggestions (Suggestions
de la barre d'adresse)
Notifications (Notifications)
Bundled web pages (Page web
incluses)
.RMLL 2018 -
Interface utilisateur (4/
Developer tools panels (Panneaux
d'outils de développement)
Options page (Page d'options)
.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
.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"]
}
]
}
.RMLL 2018 -
APIs Javascript
.RMLL 2018 -
PageAction API
https://addons.mozilla.org/fr/firefox/addon/share-backported
.RMLL 2018 -
Communiquer entre les extensions (1/
.RMLL 2018 -
Communiquer entre les extensions (2/
●
Devtools panels
.RMLL 2018 -
OAUTH (1/
.RMLL 2018 -
OAUTH (2/
.RMLL 2018 -
Message Natif (1/
https://developer.mozilla.org/fr/Add-ons/WebExtensions/Native_messaging
Ping Pong
.RMLL 2018 -
Message Natif (2/
●
kde_connect
●
keePassXC-browser
●
Midi-input-provider
●
withexeditor
●
web2mp3
https://addons.mozilla.org
.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
.RMLL 2018 -
API Tabs
https://addons.mozilla.org/fr/firefox/addon/tab-invaders
.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'
.RMLL 2018 -
Thème
.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
.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"
}
}
.RMLL 2018 -
Illustrations (1/
●
Accentcolor
– Couleur d’arrière plan
"theme": {
"colors": {
"accentcolor": "red",
"textcolor": "white"
}
}
.RMLL 2018 -
Illustrations (2/
●
Accentcolor
– Couleur d’arrière plan
●
Popup
●
textcolor
"theme": {
"colors": {
"accentcolor": "black",
"textcolor": "white",
"popup": "red"
}
}
.RMLL 2018 -
Illustrations (3/
.RMLL 2018 -
Exemple : Effet jour : nuit
●
API WebExtensions utilisées
– Windows
– Alarms
Quantum Lights
Extension : Quantum Lights
.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
.RMLL 2018 -
Exemple : Container visible
●
API WebExtensions utilisées
– contextualIdentities
– Windows
– Tabs
Extension : Containers Theme
.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"]
},
});
.RMLL 2018 -
Thèmes dynamiques animé
●
API WebExtensions utilisées
– Thèmes
●
RequestAnimationFrame()
●
AVG au format Animations
https://github.com/hellosct1/theme-animation
.RMLL 2018 -
Exemple : Thème associé
●
API fetch
●
Extension : Open Weather Map
.RMLL 2018 -
Environnement travail
●
API WebExtensions utilisées
– Thèmes
Extension : Envify
.RMLL 2018 -
Sécurité en visuelle
●
Thème HTTP / HTTPS
https://github.com/nt1m/theming-rules
.RMLL 2018 -
Confiance ?
.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
.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
.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
outils
.RMLL 2018 -
Debugging
.RMLL 2018 -
Portage d'une extension Google Chrome
https://developer.mozilla.org/fr/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension
.RMLL 2018 -
Portage d'une ancienne extension
https://developer.mozilla.org/fr/Add-ons/WebExtensions/Portage_d_une_extension_Firefox_heritee
.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
Merci
@hellosct1
@hellosct1@mamot.fr

Contenu connexe

Similaire à La face cachee des web extensions

Le portage des WebExtensions
Le portage des WebExtensionsLe portage des WebExtensions
Le portage des WebExtensions
Christophe Villeneuve
 
Les écrans animés dans les navigateurs
Les écrans animés dans les navigateursLes écrans animés dans les navigateurs
Les écrans animés dans les navigateurs
Christophe Villeneuve
 
Firefox comme navigateur alternatif
Firefox comme navigateur alternatifFirefox comme navigateur alternatif
Firefox comme navigateur alternatif
Christophe Villeneuve
 
Retour d'expérience technique Go, gRPC, Kubernetes
Retour d'expérience technique Go, gRPC, KubernetesRetour d'expérience technique Go, gRPC, Kubernetes
Retour d'expérience technique Go, gRPC, Kubernetes
Vincent Composieux
 
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
ekino
 
Les web extensions
Les web extensionsLes web extensions
Les web extensions
Christophe Villeneuve
 
TYPO3, le CMS de référence au gouvernement québécois
TYPO3, le CMS de référence au gouvernement québécoisTYPO3, le CMS de référence au gouvernement québécois
TYPO3, le CMS de référence au gouvernement québécois
Yannick Pavard
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applications
goldoraf
 
Industrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec DrupalIndustrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec Drupal
LINAGORA
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
Houda TOUKABRI
 
Introduction à Drupal 8
Introduction à Drupal 8Introduction à Drupal 8
Introduction à Drupal 8
Core-Techs
 
Serveur nomade dans l'nternet des Objets
Serveur nomade dans l'nternet des ObjetsServeur nomade dans l'nternet des Objets
Serveur nomade dans l'nternet des Objets
Christophe Villeneuve
 
Compte rendu Blend Web Mix 2015
Compte rendu Blend Web Mix 2015Compte rendu Blend Web Mix 2015
Compte rendu Blend Web Mix 2015
SQLI DIGITAL EXPERIENCE
 
TypeScript for dummies
TypeScript for dummiesTypeScript for dummies
TypeScript for dummies
Microsoft
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
Catalogue PFE 2019
Catalogue PFE 2019Catalogue PFE 2019
Catalogue PFE 2019
NeoXam Tunisia
 
Paris Web
Paris WebParis Web
Paris Web
cyrildoussin
 
Evolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEOEvolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEO
Dimitri Brunel
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
Oxalide
 

Similaire à La face cachee des web extensions (20)

Le portage des WebExtensions
Le portage des WebExtensionsLe portage des WebExtensions
Le portage des WebExtensions
 
Les écrans animés dans les navigateurs
Les écrans animés dans les navigateursLes écrans animés dans les navigateurs
Les écrans animés dans les navigateurs
 
Firefox comme navigateur alternatif
Firefox comme navigateur alternatifFirefox comme navigateur alternatif
Firefox comme navigateur alternatif
 
Retour d'expérience technique Go, gRPC, Kubernetes
Retour d'expérience technique Go, gRPC, KubernetesRetour d'expérience technique Go, gRPC, Kubernetes
Retour d'expérience technique Go, gRPC, Kubernetes
 
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
 
Les web extensions
Les web extensionsLes web extensions
Les web extensions
 
TYPO3, le CMS de référence au gouvernement québécois
TYPO3, le CMS de référence au gouvernement québécoisTYPO3, le CMS de référence au gouvernement québécois
TYPO3, le CMS de référence au gouvernement québécois
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applications
 
Industrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec DrupalIndustrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec Drupal
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
 
Introduction à Drupal 8
Introduction à Drupal 8Introduction à Drupal 8
Introduction à Drupal 8
 
Serveur nomade dans l'nternet des Objets
Serveur nomade dans l'nternet des ObjetsServeur nomade dans l'nternet des Objets
Serveur nomade dans l'nternet des Objets
 
Compte rendu Blend Web Mix 2015
Compte rendu Blend Web Mix 2015Compte rendu Blend Web Mix 2015
Compte rendu Blend Web Mix 2015
 
TypeScript for dummies
TypeScript for dummiesTypeScript for dummies
TypeScript for dummies
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Catalogue PFE 2019
Catalogue PFE 2019Catalogue PFE 2019
Catalogue PFE 2019
 
Paris Web
Paris WebParis Web
Paris Web
 
Evolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEOEvolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEO
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
 

Plus de Christophe Villeneuve

MariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQLMariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQL
Christophe Villeneuve
 
pister les pisteurs
pister les pisteurspister les pisteurs
pister les pisteurs
Christophe Villeneuve
 
controler vos donnees éthiques dans le web
controler vos donnees éthiques dans le webcontroler vos donnees éthiques dans le web
controler vos donnees éthiques dans le web
Christophe Villeneuve
 
Infrastructure as code drupal
Infrastructure as code drupalInfrastructure as code drupal
Infrastructure as code drupal
Christophe Villeneuve
 
Mariadb une base de données NewSQL
Mariadb une base de données NewSQLMariadb une base de données NewSQL
Mariadb une base de données NewSQL
Christophe Villeneuve
 
Open Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnanteOpen Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnante
Christophe Villeneuve
 
Pentest bus pirate
Pentest bus piratePentest bus pirate
Pentest bus pirate
Christophe Villeneuve
 
Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?
Christophe Villeneuve
 
La sécurité applicative par le design
La sécurité applicative par le designLa sécurité applicative par le design
La sécurité applicative par le design
Christophe Villeneuve
 
Foxfooding semaine 3
Foxfooding semaine 3Foxfooding semaine 3
Foxfooding semaine 3
Christophe Villeneuve
 
Foxfooding
FoxfoodingFoxfooding
Accessibilite web wcag rgaa
Accessibilite web wcag rgaaAccessibilite web wcag rgaa
Accessibilite web wcag rgaa
Christophe Villeneuve
 
Mozilla french speaking community activites
Mozilla french speaking community activitesMozilla french speaking community activites
Mozilla french speaking community activites
Christophe Villeneuve
 
Monitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et MicrosoftMonitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et Microsoft
Christophe Villeneuve
 
Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?
Christophe Villeneuve
 
Le futur de l'authentification webAuthn
Le futur de l'authentification webAuthnLe futur de l'authentification webAuthn
Le futur de l'authentification webAuthn
Christophe Villeneuve
 
Send large files with addons
Send large files with addonsSend large files with addons
Send large files with addons
Christophe Villeneuve
 
Tests d'accessibilite par la pratique
Tests d'accessibilite par la pratiqueTests d'accessibilite par la pratique
Tests d'accessibilite par la pratique
Christophe Villeneuve
 
Donnez la voix aux machines
Donnez la voix aux machinesDonnez la voix aux machines
Donnez la voix aux machines
Christophe Villeneuve
 
La réalité mélangée dans vos applications
La réalité mélangée dans vos applicationsLa réalité mélangée dans vos applications
La réalité mélangée dans vos applications
Christophe Villeneuve
 

Plus de Christophe Villeneuve (20)

MariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQLMariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQL
 
pister les pisteurs
pister les pisteurspister les pisteurs
pister les pisteurs
 
controler vos donnees éthiques dans le web
controler vos donnees éthiques dans le webcontroler vos donnees éthiques dans le web
controler vos donnees éthiques dans le web
 
Infrastructure as code drupal
Infrastructure as code drupalInfrastructure as code drupal
Infrastructure as code drupal
 
Mariadb une base de données NewSQL
Mariadb une base de données NewSQLMariadb une base de données NewSQL
Mariadb une base de données NewSQL
 
Open Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnanteOpen Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnante
 
Pentest bus pirate
Pentest bus piratePentest bus pirate
Pentest bus pirate
 
Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?
 
La sécurité applicative par le design
La sécurité applicative par le designLa sécurité applicative par le design
La sécurité applicative par le design
 
Foxfooding semaine 3
Foxfooding semaine 3Foxfooding semaine 3
Foxfooding semaine 3
 
Foxfooding
FoxfoodingFoxfooding
Foxfooding
 
Accessibilite web wcag rgaa
Accessibilite web wcag rgaaAccessibilite web wcag rgaa
Accessibilite web wcag rgaa
 
Mozilla french speaking community activites
Mozilla french speaking community activitesMozilla french speaking community activites
Mozilla french speaking community activites
 
Monitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et MicrosoftMonitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et Microsoft
 
Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?
 
Le futur de l'authentification webAuthn
Le futur de l'authentification webAuthnLe futur de l'authentification webAuthn
Le futur de l'authentification webAuthn
 
Send large files with addons
Send large files with addonsSend large files with addons
Send large files with addons
 
Tests d'accessibilite par la pratique
Tests d'accessibilite par la pratiqueTests d'accessibilite par la pratique
Tests d'accessibilite par la pratique
 
Donnez la voix aux machines
Donnez la voix aux machinesDonnez la voix aux machines
Donnez la voix aux machines
 
La réalité mélangée dans vos applications
La réalité mélangée dans vos applicationsLa réalité mélangée dans vos applications
La réalité mélangée dans vos applications
 

La face cachee des web extensions

  • 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
  • 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
  • 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'
  • 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" } }
  • 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
  • 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
  • 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