La face cachee des web extensions

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

Transcript

1. La face cachée des WebExtensions @hellosct1 @hellosct1@mamot.fr Christophe Villeneuve 9 juillet 2018
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. .RMLL 2018 - Aujourd'hui... • La situation • APIs • Les possibilités • Outils • ...
4. .RMLL 2018 - Firefox ‘Quantum’ 57
5. .RMLL 2018 - Extension → WebExtension (1/ • Développement / Debug Firebug > DevTools • Synchronisation FoxMarks > Bookmark Sync
6. .RMLL 2018 - Extension → WebExtension (2/ • Crash – Session Manager > Session Restore – Tab session manager
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. .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. .RMLL 2018 - Firefox 60 (ESR) Firefox 61 +
10. .RMLL 2018 - Firefox 60 • Support ESR • WebExtensions • Support standard WebAuthn – Clef USB physique authentification sur le web
11. Le développement
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. .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. .RMLL 2018 - Compatibilité • Edge / Opera / Chrome / Firefox • Compatible Qtwebkit
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. .RMLL 2018 - Interface utilisateur (2/ Sidebar (barre latérale) Context menu items (Elément du menu contextuel)
17. .RMLL 2018 - Interface utilisateur (3/ Address bar suggestions (Suggestions de la barre d'adresse) Notifications (Notifications) Bundled web pages (Page web incluses)
18. .RMLL 2018 - Interface utilisateur (4/ Developer tools panels (Panneaux d'outils de développement) Options page (Page d'options)
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. .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. .RMLL 2018 - APIs Javascript
22. .RMLL 2018 - PageAction API https://addons.mozilla.org/fr/firefox/addon/share-backported
23. .RMLL 2018 - Communiquer entre les extensions (1/
24. .RMLL 2018 - Communiquer entre les extensions (2/ • Devtools panels
25. .RMLL 2018 - OAUTH (1/
26. .RMLL 2018 - OAUTH (2/
27. .RMLL 2018 - Message Natif (1/ https://developer.mozilla.org/fr/Add-ons/WebExtensions/Native_messaging Ping Pong
28. .RMLL 2018 - Message Natif (2/ • kde_connect • keePassXC-browser • Midi-input-provider • withexeditor • web2mp3 https://addons.mozilla.org
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. .RMLL 2018 - API Tabs https://addons.mozilla.org/fr/firefox/addon/tab-invaders
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. .RMLL 2018 - Thème
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. .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. .RMLL 2018 - Illustrations (1/ • Accentcolor – Couleur d’arrière plan "theme": { "colors": { "accentcolor": "red", "textcolor": "white" } }
36. .RMLL 2018 - Illustrations (2/ • Accentcolor – Couleur d’arrière plan • Popup • textcolor "theme": { "colors": { "accentcolor": "black", "textcolor": "white", "popup": "red" } }
37. .RMLL 2018 - Illustrations (3/
38. .RMLL 2018 - Exemple : Effet jour : nuit • API WebExtensions utilisées – Windows – Alarms Quantum Lights Extension : Quantum Lights
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. .RMLL 2018 - Exemple : Container visible • API WebExtensions utilisées – contextualIdentities – Windows – Tabs Extension : Containers Theme
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. .RMLL 2018 - Thèmes dynamiques animé • API WebExtensions utilisées – Thèmes • RequestAnimationFrame() • AVG au format Animations https://github.com/hellosct1/theme-animation
43. .RMLL 2018 - Exemple : Thème associé • API fetch • Extension : Open Weather Map
44. .RMLL 2018 - Environnement travail • API WebExtensions utilisées – Thèmes Extension : Envify
45. .RMLL 2018 - Sécurité en visuelle • Thème HTTP / HTTPS https://github.com/nt1m/theming-rules
46. .RMLL 2018 - Confiance ?
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. .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. .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. outils
51. .RMLL 2018 - Debugging
52. .RMLL 2018 - Portage d'une extension Google Chrome https://developer.mozilla.org/fr/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension
53. .RMLL 2018 - Portage d'une ancienne extension https://developer.mozilla.org/fr/Add-ons/WebExtensions/Portage_d_une_extension_Firefox_heritee
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. Merci @hellosct1 @hellosct1@mamot.fr