The hidden side of webExtensions

Présentation effectuée à "La Face cachée des WebExtensions / the hidden side of WebExtensions" PSES (Pas Sage En Seine) 2018 par Christophe Villeneuve

Elle a pour but de montrer les différentes avancées depuis la version de firefox 'Quantum' 57

Transcript

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