iGraal et les webextensions

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 mobile Le 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 : [email protected]