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

1. Christophe Villeneuve
Le portage
des
WebExtensions
@hellosct1
@hellosct1@mamot.fr
Hackathon le 17 novembre 2017

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. Agenda
● Portage de Chrome / Chromium / Edge
● Différences : Bureau et mobile
● Les incompatibilités éventuelles
Pas Aujourd'hui

4. Firefox 'Quantum' 57

5. Chrome / Chromium
Portage

6. ●
WebExtensions disponible dans Firefox
– Chrome Store Foxified
Portage pour les non codeurs

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. Convertion
● A partir de votre extension Chromuim
● Url : https://www.extensiontest.com/

9. Etape Ultime
● Vérification du fichier uploadé
● 1 clic Submit

10. Erreur : exemple 1
● Problème de compatibilité

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. 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. Erreur : exemple 2
● 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
● Publication de votre extension

19. Différence

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. Incompatibilité

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. Merci
Questions
Christophe Villeneuve
@hellosct1