others- how to solve chrome extension notification not showing problem?

1. Problem

When we are developing a new chrome extension, sometimes, we found that the notification is not showing even if the code is triggered successfully, why?

2. Environment

macos 10.15
chrome 125

3. The basics

3.1 chrome extension notification

Chrome extensions can display information to users through notification mechanisms, which can be used to remind, update information, or provide important information. Here are some key points about the Chrome extension notification mechanism:

• Notifications permission: The extension needs to declare the “notifications” permission in the manifest.json file.
• Create a notification: Use the chrome.notifications.create method to create a notification. This method requires at least two parameters: the notification ID and an object containing the notification content.
• Notification type: Chrome supports four types of notifications: basic, image, list, and progress bar.
• icon: Notifications can include an icon, which helps users identify the source of the notification.
• Event listeners: Use the chrome.notifications.onClosed and chrome.notifications.onClicked event listeners to respond to the user closing a notification or clicking on it.
• Templates: You can use HTML templates to create more complex notifications.
• Behavior: The user can dismiss the notification, and clicking on the notification may trigger some action in the extension.
• Persistence: Notifications are temporary by default, but can be set to persist until the user closes them.
• Platform differences: Chrome browsers on different operating systems may support notifications slightly differently.
• API limitations: The Chrome extension notification API has some usage limitations, for example, extensions cannot create notifications in the background unless they are persistent.

Here is the example code:

chrome.notifications.create(
  'notification-id', { // 通知的唯一标识符
    type: 'basic', // 通知类型
    iconUrl: 'icon.png', // 通知图标的 URL
    title: 'Hello, World!', // 通知标题
    message: 'This is a test notification.' // 通知内容
  }, 
  function callback(notificationId) {
    // 通知创建成功后的回调
  }
);

4. My codes

Here is my not-working code to show my notification in the chrome extension:

   var opt = {
	 iconUrl: "https://wwww.bswen.com/favicon.ico",
	 type: 'basic',
	 title: title,
	 message: message,
	 priority: 1
   };
   chrome.notifications.create('notify1', opt, function() {                console.log('created!'); });

I think the problem is located at the iconUrl, the url is a web url, not a local resource.

5. Solution

Change the url to local resource:

   var opt = {
	 iconUrl: "./myicon.png",
	 type: 'basic',
	 title: title,
	 message: message,
	 priority: 1
   };
   chrome.notifications.create('notify1', opt, function() { console.log('created!'); });

About the iconUrl

iconUrl: string optional

A URL to the sender’s avatar, app icon, or a thumbnail for image notifications.

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

Note:This value is required for the notifications.create() method.

It works now.