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.

La face cachee des web extensions

735 vues

Publié le

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

Publié dans : Internet
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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

×