Chrome插件开发 - Adding browser notifications

在这篇文章中将学习给浏览器添加通知推送事件，如下视频：

添加通知推送

Browser notifications类似于手机上的消息通知。

添加权限

{
  "permissions": ["notifications"]
}

修改src/App.jsx

export function App() {
  const createNotification = () => {
    chrome.notifications.create({
      type: 'basic',
      iconUrl: 'icons/icon-48.png',
      title: 'Hi there 👋',
      message: 'Just a reminder that you rock!',
      buttons: [{title: 'I know ☺️'}],
      priority: 0
    })
  }

  return (
    <div className="flex flex-col items-center justify-center w-screen h-auto bg-indigo-400 p-4">
      <button
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 text-2xl px-4 rounded"
        onClick={createNotification}
      >
        Surprise me 🎉
      </button>
    </div>
  )
}

chrome.notifications创建浏览器通知

Source Code

【Source Code】