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 est recommandée. Suivez les processus de configuration et de débogage décrits ici, mais utilisez l'exécution web-ext pour exécuter votre extension sur Firefox pour Android. Parmi les avantages de l'utilisation de web-ext est sa commande  lint. web-ext lint redémarre automatiquement votre extension sous Firefox pour Android lorsque vous effectuez des modifications. De plus, vous pouvez tirer parti de lint web-ext, qui effectue une vérification pour déterminer si les permissions, les clés de manifeste et les API d'extension web que vous utilisez sont incompatibles avec Firefox pour Android.

Cependant, des instructions sont fournies pour les étapes à suivre si vous choisissez de ne pas utiliser le web-ext.

Configurer votre ordinateur et votre émulateur ou appareil Android

Vous devez d'abord effectuer quelques tâches d'installation ponctuelles 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 :

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).

Vérifier la compatibilité de Firefox avec Android

Avant d'exécuter votre extension sur Firefox pour Android, pensez à utiliser web-ext lint. Lint effectue une vérification pour déterminer si les permissions, les clés de manifeste et les API d'extension Web que vous utilisez sont incompatibles avec Firefox pour Android. Lint s'appuie sur le fichier manifest.json de votre extension incluant la version strict_min_version, il rapporte ensuite les fonctionnalités qui ne sont pas supportées par la version minimale que vous avez définie.

Dans le rapport sur la charpie :

  • les permissions incompatibles sont identifiées par PERMISSION_FIREFOX_ANDROID_UNSUPPORTED_BY_MIN_VERSION,
  • les clés de manifeste incompatibles sont identifiées par  KEY_FIREFOX_ANDROID_UNSUPPORTED_BY_MIN_VERSION, and
  • les API incompatibles sont identifiées par ANDROID_INCOMPATIBLE_API

similaire à celui-ci :

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

Lint ne signale pas les API qui ne sont pas implémentées par Firefox ou Firefox pour Android.  

Lorsque vous paramétrez strict_min_version, à moins que vous ne visiez une version spécifique de Firefox, choisissez la version la plus récente de Firefox avec laquelle vous souhaitez que votre extension soit compatible. Par exemple, vous pouvez raisonnablement vous attendre à ce que la plupart des installations de Firefox pour Android soient la version actuelle ou précédente. Donc, si la version actuelle est 66, considérez que le réglage 65 est la version minimale :

"browser_specific_settings": {
  "gecko": {
    "strict_min_version": "65.0"
  }
}

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"
  }
},

Si vous utilisez web-ext, suivez les instructions de tests dans Firefox pour Android.

Sinon, 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

Lorsque votre appareil est connecté via USB ou Wi-Fi, ouvrez about:debugging et activez la connexion de l'appareil.

With your Android device connected over USB or Wi-fi, enable the device connection in about:debugging

Votre terminal est répertorié dans la colonne de gauche, cliquez sur Connecter.

With the remote connection enabled, click Connect next to your device to start debugging

Si vous y êtes invité, autorisez la connexion entrante sur votre appareil Android. Notez que les instructions suivantes supposent que vous utilisez web-ext run.  Cliquez sur votre appareil dans la colonne de gauche et faites défiler vers le bas pour trouver les Processes dans la liste des fonctions actives du navigateur.

To start on-device debugging, locate the list of processes and against the main process click Inspect

Cliquer sur Inspecter à partir du Menu processus. La boîte à outils du développeur Web s'affiche dans Débugger.

Pour une grande partie du travail de débogage, il est utile de pouvoir visualiser la console avec l'Inspecteur ou le débugger. Pour ce faire, utilisez la console split, appuyez sur esc pour activer ce mode.

Chargez une page dans laquelle vos exercices d'extension. Vous pouvez maintenant accéder à n'importe quel JavaScript de votre extension.

By inspecting the main process you can access the JavaScript and HTML document content in your Firefox for Android extension

Contrairement à Firefox de bureau, où les scripts de contenu sont débogués dans le contexte de la page dans laquelle ils s'exécutent, vous déboguez et affichez les messages de console des scripts de contenu dans Firefox pour Android avec les scripts de fond dans la boîte à outils.

Dans le débugger vous pouvez définir des points d'arrêt, passer en revue le code, modifier l'état de l'extension, et faire tout ce que vous vous attendez à pouvoir faire dans le débugger. Tous les messages enregistrés par l'affichage de votre code dans la console.

Pour inspecter le HTML et le CSS du popup, utilisez Inspector. Tout d'abord, cliquez sur l'icône de sélection de page (If your extension has multiple pages open, use the page selector to load the one you want to review in Inspector.) pour ouvrir le document HTML que vous voulez inspecter. Vous pouvez revoir et modifier le document HTML et CSS dans l'inspector, comme vous le feriez avec n'importe quelle page Web.

Pour plus de détails sur l'utilisation des outils de développement Web, voir Firefox Developer Tools.

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

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, mdnwebdocs-bot
Dernière mise à jour par : hellosct1,