JDLL : Le 2 avril 2017
Les WebExtensions&
Firefox
Christophe Villeneuve@hellosct1
JDLL : Le 2 avril 2017
Aujourd'hui
● Pourquoi les WebExtensions !!!● Conception● Réalisation
JDLL : Le 2 avril 2017
Les Extensions Sont Mortes
Vive Les Extensions
JDLL : Le 2 avril 2017
Les Extensions Firefox● Firebug > DevTools
● FoxMarks > Bookmark Sync
● Session Manager > Session Restore
● Faviconize Tab > Tab pinning
● Multizilla > Tab browsing
JDLL : Le 2 avril 2017
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
JDLL : Le 2 avril 2017
… les 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)
JDLL : Le 2 avril 2017
Les addons 'test pilot' dans firefox
● Nouveau concept● Tester de nouvelles fonctionnalités
– Possibilité d'être insérer dans le navigateur
– http://testpilot.firefox.com
JDLL : Le 2 avril 2017
JDLL : Le 2 avril 2017
Bienvenue WebExtensions
● Créer une api robuste ● Technologie Standard : Html, css, javascript● Parité avec extensions chrome api● Documentation● Prise en charge de Firefox pour android
JDLL : Le 2 avril 2017
Compatibilité
● Edge / Opera / Chrome / Firefox ● Compatible Qtwebkit
JDLL : Le 2 avril 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
– ...
JDLL : Le 2 avril 2017
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
JDLL : Le 2 avril 2017
Demo WebExt manifesthttps://github.com/hellosct1/demo-WebExt-manifest
JDLL : Le 2 avril 2017
Conception
JDLL : Le 2 avril 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
JDLL : Le 2 avril 2017
Manifest.json
● Carte identité d'une extension● Script au format jSON●
https://developer.mozilla.org/fr/Add-ons/WebExtensions
{ "manifest_version": 2, "name": "demo JDLL", "version": "1.0", "description": "Demo JDLL", "icons": { "19": "icons/icon-19.png", "48": "icons/icon-48.png" },}
JDLL : Le 2 avril 2017
Manifest.json
● Permission"permissions": [ "*://developer.mozilla.org/*", "webRequest"]
activeTabalarmsbookmarksbrowsingDatacontextMenuscontextualIdentitiescookiesdownloadsdownloads.openhistoryidentity
idlemanagementnativeMessagingnotificationssessionsstoragetabstopSiteswebNavigationwebRequestwebRequestBlocking
JDLL : Le 2 avril 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
JDLL : Le 2 avril 2017
Background : Exemple// manifest.json
"background": { "scripts": ["background.js"]}
// manifest.json
"background": { "page": ["background.html"]}
JDLL : Le 2 avril 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
JDLL : Le 2 avril 2017
Content scripts : Exemple
// manifest.json "content_scripts": [{ "matches": [ "*://mozilla.com/*", "*://localhost/*" ], "js": [ "js/injection-demo.js" ] }],
JDLL : Le 2 avril 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
JDLL : Le 2 avril 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"}
JDLL : Le 2 avril 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
JDLL : Le 2 avril 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"}
JDLL : Le 2 avril 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
JDLL : Le 2 avril 2017
Option page : Exemple
// manifest.json"options_ui": { "page": "options.html"},
JDLL : Le 2 avril 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
JDLL : Le 2 avril 2017
Ressource : Exemple
// manifest.json"options_ui": { "page": "options.html"},
JDLL : Le 2 avril 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
JDLL : Le 2 avril 2017
Installation provisoire / Test / Debug
JDLL : Le 2 avril 2017
Installation temporaire
● about:debugging
JDLL : Le 2 avril 2017
Publication
JDLL : Le 2 avril 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
JDLL : Le 2 avril 2017
Procédure
● Connecter– https://addons.mozilla.org
● Soumettre– Par le site
– Mode personnel
JDLL : Le 2 avril 2017
Par le site (1/2)
JDLL : Le 2 avril 2017
Par le site (2/2)
JDLL : Le 2 avril 2017
Aller plus loin : Web-ext
● Outil de ligne de commande – Construire
– Exécuter
– Surveiller
– Tester Les extensions Web
● https://github.com/mozilla/web-extExé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
JDLL : Le 2 avril 2017
Gestion personnelle
JDLL : Le 2 avril 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●
JDLL : Le 2 avril 2017
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
JDLL : Le 2 avril 2017
Merci
Questions
Christophe Villeneuve@hellosct1