O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Utiliser et ameliorer firefox avec les webextensions

155 visualizações

Publicada em

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

Publicada em: Internet
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Utiliser et ameliorer firefox avec les webextensions

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

×