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 écrans animés dans les navigateurs

329 views

Published on

Présentation effectuée à la Cookie Party 2017 par Christophe Villeneuve sur "Les écrans animés dans les navigateurs".
La présentation a pour but de montrer comment utiliser les webExtensions dans l'animation avec des fonctionnalités expérimentales.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Les écrans animés dans les navigateurs

  1. 1. Les écrans animés dans les navigateurs @hellosct1 @hellosct1@mamot.fr Cookie Partie 9 décembre 2017 Christophe Villeneuve Hello / Sector one
  2. 2. .Cookie Party 2017 - 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. .Cookie Party 2017 - Today... ● Are you ready !!! ● The Add-ons compatibility ● And the next
  4. 4. .Cookie Party 2017 - Firefox ‘Quantum’ 57
  5. 5. Le partage
  6. 6. .Cookie Party 2017 - Les WebExtensions ● Créer une API robuste ● Parité avec extensions chrome api ● Documentation ● Prise en charge de Firefox pour Android ● Technologie standard 
  7. 7. .Cookie Party 2017 - Compatibilité ● Edge / Opera / Chrome / Firefox ● Compatible Qtwebkit
  8. 8. Demo : Screen Saver https://addons.mozilla.org/fr/firefox/addon/screen-saver/
  9. 9. .Cookie Party 2017 - Economisateur d’écran ● Proposé par la WebExtension ● Le votre : Personnalisé
  10. 10. .Cookie Party 2017 - Interface utilisateur (1/ L'utilisation d'une extension s'effectue par... Page action (bouton barre d'adresse) Browser action (bouton barre d'outils)
  11. 11. .Cookie Party 2017 - Interface utilisateur (2/ Sidebar (barre latérale) Context menu items (Elément du menu contextuel)
  12. 12. .Cookie Party 2017 - Interface utilisateur (3/ Address bar suggestions (Suggestions de la barre d'adresse) Notifications (Notifications) Bundled web pages (Page web incluses)
  13. 13. .Cookie Party 2017 - Interface utilisateur (4/ Developer tools panels (Panneaux d'outils de développement) Options page (Page d'options)
  14. 14. .Cookie Party 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. .Cookie Party 2017 - Manifest.json (1/2) ● Carte identité d'une extension ● Script au format jSON ● https://developer.mozilla.org/fr/Add-ons/WebExtensions { "manifest_version": 2, "name": "WebExtensions", "version": "2.0", "description": "The WebExtensions", "icons": { "19": "icons/icon-19.png", "48": "icons/icon-48.png" }, }
  16. 16. .Cookie Party 2017 - Manifest.json (2/2) ● 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. .Cookie Party 2017 - Manifest : Anatomie (1/6) ● Script d'arrière plan ● Indépendant – Des pages web – Fenêtres du navigateur ● Exécuter dès que l'extension est chargée ● Permissions nécessaires Background page
  18. 18. .Cookie Party 2017 - Background : Exemple // manifest.json "background": { "scripts": [ "loader.js", "loader_anim.js", ] } Possible "scripts": ["loader.html"]
  19. 19. .Cookie Party 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. .Cookie Party 2017 - Content scripts : Exemple (1/2) // manifest.json "content_scripts": [{ "matches": [ "*://mozilla.com/*", "*://votreURL.org/*", "*://localhost/*" ], "js": [ "js/injection-demo.js" ] }],
  21. 21. .Cookie Party 2017 - Content scripts : Exemple (2/2) // manifest.json "content_scripts": [{ "matches": [ "<all_urls>" ], "exclude_matches": [ "*://www.mozilla.org/*", "*://*.votreURL.org/*" ], "js": [ "background/all-sites.js" ] }],
  22. 22. .Cookie Party 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. .Cookie Party 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. .Cookie Party 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. .Cookie Party 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. .Cookie Party 2017 - Manifest : Anatomie (5/6) ● Définir des préférences en plus ● Accès par les add-ons du navigateur ● Paramètres mémorisés Background page Content scripts Browser action Page action Option page
  27. 27. .Cookie Party 2017 - Option page : Exemple // manifest.json "options_ui": { "page": "options.html" },
  28. 28. .Cookie Party 2017 - Manifest : Anatomie (6/6) ● Ressources incluses dans l'extension (ex : images) ● 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. .Cookie Party 2017 - Incompatibilités API Javascript Source : https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs
  30. 30. Expérimental
  31. 31. .Cookie Party 2017 - Barre latérale (Slide Bar) ● Action barre latérale ● Action du navigateur <> des navigateurs ● Accès par un icône ● Langage : – HTML / CSS / JS anim1
  32. 32. .Cookie Party 2017 - Ressource : Exemple // manifest.json "slidebar_action": [ "default_icon" : "icons/icon.png", "default_title" : "barre verticale", "default_panel": "slidebar/anim-feu.html" ], Sidebar (barre latérale)
  33. 33. .Cookie Party 2017 - DevTools ● Anciennement – Firebug ● API anim2
  34. 34. .Cookie Party 2017 - Ressource : Exemple // manifest.json "devtools_page": "devtools/devtools-page.html", Developer tools panels (Panneaux d'outils de développement)
  35. 35. .Cookie Party 2017 - Thème ● Thème ● Firefox 58 et + anim3
  36. 36. .Cookie Party 2017 - Ressource : Exemple // manifest "theme": { "images": { "headerURL": "background.png", "additional_backgrounds": [ "atari.svg","atari2.svg"] }, "properties": { "additional_backgrounds_alignment": [ "right top", "right top" ], "additional_backgrounds_tiling": [ "repeat" ] }, "colors": { "accentcolor": "#ffAA00", "textcolor": "#0099FF", } },
  37. 37. .Cookie Party 2017 - Ressource : Exemple 2 : Animation ● Animation d’un thème ● SVG animé ● Firefox 59 et + ● Animation disponible https://github.com/hellosct1/theme-animation
  38. 38. .Cookie Party 2017 - 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
  39. 39. .Cookie Party 2017 - Et pour terminer ● Un écran animé de greetings dans le navigateur
  40. 40. .Cookie Party 2017 - Merci Questions Christophe Villeneuve @hellosct1

×