Firefox ブラウザ拡張機能でOSネイティブな通知をする

概要

これは初心者のブラウザ拡張機能 Advent Calendar 2024の7日目の記事です。

拡張機能からOSネイティブ通知を行う方法を記載します。

ソースコード

右クリックで表示されるメニューへsample menuという項目を追加し、クリック時に通知が呼び出されるようにしました。

background.js

browser.menus.create(
    {
      id: "sample",
      title: "sample menu",
      contexts: ["page"],
    }
  );

function createNotification() {
    browser.notifications.create({
        type: "basic",
        iconUrl: browser.runtime.getURL("icons/icon-48.png"),
        title: "Clicked!",
        message: "クリックしました",
    });
}

browser.menus.onClicked.addListener((info, tab) => {
    if (info.menuItemId === "sample") {
        createNotification();
    }
});

通知に関する説明

通知はbrowser.notifications.createで作成します。

通知内に作成できるコンテンツは色々ありますが、Firefoxでは基本的なものしかサポートされていません。

Firefox currently: only supports the type, title, message, and iconUrl properties; and the only supported value for type is 'basic'.

notifications.NotificationOptions

項目	説明	備考
type	通知のタイプ	Firefoxではbasicのみサポート
iconUrl	アイコン画像のURL	-
title	通知のタイトル	-
message	通知内に入れるメッセージ	-

※Firefoxでは上記4つのみサポート

参考

notifications