Développer des extensions pour Firefox pour 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é  browser_specific_settings dans le manifest.json:

"browser_specific_settings": {
  "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 : utiliser adb oou un site web.

Transférez 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 les extensions xpi vers votre émulateur ou périphérique attaché.

Sur votre appareil Android ou dans l'émulateur, ouvrez Firefox pour Android et naviguez jusqu'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. Un message d'avertissement s'affiche lorsque l'extension est bloquée, tapez sur ACCEPTER (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 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 avec 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 à distance de Firefox sous USB ou Wi-Fi.

Utiliser WebIDE pour déboguer votre extension

Ouvrez WebIDE à partir de l'option Développeur du menu Firefox du bureau. Une fois ouvert, sélectionnez votre appareil connecté parmi les options de la barre latérale de 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 à Firefox, où les scripts d'arrière-plan sortent leurs messages de console et sont débogués dans le débogueur de l'add-on, tandis que les scripts de contenu sortent leurs messages de console et sont débogués dans les outils de développement du navigateur (voir Debogage des scrips de contenu), vous pouvez afficher tous les messages et déboguer tous les scripts dans WebIDE en exécutant des extensions sous Firefox pour Android.

Si vous avez inclus des messages de console dans votre extension (en utilisant console.log()), vous pouvez les voir dans l'onglet Console, et vous pouvez utiliser le filtre de console (surligné ci-dessous) pour masquer les autres messages de 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 à tout script 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.

Vous pouvez également cibler le document relatif à une page d'extension, par exemple, la page d'arrière-plan de l'exemple de 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 êtes passé à 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 nœud" devrait également fonctionner comme prévu) et exécuter les 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.

Viewing manifest validation messages using the console

En plus des messages de console émis par WebIDE, il peut également y avoir des messages relatifs à la validation des fichiers manifest.json de l'extension. Ces messages peuvent être visualisés en utilisant la commande adb logcat. Pour éviter de recevoir d'autres messages sans rapport, vous pouvez faire passer la sortie par grep, en filtrant par l'ID de l'extension, par exemple :

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

Cela donnera un résultat similaire à celui-ci :

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

If your add-on fails to run, check these messages as they may provide information explaining why.

Étiquettes et contributeurs liés au document

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