Firefoxでアドオン開発を始める時のメモです。
1.ドキュメント
ドキュメントは、
https://developer.mozilla.org/ja/docs/Mozilla/Add-onsで公開されています。
2.web-extのインストール
開発ツールの
web-extを導入します。web-extを利用すると、ソースコードの変更が、自動的にブラウザに反映されるようになります。
Windowsの場合、まず
nodejsをインストールします。次に、Windows PowerShellを開いて、次のコマンドを実行するとweb-extがインストールされます。
PS C:\tmp\npm install --global web-ext
web-extの導入手順は
Getting started with web-extで公開されています。
3.サンプルのダウンロード
https://github.com/mdn/webextensions-examplesからアドオンのサンプル集をダウンロードもしくはgit cloneして任意のディレクトリに展開します。
4.サンプルの動作確認
webextensions-examplesの、borderifyというサンプルで動作を確認します。このサンプルは、HTMLのbodyに枠を描画します。まず、borderifyのディレクトリに移動します。
PS C:\tmp\webextensions-examples\borderify>
次のコマンドでweb-extからfirefoxを起動します。firefoxは、borderifyのアドオンが組み込まれた状態で起動します。
PS C:\tmp\webextensions-examples\borderify>web-ext run --firefox="C:\Program Files\Mozilla Firefox\firefox.exe"
https://www.mozilla.orgを表示すると、bodyが赤枠で囲まれていることが確認できます。
 |
| アドオンの動作確認 |
5.サンプルの変更
このサンプルは、https://www.mozilla.orgを表示するときだけbodyに赤枠をつけます。これは、サンプルディレクトリの
manifest.jsonにアドオンが有効なドメインが指定されているためです。すべてのドメインでこのアドオンを有効にするには
マッチパターンを変更します。具体的には、manifest.jsonのmatchesを次のように変更します。
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["borderify.js"]
}
]
web-extから起動したfirefoxであれば、 manifest.jsonの変更が自動的にウェブブラウザに反映されます。適当なウェブサイトを表示すると、bodyの赤枠が確認できます。
 |
| body枠の確認 |
ローカルのhtmlファイルに適用したい場合は、matchsにfileスキームの条件を追加します。
"content_scripts": [
{
"matches": ["*://*/*","file:///*/*"],
"js": ["borderify.js"]
}
]
