はじめに
FireFoxのアドオンを自分で作ってみることにした。
業務中に「こんな機能があればなぁ…」と思うようになったからである。
アドオンを作ってみる
さて、まず何をすればいいのか。
FireFoxのアドオンの作成は思っていたより簡単である。
まずはサンプルとして、下記の拡張機能を作成する。
"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 は必須であり、拡張機能の基本的なメタデータを指定します。
- {
- "manifest_version": 2,
- "name": "Borderify",
- "version": "1.0",
- "description": "Adds a solid red border to all webpages matching mozilla.org.",
- "icons": {
- "48": "icons/border-48.png"
- },
- "content_scripts": [
- {
- "matches": ["*://*.mozilla.org/*"],
- "js": ["borderify.js"]
- }
- ]
- }
テスト
作成したアドオンは、『一時的なアドオンを読み込み』ことでローカルのアドオンをテストすることができる。