Utiliser et ameliorer firefox avec les webextensions

Présentation effectuée pour Root66 sur le thème "Utiliser et ameliorer firefox avec les webextensions" par Christophe Villeneuve .
La conférence donne une situation globale des WebExtensions, des possibilités d'interrargir avec le navigateur et les différentes API

Transcript

1. Utiliser et améliorer Firefox WebExtensions @hellosct1 @hellosct1@mamot.fr Christophe Villeneuve ROOT66 – 20 Octobre 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. Root66 - Aujourd'hui... • La situation • APIs • Les possibilités • Outils • ...
4. Root66 - Firefox ‘Quantum’ 57
5. Root66 - Extension → WebExtension (1/ • Développement / Debug Firebug > DevTools • Synchronisation FoxMarks > Bookmark Sync
6. Root66 - Extension → WebExtension (2/ • Crash – Session Manager > Session Restore – Tab session manager
7. Root66 - 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. Root66 - Croissance des extensions • Firefox 57 – 6 589 WebExtensions • Firefox 62 – 13 655 WebExtensions https://addons.mozilla.org/en-US/firefox/tag/firefox57 14 novembre 2017 20 octobre 2018
9. Root66 - Firefox 60 (ESR) Firefox 61 +
10. Root66 - Firefox 60 • Support ESR • WebExtensions • Support standard WebAuth – Clef USB physique authentification sur le web
11. Root66 - Firefox 63
12. Root66 - Firefox 63 • 23 octobre 2018 • Important pour les WebExtensions • Evolutions des API – Presse-papiers (Clipboard API) – Sélection de plusieurs onglets (Tabs API) – Moteur de recherche (Search API) – Thème (theme API) – Onglet contextuelle (Menus API) – Type de connexion (WebRequest & Proxy)
13. Root66 - Le développement
14. Root66 - 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
15. Root66 - Les WebExtensions • Créer une API robuste • Parité avec extensions chrome api • Documentation • Prise en charge de Firefox pour Android • Technologie standard
16. Root66 - Compatibilité • Edge / Opera / Chrome / Firefox • Compatible Qtwebkit
17. Root66 - Interface utilisateur (1/ L'utilisation d'une extension s'effectue par... Page action (bouton barre d'adresse) Browser action (bouton barre d'outils)
18. Root66 - Interface utilisateur (2/ Sidebar (barre latérale) Context menu items (Elément du menu contextuel)
19. Root66 - Interface utilisateur (3/ Address bar suggestions (Suggestions de la barre d'adresse) Notifications (Notifications) Bundled web pages (Page web incluses)
20. Root66 - Interface utilisateur (4/ Developer tools panels (Panneaux d'outils de développement) Options page (Page d'options)
21. Root66 - 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
22. Root66 - 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"] } ] }
23. Root66 - APIs Javascript
24. Root66 - PageAction API https://addons.mozilla.org/fr/firefox/addon/share-backported
25. Root66 - Communiquer entre les extensions (1/
26. Root66 - Communiquer entre les extensions (2/ • Devtools panels
27. Root66 - OAUTH (1/
28. Root66 - OAUTH (2/
29. Root66 - Message Natif (1/ https://developer.mozilla.org/fr/Add-ons/WebExtensions/Native_messaging Ping Pong
30. Root66 - Message Natif (2/ • kde_connect • keePassXC-browser • Midi-input-provider • withexeditor • web2mp3 https://addons.mozilla.org
31. Root66 - 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
32. Root66 - API Tabs https://addons.mozilla.org/fr/firefox/addon/tab-invaders
33. Root66 - 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'
34. Root66 - Thème
35. Root66 - Thèmes statiques (1/ { "manifest_version": 2, "version": "1.0", "name": "<your_theme_name>", "theme": { "images": { "headerURL": "<your_header_image>.<type>" }, "colors": { "accentcolor": "#FFFFFF", "textcolor": "#000" } } }
36. Root66 - Thèmes statiques (2/ • Personas Plus → Firefox Color – https://testpilot.firefox.com/experiments/color
37. Root66 - 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
38. Root66 - 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" } }
39. Root66 - Illustrations (1/ • Accentcolor – Couleur d’arrière plan "theme": { "colors": { "accentcolor": "red", "textcolor": "white" } }
40. Root66 - Illustrations (2/ • Accentcolor – Couleur d’arrière plan • Popup • textcolor "theme": { "colors": { "accentcolor": "black", "textcolor": "white", "popup": "red" } }
41. Root66 - Illustrations (3/
42. Root66 - Exemple : Effet jour : nuit • API WebExtensions utilisées – Windows – Alarms Quantum Lights Extension : Quantum Lights
43. Root66 - 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
44. Root66 - Exemple : Container visible • API WebExtensions utilisées – contextualIdentities – Windows – Tabs Extension : Containers Theme
45. Root66 - 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"] }, });
46. Root66 - Thèmes dynamiques animé • API WebExtensions utilisées – Thèmes • RequestAnimationFrame() • AVG au format Animations https://github.com/hellosct1/theme-animation
47. Root66 - Exemple : Thème associé • API fetch • Extension : Open Weather Map
48. Root66 - Environnement travail • API WebExtensions utilisées – Thèmes Extension : Envify
49. Root66 - Sécurité en visuelle • Thème HTTP / HTTPS https://github.com/nt1m/theming-rules
50. Root66 - Confiance ?
51. Root66 - 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
52. Root66 - 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 search storage tabs topSites webNavigation webRequest webRequestBlocking
53. Root66 - 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
54. outils
55. Root66 - Debugging
56. Root66 - Portage d'une extension Google Chrome https://developer.mozilla.org/fr/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension
57. Root66 - Portage d'une ancienne extension https://developer.mozilla.org/fr/Add-ons/WebExtensions/Portage_d_une_extension_Firefox_heritee
58. Root66 - Ressources • Plus de 60 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
59. Root66 - Merci @hellosct1 @hellosct1@mamot.fr