Jak odesílat oznámení v rozšířeních Chrome

Tento článek byl původně zveřejněn na mém osobním blogu

V tomto tutoriálu se podíváme na to, jak odesílat oznámení v rozšířeních Chrome. Projdeme si, jak odeslat jedno oznámení a jak naplánovat odeslání oznámení na později.

Předpoklady

Tento tutoriál předpokládá, že již víte, jak vytvořit rozšíření pro Chrome. Pokud ne, pak zde je jeden, se kterým můžete začít jako první.

Nastavení oprávnění

Než budete moci odeslat jakýkoli typ oznámení, musíte nejprve přidat manifest.json vpermissions zadejte následující:

"permissions": [
          "notifications"
          //other permissions in your extension
  ]

To znamená, že uživatel při instalaci nebo aktualizaci vašeho rozšíření musí souhlasit s tím, že bude dostávat upozornění, aby mohl rozšíření používat.

Odeslat oznámení

Chcete-li odeslat oznámení, musíte použít rozhraní API oznámení. Konkrétně chrome.notifications.create metoda, která má následující požadované možnosti:

chrome.notifications.create('NOTFICATION_ID', {
    type: 'basic',
    iconUrl: 'path',
    title: 'notification title',
    message: 'notification message',
    priority: 2
})

Zde je význam každé z těchto možností:

1. NOTIFICATION_ID: ID oznámení. To může být nezbytné pro aktualizaci oznámení nebo jeho vymazání.
2. typ: Typ oznámení. Jeho hodnoty mohou být „basic“, „image“, „list“, „progress“
3. iconUrl: Cesta k ikoně, která by se měla zobrazit v oznámení. To by mělo být relativní ke kořenovému adresáři vašeho rozšíření.
4. název: název oznámení.
5. zpráva: zprávu, která se zobrazí v oznámení.
6. priorita: tento není povinný, ale doporučuji jej zahrnout. Hodnota se může pohybovat od -2 do 2, kde -2 je nejnižší priorita a 2 je nejvyšší. Výchozí hodnota pro tuto možnost je 0, takže pokud tuto možnost nezahrnete, vaše oznámení mohou zůstat neviditelná. Je třeba také poznamenat, že hodnota menší než 0 způsobí chybu na zařízeních, která nemají oznamovací centrum.

Existují některé další možnosti, které jsou volitelné:

• tlačítka: tlačítka, která chcete zobrazit v oznámení. To vyžaduje řadu tlačítek s nejvýše 2 tlačítky. Pole by měl být objekt s vlastností title což bude název tlačítka. Například:

buttons: [
    {
        title: 'Yes'
    },
    {
        title: 'No'
    }
]

• contextMessage: Tato zpráva se zobrazí s menší tloušťkou písma.
• čas události: Časové razítko spojené s oznámením. Například:

eventTime: Date.now()

• položky: Toto se zobrazí pouze pro Mac OS X. To může být užitečné pro oznámení typu list . Například:

items: [
    {
        title: 'Item 1',
        message: 'This is first item'
    }
]

• pokrok: To může být užitečné pro oznámení typu progress . Nabývá hodnoty mezi 0 a 100
• vyžaduje interakci: Toto bude fungovat pouze pro verze Chrome od 50. Hodnota pro toto je boolean. Je-li nastaveno na hodnotu true, znamená to, že oznámení nezmizí z obrazovky, dokud uživatel se zprávou nezareaguje tak, že na ni klikne, nebo ji zavře. Výchozí hodnota je false.
• tiché: Tento bude fungovat pouze pro verze Chrome od roku 70. Hodnota tohoto je booleovská. Pokud je nastaveno na hodnotu true, oznámení nebude vydávat zvuk ani vibrovat. Výchozí hodnota je false.

Chcete-li odeslat základní oznámení, které uživateli pouze zobrazí zprávu:

chrome.notifications.create('test', {
    type: 'basic',
    iconUrl: 'images/1.png',
    title: 'Test Message',
    message: 'You are awesome!',
    priority: 2
});

Tím se odešle jedno upozornění v okamžiku, kdy je spuštěno.

Oznámení o plánování

V mnoha případech ve skutečnosti nechcete posílat upozornění hned nebo chcete posílat upozornění v určitém intervalu, například jednou denně. K tomu použijeme Alarms API.

Alarmy nám umožňují naplánovat něco, co se spustí na později. Když vytváříte budík, můžete určit časový interval, ve kterém se spustí. Poté můžete poslouchat alarm a když se spustí, spustí libovolný kód, který chcete.

Abychom mohli používat Alarmy, musíme je také zahrnout do našich oprávnění v manifest.json :

"permissions": [
          "alarms",
          "notifications"
          //other permissions your extension require
  ],

Chcete-li posílat oznámení podle určitého plánu, postupujte takto:

1. Vytvořte budík, který se spustí v určitých intervalech
2. Poslouchejte, kdy se spustí budík
3. Když se spustí alarm, proveďte nějakou logiku a vytvořte oznámení

Vytvořte budík, který se spustí v určitých intervalech

Pro vytvoření alarmu použijeme metoduchrome.alarms.create :

chrome.alarms.create('ALARM_NAME', {
    //options
});

Stačí zadat název alarmuALARM_NAME , který se později použije při poslechu budíku. Nejsou vyžadovány žádné další možnosti. Pokud jej však použijete bez možností, alarm se spustí pouze jednou v době, kdy byl vytvořen.

Možnosti, které můžete projít, jsou:

• kdy: Kdy by měl alarm začít fungovat. Pokud chcete, aby to začalo hned:

when: Date.now()

• periodInMinutes: Zde určujeme, kdy se spustí alarm. Trvá to číslo, což je počet minut mezi každým spuštěním alarmu. Pokud tedy chci, aby se alarm spouštěl každých pět minut:

periodInMinutes: 5

• delayInMinutes: Toto určuje, zda onAlarm událost by se měla před odpálením trochu zpozdit.

Nejdůležitější možností je zde periodInMinutes . Určuje, kdy chceme vytvořit oznámení.

Pokud tedy chceme vytvořit alarm, který nám umožní vytvořit oznámení, které se bude spouštět každý den:

chrome.alarm.create('testAlarm', {
    periodInMinutes: 1440
});

Poslouchejte, kdy se spustí budík

Dalším krokem by bylo poslouchat, kdy se spustí alarm. To by se mělo obvykle provádět pomocí skriptů na pozadí pro Manifest V2 nebo servisních pracovníků pro Manifest V3.

Další informace o rozdílech mezi Manifest V2 a V3 si můžete přečíst zde.

Pokud nevíte, co je to skript na pozadí, je to, jak jeho název napovídá, skript, který vždy běží na pozadí, i když stránka vašeho rozšíření nebo vyskakovací okno nebo cokoli, co vaše rozšíření používá, není otevřené nebo spuštěné. To nám pomáhá neustále poslouchat události, alarmy, zprávy atd.

Servisní pracovníci byli představeni v Manifestu V3 jako náhrada za skripty na pozadí. Hlavním rozdílem je, že servisní pracovníci ne vždy běží. Servisní pracovníci registrují posluchače událostí pro alarmy, zprávy atd... stejně jako skripty na pozadí, takže pouze posluchači se spouštějí, když je to nutné, například když dojde k události.

Pokud ještě nemáte skript na pozadí ve svém rozšíření pro Chrome, musíte jej nejprve zahrnout do manifest.json :

"background": {
    "scripts": ["js/background.js"],
    "persistent": false
},

Nebo pokud používáte Manifest V3, musíte zaregistrovat servisního pracovníka:

"background": {
        "service_worker": "js/background.js"
 },

Poté ve skriptu nasloucháme alarmu pomocí chrome.alarms.onAlarm.addListener která přebírá funkci zpětného volání, která bude naším posluchačem. Tato funkce zpětného volání se spustí při každém spuštění alarmu v našem rozšíření, takže se musíme ujistit, že nasloucháme pouze alarmu, který potřebujeme a který jsme nazvalitestAlarm :

chrome.alarms.onAlarm.addListener((alarm) => {
    if (alarm.name === "testAlarm") {
        //our alarm is running, send notification
    }
});

Musíme zkontrolovat, že alarm.name === "testAlarm" abychom se ujistili, že náš alarm upozornění běží. To je důležité, pokud máte v rozšíření více alarmů, abyste se ujistili, že spouštíte požadovanou logiku pro správný alarm.

Takže pokud je podmínka pravdivá, můžeme vytvořit oznámení.

Po spuštění alarmu proveďte nějakou logiku a vytvořte oznámení

V závislosti na vašem případu použití můžete provést nějakou logiku, možná odeslat požadavek na server nebo jakoukoli jinou logiku a poté spustit oznámení.

Co uděláme, je, že vytvoříme zprávu, až se spustí alarm. Takto to lze udělat:

chrome.alarms.onAlarm.addListener((alarm) => {
    if (alarm.name === "testAlarm") {
        chrome.notifications.create('test', {
            type: 'basic',
            iconUrl: 'images/1.png',
            title: 'Test Message',
            message: 'You are awesome!',
            priority: 2
        });
    }
});

Po těchto 3 krocích naše rozšíření vytvoří alarm, který se spustí jednou denně a spustí kód v posluchači, který jsme přidali do onAlarm událost. Tento posluchač vytvoří oznámení. Uživateli tak bude každý den zasláno upozornění.

Odeslání upozornění na Firefox

Odeslání upozornění na Firefox je úplně stejné, s tím rozdílem, že stačí nahradit chrome.* ve všech metodách používaných s browser.* . Více o rozdílech mezi Firefoxem a Chromem si můžete přečíst zde.

Souhrn

Chcete-li vytvořit oznámení, musíte:

1. Přidejte notifications na permissions pole v manifest.json
2. Použijte chrome.notifications.create vytvořit oznámení a odeslat je.

Chcete-li naplánovat spouštění oznámení v určitém časovém intervalu, musíte:

1. Přidejte alarms na permissions pole v manifest.json
2. Použijte chrome.alarms.create vytvořit alarm.
3. Poslouchejte alarm s chrome.alarms.onAlarm.addListener a vytvořit oznámení uvnitř posluchače.

Pokud byste se chtěli spojit a popovídat si více o tomto článku nebo programování obecně, najdete mě na mém účtu na Twitteru@shahednasserr