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.

Les WebExtensions et Firefox - JDLL 2017

1 164 vues

Publié le

Présentation effectuée aux JDLL (Journées du Logiciel Libre) 2017 par Christophe Villeneuve sur "Les WebExtensions et Firefox".
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

Les WebExtensions et Firefox - JDLL 2017

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

×