Télécharger en tant que PDF, PPTX
Téléchargé parChristophe Villeneuve
Le portage des WebExtensions
Christophe Villeneuve discute du portage des webextensions entre Chrome et Firefox lors d'un hackathon le 17 novembre 2017. Il aborde les différences entre les versions bureau et mobile, ainsi que les incompatibilités à prendre en compte. Des exemples de problèmes rencontrés et leurs solutions sont également présentés, en mettant en avant l'importance des bonnes pratiques de développement.
Le portage des WebExtensions
- 1.
- 2. Tag : mozillareps - 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. Agenda ● Portage deChrome / Chromium / Edge ● Différences : Bureau et mobile ● Les incompatibilités éventuelles Pas Aujourd'hui
- 4.
- 5.
- 6. ● WebExtensions disponible dansFirefox – Chrome Store Foxified Portage pour les non codeurs
- 7. Réaliser votre extensionsur Chromium ● Chuuuuuuuuuuuuuuuuuut !!! ● Ce n'est pas le but de la présentation ● Consulter la documentation Chrome / Chromium ● Créer votre fichier CRX
- 8. Convertion ● A partirde votre extension Chromuim ● Url : https://www.extensiontest.com/
- 9. Etape Ultime ● Vérificationdu fichier uploadé ● 1 clic Submit
- 10. Erreur : exemple1 ● Problème de compatibilité
- 11. Analyse / Solution Problème1 : 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. Analyse / Solution Problème1 : 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. Erreur : exemple2 ● Processus de l'archive
- 14. Analyse / Solution(1/3) ● Aucune informations
- 15. Analyse / Solution(2/3) ● Dans Firefox about:debugging→ 1 2 Résultat : Alerte manifest.json
- 16. Analyse / Solution(2/3) A supprimer Sup. Protocole source : interdite
- 17. Autres erreurs solutions→ ●débugue 1
- 18. Au final ● Publicationde votre extension
- 19.
- 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. 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.
- 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. Incompatibilités API Javascript Source: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs
- 25. Ressources ● Actualité Add-ons –https://blog.mozilla.org/addons/ ● Actualité communauté – https://blog.mozfr.org
- 26.