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.

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