はじめての拡張機能

はじめに

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

14日 手戻り

昨日からの続き、設計して実装し、ぎりぎりになってテスト実施。

しかし、おかしい。登録項目が不自然なのである。

NotNull項目が入っている場合は、平気だが空欄の場合登録ができない。

たしかに、NotNull項目が入っていることが前提なので、設計から間違いだった。

さて、なぜこのようなことが起きたのか。

①設計レビューを省略した。

②更新項目表に追記したが、実際登録される動きは確認していない。

②は確かに、登録処理まわりの設計が手薄であった。

前回に課題管理からの要求仕様のズレもあったが、その確認もしていない。

設計から実装に移る段階で個人レビューが必要そうである。

確認項目として、

①要求仕様が設計に反映されているか。

②登録されるデータに不整合はないか？

（例：NotNull項目がNullで登録されるパターンがある）

個人レビューの必要性、効果などについては以後まとめるとする。

以上。