SlideShare une entreprise Scribd logo
Introduction
aux
WebExtensions
@hellosct1
@hellosct1@mamot.fr
Meetup le 16 octobre 2017
Christophe Villeneuve
.
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
.
Aujourd'hui...
●
Deadline… J - 30
●
Maintenant
●
Réalisation / Production
Introduction webextensions
.
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)
●
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)
.
Roadmap
●
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 extensions
Les Extensions
Sont Mortes
Vive Les Extensions
.
Firefox 57 : Les extensions
Endroits disponibles dans Firefox
.
Interface utilisateur (1/
L'utilisation d'une extension s'effectue par...
Page action (bouton barre d'adresse)
Browser action (bouton barre d'outils)
.
Interface utilisateur (2/
Sidebar (barre latérale)
Context menu items (Elément du
menu contextuel)
.
Interface utilisateur (3/
Address bar suggestions (Suggestions
de la barre d'adresse)
Notifications (Notifications)
Bundled web pages (Page web
incluses)
.
Interface utilisateur (4/
Developer tools panels (Panneaux
d'outils de développement)
Options page (Page d'options)
Technologies
.
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
.
Les WebExtensions
●
Créer une API robuste
●
Parité avec extensions chrome api
●
Documentation
●
Prise en charge de Firefox pour Android
●
Technologie standard 
.
Compatibilité
●
Edge / Opera / Chrome / Firefox
●
Compatible Qtwebkit
.
Actuellement, c'est...
●
5180 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
Demo : Screen Saver
https://addons.mozilla.org/fr/firefox/addon/screen-saver/
.
Installation temporaire (1/2)
●
Firefox beta
– https://beta.mozilla.org
●
Firefox Nightly
– https://nightly.mozfr.org/
Actuellement
57
Actuellement
58
.
Installation temporaire (2/2)
●
about:debugging
.
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
.
Manifest.json (1/2)
●
Carte identité d'une extension
●
Script au format jSON
●
https://developer.mozilla.org/fr/Add-ons/WebExtensions
{
"manifest_version": 2,
"name": "Intro WebExtensions",
"version": "2.0",
"description": "The WebExtensions",
"icons": {
"19": "icons/icon-19.png",
"48": "icons/icon-48.png"
},
}
.
Manifest.json (2/2)
●
Permission
"permissions": [
"*://developer.mozilla.org/*",
"webRequest"
]
activeTab
alarms
bookmarks
browsingData
contextMenus
contextualIdentities
cookies
downloads
downloads.open
history
identity
idle
management
nativeMessaging
notifications
sessions
storage
tabs
topSites
webNavigation
webRequest
webRequestBlocking
.
Manifest : Anatomie (1/7)
●
Script d'arrière plan
●
Indépendant
– Des pages web
– Fenêtres du navigateur
●
Exécuter dès que l'extension
est chargée
●
Permissions nécessaires
Background page
.
Background : Exemple
// manifest.json
"background": {
"scripts": [
"loader.js",
"loader_anim.js",
]
}
Possible
"scripts": ["loader.html"]
.
Manifest : Anatomie (2/7)
●
Scripts de contenu
●
Accéder et manipuler les
pages Web
●
Fonctionnement :
– Charger dans les pages Web
– Exécuter dans le contexte de
page particulière
●
Possible
– Manipuler le DOM de la
page
Background page
Content scripts
.
Content scripts : Exemple (1/2)
// manifest.json
"content_scripts": [{
"matches": [
"*://mozilla.com/*",
"*://votreURL.org/*",
"*://localhost/*"
],
"js": [
"js/injection-demo.js"
]
}],
.
Content scripts : Exemple (2/2)
// manifest.json
"content_scripts": [{
"matches": [
"<all_urls>"
],
"exclude_matches": [
"*://www.mozilla.org/*",
"*://*.votreURL.org/*"
],
"js": [
"background/all-sites.js"
]
}],
.
Manifest : Anatomie (3/7)
●
Action du navigateur
<> des navigateurs
●
Accès par un icône
– Barre d'outils navigateur
●
Possible de définir
– Fenêtre contextuelle
●
Langage :
– HTML / CSS / JS
Background page
Content scripts
Browser action
.
Browser action : Exemple
// manifest.json
"browser_action": {
"default_icon": {
"19": "button/geo-19.png",
"38": "button/geo-38.png"
},
"default_title": "Whereami?",
"default_popup": "popup/popup.html"
}
.
Manifest : Anatomie (4/7)
●
Action dans la barre de
navigation
●
Affiche sur un onglet activé
●
Action pas toujours
nécessaire
Background page
Content scripts
Browser action
Page action
.
Page action : Exemple
// manifest.json
"page_action": {
"browser_style": true,
"default_icon": {
"19": "button/geo-19.png",
"38": "button/geo-38.png"
},
"default_title": "Whereami?",
"default_popup": "popup/popup.html"
}
.
Manifest : Anatomie (5/7)
●
Définir des préférences en
plus
●
Accès par les add-ons du
navigateur
●
Paramètres mémorisés
Background page
Content scripts
Browser action
Page action
Option page
.
Option page : Exemple
// manifest.json
"options_ui": {
"page": "options.html"
},
.
Manifest : Anatomie (6/6)
●
Action barre latérale
●
Action du navigateur
<> des navigateurs
●
Accès par un icône
●
Langage :
– HTML / CSS / JS
Background page
Content scripts
Browser action
Page action
Option page
Slide bar
.
Ressource : Exemple
// manifest.json
"slidebar_action": [
"default_icon" : "icons/bleu.png",
"default_title" : "barre verticale",
"default_panel": "slidebar/panel.html"
],
.
Manifest : Anatomie (7/7)
●
Ressources incluses dans
l'extension (ex : images)
●
Accessible par
– Scripts de contenu
– Scripts de pages
●
Web-accessible
●
Utilisation d'un schéma URI
spécial
Background page
Content scripts
Browser action
Page action
Option page
Slide bar
Ressource
.
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
Questions
Christophe Villeneuve
@hellosct1

Contenu connexe

Similaire à Introduction webextensions

La face cachee des web extensions
La face cachee des web extensionsLa face cachee des web extensions
La face cachee des web extensions
Christophe Villeneuve
 
WebExtensions - it's now / c'est maintenant
WebExtensions - it's now / c'est maintenantWebExtensions - it's now / c'est maintenant
WebExtensions - it's now / c'est maintenant
Christophe Villeneuve
 
WebExtensions : Où en est-on ? /// Where we are ?
WebExtensions : Où en est-on ? /// Where we are ?WebExtensions : Où en est-on ? /// Where we are ?
WebExtensions : Où en est-on ? /// Where we are ?
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
 
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
Christophe Villeneuve
 
Les web extensions
Les web extensionsLes web extensions
Les web extensions
Christophe Villeneuve
 
Les WebExtensions et Firefox - JDLL 2017
Les WebExtensions et Firefox - JDLL 2017Les WebExtensions et Firefox - JDLL 2017
Les WebExtensions et Firefox - JDLL 2017
Christophe Villeneuve
 
Le portage des WebExtensions
Le portage des WebExtensionsLe portage des WebExtensions
Le portage des WebExtensions
Christophe Villeneuve
 
RMLL 2011 - L'accessibilité Web des CMS
RMLL 2011 - L'accessibilité Web des CMSRMLL 2011 - L'accessibilité Web des CMS
RMLL 2011 - L'accessibilité Web des CMS
Yannick Pavard
 
The hidden side of webExtensions
The hidden side of webExtensionsThe hidden side of webExtensions
The hidden side of webExtensions
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
 
Cours projet web collaboratif - partie 1 : Introduction, version 2019
Cours projet web collaboratif - partie 1 : Introduction, version 2019Cours projet web collaboratif - partie 1 : Introduction, version 2019
Cours projet web collaboratif - partie 1 : Introduction, version 2019
Eric Giraudin
 
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
Christophe Villeneuve
 
Introduction à web assembly
Introduction à web assemblyIntroduction à web assembly
Introduction à web assembly
Jérémy Buget
 
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
 
L'accessibilité en 20 étapes pour TYPO3 et Wordpress
L'accessibilité en 20 étapes pour TYPO3 et WordpressL'accessibilité en 20 étapes pour TYPO3 et Wordpress
L'accessibilité en 20 étapes pour TYPO3 et Wordpress
Yannick Pavard
 
Rendre son CMS conforme au SGQRI 008 en 20 étapes
Rendre son CMS conforme au SGQRI 008 en 20 étapesRendre son CMS conforme au SGQRI 008 en 20 étapes
Rendre son CMS conforme au SGQRI 008 en 20 étapes
ConFoo
 
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
Christophe Villeneuve
 
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
jwajsberg
 

Similaire à Introduction webextensions (20)

La face cachee des web extensions
La face cachee des web extensionsLa face cachee des web extensions
La face cachee des web extensions
 
WebExtensions - it's now / c'est maintenant
WebExtensions - it's now / c'est maintenantWebExtensions - it's now / c'est maintenant
WebExtensions - it's now / c'est maintenant
 
WebExtensions : Où en est-on ? /// Where we are ?
WebExtensions : Où en est-on ? /// Where we are ?WebExtensions : Où en est-on ? /// Where we are ?
WebExtensions : Où en est-on ? /// Where we are ?
 
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
 
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
 
Les web extensions
Les web extensionsLes web extensions
Les web extensions
 
Les WebExtensions et Firefox - JDLL 2017
Les WebExtensions et Firefox - JDLL 2017Les WebExtensions et Firefox - JDLL 2017
Les WebExtensions et Firefox - JDLL 2017
 
Le portage des WebExtensions
Le portage des WebExtensionsLe portage des WebExtensions
Le portage des WebExtensions
 
RMLL 2011 - L'accessibilité Web des CMS
RMLL 2011 - L'accessibilité Web des CMSRMLL 2011 - L'accessibilité Web des CMS
RMLL 2011 - L'accessibilité Web des CMS
 
The hidden side of webExtensions
The hidden side of webExtensionsThe hidden side of webExtensions
The hidden side of webExtensions
 
Compte rendu Blend Web Mix 2015
Compte rendu Blend Web Mix 2015Compte rendu Blend Web Mix 2015
Compte rendu Blend Web Mix 2015
 
Cours projet web collaboratif - partie 1 : Introduction, version 2019
Cours projet web collaboratif - partie 1 : Introduction, version 2019Cours projet web collaboratif - partie 1 : Introduction, version 2019
Cours projet web collaboratif - partie 1 : Introduction, version 2019
 
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
 
Introduction à web assembly
Introduction à web assemblyIntroduction à web assembly
Introduction à web assembly
 
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
 
L'accessibilité en 20 étapes pour TYPO3 et Wordpress
L'accessibilité en 20 étapes pour TYPO3 et WordpressL'accessibilité en 20 étapes pour TYPO3 et Wordpress
L'accessibilité en 20 étapes pour TYPO3 et Wordpress
 
Rendre son CMS conforme au SGQRI 008 en 20 étapes
Rendre son CMS conforme au SGQRI 008 en 20 étapesRendre son CMS conforme au SGQRI 008 en 20 étapes
Rendre son CMS conforme au SGQRI 008 en 20 étapes
 
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
 
Cms oss-27012006
Cms oss-27012006Cms oss-27012006
Cms oss-27012006
 
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
 

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
 

Introduction webextensions