Chrome扩展开发中Notifications无显示，如何解决？

Question

manifest.json已经开启Notifications权限：

  "permissions": ["activeTab","notifications"],

我会在前端页面注入一个按钮，点击按钮想要在前端页面显示通知消息。

  const page = $('<div id="move_page"></div>') 
  const but1 = $('<button id="but1">显示通知</button>') 
  page.append(but1)
  $('body').append(page)
  $('#but1').click(async (e) => { 
  chrome.runtime.sendMessage({
    action: 'fromContent',
    message: 'Hello from content!'
  });

我的service_work.js中接收

chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  console.log('message:',message)
  console.log('message.action:',message.action)
  if (message.action === 'fromContent') {
      console.log('11111111233')
  chrome.notifications.create(
    {
      type: "basic",
      title: "Notifications Title",
      message: "Notifications message to display",
      iconUrl: "../icons/rand.png"
    },
    (notificationId) => {
      console.log('notificationId222-->', notificationId)
    }
  ); 
}

});

刷新页面后，点击前端的按钮，我再console控制台可以看到打印的notificationId，但是页面却没有任何通知消息弹出。
请教朋友们指点是哪里有问题呢？谢谢。