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.

La face cachee des web extensions

663 views

Published on

Présentation effectuée au RMLL 2018 sur "La face cachée des WebExtensions" par Christophe Villeneuve .
Vous verrez les différentes avancées depuis la version de firefox 'Quantum' 57

Published in: Internet
  • Be the first to comment

  • Be the first to like this

La face cachee des web extensions

  1. 1. La face cachée des WebExtensions @hellosct1 @hellosct1@mamot.fr Christophe Villeneuve 9 juillet 2018
  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. .RMLL 2018 - Aujourd'hui... ● La situation ● APIs ● Les possibilités ● Outils ● ...
  4. 4. .RMLL 2018 - Firefox ‘Quantum’ 57
  5. 5. .RMLL 2018 - Extension → WebExtension (1/ ● Développement / Debug Firebug > DevTools ● Synchronisation FoxMarks > Bookmark Sync
  6. 6. .RMLL 2018 - Extension → WebExtension (2/ ● Crash – Session Manager > Session Restore – Tab session manager
  7. 7. .RMLL 2018 - Depuis le lancement ● 1ère étape : compatibilité avec Chrome – Atteint le niveau de compatibilité pertinante ● 99% des 100 meilleurs API ● 91% des 250 meilleurs API ● 2ème étape : Au delà de Chrome – API les onglets contextuels ● Ex : Facebook container – API afficher / cacher les onglets ● Ex : session MGMT, groupes d'onglets... – API thème – ...
  8. 8. .RMLL 2018 - Croissance des extensions ● Firefox 57 – 6 589 WebExtensions ● Firefox 61 – 11 324 WebExtensions https://addons.mozilla.org/en-US/firefox/tag/firefox57 14 novembre 2017 9 juillet 2018
  9. 9. .RMLL 2018 - Firefox 60 (ESR) Firefox 61 +
  10. 10. .RMLL 2018 - Firefox 60 ● Support ESR ● WebExtensions ● Support standard WebAuthn – Clef USB physique authentification sur le web
  11. 11. Le développement
  12. 12. .RMLL 2018 - 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
  13. 13. .RMLL 2018 - Les WebExtensions ● Créer une API robuste ● Parité avec extensions chrome api ● Documentation ● Prise en charge de Firefox pour Android ● Technologie standard 
  14. 14. .RMLL 2018 - Compatibilité ● Edge / Opera / Chrome / Firefox ● Compatible Qtwebkit
  15. 15. .RMLL 2018 - Interface utilisateur (1/ L'utilisation d'une extension s'effectue par... Page action (bouton barre d'adresse) Browser action (bouton barre d'outils)
  16. 16. .RMLL 2018 - Interface utilisateur (2/ Sidebar (barre latérale) Context menu items (Elément du menu contextuel)
  17. 17. .RMLL 2018 - Interface utilisateur (3/ Address bar suggestions (Suggestions de la barre d'adresse) Notifications (Notifications) Bundled web pages (Page web incluses)
  18. 18. .RMLL 2018 - Interface utilisateur (4/ Developer tools panels (Panneaux d'outils de développement) Options page (Page d'options)
  19. 19. .RMLL 2018 - 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
  20. 20. .RMLL 2018 - Manifest.json { "description": "description", "manifest_version": 2, "name": "Borderify", "version": "1.0", "homepage_url": "https://url_extension", "icons": { [ … ] }, "content_scripts": [ { "matches": ["*://*.mozilla.org/*"], "js": ["borderify.js"] } ] }
  21. 21. .RMLL 2018 - APIs Javascript
  22. 22. .RMLL 2018 - PageAction API https://addons.mozilla.org/fr/firefox/addon/share-backported
  23. 23. .RMLL 2018 - Communiquer entre les extensions (1/
  24. 24. .RMLL 2018 - Communiquer entre les extensions (2/ ● Devtools panels
  25. 25. .RMLL 2018 - OAUTH (1/
  26. 26. .RMLL 2018 - OAUTH (2/
  27. 27. .RMLL 2018 - Message Natif (1/ https://developer.mozilla.org/fr/Add-ons/WebExtensions/Native_messaging Ping Pong
  28. 28. .RMLL 2018 - Message Natif (2/ ● kde_connect ● keePassXC-browser ● Midi-input-provider ● withexeditor ● web2mp3 https://addons.mozilla.org
  29. 29. .RMLL 2018 - Aperçu / Impression ● Print – Tabs.print() – Tabs.printPreview() – Tabs.saveAsPDF() ● Mode Lecture – Tabs.toogleReaderMode() https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs/print https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs/printPreview https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs/saveAsPDF https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs/toggleReaderMode
  30. 30. .RMLL 2018 - API Tabs https://addons.mozilla.org/fr/firefox/addon/tab-invaders
  31. 31. .RMLL 2018 - Voir / Cacher ● Menus – onHidden() / onShown() / Refresh() ● Onglets (tabs) – Tabs.show() ● Afficher un ID d’onglet – Tabs.hide() ● Masquer un ID d’onglet – Tab.hidden() ● savoir quel onglet est masqué Permission 'tabIde'
  32. 32. .RMLL 2018 - Thème
  33. 33. .RMLL 2018 - Thème dynamiques ● Les permissions d'hôte = URL *://developer.mozilla.org/* ● Les permissions API – Associés à une autre API (Alarms, background...) ● La permission activeTab – Onglet actif
  34. 34. .RMLL 2018 - Exemple par le code { "colors": { "accentcolor": "tomato", "textcolor": "white", "toolbar": "#444", "toolbar_text": "lightgray", "toolbar_field": "black", "toolbar_field_text": "white" } "images": { "headerURL": "img/header.jpg" } }
  35. 35. .RMLL 2018 - Illustrations (1/ ● Accentcolor – Couleur d’arrière plan "theme": { "colors": { "accentcolor": "red", "textcolor": "white" } }
  36. 36. .RMLL 2018 - Illustrations (2/ ● Accentcolor – Couleur d’arrière plan ● Popup ● textcolor "theme": { "colors": { "accentcolor": "black", "textcolor": "white", "popup": "red" } }
  37. 37. .RMLL 2018 - Illustrations (3/
  38. 38. .RMLL 2018 - Exemple : Effet jour : nuit ● API WebExtensions utilisées – Windows – Alarms Quantum Lights Extension : Quantum Lights
  39. 39. .RMLL 2018 - Containers ● = onglets contextuels ● Ceux sont : – Onglets normaux – Accès à une portion limitée de stockage ● Vos sessions enregistrées – pas de pistages des données ● Aucun contenu externe ne sera importé – Ex : Facebook container
  40. 40. .RMLL 2018 - Exemple : Container visible ● API WebExtensions utilisées – contextualIdentities – Windows – Tabs Extension : Containers Theme
  41. 41. .RMLL 2018 - Thèmes dynamiques animé browser.theme.update(window.id, { images: { headerURL: "resources/background.png", additional_backgrounds: ["resources/anim.svg"] }, properties: { additional_backgrounds_alignment: ["right top"], additional_backgrounds_tiling: ["repeat"] }, });
  42. 42. .RMLL 2018 - Thèmes dynamiques animé ● API WebExtensions utilisées – Thèmes ● RequestAnimationFrame() ● AVG au format Animations https://github.com/hellosct1/theme-animation
  43. 43. .RMLL 2018 - Exemple : Thème associé ● API fetch ● Extension : Open Weather Map
  44. 44. .RMLL 2018 - Environnement travail ● API WebExtensions utilisées – Thèmes Extension : Envify
  45. 45. .RMLL 2018 - Sécurité en visuelle ● Thème HTTP / HTTPS https://github.com/nt1m/theming-rules
  46. 46. .RMLL 2018 - Confiance ?
  47. 47. .RMLL 2018 - 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
  48. 48. .RMLL 2018 - 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
  49. 49. .RMLL 2018 - 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
  50. 50. outils
  51. 51. .RMLL 2018 - Debugging
  52. 52. .RMLL 2018 - Portage d'une extension Google Chrome https://developer.mozilla.org/fr/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension
  53. 53. .RMLL 2018 - Portage d'une ancienne extension https://developer.mozilla.org/fr/Add-ons/WebExtensions/Portage_d_une_extension_Firefox_heritee
  54. 54. .RMLL 2018 - 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
  55. 55. Merci @hellosct1 @hellosct1@mamot.fr

×