Firefox の Webextension で Notifications を出す方法

• 概要
• 環境
• manifest.json
• main.js
• 動作確認
• 最後に

概要

Firefox の Webextension では新たに Notification が使えるようになりました
今回は簡単な使い方を紹介します

環境

• macOS 10.13.6
• Firefox 62.0

manifest.json

• vim manifest.json

{
  "manifest_version": 2,
  "name": "Notifications sample",
  "version": "1.0",
  "description": "Display a notification when starting",
  "icons": {
    "48": "icons/border-48.png"
  },
  "background": {
    "scripts": ["main.js"]
  },
  "permissions": [
    "notifications"
  ]
}

ポイントは permissions に notifications を追加するところです

main.js

• vim main.js

browser.notifications.create({
  "type": "basic",
  "iconUrl": browser.extension.getURL("icons/icon-48.png"),
  "title": "Hello",
  "message": "This notification is test"
});

type は basic を使っています
他にも image や list, progress などがあります
詳細はこちらをご覧ください
iconUrl は通知時にアイコンを指定することができます
指定のアイコンがない場合はデフォルトで Firefox のアイコンが表示されます
title, message は通知に表示する文字列情報になります

今回の場合はアドオンを読み込みした時点で通知します
本来であればクリックのイベントやコールバック処理などで呼び出しましょう

動作確認

about:debugging から manifest.json を読み込みましょう
すると以下のように通知が来ると思います

最後に

Firefox の Webextension で Notifications 機能を使ってみました
background で動作させる場合には window.alert などが使えないので代用として Notifications は良いかもしれません
また HTML が不要なのも嬉しい点かなと思います

通知時のイベントもあり onButtonClicked, onClicked, onClosed, onShown があります (参考)

通知はウザがられがちですが使い方によっては便利なのでうまく活用してみてください