Firefoxのアドオン開発について(ファイルの作成&動作確認まで)

忘れないようにFirefoxのアドオン開発にしてメモしておく。
まずは最初の段階としてファイルの作成からFirefoxで動かすまでの工程について。

基本的にはFirefoxの公式が出しているマニュアルがあるので、それを参照すれば何とかなる。

■初めての拡張機能
https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension

今回は最小限の構成で進めていくことにする。

1. アドオン用のディレクトリを作成する。

まずは適当な場所に任意のディレクトリを作る。
今回は「firefox_addon_test」ディレクトリを作ったとして話を進めていく。

2. マニフェストファイルを作成する。

「firefox_addon_test」ディレクトリ配下に「manifest.json」という名前で以下の内容のファイルを作成する。

{
	"manifest_version": 2,
	"name": "addon_test",
	"version": "1.0",
	"content_scripts": [
		{
			"matches": [
				"http://*/*",
				"https://*/*"
			],
			"js": ["main.js"]
		}
	],
	"permissions": []
}

「main.jsに書かれた処理をhttpもしくはhttpsのページにて実行する」というような意味となっている。

3. 実処理用のmain.jsファイルを作成する。

今回は最小限ということでalertを出すだけの処理にする。
「firefox_addon_test」ディレクトリ配下に「main.js」という名前で以下の内容のファイルを作成する。

alert("call addon");

ここまで行うと

firefox_addon_test
　∟main.js
　∟manifest.json

というファイル構成になる。

4. Firefoxにアドオンを登録する。

4-1. Firefoxを起動し、URL欄に「about:debugging」を入力してデバッガー画面を開き、「このFirefox」をクリックする。

4-2. 「一時的なアドオンを読み込む...」をクリックし、「firefox_addon_test」ディレクトリ配下のファイルを選択する。

「main.js」を選んでもうまく認識してくれるが、選択ダイアログに「manifest.jsonファイルか・・・」と書いてあるのでマニフェストファイルを選ぶのが確実っぽい。

うまく読み込めると以下のように一時的な拡張機能欄に表示される。

5. Firefoxでアドオンを動かしてみる。

「手順4.」にて読み込んだ時点でマニフェストファイルに書いた条件を満たせばアドオンが動く状態になっている。
今回作成した条件は「main.jsに書かれた処理をhttpもしくはhttpsのページにて実行する」というものなので、適当なサイトにアクセスする。

https://www.mozilla.org/ja/firefox/new/

以下のようにmain.jsに記載したalertが表示されれば無事動作している。

6. 処理を変更してみる。

alertだと少々うざったいので、公式のチュートリアルと同じようにボーダーの色を変える処理に変更する。

6-1. main.jsファイルを以下の内容に書き換える。

//alert("call addon");
document.body.style.border = "5px solid red";

6-2. デバッガー画面の「再読み込み」ボタンをクリックする。

6-3. 再度サイトにアクセスする。

以下のように赤いボーダーが表示されていればうまく処理を変更できている。

7. 一時的なアドオンを削除する。

最後に後始末をする。
Firefoxを再起動させるか、デバッガー画面の「削除」ボタンを押せばアドオンの登録を解除できる。


「アドオンの登録は解除したくないが、一時的に動かしたくない」という場合であればアドオン管理画面(about:addons)からアドオンを無効にすれば良い。


Firefoxを再起動すると一時的なアドオンが読み込まれていない状態になってしまうので、
アドオンの開発を行う際は毎回「手順4.」の読み込み操作が必要となる。