Les écrans animés dans les navigateurs

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.

Transcript

1. Les écrans animés dans les navigateurs @hellosct1 @hellosct1@mamot.fr Cookie Partie 9 décembre 2017 Christophe Villeneuve Hello / Sector one
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. .Cookie Party 2017 - Today... • Are you ready !!! • The Add-ons compatibility • And the next
4. .Cookie Party 2017 - Firefox ‘Quantum’ 57
5. Le partage
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. .Cookie Party 2017 - Compatibilité • Edge / Opera / Chrome / Firefox • Compatible Qtwebkit
8. Demo : Screen Saver https://addons.mozilla.org/fr/firefox/addon/screen-saver/
9. .Cookie Party 2017 - Economisateur d’écran • Proposé par la WebExtension • Le votre : Personnalisé
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. .Cookie Party 2017 - Interface utilisateur (2/ Sidebar (barre latérale) Context menu items (Elément du menu contextuel)
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. .Cookie Party 2017 - Interface utilisateur (4/ Developer tools panels (Panneaux d'outils de développement) Options page (Page d'options)
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. .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. .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. .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. .Cookie Party 2017 - Background : Exemple // manifest.json "background": { "scripts": [ "loader.js", "loader_anim.js", ] } Possible "scripts": ["loader.html"]
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. .Cookie Party 2017 - Content scripts : Exemple (1/2) // manifest.json "content_scripts": [{ "matches": [ "*://mozilla.com/*", "*://votreURL.org/*", "*://localhost/*" ], "js": [ "js/injection-demo.js" ] }],
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. .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. .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. .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. .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. .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. .Cookie Party 2017 - Option page : Exemple // manifest.json "options_ui": { "page": "options.html" },
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. .Cookie Party 2017 - Incompatibilités API Javascript Source : https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs
30. Expérimental
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. .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. .Cookie Party 2017 - DevTools • Anciennement – Firebug • API anim2
34. .Cookie Party 2017 - Ressource : Exemple // manifest.json "devtools_page": "devtools/devtools-page.html", Developer tools panels (Panneaux d'outils de développement)
35. .Cookie Party 2017 - Thème • Thème • Firefox 58 et + anim3
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. .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. .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. .Cookie Party 2017 - Et pour terminer • Un écran animé de greetings dans le navigateur
40. .Cookie Party 2017 - Merci Questions Christophe Villeneuve @hellosct1