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

 

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

今回は、「条件に一致したURLのサイトで実行される」FireFoxアドオンの作り方をついて紹介します。

 

目次

必要なもの

  • Javascriptを書く力
  • FireFoxのアカウント

 

手順

1.「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)。

 

2.JSファイルを作成する。

 

名前は手順1で記述したJSファイル名と同じものにする。

サイトにJavascriptを追記する感覚で書けばOK。

var test = document.createElement("div");
test.innerHTML = 'テストテキスト';
document.body.appendChild(test);

 

3.テストをする。FireFoxのアドレスバーに、「about:debugging」を入力して移動。

 

4.「一時的なアドオンを読み込む」をクリックし、手順1で作成した「manifest.json」を選択する。

 

読み込みに成功すると、下の画像のようになる。

 

5.手順1と手順2で作成したファイルをZIPファイルにまとめる。作成したファイルがZIPファイル直下にくるようにする。

 

ZIPファイルの作り方

5-1.作成したファイルを選択

5-2.選択したファイルの上で右クリックし、「送る」「圧縮(zip形式)フォルダ」の順にクリックする。

5-3.完成したZIPファイルの名前を、自分の好きなファイル名に変更する。

 

6.条件を満たすサイトへ行き、動作を確認する。

手順2の例の場合

 

7.下記URLにアクセスし、ログイン。アカウントを持っていない人は新規登録する。

https://addons.mozilla.org/ja/developers/

 

8.「新しいアドオンを登録」ボタンをクリックする。

 

9.不特定多数の人に公開する場合は「当サイトで。」にチェック、個人利用または個人で配布する場合は「自分自身で。」にチェックを入れて、「続ける」をクリック。

この記事では後者を選択した場合について書く。

 

10.手順5で作成したZIPファイルを選択する。アップロード完了後、対応プラットフォームを選択し、「アドオン署名」ボタンをクリックする。

 

11.XPIファイルをダウンロードする。

 

12.ダウンロードしたXPIファイルを、FireFoxにドラッグ&ドロップする。

 

13.「追加」ボタンをクリックしてインストール。

 

14.インストールを確認して終了。

 

お疲れ様でした。

 

アイコン設定

「manifest.json」に下記の設定を加える。

"icons": {
  "48": "48.png",
  "96": "96.png"
}

48pxと96pxアイコンの設定ができる。

ファイル名は好きなものでOK。

 

おわりに

アドオン大好き

 

評価ありがとうございます。
記事の評価をお願いします。今後の参考にさせていただきます。
  • 役に立った (3)
  • まあまあだった (2)
  • 理解不能 (0)
  • 役に立たなかった (0)

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.