CODEWITHSUNDEEP
google-chromegoogle-chrome-extensionnotifications
smfoote
smfoote

Reputation: 5609

Chrome Notifications not appearing from Chrome Extension background page

Using the new chrome.notifications API, I am unable to get notifications from my extension to appear. Even the most basic notification fails to appear for me, but I get no errors and the callback function is properly executed.

manifest.json

{
  "name": "notify",
  "version": "0.0.0",
  "manifest_version": 2,
  "permissions": [
    "notifications"
  ],
  "background": {
    "scripts": ["main.js"]
  }
}

main.js

window.addEventListener('load', function() {
  var opt = {
    type: 'list',
    title: 'Primary Title',
    message: 'Primary message to display',
    priority: 1,
    items: [{ title: 'Item1', message: 'This is item 1.'},
            { title: 'Item2', message: 'This is item 2.'},
            { title: 'Item3', message: 'This is item 3.'}]
  };
  chrome.notifications.create('notify1', opt, function() { console.log('created!'); });
});

When I inspect the background page, I can see "created!" in the console, but I don't ever get a notification on the desktop. I have tried a bunch of different priority values to no avail. What am I doing wrong?

Upvotes: 16

Views: 17609

Answers (5)

Spankied
Spankied

Reputation: 1875

You may have chrome notifications blocked. A good hint this is the case is if you aren't being constantly spammed with notifications from other websites. This answer worked for me.

enable chrome notifications

Upvotes: 7

Ortal Blumenfeld Lagziel
Ortal Blumenfeld Lagziel

Reputation: 2555

use : chrome.runtime.lastError - add it to the callback (see example)

pay attention: you must have iconUrl icon URL path if related to your manifest

 chrome.notifications.create(`my-notification-${Date.now()}`, {
                iconUrl: "assets/images/1.png",
                type: "basic",
                contextMessage: "contextMessage",
                message: "message",
                title: "title"
            }, function(context) {
               console.log("Last error:", chrome.runtime.lastError);
               alert(JSON.stringify( chrome.runtime.lastError));
     
            });

Upvotes: 1

user5819712
user5819712

Reputation:

In my case, Chrome would show notification only once for a particular name/id being passed. As a workaround, I suffixed the name with current DateTime to make it unique.

chrome.notifications.create(`my-notification-${Date.now()}`, {
    type: "basic",
    iconUrl: "icons/logo.png",
    title: "My Title",
    message: "My Message",
});

Upvotes: 8

Bobby Chang Liu
Bobby Chang Liu

Reputation: 341

If you are using Mac and Chrome 59+, it might be because the MacOS native notification is disabled for Chrome. Here's two possible solutions:

Solution 1

Open Chrome > Go chrome://flags > Search Enable native notifications > Change it to Disabled > Relaunch Chrome

Solution 2

Go to MacOS System Preferences > Notifications > Turn on Notifications for Banners/Alerts as shown here (likely previously it's Off)

Notifications Setting Screenshot

Reference 1

Reference 2

Upvotes: 19

Justin
Justin

Reputation: 226

Unfortunately detailed error messages for chrome.notifications have been suppressed from the console due to a bug that I haven't yet diagnosed; the reason your notification isn't being displayed is that it doesn't provide a required "iconUrl" parameter. When I tried the following in the background page of an extension I have installed:

var opt = {
  iconUrl: "http://www.google.com/favicon.ico",
  type: 'list',
  title: 'Primary Title',
  message: 'Primary message to display',
  priority: 1,
  items: [{ title: 'Item1', message: 'This is item 1.'},
        { title: 'Item2', message: 'This is item 2.'},
          { title: 'Item3', message: 'This is item 3.'}]
};
chrome.notifications.create('notify1', opt, function() { console.log('created!'); });

the notification is created successfully. It pays to check chrome.runtime.lastError:

var opt = {
    type: 'list',
    title: 'Primary Title',
    message: 'Primary message to display',
    priority: 1,
    items: [{ title: 'Item1', message: 'This is item 1.'},
            { title: 'Item2', message: 'This is item 2.'},
            { title: 'Item3', message: 'This is item 3.'}]
  };
  chrome.notifications.create('notify1', opt, function(id) { console.log("Last error:", chrome.runtime.lastError); });

which would have shown you that in fact there are required properties and one is missing.

Upvotes: 21

Related Questions