2018年9月21日金曜日

Firefox の Webextension を開発してみよう

概要
環境
ワークスペース作成
manifest.json の作成
main.js の作成
動作確認
Tips
最後に
参考サイト

概要

昔の Firefox のアドオン開発は XUL と呼ばれる XML 形式の UI と JavaScript で開発していました
しかし Firefox Quantum が登場し XUL が廃止され Chrome の Webextension と同じく HTML + JavaScript で開発するようになりました

今回は初めて Webextension を開発するチュートリアルを紹介します

環境

macOS 10.13.6
Firefox 62.0

ワークスペース作成

mkdir my_first_extension
cd my_first_extension

manifest.json の作成

必須のファイルになります
extension のメタデータなどを記載します

touch manifest.json
vim manifest.json

{
  "manifest_version": 2,
  "name": "My first extension",
  "version": "1.0",
  "description": "Test extension",
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["main.js"]
    }
  ]
}

main.js の作成

manifest.json で指定したスクリプトになります
ここにブラウザの操作や DOM の操作などを記載していきます
今回は超簡単な処理として表示したページの枠を青色にする処理を記載します

touch main.js
vim main.js

document.body.style.border = "5px solid blue";

body の情報を取得して CSS を当てているだけです

動作確認

Firefox を起動して about:debugging にアクセスします
「一時的なアドオンを読み込む」を選択して manifest.js を選択しましょう

これで Webextension のテストができます
適当にサイトにアクセスすると枠が青くなっているが確認できると思います

Tips

アイコンを設定する場合は以下の情報を manifest.json を追記します

"icons": {
  "48": "icons/border-48.png",
  "96": "icons/border-96.png"
}

そして icons ディレクトリ配下に border-48.png などを配置すれば OK です
2 サイズ分用意しなくても良いですが用意したほうが良いです

拡張機能 ID は Webextension を公開するときには指定が必要です
manifest.json に以下を追記しましょう

"applications": {
  "gecko": {
    "id": "my-first-extension@example.com"
  }
}

メールアドレス形式で指定します
これは XUL の時代にもありました
もし XUL で開発していたアドオンの新しいバージョンとして公開する場合は XUL 時代に使っていた ID と同じ値を指定してください

今回は content_scripts で動作させましたが他に background というモードがあります
XMLHttpRequest などは background モードでしか使えません
逆にアラート表示などは content_scripts でないとできません
background の場合は変わりに notifications などを使います
という感じでやりたいことによってモードを使い分ける必要があります