SlideShare une entreprise Scribd logo
1  sur  41
Télécharger pour lire hors ligne
11 Novembre 2017
WebExtensionsWebExtensions
It’s now ! C’est maintenant !It’s now ! C’est maintenant !
@hellosct1
@hellosct1@mamot.fr
Christophe Villeneuve
11 Novembre 2017
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 ???Qui ???
ChristopheChristophe
VilleneuveVilleneuve
Contributeur / Réalisation
Contributor / Realization
11 Novembre 2017
Aujourd'hui...Aujourd'hui...
●
Sujet du jour !!!... Pourquoi ?
●
Avant
●
Maintenant
●
Demain
11 Novembre 2017
Sujet du jourSujet du jour
le chamboulementle chamboulement
Rappel : Une extension ? (1/2)Rappel : Une extension ? (1/2)
●
Modules complémentaires au navigateur
●
Amélioration du navigateur
●
Fait partie de Firefox depuis l'origine
Rappel : Une extension ? (2/2)Rappel : Une extension ? (2/2)
●
Les projets Web
→ montrent l’importance des extensions dans Firefox
●
Important de montrer les API sont puissants
– 40 % des utilisateurs ont des extensions
– 32 000 modules complémentaires
– 19 000 développeurs d'extensions
– 15 millions d'utilisateurs mensuels sur Mozilla
Add-ons (AMO)
11 Novembre 2017
Attention aux titres trompeursAttention aux titres trompeurs
Mozilla vaMozilla va
abandonner leabandonner le
support dessupport des
extensionsextensions La fin desLa fin des
extensionsextensions
Mozilla Will KillMozilla Will Kill
Legacy Firefox Add-Legacy Firefox Add-
OnsOns
in Exactly Threein Exactly Three
MonthsMonths
RoadmapRoadmap
●
Firefox 48 : Release stable
– SDK avec extension WebExtensions déjà
disponible
●
Firefox 53 : Conteneurs sécurisés
– Seulement WebExtensions accepté sur
addons.mozilla.org
●
Firefox 57 – 14 novembre
– Uniquement WebExtension pour Firefox
– API du système de fichier
– Barre latérale et autres API d'élément d'interface
utilisateur
– Expériences WebExtension pour créer de
nouvelles API
Firefox 56 : les extensionsFirefox 56 : les extensions
11 Novembre 2017
Les extensions sont mortesLes extensions sont mortes
Vive Les Extensions
Firefox 57 : Les extensionsFirefox 57 : Les extensions
Construction de la technologieConstruction de la technologie
Avant : XUL / XPCOMAvant : 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
Bienvenue aux WebExtensionsBienvenue aux WebExtensions
●
Créer une API robuste
●
Parité avec extensions chrome api
●
Documentation
●
Prise en charge de Firefox pour Android
●
Technologie standard 
CompatibilitéCompatibilité
●
Edge / Opera / Chrome / Firefox
●
Compatible Qtwebkit
Les migrationsLes migrations
(en cours) importantes(en cours) importantes
11 Novembre 2017
Aujourd’hui, c'est...Aujourd’hui, c'est...
●
6069 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
11 Novembre 2017
Interface utilisateur (1/Interface utilisateur (1/
L'utilisation d'une extension s'effectue par...L'utilisation d'une extension s'effectue par...
Page action (bouton barre d'adresse)
Browser action (bouton barre d'outils)
11 Novembre 2017
Interface utilisateur (2/Interface utilisateur (2/
Sidebar (barre latérale)
Context menu items (Elément du
menu contextuel)
11 Novembre 2017
Interface utilisateur (3/Interface utilisateur (3/
Address bar suggestions (Suggestions
de la barre d'adresse)
Notifications (Notifications)
Bundled web pages (Page web
incluses)
11 Novembre 2017
Interface utilisateur (4/Interface utilisateur (4/
Developer tools panels (Panneaux
d'outils de développement)
Options page (Page d'options)
AnatomieAnatomie
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
Confiance aux WebExtensions (1/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
Confiance aux WebExtensions (2/Confiance aux WebExtensions (2/
●
La permission d’hôte
●
Les permissions API
"*://developer.mozilla.org/*"
activeTab
alarms
bookmarks
browsingData
contextMenus
contextualIde
ntities
cookies
downloads
downloads.open
history
identity
idle
management
nativeMessaging
notifications
proxy
sessions
storage
tabs
topSites
webNavigation
webRequest
webRequestBlocking
Confiance aux WebExtensions (3/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
Changements importantsChangements importants
11 Novembre 2017
Extensions → WebExtensions (1/Extensions → WebExtensions (1/
●
Développement / Debug
Firebug > DevTools
11 Novembre 2017
Extensions → WebExtensions (2/Extensions → WebExtensions (2/
●
Synchronisation
– FoxMarks > Bookmark Sync
11 Novembre 2017
Extensions → WebExtensions (3/Extensions → WebExtensions (3/
●
Crash
– Session Manager > Session Restore
– Tab session manager
11 Novembre 2017
Extensions → WebExtensions (4/Extensions → WebExtensions (4/
●
Ajoute une nouvelle option au menu contextuel
●
FaviconizeTab > Tab pinning
●
Redimensionne le favicon
11 Novembre 2017
ExtensionsExtensions → WebExtensions (5/→ WebExtensions (5/
●
Multizilla > Tab browsing
– Ajoute de nombreuses fonctions aux onglets
●
Abonnement des flux
●
Permission
●
Filtrez les erreurs
●
Maintient un evironnement propre
11 Novembre 2017
AutresAutres utilisationsutilisations (1/(1/
●
Recherche d’onglets
– WebExtension : Tree Tabs
●
Utile pour gérer des centaines d'onglets
https://addons.mozilla.org/fr/firefox/addon/tree-tabs
11 Novembre 2017
Autres utilisations (2/Autres utilisations (2/
●
Privacy & sécurity
– Ublock Origin
– Privacy Badger
https://addons.mozilla.org/en-us/firefox/addon/ublock-origin
https://addons.mozilla.org/en-us/firefox/addon/privacy-badger17
11 Novembre 2017
Autres utilisations (3/Autres utilisations (3/
●
Thèmes : module stylus
– https://addons.mozilla.org/en-US/firefox/addon/styl-u
s/
●
Header :
– https://addons.mozilla.org/en-US/firefox/addon/modi
fy-header-value
●
Cookie manager :
– https://addons.mozilla.org/en-us/firefox/addon/a-co
okie-manager
●
Laspass :
– https://addons.mozilla.org/en-US/firefox/addon/las
tpass-password-manager/
●
Gostery :
11 Novembre 2017
Maintenant utilisons lesMaintenant utilisons les
WebExtensionsWebExtensions
11 Novembre 2017
Tester les WebExtensionsTester les WebExtensions
●
Firefox 57 Beta
→ Jusqu’au 14 novembre 2017
https://beta.mozilla.org
WebExtensions : portage (1/2)WebExtensions : portage (1/2)
●
Les WebExtensions déjà disponibles
– https://addons.mozilla.org/en-US/firefox/tag/firefox57
●
Les WebExtensions les plus populaires (en cours)
– Are we WebExtensions yet ?
●
http://arewewebextensionsyet.com/
●
Les WebExtensions en cours
– Discourse Mozilla :
●
https://discourse.mozilla.org/c/add-ons
WebExtensions : portage (2/2)WebExtensions : portage (2/2)
●
Porter une extension Google Chrome
– Utilisation facilitée
●
https://www.extensiontest.com/
●
Porter une ancienne extension Firefox
– Extension héritée (Legacy)
RessourcesRessources
●
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
11 Novembre 2017
MerciMerci
Questions
Christophe Villeneuve
@hellosct1

Contenu connexe

Tendances

Les WebExtensions et Firefox - JDLL 2017
Les WebExtensions et Firefox - JDLL 2017Les WebExtensions et Firefox - JDLL 2017
Les WebExtensions et Firefox - JDLL 2017Christophe Villeneuve
 
Utilitaires, petits mais ... costaud
Utilitaires, petits mais ... costaudUtilitaires, petits mais ... costaud
Utilitaires, petits mais ... costaudChristophe Catarina
 
64 conneries que font les référenceurs avec WordPress
64 conneries que font les référenceurs avec WordPress64 conneries que font les référenceurs avec WordPress
64 conneries que font les référenceurs avec WordPressAurélien Denis
 
Introduction au langage de programmation Lua / Digital apéro [03/12/2014]
Introduction au langage de programmation Lua / Digital apéro [03/12/2014]Introduction au langage de programmation Lua / Digital apéro [03/12/2014]
Introduction au langage de programmation Lua / Digital apéro [03/12/2014]Silicon Comté
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webLaurent Duveau
 
Solutions multilingues pour WordPress
Solutions multilingues pour WordPressSolutions multilingues pour WordPress
Solutions multilingues pour WordPressVincent Ghilione
 
Bien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPressBien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPressAurélien Denis
 
Développer une application Chrome avec AngularJs (Google Développers Group Sa...
Développer une application Chrome avec AngularJs (Google Développers Group Sa...Développer une application Chrome avec AngularJs (Google Développers Group Sa...
Développer une application Chrome avec AngularJs (Google Développers Group Sa...DEFO KUATE Landry
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webLaurent Duveau
 
Les extensions Firefox et Google Chrome pour naviguer efficacement
Les extensions Firefox et Google Chrome pour naviguer efficacementLes extensions Firefox et Google Chrome pour naviguer efficacement
Les extensions Firefox et Google Chrome pour naviguer efficacementURFIST de Paris
 
Make (et make file) dans le cadre de wordpress
Make (et make file) dans le cadre de wordpressMake (et make file) dans le cadre de wordpress
Make (et make file) dans le cadre de wordpressGuillaume Richard
 
kukoc
kukockukoc
kukocsef20
 
Introduction to Rust in Production - Servo Mozilla project (Slides)
Introduction to Rust in Production - Servo Mozilla project (Slides)Introduction to Rust in Production - Servo Mozilla project (Slides)
Introduction to Rust in Production - Servo Mozilla project (Slides)Quentin Frémeaux
 

Tendances (19)

Les WebExtensions et Firefox - JDLL 2017
Les WebExtensions et Firefox - JDLL 2017Les WebExtensions et Firefox - JDLL 2017
Les WebExtensions et Firefox - JDLL 2017
 
Firefox et les WebExtensions
Firefox et les WebExtensionsFirefox et les WebExtensions
Firefox et les WebExtensions
 
Utilitaires, petits mais ... costaud
Utilitaires, petits mais ... costaudUtilitaires, petits mais ... costaud
Utilitaires, petits mais ... costaud
 
Firefox extensions vpdf
Firefox extensions vpdfFirefox extensions vpdf
Firefox extensions vpdf
 
64 conneries que font les référenceurs avec WordPress
64 conneries que font les référenceurs avec WordPress64 conneries que font les référenceurs avec WordPress
64 conneries que font les référenceurs avec WordPress
 
Introduction au langage de programmation Lua / Digital apéro [03/12/2014]
Introduction au langage de programmation Lua / Digital apéro [03/12/2014]Introduction au langage de programmation Lua / Digital apéro [03/12/2014]
Introduction au langage de programmation Lua / Digital apéro [03/12/2014]
 
Utiliser le support firefox - SUMO
Utiliser le support firefox - SUMOUtiliser le support firefox - SUMO
Utiliser le support firefox - SUMO
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs web
 
Solutions multilingues pour WordPress
Solutions multilingues pour WordPressSolutions multilingues pour WordPress
Solutions multilingues pour WordPress
 
Le web en http 2
Le web en http 2Le web en http 2
Le web en http 2
 
Bien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPressBien débuter dans la conception d'un thème WordPress
Bien débuter dans la conception d'un thème WordPress
 
Navigateurs alternatifs de Comodo
Navigateurs alternatifs de ComodoNavigateurs alternatifs de Comodo
Navigateurs alternatifs de Comodo
 
Développer une application Chrome avec AngularJs (Google Développers Group Sa...
Développer une application Chrome avec AngularJs (Google Développers Group Sa...Développer une application Chrome avec AngularJs (Google Développers Group Sa...
Développer une application Chrome avec AngularJs (Google Développers Group Sa...
 
Microsoft Edge pour les développeurs web
Microsoft Edge pour les développeurs webMicrosoft Edge pour les développeurs web
Microsoft Edge pour les développeurs web
 
Les extensions Firefox et Google Chrome pour naviguer efficacement
Les extensions Firefox et Google Chrome pour naviguer efficacementLes extensions Firefox et Google Chrome pour naviguer efficacement
Les extensions Firefox et Google Chrome pour naviguer efficacement
 
Make (et make file) dans le cadre de wordpress
Make (et make file) dans le cadre de wordpressMake (et make file) dans le cadre de wordpress
Make (et make file) dans le cadre de wordpress
 
kukoc
kukockukoc
kukoc
 
Firefox comme navigateur alternatif
Firefox comme navigateur alternatifFirefox comme navigateur alternatif
Firefox comme navigateur alternatif
 
Introduction to Rust in Production - Servo Mozilla project (Slides)
Introduction to Rust in Production - Servo Mozilla project (Slides)Introduction to Rust in Production - Servo Mozilla project (Slides)
Introduction to Rust in Production - Servo Mozilla project (Slides)
 

Similaire à WebExtensions - it's now / c'est maintenant

Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousjwajsberg
 
Rmll2010 admin sys-panelgzw-fr
Rmll2010 admin sys-panelgzw-frRmll2010 admin sys-panelgzw-fr
Rmll2010 admin sys-panelgzw-frGaëtan Trellu
 
Automatisation des gestionnaires de contenus (CMS)
Automatisation des gestionnaires de contenus (CMS)Automatisation des gestionnaires de contenus (CMS)
Automatisation des gestionnaires de contenus (CMS)Christophe Villeneuve
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologiewyggio
 
La boîte à outils de développements dans Firefox
La boîte à outils de développements dans FirefoxLa boîte à outils de développements dans Firefox
La boîte à outils de développements dans FirefoxChristophe Villeneuve
 
Retour AFUP du forumphp 2017
Retour AFUP du forumphp 2017Retour AFUP du forumphp 2017
Retour AFUP du forumphp 2017AFUP_Limoges
 
la boite à outils de développements dans firefox devtools
la boite à outils de développements dans firefox devtoolsla boite à outils de développements dans firefox devtools
la boite à outils de développements dans firefox devtoolsChristophe Villeneuve
 
Utiliser et ameliorer firefox avec les webextensions
Utiliser et ameliorer firefox avec les webextensionsUtiliser et ameliorer firefox avec les webextensions
Utiliser et ameliorer firefox avec les webextensionsChristophe Villeneuve
 
Liferay Portail Web Enterprise Plateforme Collaborative
Liferay Portail Web Enterprise Plateforme CollaborativeLiferay Portail Web Enterprise Plateforme Collaborative
Liferay Portail Web Enterprise Plateforme CollaborativeSavoir-faire Linux
 
Embarquer le web dans un smartphone Firefox OS - RMLL 2015
Embarquer le web dans un smartphone Firefox OS - RMLL 2015Embarquer le web dans un smartphone Firefox OS - RMLL 2015
Embarquer le web dans un smartphone Firefox OS - RMLL 2015Christophe Villeneuve
 
Tester et configurer vos profils avec les containers
Tester et configurer vos profils avec les containersTester et configurer vos profils avec les containers
Tester et configurer vos profils avec les containersChristophe Villeneuve
 
Api les intefaces du cloud computing
Api les intefaces du cloud computingApi les intefaces du cloud computing
Api les intefaces du cloud computingChristophe 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
 
Laurent Duveau: Microsoft Edge pour les développeurs web
Laurent Duveau: Microsoft Edge pour les développeurs webLaurent Duveau: Microsoft Edge pour les développeurs web
Laurent Duveau: Microsoft Edge pour les développeurs webMSDEVMTL
 
Conférence AFUP 20minutes.Fr
Conférence AFUP 20minutes.FrConférence AFUP 20minutes.Fr
Conférence AFUP 20minutes.FrOxalide
 
Conference drupal 8 au Forum PHP 2013 à Paris
Conference drupal 8 au Forum PHP 2013 à ParisConference drupal 8 au Forum PHP 2013 à Paris
Conference drupal 8 au Forum PHP 2013 à ParisChipway
 
Paris Container Day 2016 : Conteneurisation de l’usine logicielle (Retour d'e...
Paris Container Day 2016 : Conteneurisation de l’usine logicielle (Retour d'e...Paris Container Day 2016 : Conteneurisation de l’usine logicielle (Retour d'e...
Paris Container Day 2016 : Conteneurisation de l’usine logicielle (Retour d'e...Publicis Sapient Engineering
 

Similaire à WebExtensions - it's now / c'est maintenant (20)

Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tous
 
Rmll2010 admin sys-panelgzw-fr
Rmll2010 admin sys-panelgzw-frRmll2010 admin sys-panelgzw-fr
Rmll2010 admin sys-panelgzw-fr
 
Automatisation des gestionnaires de contenus (CMS)
Automatisation des gestionnaires de contenus (CMS)Automatisation des gestionnaires de contenus (CMS)
Automatisation des gestionnaires de contenus (CMS)
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
 
La boîte à outils de développements dans Firefox
La boîte à outils de développements dans FirefoxLa boîte à outils de développements dans Firefox
La boîte à outils de développements dans Firefox
 
Retour AFUP du forumphp 2017
Retour AFUP du forumphp 2017Retour AFUP du forumphp 2017
Retour AFUP du forumphp 2017
 
la boite à outils de développements dans firefox devtools
la boite à outils de développements dans firefox devtoolsla boite à outils de développements dans firefox devtools
la boite à outils de développements dans firefox devtools
 
Pas possible en drupal, c'est faux
Pas possible en drupal, c'est fauxPas possible en drupal, c'est faux
Pas possible en drupal, c'est faux
 
Automatiser l'ère post-dev
Automatiser l'ère post-devAutomatiser l'ère post-dev
Automatiser l'ère post-dev
 
Utiliser et ameliorer firefox avec les webextensions
Utiliser et ameliorer firefox avec les webextensionsUtiliser et ameliorer firefox avec les webextensions
Utiliser et ameliorer firefox avec les webextensions
 
Liferay Portail Web Enterprise Plateforme Collaborative
Liferay Portail Web Enterprise Plateforme CollaborativeLiferay Portail Web Enterprise Plateforme Collaborative
Liferay Portail Web Enterprise Plateforme Collaborative
 
Compte rendu Blend Web Mix 2015
Compte rendu Blend Web Mix 2015Compte rendu Blend Web Mix 2015
Compte rendu Blend Web Mix 2015
 
Embarquer le web dans un smartphone Firefox OS - RMLL 2015
Embarquer le web dans un smartphone Firefox OS - RMLL 2015Embarquer le web dans un smartphone Firefox OS - RMLL 2015
Embarquer le web dans un smartphone Firefox OS - RMLL 2015
 
Tester et configurer vos profils avec les containers
Tester et configurer vos profils avec les containersTester et configurer vos profils avec les containers
Tester et configurer vos profils avec les containers
 
Api les intefaces du cloud computing
Api les intefaces du cloud computingApi les intefaces du cloud computing
Api les intefaces du cloud computing
 
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 ?
 
Laurent Duveau: Microsoft Edge pour les développeurs web
Laurent Duveau: Microsoft Edge pour les développeurs webLaurent Duveau: Microsoft Edge pour les développeurs web
Laurent Duveau: Microsoft Edge pour les développeurs web
 
Conférence AFUP 20minutes.Fr
Conférence AFUP 20minutes.FrConférence AFUP 20minutes.Fr
Conférence AFUP 20minutes.Fr
 
Conference drupal 8 au Forum PHP 2013 à Paris
Conference drupal 8 au Forum PHP 2013 à ParisConference drupal 8 au Forum PHP 2013 à Paris
Conference drupal 8 au Forum PHP 2013 à Paris
 
Paris Container Day 2016 : Conteneurisation de l’usine logicielle (Retour d'e...
Paris Container Day 2016 : Conteneurisation de l’usine logicielle (Retour d'e...Paris Container Day 2016 : Conteneurisation de l’usine logicielle (Retour d'e...
Paris Container Day 2016 : Conteneurisation de l’usine logicielle (Retour d'e...
 

Plus de 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 webChristophe 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 gagnanteChristophe 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 designChristophe Villeneuve
 
Mozilla french speaking community activites
Mozilla french speaking community activitesMozilla french speaking community activites
Mozilla french speaking community activitesChristophe Villeneuve
 
Monitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et MicrosoftMonitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et MicrosoftChristophe Villeneuve
 
Le futur de l'authentification webAuthn
Le futur de l'authentification webAuthnLe futur de l'authentification webAuthn
Le futur de l'authentification webAuthnChristophe Villeneuve
 
Tests d'accessibilite par la pratique
Tests d'accessibilite par la pratiqueTests d'accessibilite par la pratique
Tests d'accessibilite par la pratiqueChristophe 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 applicationsChristophe 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
 
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 réalité mélangée de A a Z
la réalité mélangée de A a Zla réalité mélangée de A a Z
la réalité mélangée de A a Z
 

WebExtensions - it's now / c'est maintenant

  • 1. 11 Novembre 2017 WebExtensionsWebExtensions It’s now ! C’est maintenant !It’s now ! C’est maintenant ! @hellosct1 @hellosct1@mamot.fr Christophe Villeneuve
  • 2. 11 Novembre 2017 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 ???Qui ??? ChristopheChristophe VilleneuveVilleneuve Contributeur / Réalisation Contributor / Realization
  • 3. 11 Novembre 2017 Aujourd'hui...Aujourd'hui... ● Sujet du jour !!!... Pourquoi ? ● Avant ● Maintenant ● Demain
  • 4. 11 Novembre 2017 Sujet du jourSujet du jour le chamboulementle chamboulement
  • 5. Rappel : Une extension ? (1/2)Rappel : Une extension ? (1/2) ● Modules complémentaires au navigateur ● Amélioration du navigateur ● Fait partie de Firefox depuis l'origine
  • 6. Rappel : Une extension ? (2/2)Rappel : Une extension ? (2/2) ● Les projets Web → montrent l’importance des extensions dans Firefox ● Important de montrer les API sont puissants – 40 % des utilisateurs ont des extensions – 32 000 modules complémentaires – 19 000 développeurs d'extensions – 15 millions d'utilisateurs mensuels sur Mozilla Add-ons (AMO)
  • 7. 11 Novembre 2017 Attention aux titres trompeursAttention aux titres trompeurs Mozilla vaMozilla va abandonner leabandonner le support dessupport des extensionsextensions La fin desLa fin des extensionsextensions Mozilla Will KillMozilla Will Kill Legacy Firefox Add-Legacy Firefox Add- OnsOns in Exactly Threein Exactly Three MonthsMonths
  • 8. RoadmapRoadmap ● Firefox 48 : Release stable – SDK avec extension WebExtensions déjà disponible ● Firefox 53 : Conteneurs sécurisés – Seulement WebExtensions accepté sur addons.mozilla.org ● Firefox 57 – 14 novembre – Uniquement WebExtension pour Firefox – API du système de fichier – Barre latérale et autres API d'élément d'interface utilisateur – Expériences WebExtension pour créer de nouvelles API
  • 9. Firefox 56 : les extensionsFirefox 56 : les extensions
  • 10. 11 Novembre 2017 Les extensions sont mortesLes extensions sont mortes Vive Les Extensions
  • 11. Firefox 57 : Les extensionsFirefox 57 : Les extensions
  • 12. Construction de la technologieConstruction de la technologie
  • 13. Avant : XUL / XPCOMAvant : 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
  • 14. Bienvenue aux WebExtensionsBienvenue aux WebExtensions ● Créer une API robuste ● Parité avec extensions chrome api ● Documentation ● Prise en charge de Firefox pour Android ● Technologie standard 
  • 15. CompatibilitéCompatibilité ● Edge / Opera / Chrome / Firefox ● Compatible Qtwebkit
  • 16. Les migrationsLes migrations (en cours) importantes(en cours) importantes
  • 17. 11 Novembre 2017 Aujourd’hui, c'est...Aujourd’hui, c'est... ● 6069 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
  • 18. 11 Novembre 2017 Interface utilisateur (1/Interface utilisateur (1/ L'utilisation d'une extension s'effectue par...L'utilisation d'une extension s'effectue par... Page action (bouton barre d'adresse) Browser action (bouton barre d'outils)
  • 19. 11 Novembre 2017 Interface utilisateur (2/Interface utilisateur (2/ Sidebar (barre latérale) Context menu items (Elément du menu contextuel)
  • 20. 11 Novembre 2017 Interface utilisateur (3/Interface utilisateur (3/ Address bar suggestions (Suggestions de la barre d'adresse) Notifications (Notifications) Bundled web pages (Page web incluses)
  • 21. 11 Novembre 2017 Interface utilisateur (4/Interface utilisateur (4/ Developer tools panels (Panneaux d'outils de développement) Options page (Page d'options)
  • 22. AnatomieAnatomie 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
  • 23. Confiance aux WebExtensions (1/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
  • 24. Confiance aux WebExtensions (2/Confiance aux WebExtensions (2/ ● La permission d’hôte ● Les permissions API "*://developer.mozilla.org/*" activeTab alarms bookmarks browsingData contextMenus contextualIde ntities cookies downloads downloads.open history identity idle management nativeMessaging notifications proxy sessions storage tabs topSites webNavigation webRequest webRequestBlocking
  • 25.
  • 26. Confiance aux WebExtensions (3/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
  • 28. 11 Novembre 2017 Extensions → WebExtensions (1/Extensions → WebExtensions (1/ ● Développement / Debug Firebug > DevTools
  • 29. 11 Novembre 2017 Extensions → WebExtensions (2/Extensions → WebExtensions (2/ ● Synchronisation – FoxMarks > Bookmark Sync
  • 30. 11 Novembre 2017 Extensions → WebExtensions (3/Extensions → WebExtensions (3/ ● Crash – Session Manager > Session Restore – Tab session manager
  • 31. 11 Novembre 2017 Extensions → WebExtensions (4/Extensions → WebExtensions (4/ ● Ajoute une nouvelle option au menu contextuel ● FaviconizeTab > Tab pinning ● Redimensionne le favicon
  • 32. 11 Novembre 2017 ExtensionsExtensions → WebExtensions (5/→ WebExtensions (5/ ● Multizilla > Tab browsing – Ajoute de nombreuses fonctions aux onglets ● Abonnement des flux ● Permission ● Filtrez les erreurs ● Maintient un evironnement propre
  • 33. 11 Novembre 2017 AutresAutres utilisationsutilisations (1/(1/ ● Recherche d’onglets – WebExtension : Tree Tabs ● Utile pour gérer des centaines d'onglets https://addons.mozilla.org/fr/firefox/addon/tree-tabs
  • 34. 11 Novembre 2017 Autres utilisations (2/Autres utilisations (2/ ● Privacy & sécurity – Ublock Origin – Privacy Badger https://addons.mozilla.org/en-us/firefox/addon/ublock-origin https://addons.mozilla.org/en-us/firefox/addon/privacy-badger17
  • 35. 11 Novembre 2017 Autres utilisations (3/Autres utilisations (3/ ● Thèmes : module stylus – https://addons.mozilla.org/en-US/firefox/addon/styl-u s/ ● Header : – https://addons.mozilla.org/en-US/firefox/addon/modi fy-header-value ● Cookie manager : – https://addons.mozilla.org/en-us/firefox/addon/a-co okie-manager ● Laspass : – https://addons.mozilla.org/en-US/firefox/addon/las tpass-password-manager/ ● Gostery :
  • 36. 11 Novembre 2017 Maintenant utilisons lesMaintenant utilisons les WebExtensionsWebExtensions
  • 37. 11 Novembre 2017 Tester les WebExtensionsTester les WebExtensions ● Firefox 57 Beta → Jusqu’au 14 novembre 2017 https://beta.mozilla.org
  • 38. WebExtensions : portage (1/2)WebExtensions : portage (1/2) ● Les WebExtensions déjà disponibles – https://addons.mozilla.org/en-US/firefox/tag/firefox57 ● Les WebExtensions les plus populaires (en cours) – Are we WebExtensions yet ? ● http://arewewebextensionsyet.com/ ● Les WebExtensions en cours – Discourse Mozilla : ● https://discourse.mozilla.org/c/add-ons
  • 39. WebExtensions : portage (2/2)WebExtensions : portage (2/2) ● Porter une extension Google Chrome – Utilisation facilitée ● https://www.extensiontest.com/ ● Porter une ancienne extension Firefox – Extension héritée (Legacy)
  • 40. RessourcesRessources ● 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