How to Send Timed Notifications — Chrome Extension
This guide already assumes you know a little bit about chrome extensions and how the code is structured.
Permissions
The first thing you have to do is add the notifications permission into your manifest.json.
"permissions": [
"notifications",
....
],Notification Structure
Next, I want to first go over the basics of how to send a chrome notification. For whatever application you are trying to make, I recommend creating a function for creating a notification, such as:
//Call this notification() funtion for every notification you want to sendfunction notification(title, message){
chrome.notifications.create(
{
title: title,
message: message,
iconUrl: "<imageurl>",
type: "basic",
requireInteraction: true
}
);
}
There are the obvious components that you would expect; the title, message, and image. There are other variables, such as the “type” (dictates what kind of notif to send) and “requireInteraction” (so it doesn’t just disappear after a few seconds, if you want). Here is the official Chrome Developers documentation on how you can fully customize your notification: https://developer.chrome.com/docs/extensions/reference/notifications/
Timing and Cancelling your Notifications
In this section, I’m going to put the above function to use by setting a notification timeout (“After 5 minutes send this notification”), and also how to cancel it
In this part, I am writing in a background script. I will get to why later on. This is done quite simply, as in:
var timeouts = [];.
.
.timeouts.push(
setTimeout(function() {
notification("Title", "Message");
}, 1000);
)
In this example, I am using the “setTimeout” method, which also takes in a number in milliseconds, as after when to execute “function()”. Additionally, setTimeouts are really just objects, that you can store in a simple array. Thus, I personally like to store these timeouts in an array.
This is useful because you cannot really assign an “id” to a timeout, and console.log that timeout based on that id in case you want to debug. Unfurtunately still, even if you want to print out a timeout from the timeout[] array, you will only receive an integer, but nothing of the contents of the timeout (our notification). In this way, notifications can be seen as poorly optimized.
However, there is one critical reason I like to store these timouts in an array, and also use the background page. If this were done in a normal src script, and the chrome extension was closed, any storage of these will be lost, whereas they will not be lost in a background page.
var timeouts = [];.
.
.timeouts.push(
setTimeout(function() {
notification("Title", "Message");
}, 1000);
);.
.
.for (var i=0; i<timeouts.length; i++) {
clearTimeout(timeouts[i]);
}
In this example, I am using the clearTimeout() method to clear the entire list of timouts I have set. This also then clears the notifications.
If this guide helped you, please make sure to leave a clap, and check out my project that uses this feature:
