Android Firefox 新拡張機能をデバッグする

2024/02/09

はじめに

Android Firefox 拡張機能のデバッグについてです。

次のバージョンから導入された新拡張機能が対象です。

Android Firefox Bate 107.0+
Android Firefox 121.0+

数年前に廃止済みの旧拡張機能とは異なります。

旧拡張機能のデバッグ記事は次のリンク先を参照してください。

Android Firefox 旧拡張機能をデバッグする

Android Firefox のリモートデバッグ環境を作成する

Android 環境に開発用の Android Firefox をインストールする
- Android Firefox / Android Firefox Beta / Android Firefox Nightly
- Android Firefox でもデバッグできるようになりました
- Android Firefox だけ動作しないことが稀によくありました。試験しましょう
PC 環境に開発用の Firefox をインストールする
- Firefox / Firefox Beta / Firefox Nightly
Android 環境で Android 端末の [開発者向けオプション] を有効にする
- [⚙] > [デバイス情報] > [ビルド番号] を７回タップする
- 一般的な Android のデバッグと同様です
Android 環境で Android 端末の [USB デバッグ] を有効にする
- [開発者向けオプション] > [USB デバッグ] を有効にする
Android 環境で Firefox の USB 経由のリモートデバッグを許可する
- [︙] > [設定] > [詳細設定] > [USB 経由でリモートデバッグする] を有効にする
USB ケーブルで Android 端末と PC を接続する
PC 環境の Firefox で [USB デバイスを有効化] する
- [Firefox] > [about:debugging] > [セットアップ] > [USB デバイスを有効化]
PC 環境の Firefox でデバイスが表示される
- [接続] して Android 端末で表示中のタブ等を表示できれば成功です

※備考：xpinstall.signatures.requiredの変更は不要です。
※ USB デバッグを前提にしていますが、ワイヤレスデバッグ等で問題ないはずです。
※ 実機がない場合、エミュレーター（emulator）を使用することもできます。

Android Firefox に拡張機能をインストールする

以前は、file:URL 経由で拡張機能（.xpi ファイル）をインストールすることができましたが、最新環境の Firefox では file: プロトコルは使用不可になったため、使用できません。また、 Firefox はcontent:プロトコルにも対応していません。

そのため、web-ext経由で拡張機能をインストールします。

web-ext をインストールする

mozilla/web-ext - GitHub

web-extは、npmからインストールできます。

npm install --global web-ext

adb をインストールする

web-extの動作には、adbを必要とします。
adb（Android Debug Bridge）は、 Android 開発用のツールです。

次の場所のいずれかからインストールできます。

Android Studio SDK Manager
sdkmanager (cmdline-tools)
SDK Platform-Tools

Android 開発に興味がない場合、 SDK Platform-Tools をダウンロードして、対象フォルダに PATH を通すとよいでしょう。実機がない場合、emulatorで代用できます。

次のコマンドでデバイスが表示されればadbの準備は完了です。

adb devices

> adb devices
List of devices attached
123456789012345 device

web-ext で拡張機能をインストールする

次のコマンドで拡張機能をインストールできます。 Android 端末でインストール許可を求められるため、許可すればインストールは完了です。

web-ext run -t firefox-android --adb-device <adb device> --firefox-apk <firefox-apk>
web-ext run -t firefox-android --adb-device 123456789012345 --firefox-apk org.mozilla.firefox

※<adb device>: adb devicesで表示されるデバイスID
※<firefox-apk>: org.mozilla.firefox/org.mozilla.firefox_beta/org.mozilla.fenix

備考：web-ext を使用した lint

web-ext には、 Android Firefox 用の lint 機能があります。

次のコマンドを manifest.json のあるフォルダで実行してください。

web-ext lint

備考：Kiwi Browser

Kiwi Browser は、content:プロトコル経由で拡張機能（.crx）をインストールすることができます。

[拡張機能] > [デベロッパーモード] を有効にする
(form .zip/.crx/.user.js) からファイルを選択する

.crxファイルは、[拡張機能をパッケージ化]から作成できます。作成した.crx/.pemを Android 端末に USB 経由で移動すればよいです。

参考

リモートデバッグする

PC と Android を USB で接続する
web-ext で拡張機能をインストールする
PC 側の Firefox からリモートデバッグする
- [about:debugging] > [セットアップ] > [USB デバイスを有効化]
- デバイスが表示されたら [接続] を選択、接続先を再度選択する。
- デバイスのタブ / 拡張機能 / Service Worker 等が表示されれば成功
調査でバックグラウンドのコンソールを表示する
- 拡張機能の [調査] タブを１度でも閉じると２度目からエラーになる
- 閉じてしまった場合、[切断] -> [接続]で再度開くことができる。
マルチプロセスツールボックスでコンテンツスクリプトのエラーを表示する
- Firefox は、コンテンツスクリプトのエラーを拡張機能のコンソールに表示しない
- [プロセス] > [マルチプロセスツールボックス] > [調査] のコンソールに表示する
- 大量の情報があるため、スクリプトのソース名（〇〇.js）でフィルターをかける
- デスクトップ版は、 [Ctrl+Shift+J] で表示できる

※ ソース変更による[再読み込み]は、不要。 web-ext がファイルの変更を随時監視して更新するため、常に最新の状態が維持される。
　ただし、大きな変更？をすると自動更新されないことがある。問題発生時は web-ext を再起動して確認する。

覚書

Android で動作しない機能にアクセスしているとエラーになる
- chrome.contextMenus、chrome.commandsでエラーになる
- chrome.contextMenus?.〇〇（オプショナルチェーン）で簡易に対応する
- if (!chrome.contextMenus) { return; } で処理から離脱して対応する
モバイル処理の切り分け
- ユーザエージェントで判定する
- chrome.contextMenus/chrome.commandsの有無で判定する
ポップアップページの文字が小さい
- viewport を設定することで見やすくなる
- <head>内に下記を記載する
  - <meta name="viewport" content="width=device-width, initial-scale=1">
ポップアップページをクローズする
- window.close()でクローズする
コンテンツスクリプトが実行されない
- host_permissionsに問題を抱えてると思われる
- content_scripts.matchesとhost_permissionsで２重記載で回避できる

バグ取りの日々