はじめに
個人用に 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>
署名が済んでアップロード後に審査が通れば、xpi ファイルが作成されてメールが届きます。
xpi ファイルが作成されたら、インストールボタンやリンクをクリックすることでインストールすることができます。
拡張機能を公開する
作成した Firefox 拡張機能を公開するには、 初回は web-ext を使わずブラウザから申請する必要があります。この情報に中々たどり着けず、かなり時間がかかってしまいました。。
詳しくは、以下をご確認ください。
web-ext を使用した申請は On your own となっており、 自分でどこかにサーバーを用意して拡張機能を配布する設定になっています。
まずはこれを On this site として Firefox のストアで拡張機能を公開する設定に変更します。
プラグインの管理画面で、 Upload New Version をクリックします。
On your own. になっているので、On this site. に変更して Continue をクリックします。
On this site. になっていることを確認後、ビルドして作成された zip ファイルを Select a file... から登録します。登録済みのバージョンは使用できません。
無事にアップロードされたら、 Continue をクリックします。
JavaScript の難読化をしているか聞かれるので、ここでは No を選択して Continue をクリックします。
必要項目を入力して Submit Version をクリックします。
Manage Listing をクリックします。
拡張機能を公開するにあたり、必要な情報があれば登録します。
審査が通ったら、公開された拡張機能の URL を含めたメールが届きます。
また、拡張機能の審査状況が Approved になり、Firefox のストアから拡張機能をインストールできるようになります。
2回目以降は、web-ext コマンドに --channel=listed を付けるだけで申請できるようになります。
以下のような簡単なシェルで申請できます。
#!/bin/bash JWT_ISSUER= JWT_SECRET= rm -rf web-ext-artifacts web-ext --source-dir app --artifacts-dir web-ext-artifacts sign --channel=listed --api-key=$JWT_ISSUER --api-secret=$JWT_SECRET
情報源
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"] }
但し、以下の情報を見ると、審査を受ける場合は注意が必要そうです。
おわりに
まとめてみれば簡単そうに見えますが、これがどうしてなかなか情報が見つからないのですよね。。
何かのお役に立てば幸いです。
