les webextensions et firefox - jdll 2017
TRANSCRIPT
![Page 1: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/1.jpg)
JDLL : Le 2 avril 2017
Les WebExtensions&
Firefox
Christophe Villeneuve@hellosct1
![Page 2: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/2.jpg)
JDLL : Le 2 avril 2017
Aujourd'hui
● Pourquoi les WebExtensions !!!● Conception● Réalisation
![Page 3: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/3.jpg)
JDLL : Le 2 avril 2017
Les Extensions Sont Mortes
Vive Les Extensions
![Page 4: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/4.jpg)
JDLL : Le 2 avril 2017
Les Extensions Firefox● Firebug > DevTools
● FoxMarks > Bookmark Sync
● Session Manager > Session Restore
● Faviconize Tab > Tab pinning
● Multizilla > Tab browsing
![Page 5: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/5.jpg)
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
![Page 6: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/6.jpg)
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)
![Page 7: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/7.jpg)
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
![Page 8: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/8.jpg)
JDLL : Le 2 avril 2017
![Page 9: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/9.jpg)
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
![Page 10: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/10.jpg)
JDLL : Le 2 avril 2017
Compatibilité
● Edge / Opera / Chrome / Firefox ● Compatible Qtwebkit
![Page 11: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/11.jpg)
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
– ...
![Page 12: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/12.jpg)
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
![Page 13: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/13.jpg)
JDLL : Le 2 avril 2017
Demo WebExt manifesthttps://github.com/hellosct1/demo-WebExt-manifest
![Page 14: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/14.jpg)
JDLL : Le 2 avril 2017
Conception
![Page 15: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/15.jpg)
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
![Page 16: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/16.jpg)
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" },}
![Page 17: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/17.jpg)
JDLL : Le 2 avril 2017
Manifest.json
● Permission"permissions": [ "*://developer.mozilla.org/*", "webRequest"]
activeTabalarmsbookmarksbrowsingDatacontextMenuscontextualIdentitiescookiesdownloadsdownloads.openhistoryidentity
idlemanagementnativeMessagingnotificationssessionsstoragetabstopSiteswebNavigationwebRequestwebRequestBlocking
![Page 18: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/18.jpg)
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
![Page 19: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/19.jpg)
JDLL : Le 2 avril 2017
Background : Exemple// manifest.json
"background": { "scripts": ["background.js"]}
// manifest.json
"background": { "page": ["background.html"]}
![Page 20: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/20.jpg)
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
![Page 21: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/21.jpg)
JDLL : Le 2 avril 2017
Content scripts : Exemple
// manifest.json "content_scripts": [{ "matches": [ "*://mozilla.com/*", "*://localhost/*" ], "js": [ "js/injection-demo.js" ] }],
![Page 22: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/22.jpg)
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
![Page 23: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/23.jpg)
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"}
![Page 24: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/24.jpg)
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
![Page 25: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/25.jpg)
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"}
![Page 26: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/26.jpg)
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
![Page 27: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/27.jpg)
JDLL : Le 2 avril 2017
Option page : Exemple
// manifest.json"options_ui": { "page": "options.html"},
![Page 28: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/28.jpg)
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
![Page 29: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/29.jpg)
JDLL : Le 2 avril 2017
Ressource : Exemple
// manifest.json"options_ui": { "page": "options.html"},
![Page 30: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/30.jpg)
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
![Page 31: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/31.jpg)
JDLL : Le 2 avril 2017
Installation provisoire / Test / Debug
![Page 32: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/32.jpg)
JDLL : Le 2 avril 2017
Installation temporaire
● about:debugging
![Page 33: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/33.jpg)
JDLL : Le 2 avril 2017
Publication
![Page 34: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/34.jpg)
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
![Page 35: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/35.jpg)
JDLL : Le 2 avril 2017
Procédure
● Connecter– https://addons.mozilla.org
● Soumettre– Par le site
– Mode personnel
![Page 36: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/36.jpg)
JDLL : Le 2 avril 2017
Par le site (1/2)
![Page 37: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/37.jpg)
JDLL : Le 2 avril 2017
Par le site (2/2)
![Page 38: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/38.jpg)
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
![Page 39: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/39.jpg)
JDLL : Le 2 avril 2017
Gestion personnelle
![Page 40: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/40.jpg)
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●
![Page 41: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/41.jpg)
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
![Page 42: Les WebExtensions et Firefox - JDLL 2017](https://reader031.vdocuments.mx/reader031/viewer/2022030308/58f357f71a28ab082e8b45c7/html5/thumbnails/42.jpg)
JDLL : Le 2 avril 2017
Merci
Questions
Christophe Villeneuve@hellosct1