Les WebExtensions
Christophe Villeneuve
@hellosct1
Qui ???
Christophe
Villeneuve
mozilla reps - firefox os - B2GOS - ausy - afup – lemug.fr – mysql – mariadb – drupal – demoscene – firefoxos – drupagora – phptour – forumphp – solutionlinux – Libre@toi – eyrolles – editions eni – programmez – linux pratique – webriver – phptv – elephpant - owasp -security
Aujourd'hui
● Pourquoi les WebExtensions !!!
● Conception
● Réalisation
RMLL 2017 – 4 Juillet 2017
Les Extensions
Sont Mortes
Vive Les Extensions
RMLL 2017 – 4 Juillet 2017
La situation des Add-ons
● Modules complémentaires
● Partie de Firefox depuis l'origine
● Amélioration du navigateur
● Les projets montrent comment les addons sont importants
dans Firefox
● Important de montrer les API sont puissants
– 40% des utilisateurs ont des add-ons
– 32000 modules complémentaires
– 19000 développeurs d'extensions
– 15 millions d'utilisateurs mensuels sur Mozilla Add-on (AMO)
RMLL 2017 – 4 Juillet 2017
Les Extensions Firefox
● Firebug > DevTools
● FoxMarks > Bookmark Sync
● Session Manager > Session Restore
● Faviconize Tab > Tab pinning
● Multizilla > Tab browsing
RMLL 2017 – 4 Juillet 2017
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 d'aujourd'hui
– Mises à jours / révisions… trop long
RMLL 2017 – 4 Juillet 2017
Bienvenue WebExtensions
● Créer une API robuste
● Parité avec extensions chrome api
● Documentation
● Prise en charge de Firefox pour android
● Technologie Standard
RMLL 2017 – 4 Juillet 2017
Compatibilité
● Edge / Opera / Chrome / Firefox
● Compatible Qtwebkit
RMLL 2017 – 4 Juillet 2017
Situation actuelle
● Are we WebExtensions yet ?
http://arewewebextensionsyet.com/
● On trouve
– L'avancement de l'API
– Les fonctionnalités manquante
– L'avancé de la performance
– La validation
– …
● Les WebExtensions déjà disponible
– https://addons.mozilla.org/en-US/firefox/tag/firefox57
RMLL 2017 – 4 Juillet 2017
Demo WebExt manifest
https://github.com/hellosct1/demo-WebExt-manifest
RMLL 2017 – 4 Juillet 2017
Vous verrez ceci...
1 clic ouvrir la pop-up
Ou
1 clic Reset
Conception
RMLL 2017 – 4 Juillet 2017
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 2017 – 4 Juillet 2017
Manifest.json
● Carte identité d'une extension
● Script au format jSON
●
https://developer.mozilla.org/fr/Add-ons/WebExtensions
{
"manifest_version": 2,
"name": "RMLL",
"version": "1.0",
"description": "Demo RMLL",
"icons": {
"19": "icons/icon-19.png",
"48": "icons/icon-48.png"
},
}
RMLL 2017 – 4 Juillet 2017
Manifest.json
● 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
RMLL 2017 – 4 Juillet 2017
Manifest : Anatomie (1/6)
● Script d'arrière plan
● Indépendant
– Des pages webs
– Fenêtres du navigateur
● Exécuter dès que l'extension
est chargé
● Permissions nécessaires
Background page
RMLL 2017 – 4 Juillet 2017
Background : Exemple
// manifest.json
"background": {
"scripts": ["background.js"]
}
// manifest.json
"background": {
"page": ["background.html"]
}
RMLL 2017 – 4 Juillet 2017
Manifest : Anatomie (2/6)
● 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
RMLL 2017 – 4 Juillet 2017
Content scripts : Exemple
// manifest.json
"content_scripts": [{
"matches": [
"*://mozilla.com/*",
"*://localhost/*"
],
"js": [
"js/injection-demo.js"
]
}],
RMLL 2017 – 4 Juillet 2017
Manifest : Anatomie (3/6)
● 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
RMLL 2017 – 4 Juillet 2017
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"
}
RMLL 2017 – 4 Juillet 2017
Manifest : Anatomie (4/6)
● Action dans la barre de
navigation
● Affiche sur un onglet activé
● Action pas toujours
nécessaire
Background page
Content scripts
Browser action
Page action
RMLL 2017 – 4 Juillet 2017
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"
}
RMLL 2017 – 4 Juillet 2017
Manifest : Anatomie (5/6)
● Définir des préférences en
plus
● Accès par les add-ons du
navigateur
● Configuration des
WebExtensions
Background page
Content scripts
Browser action
Page action
Option page
RMLL 2017 – 4 Juillet 2017
Option page : Exemple
// manifest.json
"options_ui": {
"page": "options.html"
},
RMLL 2017 – 4 Juillet 2017
Manifest : Anatomie (6/6)
● Ressources incluses dans
l'extension
● 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
Ressource
RMLL 2017 – 4 Juillet 2017
Ressource : Exemple
// manifest.json
"web_accessible_resources": [
"views/*"
},
RMLL 2017 – 4 Juillet 2017
API
https://developer.mozilla.org/fr/Add-ons/WebExtensions/API
● alarms
● bookmarks
● browserAction
● browsingData
● commands
● contextMenus
● contextualIdentities
● cookies
● downloads
● events
● extension
● extensionTypes
● history
● i18n
● Indentity
● Idle
● management
● notifications
● omnibox
● pageAction
● runtime
● sessions
● sidebarAction
● storage
● tabs
● topSites
● webNavigation
● webRequest
● windows
Installation provisoire / Test / Debug
RMLL 2017 – 4 Juillet 2017
Installation temporaire
● about:debugging
Publication
RMLL 2017 – 4 Juillet 2017
Prêt à publier
● Compresser votre extension
– Méthode 1
● Compresser les fichiers en ZIP
● Renommer le ZIP en XPI
– Méthode 2
$ cd monExtension
$ 7zip -a monExtension.xpi
RMLL 2017 – 4 Juillet 2017
Procédure
● Connecter
– https://addons.mozilla.org
● Soumettre
– Par le site
– Mode personnel
RMLL 2017 – 4 Juillet 2017
Par le site (1/2)
RMLL 2017 – 4 Juillet 2017
Par le site (2/2)
RMLL 2017 – 4 Juillet 2017
Aller plus loin : Web-ext
● Outil de ligne de commande
– Construire
– Exécuter
– Surveiller
– Tester Les extensions Web
● https://github.com/mozilla/web-ext
Exécuter une extension de cli, de linting, de validation et d'emballage
web-ext run -s /path/extension/ --firefox-binary=/path/firefox
web-ext build -s /path/extension
RMLL 2017 – 4 Juillet 2017
Gestion personnelle
RMLL 2017 – 4 Juillet 2017
Ressources supplémentaires
● 30 API en exemple
https://github.com/mdn/webextensions-examples
● Documentation (MDN) en Français
– https://developer.mozilla.org/fr/Add-ons/WebExtensions
Merci
Questions
Christophe Villeneuve
@hellosct1

Les web extensions

  • 1.
  • 2.
    Qui ??? Christophe Villeneuve mozilla reps- firefox os - B2GOS - ausy - afup – lemug.fr – mysql – mariadb – drupal – demoscene – firefoxos – drupagora – phptour – forumphp – solutionlinux – Libre@toi – eyrolles – editions eni – programmez – linux pratique – webriver – phptv – elephpant - owasp -security
  • 3.
    Aujourd'hui ● Pourquoi lesWebExtensions !!! ● Conception ● Réalisation
  • 4.
    RMLL 2017 –4 Juillet 2017 Les Extensions Sont Mortes Vive Les Extensions
  • 5.
    RMLL 2017 –4 Juillet 2017 La situation des Add-ons ● Modules complémentaires ● Partie de Firefox depuis l'origine ● Amélioration du navigateur ● Les projets montrent comment les addons sont importants dans Firefox ● Important de montrer les API sont puissants – 40% des utilisateurs ont des add-ons – 32000 modules complémentaires – 19000 développeurs d'extensions – 15 millions d'utilisateurs mensuels sur Mozilla Add-on (AMO)
  • 6.
    RMLL 2017 –4 Juillet 2017 Les Extensions Firefox ● Firebug > DevTools ● FoxMarks > Bookmark Sync ● Session Manager > Session Restore ● Faviconize Tab > Tab pinning ● Multizilla > Tab browsing
  • 7.
    RMLL 2017 –4 Juillet 2017 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 d'aujourd'hui – Mises à jours / révisions… trop long
  • 8.
    RMLL 2017 –4 Juillet 2017 Bienvenue WebExtensions ● Créer une API robuste ● Parité avec extensions chrome api ● Documentation ● Prise en charge de Firefox pour android ● Technologie Standard
  • 9.
    RMLL 2017 –4 Juillet 2017 Compatibilité ● Edge / Opera / Chrome / Firefox ● Compatible Qtwebkit
  • 10.
    RMLL 2017 –4 Juillet 2017 Situation actuelle ● Are we WebExtensions yet ? http://arewewebextensionsyet.com/ ● On trouve – L'avancement de l'API – Les fonctionnalités manquante – L'avancé de la performance – La validation – … ● Les WebExtensions déjà disponible – https://addons.mozilla.org/en-US/firefox/tag/firefox57
  • 11.
    RMLL 2017 –4 Juillet 2017 Demo WebExt manifest https://github.com/hellosct1/demo-WebExt-manifest
  • 12.
    RMLL 2017 –4 Juillet 2017 Vous verrez ceci... 1 clic ouvrir la pop-up Ou 1 clic Reset
  • 13.
  • 14.
    RMLL 2017 –4 Juillet 2017 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
  • 15.
    RMLL 2017 –4 Juillet 2017 Manifest.json ● Carte identité d'une extension ● Script au format jSON ● https://developer.mozilla.org/fr/Add-ons/WebExtensions { "manifest_version": 2, "name": "RMLL", "version": "1.0", "description": "Demo RMLL", "icons": { "19": "icons/icon-19.png", "48": "icons/icon-48.png" }, }
  • 16.
    RMLL 2017 –4 Juillet 2017 Manifest.json ● 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
  • 17.
    RMLL 2017 –4 Juillet 2017 Manifest : Anatomie (1/6) ● Script d'arrière plan ● Indépendant – Des pages webs – Fenêtres du navigateur ● Exécuter dès que l'extension est chargé ● Permissions nécessaires Background page
  • 18.
    RMLL 2017 –4 Juillet 2017 Background : Exemple // manifest.json "background": { "scripts": ["background.js"] } // manifest.json "background": { "page": ["background.html"] }
  • 19.
    RMLL 2017 –4 Juillet 2017 Manifest : Anatomie (2/6) ● 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
  • 20.
    RMLL 2017 –4 Juillet 2017 Content scripts : Exemple // manifest.json "content_scripts": [{ "matches": [ "*://mozilla.com/*", "*://localhost/*" ], "js": [ "js/injection-demo.js" ] }],
  • 21.
    RMLL 2017 –4 Juillet 2017 Manifest : Anatomie (3/6) ● 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
  • 22.
    RMLL 2017 –4 Juillet 2017 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" }
  • 23.
    RMLL 2017 –4 Juillet 2017 Manifest : Anatomie (4/6) ● Action dans la barre de navigation ● Affiche sur un onglet activé ● Action pas toujours nécessaire Background page Content scripts Browser action Page action
  • 24.
    RMLL 2017 –4 Juillet 2017 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" }
  • 25.
    RMLL 2017 –4 Juillet 2017 Manifest : Anatomie (5/6) ● Définir des préférences en plus ● Accès par les add-ons du navigateur ● Configuration des WebExtensions Background page Content scripts Browser action Page action Option page
  • 26.
    RMLL 2017 –4 Juillet 2017 Option page : Exemple // manifest.json "options_ui": { "page": "options.html" },
  • 27.
    RMLL 2017 –4 Juillet 2017 Manifest : Anatomie (6/6) ● Ressources incluses dans l'extension ● 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 Ressource
  • 28.
    RMLL 2017 –4 Juillet 2017 Ressource : Exemple // manifest.json "web_accessible_resources": [ "views/*" },
  • 29.
    RMLL 2017 –4 Juillet 2017 API https://developer.mozilla.org/fr/Add-ons/WebExtensions/API ● alarms ● bookmarks ● browserAction ● browsingData ● commands ● contextMenus ● contextualIdentities ● cookies ● downloads ● events ● extension ● extensionTypes ● history ● i18n ● Indentity ● Idle ● management ● notifications ● omnibox ● pageAction ● runtime ● sessions ● sidebarAction ● storage ● tabs ● topSites ● webNavigation ● webRequest ● windows
  • 30.
  • 31.
    RMLL 2017 –4 Juillet 2017 Installation temporaire ● about:debugging
  • 32.
  • 33.
    RMLL 2017 –4 Juillet 2017 Prêt à publier ● Compresser votre extension – Méthode 1 ● Compresser les fichiers en ZIP ● Renommer le ZIP en XPI – Méthode 2 $ cd monExtension $ 7zip -a monExtension.xpi
  • 34.
    RMLL 2017 –4 Juillet 2017 Procédure ● Connecter – https://addons.mozilla.org ● Soumettre – Par le site – Mode personnel
  • 35.
    RMLL 2017 –4 Juillet 2017 Par le site (1/2)
  • 36.
    RMLL 2017 –4 Juillet 2017 Par le site (2/2)
  • 37.
    RMLL 2017 –4 Juillet 2017 Aller plus loin : Web-ext ● Outil de ligne de commande – Construire – Exécuter – Surveiller – Tester Les extensions Web ● https://github.com/mozilla/web-ext Exécuter une extension de cli, de linting, de validation et d'emballage web-ext run -s /path/extension/ --firefox-binary=/path/firefox web-ext build -s /path/extension
  • 38.
    RMLL 2017 –4 Juillet 2017 Gestion personnelle
  • 39.
    RMLL 2017 –4 Juillet 2017 Ressources supplémentaires ● 30 API en exemple https://github.com/mdn/webextensions-examples ● Documentation (MDN) en Français – https://developer.mozilla.org/fr/Add-ons/WebExtensions
  • 40.