風柳メモ

ソフトウェア・プログラミング関連の覚書が中心。

Chrome 拡張機能の移植準備( Firefox Quantum・WebExtensions 編)


前書き

Firefox が Firefox Quantum (57) になり、旧来のアドオンとの互換性が無くなり、Google Chrome 拡張機能等との互換性の高い WebExtensions という形式のみが使えるようになった。

WebExtensions とは、クロスブラウザで動作可能なアドオンを開発するための技術です。WebExtensions API の大半は、Google Chrome や Opera でサポートされている extension API と互換性があります。これらのブラウザ向けに書かれた拡張機能のほとんどは、少し変更を加えるだけで Firefox や Microsoft Edge でも動かせるようになります。また、WebExtensions API はすべて マルチプロセス Firefox に対応しています。

拡張機能とは何か? - Mozilla | MDN

それではということで、自作の Chrome 拡張機能を Firefox Quantum に移植してみようか(できればソースコードは完全に共通化したい)と思い立ち、とりあえず Firefox Quantum でのアドオン開発の準備をしてみた。

アドオン開発の手順

開発(移植)するアドオンの読み込み

f:id:furyu-tei:20171117072218p:plain
Firefox 開発ツール デバッガー(about:debugging#addons、≡→アドオン(Ctrl+Shift+A)→[歯車アイコン]→アドオンをデバッグ(B))を開き、「☑ アドオンのデバッグを有効化」にチェックを入れて、[一時的なアドオンを読み込む]を押す。

f:id:furyu-tei:20171117072224p:plain
開発対象となる拡張機能(アドオン)の manifest.json を選択して開く。

f:id:furyu-tei:20171117072229p:plain
manifest.json を元にして、当該拡張機能の情報が「一時的な拡張機能」欄に表示される。
ここで、エラーや警告等があれば、適宜修正する。
Quantum の manifest.json のチェックは、Chrome に比べてかなり甘いかも(適当にコメントっぽく書いた行とかでもエラーが出なかったり)。逆に、Chromeに持って行くとエラーが出てしまうことがあるので注意。

バックグラウンドページのデバッグ方法

f:id:furyu-tei:20171117072235p:plain
拡張機能のデバッグリンクをクリック。

f:id:furyu-tei:20171117072241p:plain
「リモートデバッグ接続要求」ダイアログが表示されるので、確認して[OK]を押す。
この手順を省略する方法はあるのかな……?

f:id:furyu-tei:20171117072247p:plain
開いた開発ツールを使ってデバッグを実施。

オプション画面のデバッグ方法

2018/02/09 追記:オプション画面(設定画面)は、アドオンマネージャ(about:addons)から、当該アドオンの[設定]ボタンで開くことが出来るのが分かった。
以下のような面倒なことをしなくて済む。
これ、前からそうだったっけ?……間抜けすぎるぞ>自分。



f:id:furyu-tei:20171117072251p:plain
オプション画面をデバッグしようと思って……

f:id:furyu-tei:20171117072256p:plain
コンテキストメニューを開くも、「要素を調査」とか出ない……どうやって開発ツールを開けばよいのか……

f:id:furyu-tei:20171117072301p:plain
……と、Firefox 開発ツール デバッガーの当該拡張機能のところに、マニフェストの URLというリンクがあるので、これをクリックしてみる。

f:id:furyu-tei:20171117072306p:plain
マニフェストがタブに開くので、URLの "/manifest.json" の箇所を……

f:id:furyu-tei:20171117072315p:plain
オプション画面の HTML がある相対パス(例では "/html/options.html")に書き換えて開く。

f:id:furyu-tei:20171117072323p:plain
すると、無事にオプション画面をタブに読み込むことが出来た。
後は、開発ツール([F12]、≡→ウェブ開発→開発ツールを表示(Ctrl+Shift+I))を開いて、デバッグを行うことが出来る。
もっとスマートな方法がありそうな気もする……。
→あった(上の追記参照)