はじめに
個人用に Firefox の拡張機能を作ろうと思ったのですが、思いの外ハードルが高かったので、その作成方法を備忘録として残しておきます。
開発環境
Firefox の拡張機能は、Visual Studio Code を使って、JavaScript で開発します。
Firefox 拡張機能のビルドは、 web-ext というコマンドラインツールを使用します。
web-ext を使うと、簡単に Firefox 拡張機能をビルドしたり、署名することができます。
web-ext は、 node.js/npm をインストールした上で、下記コマンドを実行してインストールします。
$ npm install --global web-ext
はじめてみよう
以下の GitHub のリポジトリに、Firefox 拡張機能を作成するための簡単なテンプレートを用意したので、 git clone を行なってください。
このテンプレートは、Firefox で見ているサイトのタイトルと URL を Twitter にシェアする機能があらかじめ組み込んでいます。
下記コマンドでサンプルの Firefox 拡張機能をビルドします。
$ chmod +x build.sh $ ./build.sh
すると、Firefox 拡張機能が、以下のように作成されます。
web-ext-artifacts/firefox_extensions_template-1.0.0.zip
firefox_extensions_template-1.0.0.zip を Firefox に読み込みます。
なお、Firefox 拡張機能の開発中は一時的な読み込みしかできず、Firefox を再起動した場合は再読み込みが必要です。
Firefox の拡張機能の管理の右側にある歯車マークから、「アドオンをデバッグ」を選択します。
↓
「一時的なアドオンを読み込む」から firefox_extensions_template-1.0.0.zip を読み込みます。
すると拡張機能一覧に、サンプルの拡張機能が表示されます。
拡張機能は、ツールバーにピン留めすることもできます。
これで、サイトでサンプルの拡張機能を実行すると、Twitter にタイトルと URL をシェアすることができるようになります。
署名をする
Firefox の拡張機能に署名を行うことにより、Firefox アドオン で公開したり、
署名の仕方によって公開せずに xpi ファイルを生成して関係者でのみファイルを共有することもできます。
Firefox 拡張機能に署名を行うには、Mozilla Developer Hub でアカウント登録して、Mozilla から署名のための情報を取得する必要があります。
JWT issuer と JWT secret は こちらのページ から取得します。
一般的には、下記コマンドを実行して、Firefox 拡張機能に署名後、Mozilla にアップロードして審査を受けます。審査に通ったら、Firefox アドオンで拡張機能が公開されます。
$ web-ext sign --api-key=<JWT issuer> --api-secret=<JWT secret>
今回のサンプルではパスを変えているので、以下のように署名します。
$ web-ext --source-dir app --artifacts-dir web-ext-artifacts sign --api-key=<JWT issuer> --api-secret=<JWT secret>
Firefox アドオンに公開したくはないけれども、 xpi ファイルのみ作成したい場合は --channel=unlisted オプションを付けて署名します。
こうすることで、Firefox アドオンでは公開されないので、リリース前の関係者での動作確認ができるようになります。
但し、一度使ったバージョンは使用できず、この場合でも審査が必要になります。
$ web-ext --source-dir app --artifacts-dir web-ext-artifacts sign --channel=unlisted --api-key=<JWT issuer> --api-secret=<JWT secret>
なお、署名のコマンドを実行しても、エラーがでるのが標準っぽい？です。
署名コマンドで失敗しても、Moziila にはちゃんとアップロードされており、審査が通れば Firefox アドオンに公開、または xpi ファイルが作成されます。その都度、メールが届きます。
Signing add-on [...................................................................................................................................] FAIL WebExtError: Signing is still pending, you will receive an email once there is an update on the status of your submission. If you don’t see the email after 24 hours, please check your Spam folder.
Firefox アドオンで公開された、または xpi ファイルが作成されたら、インストールボタンやリンクをクリックすることでインストールすることができます。
情報源
Firefox 拡張機能を作成する際は、下記のような公式ドキュメントか、検索して英語情報にアクセスするくらいしかありません。
ブラウザのシェアが低いので、ニーズが少ないのかもしれません。
いいブラウザなんですけどね。。
以下は、Firefox 拡張機能のサンプルがたくさんあります。
Tips
console.log でログを出力する方法
Firefox 拡張機能を作成するときに驚くのが、 console.log をしてもログが出ないことです。
console.log でログを出力するには、Firefox のアドレスバーで、about:config を入力後、 extensions.sdk.console.logLevel を all にしてします。
その後、Cmd(Ctrl) + Shift + J で表示されるウィンドウで「マルチプロセス」を選択することでログを表示することができます。
jQuery などの外部ライブラリを読み込む
プロジェクトに jQuery のライブラリを組み込み、manifest.json で指定します。指定の順番も関係あるようです。
"background": { "scripts": ["jquery.js", "background.js"] }
但し、以下の情報を見ると、審査を受ける場合は注意が必要そうです。
おわりに
まとめてみれば簡単そうに見えますが、これがどうしてなかなか情報が見つからないのですよね。。
何かのお役に立てば幸いです。