Android向けFirefox拡張機能の開発

この記事は翻訳作業中です。

Firefox for Android向け拡張機能のコーディングはデスクトップ版と同様に、コードを書くテキストエディタやツールを選択して使用することでできます。しかし、拡張機能のテストやデバッグを行うには違う方法が必要です。この記事ではその方法を説明します。

拡張機能の開発には web-ext を使用することもできます。この場合、設定とデバッグのところまではこの記事と同一ですが、Firefox for Androidで実行するにはweb-ext runを使用してください。

コンピュータとAndroidエミュレータまたはデバイスの設定

まず、コンピュータとAndroidデバイスの設定をします。

開発するコンピュータ上:

  • Androidエミュレータ上でFirefox for Androidを実行してコンピュータ上でテストを行いたい場合:
  • Firefox for Android を実行するデバイス上でテストを行いたい場合:
    • standalone Android SDK Platform-Tools package をダウンロードし、コンピュータ上の適当な場所へ展開してください。
    • Windows, Mac, Linuxの場合は、システム環境変数PATHに先ほど展開したツールの場所を追加してください。
    • 代わりにMacかLinuxの場合、次のコマンドを使用して/usr/local/bin にバイナリをリンクしてください。sudo ln -s /<展開したフォルダ>/platform-tools/adb /usr/local/bin.

Androidエミュレータまたはデバイス上:

  • Firefox for Androidをインストールします。最新の機能をテストしたい場合、Firefox for Android BetaまたはFirefox Nightly for Developersをインストールしてください。
  • (web-extの場合は不要) Firefox for Androidを開き、署名を不要にします。about:configにアクセスし、xpinstall.signatures.requiredの項目をfalseにします。
    Firefox for Android with about:config open, showing xpinstall.signatures.required set to false.

デバイスを使用する場合:

(web-extの場合は不要) 開発するコンピュータ上:

  • コマンドshellを開きます。
  • adb devicesを実行します。このとき
    List of devices attached
    51800F220F01564 device
    に似た出力が表示されます。
    16進数の文字列があなたのデバイス(またはエミュレータ)のコードです。これはadbがあなたのデバイス(またはエミュレータ)を発見したことを意味します。

Firefox for Androidでの拡張機能のインストールと実行

拡張機能において、manifest.jsonでbrowser_specific_settingsキーを移用してアプリケーションIDを設定していることを確認してください。

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

zipに圧縮し、xpiファイルにパッケージ化します。名称はアプリケーションIDにしてください。例えばborderify@example.com.xpi

拡張機能の転送と実行にはadbを用いた方法か、ウェブサイトを用いた方法の2つあります。

adbを用いて拡張機能を転送する

コンピュータ上で/path/to/adb push /path/to/<extension file name>.xpi /mnt/sdcard/を実行します。拡張機能のxpiファイルを接続したデバイスやエミュレータに転送されます。

Androidデバイスまたはエミュレータ上でFirefox for Androidを起動し、file:///mnt/sdcardにアクセスします。

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

<拡張機能のファイル名>.xpiをタップし、インストールします。このとき拡張機能をブロックしている旨の警告が出るので、許可(ALLOW)をタップします。

Firefox for Android blocked add-on message

次に、認証されていない旨の警告が出るのでインストール(INSTALL)をタップします。

Firefox for Android unverified add-on message

拡張機能が実行されます(この例ではサンプル拡張機能のborderifyのコピー)。

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

ウェブサイトを経由して転送する

xpiファイルをウェブサイト上にアップロードし、HTTP上でアクセス可能にします。そこにアクセスし、ダウンロードします。インストールはadbを用いた方法と同様です。

拡張機能のデバッグ

WebIDE上で拡張既往のデバッグができます。manifest.jsonの検証メッセージを確認するにはadb logcatを使用します。これらの機能を使用するためには、USBまたはWi-Fiを経由したFirefoxリモートデバッグの設定が必要です。

WebIDEを使用して拡張機能をデバッグする

Firefoxメニューのウェブ開発からWebIDEを開きます。開いたら、はじめは右手のサイドバーから接続したデバイスを選択します。

Selecting the Firefox for Android device from the list in WebIDE

メインプロセスが表示されるのを確認したら、拡張機能が実行されるページを読み込んでください。

デスクトップ版Firefoxと異なり、Firefox for Androidでの拡張機能の実行時は、バックグラウンドスクリプトのコンソールメッセージとコテンツスクリプトのコンソールメッセージ(Debugging content scriptsも参照)などすべてのメッセージとすべてのスクリプトのデバッグをWebIDE上で行います。

コンソールメッセージ(console.log())などを拡張機能に含む場合、コンソールタブで確認できます。他のコンソールメッセージを隠すコンソールフィルター(以下で強調)も使用できます。

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

デバッガタブでは、バックグラウンドスクリプトやコンテンツスクリプトにアクセスできます。

The borderify.js script in the WebIDE debugger tab

ブレークポイントや拡張機能の動作の監視式を適用することも可能です。

Also, you can also target the document related to an extension page, for example, the background page of the borderify example, using the same approach described for the Browser Toolbox:

Selecting a specific page to examine in the WebIDE

Once you have switched to an extension page, you can inspect the extension page’s DOM elements from the Inspector panel (also the "inspect node" toggle button should work as expected) and execute WebExtension API calls from the Console panel:

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

For more details on using WebIDE, see the WebIDE section.

Viewing manifest validation messages using the console

In addition to the console messages output through WebIDE, there may also be messages relating to the validation of the extension’s manifest.json files. These messages can be viewed using the adb logcat command. To avoid receiving other, unrelated messages, you can pipe the output through grep, filtering by the extension’s ID, for example:

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

This will give output similar to this:

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.

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, marlex
最終更新者: mdnwebdocs-bot,