はじめての拡張機能

はじめに

FireFoxのアドオンを自分で作ってみることにした。

業務中に「こんな機能があればなぁ…」と思うようになったからである。

アドオンを作ってみる

さて、まず何をすればいいのか。

FireFoxのアドオンの作成は思っていたより簡単である。

まずはサンプルとして、下記の拡張機能を作成する。

"mozilla.org" とそのサブドメインから読み込まれたページに赤い枠を付ける

参考にさせていただくサイトはこちら。

developer.mozilla.org

フォルダ構成

下記のフォルダ構成で作成する。

構成			備考
📂[borderify]
└	📂[icons]		アイコン保存ディレクトリ
	└	border-48.png	アイコン(48×48px)
└	manifest.json		拡張機能に関する基本的なメタデータ
└	borderify.js		実行スクリプト

icons/border-48.png

拡張機能のアイコンを用意します。サイズ別に画像ファイルを用意します。

borderify/manifest.json

最初の 3 つのキー manifest_version、name、version は必須であり、拡張機能の基本的なメタデータを指定します。

1. {
2.     "manifest_version": 2,
3.     "name": "Borderify",
4.     "version": "1.0",
5.     "description": "Adds a solid red border to all webpages matching mozilla.org.",
6.     "icons": {
7.         "48": "icons/border-48.png"
8.     },
9.     "content_scripts": [
10.         {
11.             "matches": ["*://*.mozilla.org/*"],
12.             "js": ["borderify.js"]
13.         }
14.     ]
15. }

テスト

作成したアドオンは、『一時的なアドオンを読み込み』ことでローカルのアドオンをテストすることができる。

about:debugging