Script:

 chrome.notifications.create(
    'name-for-notification',{   
    type: 'basic', 
    iconUrl: 'icon4.png',
    title: "This is a notification", 
    message: "hello there!" 
    });

Script:

 chrome.notifications.create(
    'name-for-notification',{   
    type: 'basic', 
    iconUrl: 'icon4.png',
    title: "This is a notification", 
    message: "hello there!" 
    });

Everytime I run it, I get the error

Unchecked runtime.lastError while running notifications.create: Unable to download all specified images.

But here's the thing, "icon4.png" is in the same file as my script, background. See for yourself.

I don't know why it's not working, the icon is there. I've tried using this aswell:

 chrome.notifications.create(
        'name-for-notification',{   
        type: 'basic', 
        iconUrl: 'http://www.filehosting/file/details/671921/icon4.png',
        title: "This is a notification", 
        message: "hello there!" 
        });

And it still doesnt work!

And yes, I have the notifications permission set in my manifest.

• javascript
• google-chrome
• google-chrome-extension
• google-chrome-devtools

5 Answers 5

URLs must be relative to your manifest.json (first code block)

Your issue is that you have not provided Chrome with a URL that provides the iconUrl as a URL relative to your manifest.json. The iconUrl documentation states [emphasis mine]:

URLs can be a data URL, a blob URL, or a URL relative to a resource within this extension's .crx file

You appear to have provided a URL that is relative to the location of your background.js script, not relative to your manifest.json. This can be determined by the fact that your manifest.json is not in the same directory as your background.js. Without you providing your manifest.json it's not possible to tell you exactly what this URL must be. However, it needs to be a path relative to your manifest.json file, similar to how you have referenced your bakground.js.

External URLs are not permitted (second code block)

The iconUrl you have provided is not permitted. The permitted types of URLs are clearly listed in the documentation (see quote above). Effectively, the restriction is that the data for the icon must be supplied pletely from within the extension. You can not have Chrome fetch the data for the icon from the network by just passing an external URL for iconUrl. That does not mean that you must include the icon data (e.g. icon4.png) in your extension's .crx file. You could fetch the data yourself; convert it to a data URL or blob URL; then provide it to Chrome. But, the data must already exist in your extension.

In addition to Makyen, here's an example I've used in my extensions. First fetch the image blob, then convert it to an URL:

const response = await fetch('https://yourexternalimageurl./image.jpg');
const blob = await response.blob();

const url = URL.createObjectURL(blob);

chrome.notifications.create(null, {
    type: 'basic',
    iconUrl: url,
    title: 'Title',
    message: 'Message',
});

This is an older question, but here's the quickest way to fix this. Use the chrome.runtime.getURL() function for assets inside of the extension, such as icons.

 chrome.notifications.create(
    'name-for-notification',{   
    type: 'basic',
    iconUrl: chrome.runtime.getURL('icon4.png'), // --HERE--
    title: "This is a notification", 
    message: "hello there!" 
    });

First and foremost you should load the image file using the file-loader

For me the file-loader code was simple:

        {
            test: /\.(jpe?g|png|gif|svg)$/i,
            loader: 'file-loader',
            options: {
                name: '/public/icons/[name].[ext]'
            }
        }

Now after configuring the file-loader you need to specify the image path which is present in the dist directory: dist folder structure

Now moving to the background script Your notification code should be:

chrome.notifications.create('notification', {
    title: 'Hello',
    message: 'Testing notifications',
    iconUrl: chrome.runtime.getURL('./public/icons/icon.png'),
    type: 'basic',
    priority: 2, //optional
    requireInteraction: true //optional
  }, () => { });

Here your image path should be the path of the image in the dist directory not the src directory

Continuing with other answer make sure that you have mentioned that image on manifest.json also Like below

 "action": {
    "default_icon": {
      "16": "icons/extension_logo_16.png",
      "48": "icons/extension_logo_48.png",
      "128": "icons/extension_logo_128.png"
    }
  },
  "icons": {
    "16": "icons/extension_logo_16.png",
    "48": "icons/extension_logo_48.png",
    "128": "icons/extension_logo_128.png"
  },

and then use it

 chrome.notifications.create({
      type: "basic",
      iconUrl: chrome.runtime.getURL('icons/extension_logo_128.png'),
      title: title,
      message: message,
      priority: 2,
    });