Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Firefox et les WebExtensions

517 vues

Publié le

Présentation effectuée à la Ubuntu Party 17.04 de Paris par Christophe Villeneuve sur "Firefox et les WebExtensions".
La conférence a pour but de montrer réaliser une web Extensions pour tous les navigateurs comme Firefox

Publié dans : Internet
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Firefox et les WebExtensions

  1. 1. Ubuntu Party 17.04 : Le 21 mai 2017 Firefox et les WebExtensions Christophe Villeneuve @hellosct1
  2. 2. Ubuntu Party 17.04 : Le 21 mai 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
  3. 3. Ubuntu Party 17.04 : Le 21 mai 2017 Aujourd'hui ● Pourquoi les WebExtensions !!! ● Conception ● Réalisation
  4. 4. Ubuntu Party 17.04 : Le 21 mai 2017 Les Extensions Sont Mortes Vive Les Extensions
  5. 5. Ubuntu Party 17.04 : Le 21 mai 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 que les API sont puissantes – 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. 6. Ubuntu Party 17.04 : Le 21 mai 2017 Avant : XUL / XPCOM ● XUL est une technologie XML – Utilisée pour l'interface firefox ● XPCOM 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 aux attentes d'aujourd'hui – Mises à jours / révisions… trop long
  7. 7. Ubuntu Party 17.04 : Le 21 mai 2017 Les changements / migrations
  8. 8. Ubuntu Party 17.04 : Le 21 mai 2017 Firefox Nightly
  9. 9. Ubuntu Party 17.04 : Le 21 mai 2017 Les Extensions Firefox ● Firebug > DevTools ● FoxMarks > Bookmark Sync ● Session Manager > Session Restore ● Faviconize Tab > Tab pinning ● Multizilla > Tab browsing
  10. 10. Ubuntu Party 17.04 : Le 21 mai 2017 Les Extensions compatibles ● AdBlock for Firefox ● Turn Off the Lights ● Disconnect ● Ghostery ● Open in VLC media Player ● … ● En voir plus https://addons.mozilla.org/en-US/firefox/tag/firefox57
  11. 11. Ubuntu Party 17.04 : Le 21 mai 2017 Les addons 'test pilot' dans firefox ● Nouveau concept ● Tester de nouvelles fonctionnalités – Possibilité d'être inséré dans le navigateur – https://testpilot.firefox.com
  12. 12. Ubuntu Party 17.04 : Le 21 mai 2017
  13. 13. Ubuntu Party 17.04 : Le 21 mai 2017 Bienvenue WebExtensions ● Créer une API robuste ● Parité avec extensions chrome api ● Documentation ● Prise en charge de Firefox pour Android ● Technologie Standard
  14. 14. Ubuntu Party 17.04 : Le 21 mai 2017 Compatibilité ● Edge / Opera / Chrome / Firefox ● Compatible Qtwebkit
  15. 15. Ubuntu Party 17.04 : Le 21 mai 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 – ...
  16. 16. Ubuntu Party 17.04 : Le 21 mai 2017 Roadmap ● Firefox 48 : Release stable – SDK avec extension WebExtensions déjà disponible ● Firefox 53 : Conteneurs sécurisés – Seulement WebExtensions acceptées 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
  17. 17. Ubuntu Party 17.04 : Le 21 mai 2017 Demo WebExt manifest https://github.com/hellosct1/demo-WebExt-manifest Nouvelle version… Prochainement
  18. 18. Ubuntu Party 17.04 : Le 21 mai 2017 Conception
  19. 19. Ubuntu Party 17.04 : Le 21 mai 2017 Anatomie Interagir 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
  20. 20. Ubuntu Party 17.04 : Le 21 mai 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 Ubuntu Paris", "version": "2.0", "description": "Demo Ubuntu Paris", "icons": { "19": "icons/icon-19.png", "48": "icons/icon-48.png" }, }
  21. 21. Ubuntu Party 17.04 : Le 21 mai 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
  22. 22. Ubuntu Party 17.04 : Le 21 mai 2017 Manifest : Anatomie (1/6) ● 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
  23. 23. Ubuntu Party 17.04 : Le 21 mai 2017 Background : Exemple // manifest.json "background": { "scripts": ["background.js"] } // manifest.json "background": { "page": ["background.html"] }
  24. 24. Ubuntu Party 17.04 : Le 21 mai 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
  25. 25. Ubuntu Party 17.04 : Le 21 mai 2017 Content scripts : Exemple (1/2) // manifest.json "content_scripts": [{ "matches": [ "*://mozilla.com/*", "*://ubucon.org/*", "*://localhost/*" ], "js": [ "js/injection-demo.js" ] }],
  26. 26. Ubuntu Party 17.04 : Le 21 mai 2017 Content scripts : Exemple (2/2) // manifest.json "content_scripts": [{ "matches": [ "<all_urls>" ], "exclude_matches": [ "*://www.mozilla.org/*", "*://ubucon.org/*" ], "js": [ "background/all-sites.js" ] }],
  27. 27. Ubuntu Party 17.04 : Le 21 mai 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
  28. 28. Ubuntu Party 17.04 : Le 21 mai 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" }
  29. 29. Ubuntu Party 17.04 : Le 21 mai 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
  30. 30. Ubuntu Party 17.04 : Le 21 mai 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" }
  31. 31. Ubuntu Party 17.04 : Le 21 mai 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
  32. 32. Ubuntu Party 17.04 : Le 21 mai 2017 Option page : Exemple // manifest.json "options_ui": { "page": "options.html" },
  33. 33. Ubuntu Party 17.04 : Le 21 mai 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
  34. 34. Ubuntu Party 17.04 : Le 21 mai 2017 Ressource : Exemple // manifest.json "web_accessible_resources": [ "resources/*" ],
  35. 35. Ubuntu Party 17.04 : Le 21 mai 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
  36. 36. Ubuntu Party 17.04 : Le 21 mai 2017 Installation provisoire / Test / Debug
  37. 37. Ubuntu Party 17.04 : Le 21 mai 2017 Installation temporaire (1/2) ● about:debugging
  38. 38. Ubuntu Party 17.04 : Le 21 mai 2017 Installation temporaire (2/2) ● Déboguer
  39. 39. Ubuntu Party 17.04 : Le 21 mai 2017 Publication
  40. 40. Ubuntu Party 17.04 : Le 21 mai 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
  41. 41. Ubuntu Party 17.04 : Le 21 mai 2017 Procédure ● Connecter – https://addons.mozilla.org ● Soumettre – Par le site – Mode personnel
  42. 42. Ubuntu Party 17.04 : Le 21 mai 2017 Par le site (1/2)
  43. 43. Ubuntu Party 17.04 : Le 21 mai 2017 Par le site (2/2)
  44. 44. Ubuntu Party 17.04 : Le 21 mai 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
  45. 45. Ubuntu Party 17.04 : Le 21 mai 2017 Gestion personnelle
  46. 46. Ubuntu Party 17.04 : Le 21 mai 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
  47. 47. Ubuntu Party 17.04 : Le 21 mai 2017 Merci Questions Christophe Villeneuve @hellosct1

×