Firefox用のアドオンを作って公開する

概要

Firefox用のアドオンの作り方、作ったアドオンの公開方法の解説です。

背景

Webページにほんの少しだけ機能を付け足したいと思うことがありますよね。

私にはあります。それがこれです。

今まで貰った配当金の合計を見てニヤつきたい。でも期間指定をポチポチやるのはダルい。そんなニッチな需要を満たしてくれるアドオンも、作ってくれる暇人もいないので自分で作ることにしました。

やりかた

サンプルを見る

まずFirefoxのアドオン開発者センターで紹介されている初めてのアドオンのサンプルを見てみます。

webextensions-examples/borderify at main ?? mdn/webextensions-examples
Example Firefox add-ons created using the WebExtensions API - mdn/webextensions-examples
github.com

サンプルには5ファイルありますが、最低限動かすには2ファイルあれば十分なのでそこだけ見ます。

  • /
    • icons
      • LICENSE #ライセンスなのでいらない
      • border-48.png #アイコンもなくても動くのでいらない
    • README.md #がんばって書いても誰も読まないのでいらない
    • borderify.js
    • manifest.json

まずはmanifest.jsonを読みます。

{

  "description": "Adds a solid red border to all webpages matching mozilla.org. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#borderify",
  "manifest_version": 3,
  "name": "Borderify",
  "version": "1.0",
  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/borderify",
  "icons": {
    "48": "icons/border-48.png"
  },

  "browser_specific_settings": {
    "gecko": {
      "id": "borderify@mozilla.org",
      "data_collection_permissions": {
        "required": ["none"]
      }
    }
  },

  "content_scripts": [
    {
      "matches": ["*://*.mozilla.org/*"],
      "js": ["borderify.js"]
    }
  ]

}

content_scripts以外は最初はおまじないみたいなものなので読み飛ばしましょう。

URLが “*//*.mozilla.org/*” にマッチしたら、”borderify.js”を実行する、となっています。

    {
      "matches": ["*://*.mozilla.org/*"],
      "js": ["borderify.js"]
    }

今回のファイル名がborderify.jsなだけで任意の名前が使えます。

次にborderify.jsを見ます。

/*
Draw a border round the document.body.
*/
document.body.style.border = "5px solid red";

普通のjavascriptです。body全体に5pxの赤線を入れています。
ここをいじれば如何様にもできるということですね。

ということで、manifest.jsonでアドオンが実行されるURLと実行するjavascriptを指定すればよいということがわかりました。

自分のアドオンを作る

manifiest.jsonとcontent.js(サンプルのborderify.jsからリネーム)を修正して欲しいアドオンを作ります。

  • /
    • manifest.json
    • content.js

manifest.json はこのようにしました。

{
    "manifest_version": 3,
    "name": "SBI Securities Date Range Buttons",
    "version": "1.1",
    "description": "「今年」ボタンの横に「直近1年」と「全期間」ボタンを追加し、クリックで日付範囲を設定する拡張機能。配当金・分配金履歴ページと損益計算ページに対応。",
    "browser_specific_settings": {
        "gecko": {
            "id": "support@myusei.com",
            "data_collection_permissions": {
                "required": [
                    "none"
                ]
            }
        }
    },
    "permissions": [
        "scripting"
    ],
    "host_permissions": [
        "https://site.sbisec.co.jp/account/assets/dividends*",
        "https://site.sbisec.co.jp/account/assets/profits*"
    ],
    "content_scripts": [
        {
            "matches": [
                "https://site.sbisec.co.jp/account/assets/dividends*",
                "https://site.sbisec.co.jp/account/assets/profits*"
            ],
            "js": [
                "content.js"
            ]
        }
    ]
}

初めてのアドオンのページには次の記載がありますが、アドオンを公開しようとすると”時折”ではなく”必ず”指定する必要があります。また、applicationsキーは古い指定のようで、サンプルにあった”browser_specific_settings”が正しいです。

https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension

content.jsは長いので省略です。興味があればgithubに上げてあるので見てください。

sbi-entire-period-addon/addon/content.js at main · myusei/sbi-entire-period-addon
SBI証券のMySBIのページに全期間を指定するボタンを追加するFirefoxのアドオンです。. Contribute to myusei/sbi-entire-period-addon development by creating an...
github.com

動作確認

firefoxを起動して、URLバーに “about:debugging” と入力します。

[この Firefox]をクリックします。

[一時的なアドオンを読み込む]をクリックします。

作ったmanifest.jsonを読み込ませます。問題なければ次のように表示されます。

アドオンが動作するはずのページに移動し、意図した動作をしているかを確認します。

問題なければ、manifest.jsonとcontent.jsをzipにかためます。名前も分かりやすい名前に変えておくとよいです。

解凍時に直下にmanifest.jsonがくるようにします。なので、親フォルダで圧縮ではなく、2ファイルを選択して右クリック→[圧縮先]→[zipファイル]です。

公開する

Firefoxのアドオン開発者センターにアカウント登録します。

Client Challenge
addons.mozilla.org

[新しいアドオンを登録]をクリックします。

addons.mozilla.orgで公開するか、他で公開するかを選べます。[On this site.]にしておきます。

[ファイルを選択]をクリックし、作成したzipファイルをアップロードします。

何かからアドオンを生成している場合はソースコードの登録ができますが、今回はjavascript直書きなので「いいえ」で進めます。

アドオンの説明を書きます。

公開できました。(たぶん。審査待ちですがきっと通るでしょう。)

SBI entire period Buttons – 🦊 Firefox (ja) 向け拡張機能を入手
Firefox 向け SBI entire period Buttons をダウンロード。SBI証券のMy資産のページに「直近1年」と「全期間」ボタンを追加する。
addons.mozilla.org

おまけ

参考情報

始めての拡張機能

実現損益にも追加

本題じゃないので流しましたが実現損益のところにも同じボタンを追加しています。

コメント