Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 - WebExten...
.
Aujourd'hui...
●
Deadline… J - 30
●
Maintenant
●
Réalisation / Production
.
Rappel : Une extension ? (1/2)
●
Modules complémentaires au navigateur
●
Amélioration du navigateur
●
Fait partie de Fir...
.
Rappel : Une extension ? (2/2)
●
Les projets Web
→ montrent l’importance des extensions dans Firefox
●
Important de mont...
.
Roadmap
●
Firefox 48 : Release stable
– SDK avec extension WebExtensions déjà disponible
●
Firefox 53 : Conteneurs sécur...
.
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 a...
.
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)
Bund...
.
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 JavaScr...
.
Les WebExtensions
●
Créer une API robuste
●
Parité avec extensions chrome api
●
Documentation
●
Prise en charge de Firef...
.
Compatibilité
●
Edge / Opera / Chrome / Firefox
●
Compatible Qtwebkit
.
Actuellement, c'est...
●
5180 WebExtensions
●
https://addons.mozilla.org/en-US/firefox/tag/firefox57
●
Catégories
- Aler...
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/
A...
.
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 un...
.
Manifest.json (1/2)
●
Carte identité d'une extension
●
Script au format jSON
●
https://developer.mozilla.org/fr/Add-ons/...
.
Manifest.json (2/2)
●
Permission
"permissions": [
"*://developer.mozilla.org/*",
"webRequest"
]
activeTab
alarms
bookmar...
.
Manifest : Anatomie (1/7)
●
Script d'arrière plan
●
Indépendant
– Des pages web
– Fenêtres du navigateur
●
Exécuter dès ...
.
Background : Exemple
// manifest.json
"background": {
"scripts": [
"loader.js",
"loader_anim.js",
]
}
Possible
"scripts"...
.
Manifest : Anatomie (2/7)
●
Scripts de contenu
●
Accéder et manipuler les
pages Web
●
Fonctionnement :
– Charger dans le...
.
Content scripts : Exemple (1/2)
// manifest.json
"content_scripts": [{
"matches": [
"*://mozilla.com/*",
"*://votreURL.o...
.
Content scripts : Exemple (2/2)
// manifest.json
"content_scripts": [{
"matches": [
"<all_urls>"
],
"exclude_matches": [...
.
Manifest : Anatomie (3/7)
●
Action du navigateur
<> des navigateurs
●
Accès par un icône
– Barre d'outils navigateur
●
P...
.
Browser action : Exemple
// manifest.json
"browser_action": {
"default_icon": {
"19": "button/geo-19.png",
"38": "button...
.
Manifest : Anatomie (4/7)
●
Action dans la barre de
navigation
●
Affiche sur un onglet activé
●
Action pas toujours
néce...
.
Page action : Exemple
// manifest.json
"page_action": {
"browser_style": true,
"default_icon": {
"19": "button/geo-19.pn...
.
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...
.
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
●
Langa...
.
Ressource : Exemple
// manifest.json
"slidebar_action": [
"default_icon" : "icons/bleu.png",
"default_title" : "barre ve...
.
Manifest : Anatomie (7/7)
●
Ressources incluses dans
l'extension (ex : images)
●
Accessible par
– Scripts de contenu
– S...
.
Ressources
●
Plus de 40 API en exemple
https://github.com/mdn/webextensions-examples
●
Documentation (MDN) en Anglais
– ...
.
Merci
Questions
Christophe Villeneuve
@hellosct1
Introduction webextensions
Upcoming SlideShare
Loading in …5
×

Introduction webextensions

1,439 views

Published on

Talk made at meetup Mozilla Paris octobre 2017 by Christophe Villeneuve on "Introduction aux webExtensions".
La présentation a pour but d'aider à mieux appréhender ces nouvelles extensions, les impacts et les possibilités offertes dans le navigateur, les emplacements disponibles, le tout cadencé de cas exemples.

Published in: Internet
  • Be the first to comment

Introduction webextensions

  1. 1. Introduction aux WebExtensions @hellosct1 @hellosct1@mamot.fr Meetup le 16 octobre 2017 Christophe Villeneuve
  2. 2. . 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
  3. 3. . Aujourd'hui... ● Deadline… J - 30 ● Maintenant ● Réalisation / Production
  4. 4. . Rappel : Une extension ? (1/2) ● Modules complémentaires au navigateur ● Amélioration du navigateur ● Fait partie de Firefox depuis l'origine
  5. 5. . 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)
  6. 6. . 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
  7. 7. . Firefox 56 : les extensions
  8. 8. Les Extensions Sont Mortes Vive Les Extensions
  9. 9. . Firefox 57 : Les extensions
  10. 10. Endroits disponibles dans Firefox
  11. 11. . Interface utilisateur (1/ L'utilisation d'une extension s'effectue par... Page action (bouton barre d'adresse) Browser action (bouton barre d'outils)
  12. 12. . Interface utilisateur (2/ Sidebar (barre latérale) Context menu items (Elément du menu contextuel)
  13. 13. . Interface utilisateur (3/ Address bar suggestions (Suggestions de la barre d'adresse) Notifications (Notifications) Bundled web pages (Page web incluses)
  14. 14. . Interface utilisateur (4/ Developer tools panels (Panneaux d'outils de développement) Options page (Page d'options)
  15. 15. Technologies
  16. 16. . 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
  17. 17. . Les WebExtensions ● Créer une API robuste ● Parité avec extensions chrome api ● Documentation ● Prise en charge de Firefox pour Android ● Technologie standard 
  18. 18. . Compatibilité ● Edge / Opera / Chrome / Firefox ● Compatible Qtwebkit
  19. 19. . 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
  20. 20. Demo : Screen Saver https://addons.mozilla.org/fr/firefox/addon/screen-saver/
  21. 21. . Installation temporaire (1/2) ● Firefox beta – https://beta.mozilla.org ● Firefox Nightly – https://nightly.mozfr.org/ Actuellement 57 Actuellement 58
  22. 22. . Installation temporaire (2/2) ● about:debugging
  23. 23. . 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
  24. 24. . 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" }, }
  25. 25. . 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
  26. 26. . 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
  27. 27. . Background : Exemple // manifest.json "background": { "scripts": [ "loader.js", "loader_anim.js", ] } Possible "scripts": ["loader.html"]
  28. 28. . 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
  29. 29. . Content scripts : Exemple (1/2) // manifest.json "content_scripts": [{ "matches": [ "*://mozilla.com/*", "*://votreURL.org/*", "*://localhost/*" ], "js": [ "js/injection-demo.js" ] }],
  30. 30. . Content scripts : Exemple (2/2) // manifest.json "content_scripts": [{ "matches": [ "<all_urls>" ], "exclude_matches": [ "*://www.mozilla.org/*", "*://*.votreURL.org/*" ], "js": [ "background/all-sites.js" ] }],
  31. 31. . 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
  32. 32. . 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" }
  33. 33. . 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
  34. 34. . 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" }
  35. 35. . 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
  36. 36. . Option page : Exemple // manifest.json "options_ui": { "page": "options.html" },
  37. 37. . 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
  38. 38. . Ressource : Exemple // manifest.json "slidebar_action": [ "default_icon" : "icons/bleu.png", "default_title" : "barre verticale", "default_panel": "slidebar/panel.html" ],
  39. 39. . 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
  40. 40. . 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
  41. 41. . Merci Questions Christophe Villeneuve @hellosct1

×