Browser extensions - Adding browser notifications

#beginners #javascript #html #webdev

In this article, we'll be exploring how to add browser notifications to our browser extension.

As the starting point, I'll use our popup extension.
If you want to follow along, use the following GitHub repo.

The result of this article is the following interaction.

Adding browser notifications to a browser extensions

Browser notifications are native browsers that add notifications, much like you are used to on your mobile devices.

However, not many people opt-in for them at this stage. Let's hope this changes in the future.

For this article, we'll be using the popup extension to trigger a browser notification.

The first thing we'll have to do is give the correct permissions to our application.

Open up your manifest.json file and add the following permissions.

{
  "permissions": [
    "notifications"
  ]
}

This will allow us to access the native notification layer.

Then we can open up our src/App.jsx file.
Let's add a button in the rendering part.

export function App() {
  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>
  );
}

You might have spotted the createNotification on the click handler. Let's quickly add that function to our file.

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,
  });
};

This function calls the browser notification API and creates a new notification.
The notification will be called instantly.
We set a title, message, and custom button in our example.