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

Android Firefox拡張機能デバッグの忘却録です。

モバイルで拡張機能をインストールする

  1. 開発用Firefoxをインストールする
    • Firefox Beta
    • Firefox Nightly
  2. 未署名の拡張機能をインストール可能にする
    • URLバーにabout:configを入力する
    • xpinstall.signatures.requiredの値をfalseにする
  3. 作成したxpiをFirefoxにインストールする
    1. Android端末にxpiファイルを保存する
      • USB等でファイル転送する
    2. xpiファイルと同一ディレクトリにインストール用のHTMLファイルを配置する
      • HTMLファイル例は、「install.html」参照
    3. FirefoxからローカルのHTMLファイルにアクセスする
      • PCで下記にファイルを配置した場合
        • /Download/filename
      • Firefoxのアドレス欄に下記でアクセスする
        • file://mnt/sdcard/Download/filename
    4. HTMLファイルのリンクをタップしてインストールする
  4. 試験する
    • 下記の「リモートデバッグする」を参照

install.html

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body> 
<a href="src.xpi">XPI</a> 
</body>
</html>

リモートデバッグする

  1. PC側に開発用のFirefoxを立ち上げる
  2. Android側に開発用のFirefoxを立ち上げる
  3. Android側でUSBデバッグを許可する
    • [メニュー] > [設定] > [高度な設定] > [USB経由でリモートデバッグする]
      • チェックする
  4. PCとAndroidをUSBで接続する
  5. PC側にFirefoxでWebIDEを立ち上げる
    • [三] > [Web Developer] > [WebIDE]
  6. Android側で承認する
    • Android側で承認ポップアップがでるため、承認する
  7. PC側のWebIDEのUSB DEVICESを更新する
    • 右上の更新アイコン
    • Androidで実行中のFirefoxが表示されるので選択する
      • 左側に表示中のタブ情報出てくれば成功

※左側のMain ProcessのConsoleを見ると拡張機能の(エラー)ログがでる

覚書

  • モバイル処理の切り分け
    • ユーザエージェントで判定する
  • Androidで動作しない機能にアクセスしているとエラーになる
    • chrome.contextMenuschrome.commandsでエラーになる
  • ポップアップページの文字が小さい
    • viewportを設定することで見やすくなる
    • <head>内に下記を記載する
      • <meta name="viewport" content="width=device-width, initial-scale=1">
  • ポップアップページをクローズできない
    • window.close()がエラーとなる
    • 「スクリプトはスクリプトによって開かれたウィンドウ以外を閉じることができません。」エラーを出力する
    • ポップアップのクローズは諦める
  • ポップアップなしを再設定できない
    • ポップアップなしを指定してもポップアップありで動作する
      • chrome.browserAction.setPopup({popup: ''});が動作しない
    • setPopupを1度もコールしなければ、onClickedが呼び出される
      • browser_action.default_popupは未指定とする
    • ポップアップなしは、再起動後に有効となるものとして扱えばなんとかなる
  • クリップボードコピーが動作しない
    • execCommand('copy')でコピーできない
      • エラーなく処理は、通過する
    • Clipboard APIで代用可能

参考

関連記事

  1. Firefox userChrome.js用ユーザスクリプトを作成する
  2. Firefox用WebExtensions拡張機能を作成する
  3. Chromeの拡張機能を作成する
  4. Firefox用WebExtensions拡張機能を国際化する
  5. Chrome、Firefox、Edgeの拡張機能を判定する
  6. Chrome、Firefox拡張機能のブラウザアクションでポップアップあり・なしを共存する
  7. Chrome、Firefoxの拡張機能にショートカットを実装
  8. Android Firefox 拡張機能をデバッグする
コメントを書く