こんにちは、マツモです。
今回は、「条件に一致したURLのサイトで実行される」FireFoxアドオンの作り方をついて紹介します。
必要なもの
- Javascriptを書く力
- FireFoxのアカウント
手順
１．「manifest.json」というファイルを作成する。
{
"manifest_version": 2,
"name": "Matumo TEST",
"version": "1.0",
"description": "Matumo TEST Add-ons",
"content_scripts": [
{
"matches": ["*://*.matumo.com/*"],
"js": ["main.js"]
}
]
}
「name」はアドオン名。
「version」はバージョン（String）。
「description」はアドオンの説明。
「matches」にURLの条件（正規表現OK）。
「js」に、実行するJSファイル名（何でもOK）。
２．JSファイルを作成する。
名前は手順１で記述したJSファイル名と同じものにする。
サイトにJavascriptを追記する感覚で書けばOK。
例
var test = document.createElement("div");
test.innerHTML = 'テストテキスト';
document.body.appendChild(test);
３．テストをする。FireFoxのアドレスバーに、「about:debugging」を入力して移動。
４．「一時的なアドオンを読み込む」をクリックし、手順１で作成した「manifest.json」を選択する。
読み込みに成功すると、下の画像のようになる。
５．手順１と手順２で作成したファイルをZIPファイルにまとめる。作成したファイルがZIPファイル直下にくるようにする。
ZIPファイルの作り方
５－１．作成したファイルを選択
５－２．選択したファイルの上で右クリックし、「送る」「圧縮（zip形式）フォルダ」の順にクリックする。
５－３．完成したZIPファイルの名前を、自分の好きなファイル名に変更する。
６．条件を満たすサイトへ行き、動作を確認する。
手順２の例の場合
７．下記URLにアクセスし、ログイン。アカウントを持っていない人は新規登録する。
https://addons.mozilla.org/ja/developers/
８．「新しいアドオンを登録」ボタンをクリックする。
９．不特定多数の人に公開する場合は「当サイトで。」にチェック、個人利用または個人で配布する場合は「自分自身で。」にチェックを入れて、「続ける」をクリック。
この記事では後者を選択した場合について書く。
１０．手順５で作成したZIPファイルを選択する。アップロード完了後、対応プラットフォームを選択し、「アドオン署名」ボタンをクリックする。
１１．XPIファイルをダウンロードする。
１２．ダウンロードしたXPIファイルを、FireFoxにドラッグ＆ドロップする。
１３．「追加」ボタンをクリックしてインストール。
１４．インストールを確認して終了。
お疲れ様でした。
アイコン設定
「manifest.json」に下記の設定を加える。
"icons": {
"48": "48.png",
"96": "96.png"
}48pxと96pxアイコンの設定ができる。
ファイル名は好きなものでOK。
おわりに
アドオン大好き