今更 Firefox のアドオンを Quantum に対応してみた

XML と JS で UI を作る XUL の仕組みが廃止となり JS のみでアドオンを開発するようになりました
古いアドオンは使えなくなってしまったので新たに Quantum 対応版に書き換えてみました
感覚的には Chrome の Extension を作るときと同じかなと思います

https://github.com/kakakikikeke/all-reload

以下ではハマりポイントを紹介します

• 感覚だけつかみたいならとりあえず Getting Started をやってみる
• matches は * だけではだめ
• There was an error during installation: Extension is invalid
• console.log でデバッグするには
• browser.i18n.getMessage について
• 公式のドキュメントはあてにならない
• tab を操作する場合は permissions が必要
• accessKey を作成するには
• パッケージにする
• ID は変えちゃダメ

感覚だけつかみたいならとりあえず Getting Started をやってみる

とりあえずこれをやってみましょう

matches は * だけではだめ

すべてのサイトに対応したいと言って以下のように記載するとアドオンのインストール時にエラーになります

"matches": ["*"]

以下のように記載しましょう

"matches": ["*://*/*"],

There was an error during installation: Extension is invalid

アドオンをテストで Firefox にインストールする際によく見かけると思います
これが出る場合は大抵の場合は manifest.json の記述に誤りがあります

console.log でデバッグするには

バックグラウンドモードで起動する必要があります

"background": {
  "scripts": ["main.js"]
}

browser.i18n.getMessage について

_locales/en/message/messages.json を作成してメッセージを定義しておきます

{
  "menuItemRemoveMe": {
    "message": "hoge",
    "description": "fuga"
  }
}

また manifest.json にデフォルトで使用する locale を指定する必要があります

"default_locale": "en"

公式のドキュメントはあてにならない

公式は割と古い情報が多いので Github にある数々のサンプルが一番参考になります
https://github.com/mdn/webextensions-examples/blob/master/menu-demo/

tab を操作する場合は permissions が必要

"permissions": [
  "tabs"
]

accessKey を作成するには

accessKey はコンテキストメニューを表示したときにクリックするのではなく特定のキーボードのボタンを押すことでコンテキストメニューを実行するための機能です
要するにショートカットみたいなものです

どうやら WebExtension では accessKey の機能自体はないようでコンテキストメニューのタイトルの先頭に該当のキーを表示することで対応できるようです
例えば「z」キーに割り当てる場合は以下のようにします

{
  "menuItemReload": {
    "message": "Z) all tabs reload",
    "description": "Reload all tabs when clicked."
  }
}

パッケージにする

公開するには zip ファイルを作成するだけです
xpi ファイルなどは不要になりました

• zip -r -FS ../all-reload.zip *

ID は変えちゃダメ

install.rdf で指定していた em:id は manifest.json の applications.gecko.id で指定します
この値は同じでないと既存のアドオンに対して更新することはできません

<em:id>all_reload@kakakikikeke.blogspot.com</em:id>