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.

Les web extensions

1,134 views

Published on

Présentation effectuée au Rencontres Mondiales du Logiciel Libre (RMLL) 2017 par Christophe Villeneuve sur "Les Web Extensions".
Il s'agit de comprendre pour les WebExtensions et ce qui va impliquer dans les navigateurs

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Les web extensions

  1. 1. Les WebExtensions Christophe Villeneuve @hellosct1
  2. 2. 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. Aujourd'hui ● Pourquoi les WebExtensions !!! ● Conception ● Réalisation
  4. 4. RMLL 2017 – 4 Juillet 2017 Les Extensions Sont Mortes Vive Les Extensions
  5. 5. RMLL 2017 – 4 Juillet 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 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)
  6. 6. RMLL 2017 – 4 Juillet 2017 Les Extensions Firefox ● Firebug > DevTools ● FoxMarks > Bookmark Sync ● Session Manager > Session Restore ● Faviconize Tab > Tab pinning ● Multizilla > Tab browsing
  7. 7. RMLL 2017 – 4 Juillet 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 d'aujourd'hui – Mises à jours / révisions… trop long
  8. 8. RMLL 2017 – 4 Juillet 2017 Bienvenue WebExtensions ● Créer une API robuste ● Parité avec extensions chrome api ● Documentation ● Prise en charge de Firefox pour android ● Technologie Standard
  9. 9. RMLL 2017 – 4 Juillet 2017 Compatibilité ● Edge / Opera / Chrome / Firefox ● Compatible Qtwebkit
  10. 10. RMLL 2017 – 4 Juillet 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 – … ● Les WebExtensions déjà disponible – https://addons.mozilla.org/en-US/firefox/tag/firefox57
  11. 11. RMLL 2017 – 4 Juillet 2017 Demo WebExt manifest https://github.com/hellosct1/demo-WebExt-manifest
  12. 12. RMLL 2017 – 4 Juillet 2017 Vous verrez ceci... 1 clic ouvrir la pop-up Ou 1 clic Reset
  13. 13. Conception
  14. 14. RMLL 2017 – 4 Juillet 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
  15. 15. RMLL 2017 – 4 Juillet 2017 Manifest.json ● Carte identité d'une extension ● Script au format jSON ● https://developer.mozilla.org/fr/Add-ons/WebExtensions { "manifest_version": 2, "name": "RMLL", "version": "1.0", "description": "Demo RMLL", "icons": { "19": "icons/icon-19.png", "48": "icons/icon-48.png" }, }
  16. 16. RMLL 2017 – 4 Juillet 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
  17. 17. RMLL 2017 – 4 Juillet 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
  18. 18. RMLL 2017 – 4 Juillet 2017 Background : Exemple // manifest.json "background": { "scripts": ["background.js"] } // manifest.json "background": { "page": ["background.html"] }
  19. 19. RMLL 2017 – 4 Juillet 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
  20. 20. RMLL 2017 – 4 Juillet 2017 Content scripts : Exemple // manifest.json "content_scripts": [{ "matches": [ "*://mozilla.com/*", "*://localhost/*" ], "js": [ "js/injection-demo.js" ] }],
  21. 21. RMLL 2017 – 4 Juillet 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
  22. 22. RMLL 2017 – 4 Juillet 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" }
  23. 23. RMLL 2017 – 4 Juillet 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
  24. 24. RMLL 2017 – 4 Juillet 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" }
  25. 25. RMLL 2017 – 4 Juillet 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
  26. 26. RMLL 2017 – 4 Juillet 2017 Option page : Exemple // manifest.json "options_ui": { "page": "options.html" },
  27. 27. RMLL 2017 – 4 Juillet 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
  28. 28. RMLL 2017 – 4 Juillet 2017 Ressource : Exemple // manifest.json "web_accessible_resources": [ "views/*" },
  29. 29. RMLL 2017 – 4 Juillet 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
  30. 30. Installation provisoire / Test / Debug
  31. 31. RMLL 2017 – 4 Juillet 2017 Installation temporaire ● about:debugging
  32. 32. Publication
  33. 33. RMLL 2017 – 4 Juillet 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
  34. 34. RMLL 2017 – 4 Juillet 2017 Procédure ● Connecter – https://addons.mozilla.org ● Soumettre – Par le site – Mode personnel
  35. 35. RMLL 2017 – 4 Juillet 2017 Par le site (1/2)
  36. 36. RMLL 2017 – 4 Juillet 2017 Par le site (2/2)
  37. 37. RMLL 2017 – 4 Juillet 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
  38. 38. RMLL 2017 – 4 Juillet 2017 Gestion personnelle
  39. 39. RMLL 2017 – 4 Juillet 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
  40. 40. Merci Questions Christophe Villeneuve @hellosct1

×