この記事では、Firefox 用の WebExtensions をどのように作ればよいのか、その初めから最後までを一通り説明します。このアドオンは "mozilla.org" とそのサブドメインから読み込まれたページに赤い枠を付けるだけのアドオンです。
このサンプルのソースコードは GitHub でも公開しています（https://github.com/mdn/webextensions-examples/tree/master/borderify）。
これ以降は、バージョン 45 以降の Firefox が必要となります。
WebExtension を書く
新しいディレクトリを作成し、そのディレクトリに移動します。
mkdir borderify cd borderify
manifest.json
それでは、"borderify" ディレクトリ配下に新しいファイル "manifest.json" を作成します。以下の内容を書き込んで保存してください。
{
"manifest_version": 2,
"name": "Borderify",
"version": "1.0",
"description": "Adds a solid red border to all webpages matching mozilla.org.",
"icons": {
"48": "icons/border-48.png"
},
"content_scripts": [
{
"matches": ["*://*.mozilla.org/*"],
"js": ["borderify.js"]
}
]
}
- 最初の 3 つのキー
manifest_version、name、versionは必須であり、アドオンの基本的なメタデータを指定します。 descriptionは省略可能ですが、設定しておくことをお勧めします。この値はアドオンマネージャに表示されます。iconsは省略可能ですが、 設定しておくことをお勧めします。この値はアドオンのアイコンを指定するものであり、アイコンはアドオンマネージャに表示されます。
ここで最も興味深いキーは content_scripts です。このキーは、指定したパターンにマッチする URL の Web ページにスクリプトを読み込ませるよう Firefox に指示するものです。今回は、"borderify.js" というスクリプトを "mozilla.org" とそのサブドメインの HTTP / HTTPS ページすべてに読み込ませるように指定しています。
Firefox 47 以前では applications キーを追加する必要があります。
"applications": {
"gecko": {
"id": "[email protected]",
"strict_min_version": "42.0",
"strict_max_version": "50.*",
"update_url": "https://example.com/updates.json"
}
}icons/border-48.png
アドオンにはアイコンを用意すると良いでしょう。このアイコンは、アドオンマネージャでアドオンのリスト横に表示されます。今回の manifest.json では "icons/border-48.png" を用意していると宣言しています。
まずは "borderify" ディレクトリの下に "icons" ディレクトリを作成します。次に、アイコンを "border-48.png" という名前で "icons" ディレクトリ内に保存します。必要であれば サンプルで使用しているアイコン を利用しても構いません（このアイコンは Google Material Design iconset から引用したものであり、Creative Commons Attribution-ShareAlike ライセンスの下で使用しています）。
ここでアイコンを自分で用意する場合は 48x48 ピクセルのサイズにする必要があります。高解像度のディスプレイには 96x96 ピクセルのアイコンを表示させたい場合は、manifest.json の icons オブジェクトに 96 というプロパティで設定してください。
"icons": {
"48": "icons/border-48.png",
"96": "icons/border-96.png"
}他の方法として、SVG ファイルを指定すれば正しく拡大・縮小されて表示されます。
borderify.js
最後に、"borderify" ディレクトリの下に "borderify.js" というファイルを作成します。次の内容を書き込んで保存してください。
document.body.style.border = "5px solid red";
このスクリプトは、manifest.json の content_scripts キーで指定したパターンにマッチするページに読み込まれます。読み込まれたスクリプトは、そのページ自身のスクリプトと同じようにドキュメントへ直接アクセスします。
動かしてみよう
ここで、必要なファイルが正しい場所に保存されているか再確認してください。
borderify/
icons/
border-48.png
borderify.js
manifest.json
"about:debugging" を Firefox で開いたら "一時的なアドオンを読み込む" をクリックし、アドオンのディレクトリにあるファイルをどれか 1 つ選択します。
ここでインストールされたアドオンは Firefox を再起動するまで有効です。
それでは "mozilla.org" 配下のページを開いてみましょう。ページが赤い枠で囲まれていることを確認できるはずです。
実験としてもう少し、例えば枠線の色を変更したり、ページのコンテンツに何か他の操作を加えてみましょう。変更を加えた content script (borderify.js) を保存し、先程のページをリロードしてみると、加えた変更がすぐに反映されているはずです。
パッケージ化と公開
自分が作ったアドオンを他の人にも使ってもらうには、アドオンをパッケージとしてまとめた後、署名するために Mozilla へ送信する必要があります。詳細は WebExtension の公開 を参照してください。
次のステップ
これで Firefox 用 WebExtension の開発手順について概念を学ぶことが出来ました。それでは次のステップに進みましょう。