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.

1. iGraal
& Les WebExtensions
[16⋅10⋅2017]

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. 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. 01. iGraal

5. En général

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. 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. 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. 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. 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. L’extension

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. 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. 02. WebExtensions

15. 02.1 Structure de l’extension

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. 02.1 Les principales APIs utilisées

18. Tabs

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. 02.1 WebExtensions, l’API tabs, la démo
https://github.com/igraal/WebExtensions/releases/tag/tabs-sample
Démo !

21. 02.1 WebExtensions, l’API tabs, le code
https://github.com/igraal/WebExtensions/releases/tag/tabs-sample
1
background.js

22. 02.1 WebExtensions, l’API tabs, le code
https://github.com/igraal/WebExtensions/releases/tag/tabs-sample
background.js
2

23. 02.1 WebExtensions, l’API tabs, le code
https://github.com/igraal/WebExtensions/releases/tag/tabs-sample
3
background.js
............

24. Runtime

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. 02.1 WebExtensions, l’API runtime, la démo
https://github.com/igraal/WebExtensions/releases/tag/send-message-sample
Démo !

27. Background.js

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. background.js
3
02.1 WebExtensions, l’API runtime, le code
https://github.com/igraal/WebExtensions/releases/tag/send-message-sample

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. https://github.com/igraal/WebExtensions/releases/tag/send-message-sample
02.1 WebExtensions, l’API runtime, le code
background.js
6
...

32. background.js
7
02.1 WebExtensions, l’API runtime, le code
https://github.com/igraal/WebExtensions/releases/tag/send-message-sample

33. 02.1 WebExtensions, l’API runtime, le code
https://github.com/igraal/WebExtensions/releases/tag/send-message-sample
background.js
8

34. 02.1 WebExtensions, l’API runtime, le code
https://github.com/igraal/WebExtensions/releases/tag/send-message-sample
background.js
9

35. Popup.js

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. 02.1 WebExtensions, l’API runtime, le code
https://github.com/igraal/WebExtensions/releases/tag/send-message-sample
popup.js
3

38. popup.js
02.1 WebExtensions, l’API runtime, le code
https://github.com/igraal/WebExtensions/releases/tag/send-message-sample
4

39. On utilise aussi ...

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. 03. Développement
cross browser

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. 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. 03. Développement cross browser, démo
https://github.com/igraal/WebExtensions/releases/tag/cross-browser-sample
Démo !

45. 05. CONCLUSION

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. 04. QUESTIONS /
RÉPONSES

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