Developing extensions for Firefox for Android

Vous allez aborder le codage d'une extension pour Firefox pour Android de la même manière que pour une extension de bureau utilisant les API WebExtension ; en utilisant un éditeur de texte ou un outil de votre choix pour écrire le code. Cependant, lorsque vous devez tester et déboguer votre extension, vous devez suivre un processus différent. Cet article vous guide tout au long de ce processus.

Vous pouvez également utiliser web-ext dans votre développement d'extension.Si vous choisissez d'utiliser cet outil, vous suivrez toujours les processus de configuration et de débogage décrits ici, mais utilisez la fonction web-ext run pour exécuter votre extension sur Firefox pour Android.

Configurer votre ordinateur et votre émulateur ou appareil Android

Vous devez d'abord effectuer des tâches de configuration uniques sur votre ordinateur et votre appareil Android.

Sur votre ordinateur de développement :

  • Si vous voulez tester sur votre ordinateur en exécutant Firefox pour Android dans l'émulateur Android :
  • Si vous envisagez de tester Firefox pour Android sur un appareil uniquement :
    • Téléchargez et extrayez le package SDK Platform-Tools autonome vers un emplacement approprié sur votre ordinateur.
    • Sous Windows, Mac ou Linux: ajoutez l'emplacement dans lequel vous avez extrait le package d'outils à la variable d'environnement PATH de votre système d'exploitation.
    • Alternativement, sur Mac ou Linux: Lier le binaire à /usr/local/bin en utilisant sudo ln -s /<extract folder>/platform-tools/adb /usr/local/bin.

Sur votre appareil ou votre émulateur Android :

  • Installez Firefox pour Android et, si vous souhaitez tester les dernières fonctionnalités, Firefox pour Android Beta ou Firefox Nightly pour Developers.
  • (Si vous utilisez Web-ext, vous pouvez ignorer cette étape.)  Ouvrez Firefox pour Android et désactivez la signature en accédant à about:config puis en recherchant et en définissant xpinstall.signatures.required à faux.
    Firefox for Android with about:config open, showing xpinstall.signatures.required set to false.

Si vous utilisez un appareil :

Sur votre ordinateur de développement:

  • Ouvrez un shell de commande.
  • Exécutez adb devices
    Vous devriez voir une sortie similaire à :
    List of devices attached
    51800F220F01564 device

    Où la chaîne hexadécimale est le code de votre appareil (ou de l'émulateur). Cela signifie qu'adb a trouvé votre appareil (ou émulateur).

Installez et exécutez votre extension dans Firefox pour Android

Dans votre extension, vérifiez que vous avez inclus un ID d'application à l'aide de la clé d'applications dans le fichier manifest.json :

 "applications": {
    "gecko": {
       "id": "borderify@example.com"
    }
 },

Zipper le contenu de votre extension dans un fichier xpi nommé pour correspondre à l'ID de l'application, par exemple, borderify@example.com.xpi.

Vous avez maintenant deux options pour transférer et exécuter votre extension : en utilisant adb ou un site web.

Transférer votre extension en utilisant adb

Sur votre ordinateur, exécutez /path/to/adb push /path/to/<extension file name>.xpi /mnt/sdcard/, qui transfèrera le fichier xpi d'extensions à votre émulateur ou périphérique attaché.

Sur votre appareil Android ou dans l'émulateur, ouvrez Firefox pour Android et accédez au file:///mnt/sdcard:

Firefox for Android showing the add-on xpi file located on the memory card

Tapez sur <extension file name>.xpi pour l'installer. Vous recevrez un avertissement à propos de l'extension bloquée, appuyez sur ALLOW:

Firefox for Android blocked add-on message

Un avertissement supplémentaire vous indiquera que l'extension n'est pas vérifiée, appuyez sur INSTALL:

Firefox for Android unverified add-on message

Votre extension commencera à fonctionner (dans ce cas, une copie de l'extension d'exemple borderify) :

Borderify shown adding a red border to the www.mozilla.org home page

Transférez votre extension via un site Web.

Téléchargez votre fichier xpi sur votre site Web et rendez-le accessible via HTTP. Naviguez jusqu'au fichier et téléchargez-le. Suivez les instructions d'installation, qui seront similaires à celles d'une extension transférée en utilisant adb.

Déboguer votre extension

Vous pouvez déboguer votre extension dans WebIDE et afficher tous les messages de validation manifest,json en utilisant adb logcat. Pour utiliser ces fonctionnalités, configurez d'abord le débogage distant Firefox par USB ou Wi-Fi.

Utiliser WebIDE pour déboguer votre extension

Ouvrez WebIDE à partir de l'option Developer sur le menu Firefox du bureau. Une fois ouvert, sélectionnez votre appareil connecté dans les options de la barre latérale droite.

Selecting the Firefox for Android device from the list in WebIDE

Maintenant, assurez-vous que vous visualisez le processus principal, puis chargez une page dans laquelle votre extension sera exercée.

Contrairement au bureau Firefox, où les scripts d'arrière-plan publient leurs messages de console et sont débogués dans le débogueur, alors que les scripts de contenu publient leurs messages de console et sont débogués dans les outils de développement du navigateur (voir Debugging content scripts), Vous pouvez afficher tous les messages et déboguer tous les scripts dans WebIDE lors de l'exécution d'extensions dans Firefox pour Android.

Si vous avez inclus des messages de console dans votre extension (using console.log()), vous pouvez les voir dans l'onglet de la console, et utiliser le filtre de la console (mis en évidence ci-dessous) pour masquer les autres messages de la console :

WebIDE showing console with messages filtered for those including 'borderify'

L'onglet Débogueur vous permet ensuite d'accéder au script d'arrière-plan et aux scripts de contenu :

The borderify.js script in the WebIDE debugger tab

Vous pouvez maintenant appliquer des points d'arrêt et observer le comportement de l'extension.

En outre, vous pouvez également cibler le document associé à une page d'extension, par exemple, la page d'arrière-plan de l'exemple borderify, en utilisant la même approche décrite pour la boite à outils du navigateur :

Selecting a specific page to examine in the WebIDE

Une fois que vous avez basculé vers une page d'extension, vous pouvez inspecter les éléments DOM de la page d'extension à partir du panneau Inspecteur (le bouton bascule "inspecter le noeud" devrait fonctionner comme prévu) et exécuter des appels API WebExtension depuis le panneau Console :

Using the interactive console to test the effect of JavaScript on the open page

Pour plus de détails sur l'utilisation de WebIDE, voir la section WebIDE.

Affichage des messages de validation de manifeste à l'aide de la console

En plus des messages de console sortis via WebIDE, il peut également y avoir des messages relatifs à la validation des fichiers manifest.json de l'extension. Ces messages peuvent être consultés à l'aide de la commande adb logcat. Pour éviter de recevoir d'autres messages non liés, vous pouvez rediriger la sortie via grep, en filtrant par l'ID de l'extension, par exemple :

/path/to/adb logcat | grep borderify@example.com

Cela donnera une sortie similaire à ceci :

I/Gecko   (30440): 1496056181889    addons.xpi    WARN    Addon with ID borderify@example.com already installed, older version will be disabled

Si votre module complémentaire ne fonctionne pas, vérifiez ces messages car ils peuvent fournir des informations expliquant pourquoi.

Étiquettes et contributeurs liés au document

Contributeurs à cette page : hellosct1
Dernière mise à jour par : hellosct1,