とんかつのはじっこ

備忘録やら戯言。

はじめての拡張機能

はじめに

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

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

 

アドオンを作ってみる

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

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

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

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

 

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

developer.mozilla.org

フォルダ構成

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

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

 

icons/border-48.png

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

f:id:instery:20180214222918p:plain

 

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