Notifications in Chrome extension

Notifications are great. When an app wants to take its user attention, usually when a (long) process was done and maybe the user moved to another tab or even to another app, a notification will let the user to know about the process and maybe could take them back to the app so they could continue with their interactions.

Google Chrome Extensions are also great. An extension helps a developer to extend the browser / a website functionality by running extra code in the context of specific website(s) or in general.

There are plenty of tutorials about how to write Chrome extensions and the official website is also a good resource and contains explanations and examples, so it will not be covered in that post. The post presume that you have already some basic knowledge of developing a Chrome extension but, still, refers to the relevant resources in the right places.

What we gonna do?

Let’s take a very basic extension that appends a button in a webpage. Click on that button will cause the browser to display a notification like in the picture in the top of the post.

Let’s do this

First, so we could leave it behind, let’s create the manifest file. Something like this:

1{
2  "name": "Greeter Robot",
3  "version": "1.0",
4  "content_scripts": [
5    {
6      "matches": ["http://*/*", "https://*/*"],
7      "js": [
8        "js/app.js"
9      ]
10    }
11  ],
12  "browser_action": {
13    "default_icon": "icon.png"
14  },
15  "manifest_version": 2
16}

Step 1 - we’ll use the content script (app.js) to manipulate the site’s DOM and add a <button />

1const button = document.createElement('button');
2button.textContent = 'Greet me!'
3document.body.insertAdjacentElement('afterbegin', button);

Now, if you’ll browse, let’s say StackOverflow, you will see the button very nicely

The button that the extension added

Step 2 - we’ll add it a click handler, just to make sure it works

1const button = document.createElement('button');
2button.textContent = 'Greet me!'
3document.body.insertAdjacentElement('afterbegin', button);
4button.addEventListener('click', () => {
5  console.log('Clicked');
6});

And it does

Click on the button, log “clicked”

Let’s show a Notification

The obvious step is to go to the Notification official docs. There we can find the API

1chrome.notifications.create(string notificationId, NotificationOptions options, function callback)

So in our case, we will call that code:

1chrome.notifications.create('', {
2  title: 'Just wanted to notify you',
3  message: 'How great it is!',
4  iconUrl: '/robot-face_1f916.png',
5  type: 'basic'
6});

Sadly, we get the error

Uncaught TypeError: Cannot read property ‘create’ of undefined

Why?

This API method (Among others) not meant to be called from a content script (remember?) but only from background script

Content scripts can access Chrome APIs used by their parent extension by exchanging **messages** with the extension

This gives us also the solution — using a background script.

So instead of calling directly to the Notification API from the client script, we should send a message to the background script with the options and create the notification from there.

How it will look?

First, we need to (create and) register another script — the background script, in the manifest file

1"background" : {
2  "scripts" : ["js/background.js"],
3  "persistent": false
4}

And now, we could send to that script a message that we want to display a notification.

app.js (content script)

1button.addEventListener('click', () => {
2  chrome.runtime.sendMessage('', {
3    type: 'notification',
4    options: {
5      title: 'Just wanted to notify you',
6      message: 'How great it is!',
7      iconUrl: '/icon.png',
8      type: 'basic'
9    }
10  });
11});

background.js (background script)

1chrome.runtime.onMessage.addListener(data => {
2  if (data.type === 'notification') {
3    chrome.notifications.create('', data.options);
4  }
5});

Now, the extension will present a notification just like in the picture in the top of the post.

Source Code

https://github.com/moshfeu/chrome-extension-notification-demo

Have something to say? I’ll love to 👂