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.

Habillez votre navigateur avec les webextensions

984 views

Published on

La conférence a pour but de montrer différentes manières d'habillées votre navigateur Firefox avec les webExtensions, présentée au Geek Faeries 2018

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Habillez votre navigateur avec les webextensions

  1. 1. Habillez votre navigateur avec les WebExtensions @hellosct1 @hellosct1@mamot.fr Geek Faeries le 3 juin Christophe Villeneuve
  2. 2. .Geek Faeries 2018 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. .Geek Faeries 2018 Today... ● … !!! ## # ! # ## ...
  4. 4. .Geek Faeries 2018 Firefox ‘Quantum’ 57
  5. 5. Le partage
  6. 6. .Geek Faeries 2018 Les WebExtensions ● Créer une API robuste ● Parité avec extensions chrome api ● Documentation ● Prise en charge de Firefox pour Android ● Technologie standard 
  7. 7. .Geek Faeries 2018 Compatibilité ● Edge / Opera / Chrome / Firefox ● Compatible Qtwebkit
  8. 8. .Geek Faeries 2018 Aujourd’hui, c'est... ● 10744 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
  9. 9. .Geek Faeries 2018 Firefox 60 (ESR)
  10. 10. .Geek Faeries 2018 Firefox 60 ● Support ESR ● WebExtensions ● Support standard WebAuthn – Clef USB physique authentification sur le web
  11. 11. .Geek Faeries 2018 Interface utilisateur (1/ L'utilisation d'une extension s'effectue par... Page action (bouton barre d'adresse) Browser action (bouton barre d'outils)
  12. 12. .Geek Faeries 2018 Interface utilisateur (2/ Sidebar (barre latérale) Context menu items (Elément du menu contextuel)
  13. 13. .Geek Faeries 2018 Interface utilisateur (3/ Address bar suggestions (Suggestions de la barre d'adresse) Notifications (Notifications) Bundled web pages (Page web incluses)
  14. 14. .Geek Faeries 2018 Interface utilisateur (4/ Developer tools panels (Panneaux d'outils de développement) Options page (Page d'options)
  15. 15. .Geek Faeries 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
  16. 16. .Geek Faeries 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
  17. 17. .Geek Faeries 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" } }
  18. 18. .Geek Faeries 2018 Illustrations (1/ ● Accentcolor – Couleur d’arrière plan "theme": { "colors": { "accentcolor": "red", "textcolor": "white" } }
  19. 19. .Geek Faeries 2018 Illustrations (2/ ● Accentcolor – Couleur d’arrière plan ● Popup ● textcolor "theme": { "colors": { "accentcolor": "black", "textcolor": "white", "popup": "red" } }
  20. 20. .Geek Faeries 2018 Illustrations (3/
  21. 21. .Geek Faeries 2018 Exemple : Effet jour : nuit ● API WebExtensions utilisées – Windows – Alarms Quantum Lights Extension : Quantum Lights
  22. 22. .Geek Faeries 2018 Containers ● = onglets contextuels ● Ceux sont : – Onglets normaux – Accès à une portion limitée de stockage ● Aucun contenu externe ne sera importé ● Vos sessions enregistrées – pas de pistages des données
  23. 23. .Geek Faeries 2018 Exemple : Container visible ● API WebExtensions utilisées – contextualIdentities – Windows – Tabs Extension : Containers Theme
  24. 24. .Geek Faeries 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"] }, });
  25. 25. .Geek Faeries 2018 Thèmes dynamiques animé ● API WebExtensions utilisées – Thèmes ● RequestAnimationFrame() ● AVG au format Animations https://github.com/hellosct1/theme-animation
  26. 26. .Geek Faeries 2018 Exemple : Thème associé ● API fetch ● Extension : Open Weather Map
  27. 27. .Geek Faeries 2018 Environnement travail ● API WebExtensions utilisées – Thèmes Extension : Envify
  28. 28. .Geek Faeries 2018 Jeux
  29. 29. .Geek Faeries 2018 Sécurité en visuelle ● Thème HTTP / HTTPS https://github.com/nt1m/theming-rules
  30. 30. .Geek Faeries 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
  31. 31. .Geek Faeries 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
  32. 32. .Geek Faeries 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
  33. 33. .Geek Faeries 2018 Plein écran screen-saver
  34. 34. .Geek Faeries 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
  35. 35. .Geek Faeries 2018 Merci Questions Christophe Villeneuve @hellosct1

×