Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Utiliser et ameliorer firefox avec les webextensions

1,038 views

Published on

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

Published in: Internet
  • Can You Use Any Charger With Any Cell Phone, Laptop, Camera, or Tablet? ▲▲▲ http://t.cn/AiFAGBwT
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

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

×