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.

WebExtensions : Où en est-on ? /// Where we are ?

1,018 views

Published on

Talk made at the UbuCon Europe Paris September 2017 by Christophe Villeneuve on "WebExtensions: Where are we?".
This is a presentation to see the advanced WebExtensions in Mozilla Firefox
Présentation effectuée à la UbuCon Europe Paris Septembre 2017 par Christophe Villeneuve sur "WebExtensions : Où en est-on ?".
Il s'agit d'une présentation pour voir l'avancé des WebExtensions dans Mozilla Firefox

Published in: Internet
  • Be the first to comment

  • Be the first to like this

WebExtensions : Où en est-on ? /// Where we are ?

  1. 1. WebExtensions Où en est-on ? Where we are ? @hellosct1 @hellosct1@mamot.fr 10 septembre UbuCon Europe Paris 2017 Christophe Villeneuve
  2. 2. UbuCon Europe Paris 2017 - 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. UbuCon Europe Paris 2017 - Aujourd'hui... ● Sujet du jour !!!... Pourquoi ? ● Maintenant ● Demain
  4. 4. Sujet du jour : Le chamboulement
  5. 5. UbuCon Europe Paris 2017 - Rappel : Une extension ? (1/2) ● Modules complémentaires au navigateur ● Amélioration du navigateur ● Fait partie de Firefox depuis l'origine
  6. 6. UbuCon Europe Paris 2017 - 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)
  7. 7. UbuCon Europe Paris 2017 - Attention aux titres trompeurs Mozilla va abandonner le support des extensions La fin des extensions Mozilla Will Kill Legacy Firefox Add-Ons in Exactly Three Months
  8. 8. UbuCon Europe Paris 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
  9. 9. UbuCon Europe Paris 2017 - Firefox 55 : les extensions
  10. 10. UbuCon Europe Paris 2017 - Les extensions sont mortes Vive Les Extensions
  11. 11. UbuCon Europe Paris 2017 - Firefox 57 : Les extensions
  12. 12. Construction de la technologie
  13. 13. UbuCon Europe Paris 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 – Mises à jour / révisions… trop long
  14. 14. UbuCon Europe Paris 2017 - Bienvenue aux WebExtensions ● Créer une API robuste ● Parité avec extensions chrome api ● Documentation ● Prise en charge de Firefox pour Android ● Technologie standard
  15. 15. UbuCon Europe Paris 2017 - Compatibilité ● Edge / Opera / Chrome / Firefox ● Compatible Qtwebkit
  16. 16. Les migrations (en cours) importantes
  17. 17. UbuCon Europe Paris 2017 - Actuellement, c'est... ● 4072 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
  18. 18. UbuCon Europe Paris 2017 - Interface utilisateur (1/ L'utilisation d'une extension s'effectue par... Page action (bouton barre d'adresse) Browser action (bouton barre d'outils)
  19. 19. UbuCon Europe Paris 2017 - Interface utilisateur (2/ Sidebar (barre latérale) Context menu items (Elément du menu contextuel)
  20. 20. UbuCon Europe Paris 2017 - Interface utilisateur (3/ Address bar suggestions (Suggestions de la barre d'adresse) Notifications (Notifications) Bundled web pages (Page web incluses)
  21. 21. UbuCon Europe Paris 2017 - Interface utilisateur (4/ Developer tools panels (Panneaux d'outils de développement) Options page (Page d'options)
  22. 22. UbuCon Europe Paris 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
  23. 23. UbuCon Europe Paris 2017 - Confiance aux WebExtensions (1/ ● Demandes aux accès spéciaux de l’extension ● Déclaration dans manifest.json ● La clé peut contenir plusieurs types d'autorisations "permissions": [ "*://developer.mozilla.org/*", "webRequest" ] https://developer.mozilla.org/fr/Add-ons/WebExtensions/manifest.json/permissions
  24. 24. UbuCon Europe Paris 2017 - Confiance aux WebExtensions (2/ ● La permission d’hôte ● Les permissions API "*://developer.mozilla.org/*" activeTab alarms bookmarks browsingData contextMenus contextualIdent ities cookies downloads downloads.open history identity idle management nativeMessaging notifications proxy sessions storage tabs topSites webNavigation webRequest webRequestBlocking
  25. 25. UbuCon Europe Paris 2017 - Confiance aux WebExtensions (3/ ● La permission activeTab – Spécifique aux onglets – Utilisation interaction utilisateur ● Background, Browser Action, Page Action… ● Accès aux presse-papiers – Interagir avec le presse papiers "permissions": ["tabs"] "permissions": [ "*://developer.mozilla.org/*", "tabs"] ou
  26. 26. Changements importants
  27. 27. UbuCon Europe Paris 2017 - Extensions → WebExtensions (1/ ● Développement / Debug Firebug > DevTools
  28. 28. UbuCon Europe Paris 2017 - Extensions → WebExtensions (3/ ● Crash – Session Manager > Session Restore
  29. 29. UbuCon Europe Paris 2017 - Extensions → WebExtensions (4/ ● Améliore menu contextuel ● FaviconizeTab > Tab pinning
  30. 30. UbuCon Europe Paris 2017 - Extensions → WebExtensions (5/ ● Multizilla > Tab browsing
  31. 31. UbuCon Europe Paris 2017 - Autres utilisations (1/ ● Recherche d’onglets – WebExtension : Tree Tabs – ● Utile pour gérer des centaines d'onglets ● https://addons.mozilla.org/fr/firefox/addon/tree-tabs
  32. 32. UbuCon Europe Paris 2017 - Autres utilisations (2/ ● Privacy & sécurity – Ublock Origin https://addons.mozilla.org/en-us/firefox/addon/ublock-origin
  33. 33. UbuCon Europe Paris 2017 - Autres utilisations (3/ ● Privacy & sécurity – Ublock Origin – Privacy Badger https://addons.mozilla.org/en-us/firefox/addon/ublock-origin https://addons.mozilla.org/en-us/firefox/addon/privacy-badger17
  34. 34. UbuCon Europe Paris 2017 - Autres utilisations (4/ ● Thèmes : module stylus – https://addons.mozilla.org/en-US/firefox/addon/styl-us/ ● Header : – https://addons.mozilla.org/en-US/firefox/addon/modify-header-value ● Cookie manager : – https://addons.mozilla.org/en-us/firefox/addon/a-cookie-manager ● Laspass : – https://addons.mozilla.org/en-US/firefox/addon/lastpass-password-ma nager/ ● Gostery : – https://addons.mozilla.org/en-US/firefox/addon/ghostery/ ● VPN : – https://addons.mozilla.org/en-US/firefox/addon/windscribe/
  35. 35. Maintenant, utilisons les WebExtensions
  36. 36. UbuCon Europe Paris 2017 - Tester les WebExtensions ● Firefox Nightly http://nightly.mozfr.org/
  37. 37. UbuCon Europe Paris 2017 - Tester les WebExtensions ● Firefox 57 Beta – A partir du 26 septembre 2017 https://www.mozilla.org/fr/firefox/channel/desktop/
  38. 38. UbuCon Europe Paris 2017 - WebExtensions : portage (1/2) ● Les WebExtensions déjà disponibles – https://addons.mozilla.org/en-US/firefox/tag/firefox57 ● Les WebExtensions les plus populaires (en cours) – Are we WebExtensions yet ? ● http://arewewebextensionsyet.com/ ● Les WebExtensions en cours – Discourse Mozilla : ● https://discourse.mozilla.org/c/add-ons
  39. 39. UbuCon Europe Paris 2017 - WebExtensions : portage (2/2) ● Porter une extension Google Chrome – Utilisation facilitée ● https://www.extensiontest.com/ ● Porter une ancienne extension Firefox – Extension héritée (Legacy)
  40. 40. UbuCon Europe Paris 2017 - 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

×