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.
iGraal
& Les WebExtensions
[16⋅10⋅2017]
Qui sommes-nous ?
Christophe FERNANDES
IT Manager @ iGraal
Developpeur iOS
Developpeur Extensions
@chris_fds
@fernandeschr...
01. iGraal
02. WebExtensions
02.1 La structure
02.2 Les principales APIs utilisées
03. Développement cross browser
04. Con...
01. iGraal
En général
01. iGraal, une success story
iGraal en quelques chiffres
+3 000 000
inscrits
+300 000
Commandes
par mois
+1 650
Marchands...
01. iGraal, le cashback c’est quoi ?
Vous achetez sur Internet ?
iGraal vous reverse de l’argent
lors de vos achats en lig...
Le marchand nous rémunère
pour votre achat
Nous partageons cette
commission avec vous !
01. iGraal, le cashback c’est quoi...
Dès 20€ cumulés, vous récupérez vos gains !
01. iGraal, le cashback c’est quoi ?
Vous cumulez vos gains sur votre cagnotte...
1.2M
visiteurs uniques mensuels
95k
Utilisateurs actifs mensuels
160k
membres iGraal
Site web responsive Applications mobi...
L’extension
01. iGraal, l’extension
L’extension iGraal est un outil offert aux utilisateurs iGraal afin de :
● Connaître les dernières...
01. iGraal, l’extension
Juin 2017 : Refonte de notre extension
Objectifs :
● Adapter l’extension au design actuel
du site ...
02. WebExtensions
02.1 Structure de l’extension
02.1 WebExtensions, la structure
L’extension est constituée par 3 éléments principaux
Background
script
● Assure la récupé...
02.1 Les principales APIs utilisées
Tabs
L’API browser.tabs permet de :
● Ajouter des listeners sur les événements des
tabs : ouverture, fermeture, mise à jour etc...
02.1 WebExtensions, l’API tabs, la démo
https://github.com/igraal/WebExtensions/releases/tag/tabs-sample
Démo !
02.1 WebExtensions, l’API tabs, le code
https://github.com/igraal/WebExtensions/releases/tag/tabs-sample
1
background.js
02.1 WebExtensions, l’API tabs, le code
https://github.com/igraal/WebExtensions/releases/tag/tabs-sample
background.js
2
02.1 WebExtensions, l’API tabs, le code
https://github.com/igraal/WebExtensions/releases/tag/tabs-sample
3
background.js
....
Runtime
02.1 WebExtensions, l’API runtime
https://developer.mozilla.org/fr/Add-ons/WebExtensions/API/runtime
L’API browser.runtime...
02.1 WebExtensions, l’API runtime, la démo
https://github.com/igraal/WebExtensions/releases/tag/send-message-sample
Démo !
Background.js
02.1 WebExtensions, l’API runtime, le code
https://github.com/igraal/WebExtensions/releases/tag/send-message-sample
backgr...
background.js
3
02.1 WebExtensions, l’API runtime, le code
https://github.com/igraal/WebExtensions/releases/tag/send-messa...
02.1 WebExtensions, l’API runtime, le code
https://github.com/igraal/WebExtensions/releases/tag/send-message-sample
backgr...
https://github.com/igraal/WebExtensions/releases/tag/send-message-sample
02.1 WebExtensions, l’API runtime, le code
backgr...
background.js
7
02.1 WebExtensions, l’API runtime, le code
https://github.com/igraal/WebExtensions/releases/tag/send-messa...
02.1 WebExtensions, l’API runtime, le code
https://github.com/igraal/WebExtensions/releases/tag/send-message-sample
backgr...
02.1 WebExtensions, l’API runtime, le code
https://github.com/igraal/WebExtensions/releases/tag/send-message-sample
backgr...
Popup.js
02.1 WebExtensions, l’API runtime, le code
https://github.com/igraal/WebExtensions/releases/tag/send-message-sample
popup....
02.1 WebExtensions, l’API runtime, le code
https://github.com/igraal/WebExtensions/releases/tag/send-message-sample
popup....
popup.js
02.1 WebExtensions, l’API runtime, le code
https://github.com/igraal/WebExtensions/releases/tag/send-message-samp...
On utilise aussi ...
webRequest.onBeforeRedirect
02.1 WebExtensions, on utilise aussi les APIs...
Nous utilisons aussi les APIs suivantes
brows...
03. Développement
cross browser
03. Développement cross browser
L’adaptation cross browser :
● L’utilisation de “browser“ ne fonctionne pas
sur Chrome et ...
03. Développement cross browser
https://github.com/mozilla/webextension-polyfill
Les solutions adoptées
● L’utilisation “d...
03. Développement cross browser, démo
https://github.com/igraal/WebExtensions/releases/tag/cross-browser-sample
Démo !
05. CONCLUSION
05. Conclusion
● Nous avons une extension cross browser
● Dernières technos en vogue : React, Redux, RxJs
● Intégration co...
04. QUESTIONS /
RÉPONSES
04. Questions / Réponses
La présentation
L’application mobileLe site
iGraal recrute !
Développeur(se) PHP Backend
Développ...
Upcoming SlideShare
Loading in …5
×

iGraal et les webextensions

1,526 views

Published on

Présentation par Christophe FERNANDES et Athanase Kalantzakis. Retour d'expérience et application professionnel des API WebExtensions. Présentée lors du meetup chez Firefox : introduction aux webextensions.

Published in: Technology
  • Be the first to comment

iGraal et les webextensions

  1. 1. iGraal & Les WebExtensions [16⋅10⋅2017]
  2. 2. Qui sommes-nous ? Christophe FERNANDES IT Manager @ iGraal Developpeur iOS Developpeur Extensions @chris_fds @fernandeschristophe Athanase KALANTZAKIS Lead Developer @ iGraal Developpeur Android Developpeur Extensions
  3. 3. 01. iGraal 02. WebExtensions 02.1 La structure 02.2 Les principales APIs utilisées 03. Développement cross browser 04. Conclusion 05. Questions / Réponses Sommaire
  4. 4. 01. iGraal
  5. 5. En général
  6. 6. 01. iGraal, une success story iGraal en quelques chiffres +3 000 000 inscrits +300 000 Commandes par mois +1 650 Marchands partenaires 18 millions € de CA en 2016 Créé en 2006, leader du marché du cashback depuis 2012 en France Ouverture en 2009 de l’Allemagne, #2 sur ce marché Décembre 2016 : Prise de participation majoritaire par le groupe M6
  7. 7. 01. iGraal, le cashback c’est quoi ? Vous achetez sur Internet ? iGraal vous reverse de l’argent lors de vos achats en ligne C’est le cashback !
  8. 8. Le marchand nous rémunère pour votre achat Nous partageons cette commission avec vous ! 01. iGraal, le cashback c’est quoi ? Vous achetez chez un marchand partenaire en passant par iGraal 1 2 3
  9. 9. Dès 20€ cumulés, vous récupérez vos gains ! 01. iGraal, le cashback c’est quoi ? Vous cumulez vos gains sur votre cagnotte iGraal 4
  10. 10. 1.2M visiteurs uniques mensuels 95k Utilisateurs actifs mensuels 160k membres iGraal Site web responsive Applications mobile iOS & Android Extensions 01. iGraal, un dispositif multicanal
  11. 11. L’extension
  12. 12. 01. iGraal, l’extension L’extension iGraal est un outil offert aux utilisateurs iGraal afin de : ● Connaître les dernières offres proposées ● Éviter d’oublier d’activer le cashback ● Activer le cashback sans passer par le site ● Les rassurer sur l’obtention du cashback Disponible sur les 4 principaux navigateurs :
  13. 13. 01. iGraal, l’extension Juin 2017 : Refonte de notre extension Objectifs : ● Adapter l’extension au design actuel du site et des applications mobiles ● Mise à niveau des APIs ● Mise à jour des technos ● Utilisation des WebExtensions
  14. 14. 02. WebExtensions
  15. 15. 02.1 Structure de l’extension
  16. 16. 02.1 WebExtensions, la structure L’extension est constituée par 3 éléments principaux Background script ● Assure la récupération des données depuis l’API iGraal ● Gère le suivi de la navigation pour la détection ● Contient les règles métiers Popup ● Présente les dernières offres ● Navigation par catégories ● Recherche de marchands ● Rappel des offres du marchand (mode détecté et activé) Content scripts ● Communication avec le site iGraal ● Toolbar sur les partenaires ● Gère l’ajout de picto sur les SERPS ● Alerte panier etc ….
  17. 17. 02.1 Les principales APIs utilisées
  18. 18. Tabs
  19. 19. L’API browser.tabs permet de : ● Ajouter des listeners sur les événements des tabs : ouverture, fermeture, mise à jour etc... ● Ouvrir/Fermer une tab ● Changer l’url ou une propriété de la tab ● Récupérer la tab courante, toutes les tabs, celles d’une fenêtre … C’est via cette API que nous assurons : ● Détection du cashback ● Sécurité de l’obtention du cashback 02.1 WebExtensions, l’API tabs https://developer.mozilla.org/fr/Add-ons/WebExtensions/API/tabs
  20. 20. 02.1 WebExtensions, l’API tabs, la démo https://github.com/igraal/WebExtensions/releases/tag/tabs-sample Démo !
  21. 21. 02.1 WebExtensions, l’API tabs, le code https://github.com/igraal/WebExtensions/releases/tag/tabs-sample 1 background.js
  22. 22. 02.1 WebExtensions, l’API tabs, le code https://github.com/igraal/WebExtensions/releases/tag/tabs-sample background.js 2
  23. 23. 02.1 WebExtensions, l’API tabs, le code https://github.com/igraal/WebExtensions/releases/tag/tabs-sample 3 background.js ............
  24. 24. Runtime
  25. 25. 02.1 WebExtensions, l’API runtime https://developer.mozilla.org/fr/Add-ons/WebExtensions/API/runtime L’API browser.runtime permet de : ● Récupérer des informations sur l’extension et son environnement d’exécution : id, os, architecture etc... ● Communiquer entre les différents composants de l’extension. ● Définir une url de désinstallation
  26. 26. 02.1 WebExtensions, l’API runtime, la démo https://github.com/igraal/WebExtensions/releases/tag/send-message-sample Démo !
  27. 27. Background.js
  28. 28. 02.1 WebExtensions, l’API runtime, le code https://github.com/igraal/WebExtensions/releases/tag/send-message-sample background.js 1 background.js 2
  29. 29. background.js 3 02.1 WebExtensions, l’API runtime, le code https://github.com/igraal/WebExtensions/releases/tag/send-message-sample
  30. 30. 02.1 WebExtensions, l’API runtime, le code https://github.com/igraal/WebExtensions/releases/tag/send-message-sample background.js 4 background.js 5
  31. 31. https://github.com/igraal/WebExtensions/releases/tag/send-message-sample 02.1 WebExtensions, l’API runtime, le code background.js 6 ...
  32. 32. background.js 7 02.1 WebExtensions, l’API runtime, le code https://github.com/igraal/WebExtensions/releases/tag/send-message-sample
  33. 33. 02.1 WebExtensions, l’API runtime, le code https://github.com/igraal/WebExtensions/releases/tag/send-message-sample background.js 8
  34. 34. 02.1 WebExtensions, l’API runtime, le code https://github.com/igraal/WebExtensions/releases/tag/send-message-sample background.js 9
  35. 35. Popup.js
  36. 36. 02.1 WebExtensions, l’API runtime, le code https://github.com/igraal/WebExtensions/releases/tag/send-message-sample popup.js 1 popup.js 2
  37. 37. 02.1 WebExtensions, l’API runtime, le code https://github.com/igraal/WebExtensions/releases/tag/send-message-sample popup.js 3
  38. 38. popup.js 02.1 WebExtensions, l’API runtime, le code https://github.com/igraal/WebExtensions/releases/tag/send-message-sample 4
  39. 39. On utilise aussi ...
  40. 40. webRequest.onBeforeRedirect 02.1 WebExtensions, on utilise aussi les APIs... Nous utilisons aussi les APIs suivantes browser.management browser.browserActionstorage privacy.websites.thirdPartyCookiesAllowed
  41. 41. 03. Développement cross browser
  42. 42. 03. Développement cross browser L’adaptation cross browser : ● L’utilisation de “browser“ ne fonctionne pas sur Chrome et Opera ● Certaines APIs ne sont pas encore disponibles sur Firefox ● Nous supportons aussi the new IE … Safari ! ● Nous souhaitons partager toutes les règles métiers
  43. 43. 03. Développement cross browser https://github.com/mozilla/webextension-polyfill Les solutions adoptées ● L’utilisation “d'adapters” pour les deux types d’API ● Utilisation du webextension-polyfill ● Utilisation de webpack pour générer deux build différents
  44. 44. 03. Développement cross browser, démo https://github.com/igraal/WebExtensions/releases/tag/cross-browser-sample Démo !
  45. 45. 05. CONCLUSION
  46. 46. 05. Conclusion ● Nous avons une extension cross browser ● Dernières technos en vogue : React, Redux, RxJs ● Intégration continue avec l’application du GitFlow
  47. 47. 04. QUESTIONS / RÉPONSES
  48. 48. 04. Questions / Réponses La présentation L’application mobileLe site iGraal recrute ! Développeur(se) PHP Backend Développeur(se) PHP Fullstack / JS - stage ou alternance Rédacteur Web + Community management - stage Pour postuler : jobs-fr@igraal.com

×