FireFoxアドオンの作り方（条件に一致したURLのサイトで実行）

 

こんにちは、マツモです。

今回は、「条件に一致した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。

 

おわりに

アドオン大好き