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.

Le portage des WebExtensions

1,430 views

Published on

Présentation effectuée au Hackathon Mozilla FR 2017 par Christophe Villeneuve sur "Le portage des WebExtensions".
La présentation a pour but de montrer comment porter une extension venant de Chrome ou Chromium vers Firefox 57

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Le portage des WebExtensions

  1. 1. Christophe Villeneuve Le portage des WebExtensions @hellosct1 @hellosct1@mamot.fr Hackathon le 17 novembre 2017
  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 3 Christophe Villeneuve Contributeur / Réalisation Contributor / Realization Qui ?
  3. 3. Agenda ● Portage de Chrome / Chromium / Edge ● Différences : Bureau et mobile ● Les incompatibilités éventuelles Pas Aujourd'hui
  4. 4. Firefox 'Quantum' 57
  5. 5. Chrome / Chromium Portage
  6. 6. ● WebExtensions disponible dans Firefox – Chrome Store Foxified Portage pour les non codeurs
  7. 7. Réaliser votre extension sur Chromium ● Chuuuuuuuuuuuuuuuuuut !!! ● Ce n'est pas le but de la présentation ● Consulter la documentation Chrome / Chromium ● Créer votre fichier CRX
  8. 8. Convertion ● A partir de votre extension Chromuim ● Url : https://www.extensiontest.com/
  9. 9. Etape Ultime ● Vérification du fichier uploadé ● 1 clic Submit
  10. 10. Erreur : exemple 1 ● Problème de compatibilité
  11. 11. Analyse / Solution Problème 1 : Variable // Injected script addEventListener('message', function(event) { if (event.data && event.data.extensionMessage) { alert(event.data.extensionMessage); } }); // browser.extension.onMessage.addListener(function(message) { postMessage({extensionMessage: message}, '*'); }); Ligne 118 Problème 2 : Bonne pratique On evite Chrome Pour utiliser Browser
  12. 12. Analyse / Solution Problème 1 : Variable window.addEventListener("message", function(event) { // We only accept messages from ourselves if (event.source != window) return; if (event.data.type && (event.data.type == "FROM_PAGE")) { console.log("Content script received message: " + event.data.text); } }); Ligne 66 Problème 2 : Bonne pratique On evite Chrome Pour utiliser Browser
  13. 13. Erreur : exemple 2 ● Processus de l'archive
  14. 14. Analyse / Solution (1/3) ● Aucune informations
  15. 15. Analyse / Solution (2/3) ● Dans Firefox about:debugging→ 1 2 Résultat : Alerte manifest.json
  16. 16. Analyse / Solution (2/3) A supprimer Sup. Protocole source : interdite
  17. 17. Autres erreurs solutions→ ● débugue 1
  18. 18. Au final ● Publication de votre extension
  19. 19. Différence
  20. 20. Différence bureau & mobile (1/ ● Mobile “android” ne propose pas toutes les fonctionnalités du bureau ● Interface utilisateur – Barre verticale ● Absente – Menu contextuel ● Absente – Barre d'outils (browserAction) ● Disponible Firefox 55 et +
  21. 21. Différence bureau & mobile (2/ ● API Javascript – Comportement du Bookmark différent ● Suppression de l'historique, gestion des mots de passes… – Outils de développements différents ● Obligation de passer par le port USB ou le Wi-Fi ● Permission – Manifest.json
  22. 22. Incompatibilité
  23. 23. Incompatibilités Chrome ● Chrome.*namespace ● API Asynchrones – Chrome : utilisation de runtime.lastError → pour communiquer les erreurs – Firefox : utilisation de promises ● Etc. Source : https://developer.mozilla.org/fr/Add-ons/WebExtensions/Chrome_incompatibilities chrome.browserAction. browser.browserAction.
  24. 24. Incompatibilités API Javascript Source : https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs
  25. 25. Ressources ● Actualité Add-ons – https://blog.mozilla.org/addons/ ● Actualité communauté – https://blog.mozfr.org
  26. 26. Merci Questions Christophe Villeneuve @hellosct1

×