backgroundから通知を送る

Chrome Extension

予定の開始時間が近くなったら通知してくれるChrome拡張を作りました。

この記事でできること

  • Chrome拡張を用いて定期的に通知を送る

やりかた

通知はChromeのNotifications APIを利用します。 developer.chrome.com 通知を送るべきか定期的にチェックするため、Alarms APIを利用します。 developer.chrome.com

manifestで権限を設定する

下記のようにmanifestのpermissionを設定します。 また、次の手順でbackgroundで実行するスクリプトを作成するので、backgroundにそのファイル名を指定します。 iconsは最低でも1つは指定することが必要なので作成してください。 もしChrome Extension Storeにて公開したい場合はサイズも正しく作ったほうが良いです。

{
    "name": "Push Notify",
    "version": "1.0.0",
    "manifest_version": 2,
    "icons": {
        "16": "icons/Artboard@2x.png",
        "48": "icons/Artboard@2x.png",
        "128": "icons/Artboard@2x.png"
    },
    "permissions": [
        "notifications",
        "alarms"
    ],
    "background": {
        "scripts": ["background.js"]
    }
}

backgroundで実行するスクリプトを作成する

chrome.alarms.createを用いてアラームを作成します。 periodInMinutesで指定した数字（単位は分）ごとにaddListenerで追加した関数を実行します。 addListenerの中では通知を送る処理を行います。 下記の実装だと1分ごとに通知が送られるようになっています。 typeは"basic","image","list","progress"から選ぶことができます。 OSによって各typeは違いますが、イメージは下記を参考にすると良さそうです。 developer.chrome.com

chrome.alarms.create('NOTIFY', {periodInMinutes: 1});
chrome.alarms.onAlarm.addListener( function (alarm) {
  if (alarm.name == 'NOTIFY') {
    let options = {
      type: "basic",
      title: "subject",
      message: "message",
      iconUrl: "icons/Artboard@2x.png"
    };
    chrome.notifications.create(options);
});

導入する

Chromeの「拡張機能を管理」からディレクトリごと読み込むことで動作確認できます。 デベロッパーモードを有効にすると「パッケージ化されていない拡張機能を読み込む」ボタンが表示されます。 導入後は「バックグラウンド ページ」をクリックすることでconsole.logなどを用いたデバッグを行うことが出来ます。 f:id:niwaton:20220114162442p:plain

通知を受け取る際は、OS側の設定も行ってください。 Macの場合「通知と集中モード」のアプリケーションごとの通知の設定にてChromeの通知を許可しないとChrome拡張側で通知を送っても表示することは出来ません。