【覚書】Firefox アドオン (WebExtensions) を AMO で公開した際の手順

---

前書き

Chrome 拡張機能を Firefox Quantum (WebExtentions) にも対応させたので、せっかくだしと AMO にも登録してみることに。
その手順を覚え書きとして記しておく。

手順

アドオン開発者センターにユーザー登録

Firefoxアカウントを未所持の場合、アドオン開発者センターにて、ユーザー登録を行う。

自作アドオンのアップロード準備

当該アドオンの全ファイルを一つの ZIP アーカイブにまとめる（アドオンのパッケージ化）。
この際、manifest.json 及び同一フォルダ内のファイルが一番上の階層になるようにアーカイブすること。

あなたのWebExtensionは次のものを格納したディレクトリです。manifest.jsonとその他の必要なファイル-スクリプト、アイコン、HTMLドキュメント等。あなたはこれらを１つにまとめたzipファイルをAMOにアップロードする必要があります。

ひとつトリッキーなこととして、ZIPファイルはWebExtensionを構成するファイルを含み、ディレクトリに入ってはいません。

WebExtensionを公開する - Mozilla | MDN

At this point your extension will consist of a directory containing a manifest.json and any other files it needs - scripts, icons, HTML documents, and so on. You'll need to zip these into a single file for uploading to AMO.

One trick is that the ZIP file must be a ZIP of the extension's files themselves, not of the containing directory.

Publishing your extension - Mozilla | MDN

OKな例

manifest.json
html/options.html
js/background.js
　:

NGな例

src/manifest.json
src/html/options.html
src/js/background.js
　:

自分の場合、src/manifest.json のように src 以下に全て置いていたため、src フォルダを含む形で ZIP を作っていたところ（実際、Chrome 拡張機能の場合はこれでも問題なくアップロードできる）、AMOにアップロードしようとしたらエラーが出てしまった。

新しいアドオンの登録

アドオン開発者センターの

[新しいアドオンの登録]ボタンを押して、登録を開始する。

配布手段を選択し、[続ける]を押す。
特に理由がなければ、「◉当サイト上で……」で良いと思う。

前の手順で準備した パッケージ（ZIP ファイル）をアップロードすると、アドオンの検証が行われ、結果が表示される。

「検証レポートの詳細を見る」をクリックすると、詳細な検証レポートが開く。

これをチェックし、問題があれば修正する。
eval等を使用しているといった警告はあったが、自作以外のライブラリなこともあり、対応はせずにそのまま。エラーでなければ継続できるらしい。

「アドオンの説明」画面に必要事項を記入・入力し（名前と概要は manifest.json に記載のものが転記されている）、[バージョンを登録]を押して登録する。

登録完了後、[掲載ページを管理]を押すと、

アドオンに関する各種情報を確認・変更できるので、必要に応じて追記や修正を行う。

余談

「『AMO』ってなんだろう、サイト名としては『Firefox Add-ons』か『Add-ons for Firefox』かだよね…」とか思っていたのだが、これ、ドメイン名である"addons.mozilla.org" の頭文字を取ったものだったのか……。

関連記事

• Chrome 拡張機能を Firefox Quantum の WebExtensions にも対応させた例 - 風柳メモ
• Chrome 拡張機能の移植準備（ Firefox Quantum・WebExtensions 編） - 風柳メモ
• Twitter 原寸びゅー：原寸画像を開く拡張機能＆ユーザースクリプト(PC用Google Chrome・Firefox・Opera等対応) - 風柳メモ
• Twitter メディアダウンローダ：ユーザータイムラインの原寸画像や動画をまとめてダウンロードするユーザースクリプト(PC用Google Chrome・Firefox等対応) - 風柳メモ

Chrome 拡張機能を Firefox Quantum の WebExtensions にも対応させた例

---

前書き

とりあえず、自作の Chrome 拡張機能のうち、二つを Firefox Quantum (WebExtentions) にも対応させてみた。
Twitter 原寸びゅー – Firefox 向けアドオン
Twitter メディアダウンローダ – Firefox 向けアドオン
この際に修正した箇所を中心に、覚え書きを記しておく。

修正方法等

manifest.json

最初、次のような警告が出ていた。

Reading manifest: Error processing background.persistent: Event pages are not currently supported. This will run as a persistent background page.
Reading manifest: Error processing options_page: An unexpected property was found in the WebExtension manifest.

上の方は、

    "background": {
        "scripts" : [ "js/background.js" ],
        "persistent" : true
    },

の "persistent" オプションに関するもので、現状は Firefox ではサポートされておらず、無視される。動作的には特に問題ないので、このまま。

下の方は、

   "options_page" : "html/options.html",

に関するもので、エラーとなっているが、このままでもオプションページは開くことが出来る。
現在は、

    "options_ui" : {
        "page" : "html/options.html"
    },

という書き方になっているため、こちらに合わせておく。

jQuery

jQuery 読み込み時に、

  Content Security Policy: ページの設定により次のリソースの読み込みをブロックしました: self (“script-src moz-extension://7959b7cd-9bbb-443f-8362-df4673e654f6 'unsafe-eval'”) Source: onfocusin attribute on DIV element.

のようなエラーが出ていた。
どうも、v1.x 系を使用していると発生する模様（使用していたのは、v1.11.3）。
参考：Web Extension: Cannot load jQuery into background page, due to CSP - Development - Mozilla Discourse
これは、v2.x 系にて修正されているらしい。v2.2.4 にしたところ、発生しなくなった。

chrome.app.* は使わない

オプション画面の、拡張機能バージョンを取得する処理でエラーが発生していた。
原因は、chrome.app.getDetails().version を使用していたこと。
代わりに chrome.runtime.getManifest().version を使うことで解決した。
参考： Where is chrome.app officially documented? - Stack Overflow

browser.* ネームスペース対応

これまで chrome.* ネームスペースを使用していたが、今後の流れとしては browser.* ネームスペースを使う方が良さそう。
参考： Chrome incompatibilities - Mozilla | MDN

といいつつ、既存のものを全部書き換えるのは煩わしいので、各スクリプトの先頭に

window.chrome = ( ( typeof browser != 'undefined' ) && browser.runtime ) ? browser : chrome;

のような一行を入れておくことでお茶を濁してある。

なお、Firefox Quantum の WebExtensions では、browser と chrome の両方が定義されているが、コンテキストによって微妙に見え方が違う。

バックグラウンドコンテキスト(background)

	chrome	window.chrome	browser	window.browser
Chrome 拡張機能	○	○	×	×
Firefox WebExtensions	○	○	○	○
MS-Edge 拡張機能	×	×	○	○

ユーザーコンテキスト(content_scripts)

	chrome	window.chrome	browser	window.browser
Chrome 拡張機能	○	○	×	×
Firefox WebExtensions	○	×	○	×
MS-Edge 拡張機能	×	×	○	○

独り言

とりあえず、Twitter 原寸びゅーとTwitter メディアダウンローダに関しては、以上のような修正を行うことで、無事、Firefox Quantum でも動作するようになり、かつ、Google Chrome 上でもこれまで通り動作しているので、共用化できたと言える。
もともと、ユーザースクリプトとしては両方の環境で動作するように作成してあったため、最低限の修正で済んだといえる。
まぁ、細かい不具合は出ているのだが……。

Firefox でコンテキストメニュー→原寸画像を保存を行うとき、png だとダウンロード出来ない…なぜだ…？対応方法が思いつかぬ…。

— 風柳 (@furyutei) 2017年11月16日

関連記事

• Chrome 拡張機能の移植準備（ Firefox Quantum・WebExtensions 編） - 風柳メモ
• Chrome 拡張機能の移植準備（ Microsoft Edge 拡張機能編） - 風柳メモ
• Twitter 原寸びゅー：原寸画像を開く拡張機能＆ユーザースクリプト(PC用Google Chrome・Firefox・Opera等対応) - 風柳メモ
• Twitter メディアダウンローダ：ユーザータイムラインの原寸画像や動画をまとめてダウンロードするユーザースクリプト(PC用Google Chrome・Firefox等対応) - 風柳メモ

Chrome 拡張機能の移植準備（ Microsoft Edge 拡張機能編）

---

前書き

承前。
furyu.hatenablog.com

比較の意味もあって、Microsoft Edge に関しても拡張機能開発（移植）準備をしてみた。
結果から言えば、互換性や動作安定性が悪く、時期尚早だったな、と少し後悔している。

なお、MS-Edge の拡張機能は、まだ限られた開発者しか公開できない模様。
Microsoft Edge拡張機能の公開について - マイクロソフト コミュニティ
developer.microsoft.com

I have an extension ready for Edge. How can I get it submitted to the store?

For the Windows 10 Anniversary Update, we are intentionally starting with a small set of extensions. The list of extensions is locked - you can see the list at our extensions page here. We want to be mindful about what extensions are available on the platform and watch for telemetry and feedback and make sure the reliability, performance and functionality of the browser isn’t impacted by these new features. Extension developers can submit a request to https://aka.ms/extension-request to be considered for a future update.

Frequently Asked Questions - Microsoft Edge Development

拡張機能開発の手順

開発者向け設定の有効化

フラグ設定画面（about:flags）を開き、

「開発者向け設定」の「☑ 拡張機能の開発者向け機能を有効にする (これによりデバイスが危険にさらされる可能性があります)」にチェックを入れる。

開発（移植）するアドオンの読み込み

右上にある「…」から、

「拡張機能」を選択すると、[拡張機能の読み込み]というボタンが出来ている。

これを押して、

出てきたダイアログから、開発（移植）しようとする拡張機能の manifest.json が含まれたフォルダを選択する。

マニフェストにエラーがあればその旨表示されるので、適宜修正して再読み込みする。
正常に読み込めたら、

当該拡張機能が表示される（この時点で既に起動されている）。

ここで歯車アイコンをクリックすると、

拡張機能の基本情報と操作用のメニューが表示される。

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

拡張機能操作用メニューから

「検査：バックグラウンド ページ」リンクをクリックすると、

開発者ツールが開き、バックグラウンドページのデバッグを行うことが出来る。

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

右上にある当該拡張機能のアイコンをクリックすると、オプション画面がポップアップする。

適当なところで右クリック（コンテキストメニュー）から、「要素の検査」を選択すると、

開発者ツールが開き、オプション画面のデバッグが行える。

ポップアップから操作するのがやりにくい場合、少し面倒だがタブで開くこともできる。
拡張機能操作用メニューに表示されているIDから、

ms-browser-extension://＜拡張機能のID＞/＜オプション画面(HTML)への、manifest.json があるフォルダからの相対パス＞

のようにして、URL が導かれるので、これをブラウザのアドレス欄に入れることで、オプション画面をタブで開くことが出来る。

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 でのアドオン開発の準備をしてみた。

アドオン開発の手順

開発（移植）するアドオンの読み込み

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

開発対象となる拡張機能（アドオン）の manifest.json を選択して開く。

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

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

拡張機能のデバッグリンクをクリック。

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

開いた開発ツールを使ってデバッグを実施。

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

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

---

オプション画面をデバッグしようと思って……

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

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

マニフェストがタブに開くので、URLの "/manifest.json" の箇所を……

オプション画面の HTML がある相対パス（例では "/html/options.html"）に書き換えて開く。

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

Windows 10 のバージョン 1703 が酷かったので、急いで 1709（Fall Creators Update）を適用した

バージョン 1703 の憂鬱

先日、Windows 10 が自動的にバージョン 1703 になっていたのだけれど、自分の環境（NJ5700E）ではこれが酷かった。

• Capsに割り当ててあったCtrlが無効化されていた
• "Microsoft KM-TEST Loopback Adapter"(CIFS over SSH用)が削除されていた
• Windows 10 アップデート前に、タスクバーにピン留めしてあったアプリの一部が消えてしまっている
  エクスプローラー、IE、Chrome、Firefox、Vivaldi、FileZilla等……サードパーティ製ブラウザが軒並み消えていたのには悪意を感じてしまう……
• ↑を再登録しても、再起動したりログオフ／オンするともとに戻ってしまった
• タスクバーを引き伸ばして2段の状態で「タスクバーを固定する」にチェックを入れているのに、再起動等すると一段の状態に戻ってしまう
• MS-EdgeのTampermonkeyでユーザースクリプトがインストールできなくなった（アイコン点滅・読み込み状態がずっと続く）
• 無効化してあった Windows Search が有効になっていた
• WZ Editor 9(WZ 9.0.29)が起動しなくなってしまった
  これは最新の WZ 9.0.46 をダウンロードして入れなおすことで解消

バージョン 1709（Fall Creators Update）の適用後

1703 での対処方法を探すのも面倒だし、すでに 1709 が提供されていたので、これを適用後に対処することに。

新たな問題

• ディスプレイアダプタ(NVIDIA GeForce GT 640M)が、「ビデオ コントローラー（VGA 互換）」となってドライバが入っていない
• ハイバネーション（休止状態）が有効になっていて、hiberfil.sys がディスク容量を圧迫

自動解決

• タスクバーにピン留めしていたアプリが消えたり、再起動で無くなったりといった症状は改善
• MS-Edge の Tampermonkey の上記不具合は解消、普通に動作するように

手動で対応

• Caps → Ctrl は手動で再度設定（Ctrl2capを使用）
• "Microsoft KM-TEST Loopback Adapter"は再インストール
  デバイスマネージャー → 操作(A)→レガシ ハードウェアの追加(L)から入れ直し
• Windows Search は手動で無効化（こちらの記事を参照）
• ディスプレイアダプタは、NVIDIAドライバダウンロードからドライバをダウンロード・インストールして対応
• hiberfil.sys を削除（こちらの記事を参照）

未解決

• タスクバーを2段に引き伸ばした状態での「タスクバーを固定する」はうまく動かないまま（再起動等すると1段に戻ってしまう）