Chrome Extension For Notification

This blog is a collection of news and information that you can read without the distractions of video ads, pop-ups, and flashing banners. You don’t have to worry about accidentally clicking on something that takes you away from the content you’re reading, or trying to find your place after some kind of animation has shifted the screen. This blog is for people who want to read, not watch—and it’s for people who are tired of being lured away from what they came here to do by all the bells and whistles other blogs insist are necessary.

Chrome Extension For Notification

Notifications are great. When an app wants to take its user attention, usually when a (long) process was done and maybe the user moved to another tab or even to another app, a notification will let the user to know about the process and maybe could take them back to the app so they could continue with their interactions.

Google Chrome Extensions are also great. An extension helps a developer to extend the browser / a website functionality by running extra code in the context of specific website(s) or in general.

There are plenty of tutorials about how to write Chrome extensions and the official website is also a good resource and contains explanations and examples, so it will not be covered in that post. The post presume that you have already some basic knowledge of developing a Chrome extension but, still, refers to the relevant resources in the right places.

What we gonna do?

Let’s take a very basic extension that appends a button in a webpage. Click on that button will cause the browser to display a notification like in the picture in the top of the post.

Let’s do this

First, so we could leave it behind, let’s create the manifest file. Something like this:

{  "name": "Greeter Robot",  "version": "1.0",  "content_scripts": [    {      "matches": ["http://*/*", "https://*/*"],      "js": [        "js/app.js"      ]    }  ],  "browser_action": {    "default_icon": "icon.png"  },  "manifest_version": 2}

Step 1 – we’ll use the content script (app.js) to manipulate the site’s DOM and add a <button />

const button = document.createElement('button');button.textContent = 'Greet me!'document.body.insertAdjacentElement('afterbegin', button);

Now, if you’ll browse, let’s say StackOverflow, you will see the button very nicely

Step 2 – we’ll add it a click handler, just to make sure it works

const button = document.createElement('button');button.textContent = 'Greet me!'document.body.insertAdjacentElement('afterbegin', button);button.addEventListener('click', () => {  console.log('Clicked');});

And it does

Let’s show a Notification

The obvious step is to go to the Notification official docs. There we can find the API

chrome.notifications.create(string notificationId, NotificationOptions options, function callback)

So in our case, we will call that code:

chrome.notifications.create('', {  title: 'Just wanted to notify you',  message: 'How great it is!',  iconUrl: '/robot-face_1f916.png',  type: 'basic'});

Sadly, we get the error

Uncaught TypeError: Cannot read property ‘create’ of undefined

Why?

This API method (Among others) not meant to be called from a content script (remember?) but only from background script

Content scripts can access Chrome APIs used by their parent extension by exchanging messages with the extension

This gives us also the solution — using a background script.

So instead of calling directly to the Notification API from the client script, we should send a message to the background script with the options and create the notification from there.

How it will look?

First, we need to (create and) register another script — the background script, in the manifest file

"background" : {  "scripts" : ["js/background.js"],  "persistent": false}

And now, we could send to that script a message that we want to display a notification.

app.js (content script)

button.addEventListener('click', () => {  chrome.runtime.sendMessage('', {    type: 'notification',    options: {      title: 'Just wanted to notify you',      message: 'How great it is!',      iconUrl: '/icon.png',      type: 'basic'    }  });});

background.js (background script)

chrome.runtime.onMessage.addListener(data => {  if (data.type === 'notification') {    chrome.notifications.create('', data.options);  }});

Now, the extension will present a notification just like in the picture in the top of the post.

how to stop justdial notification in chrome

Push notifications used to be the preserve of smartphones, but today your PC is packed with them too, as websites and social networks use your browser to send helpful little pop-ups. This can be very useful by helping you stay on top of all the incoming messages and news, without having to leave the page you are on.

But we are living in the times of notification overload, and as simple as opting in for these promotional notifications may be, opting out may not always be as straightforward. In case you are feeling overwhelmed, here are the ways to turn off those pesky notifications, from all popular browsers and platforms.

On computers
You can remove notifications access from sites that spam you with too many messages, or aren’t useful anymore. This way, you can trim the list down to only the important ones. This is what you have to do.

How to disable notifications for Chrome on Windows, Mac, and Linux

1. Click the three dot button on the right corner of the address bar
2. Click on Settings
3. Scroll down and click on Show Advanced Settings
4. Under Privacy, Click Content Settings
5. Scroll to Notifications and click Manage Exceptions
6. On this page, Block the websites from whom you don’t want to receive notifications.

How to disable notifications for Firefox on Windows, Mac and Linux

1. Click the three-line icon next to the address bar
2. Click Preferences
3. Click Content
4. Click Notifications
5. In this submenu, click Choose
6. Select the site you want to remove, and click Remove Site.

How to disable notifications for Safari on Mac

1. In the menu bar, go to Safari
2. Click Preferences
3. Click Notifications
4. Choose Deny for the sites you don’t want to receive notifications from.

How to disable notifications for Microsoft Edge browser on Windows

1. Click the three dot menu next to the address bar
2. Go to Settings
3. Go to Advanced Settings
4. Click Notifications
5. Click Manage
6. Here, you can toggle which sites can and can’t send you push notifications.

How to disable notifications on Opera for Windows, Mac and Linux

1. Go to Preferences
2. Click Websites
3. Click Notifications
4. Click Manage Exceptions
5. Click Behaviour
6. Select Block for sites where you want to turn the notifications off.

On Android
Just like on the PC, on the phone too your Web browser can send you notifications. Cutting it out is just as simple.

How to disable notifications for Chrome on Android

1. Tap on the three dot button
2. Go to Settings
3. Go to Site Settings
4. Go to Notifications
5. Here, you can see which ones are allowed, and block them. Tap on an allowed item, tap on Notifications and choose Block, to stop it from sending you notifications.

How to disable notifications for Opera on Android

1. Tap on the Opera button
2. Go to Settings
3. Go to Advanced
4. Go to Site Settings
5. Go to Notifications
6. Under Allowed, tap on the site you want to disable, and choose Denied

Push notifications from apps
Making things worse on phones, just about every app wants to send you a barrage of notifications through the day. It can get really annoying, but you can easily get it under control. There are two ways to stop apps from sending you push notifications. Although not a common occurrence, some apps do offer a switch to turn off promotional notifications from within the app settings, so you could check within the individual app first. For example, Cleartrip lets you turn off notifications in its settings. UC Browser, which doesn’t support push notifications for websites, does send a lot of them on its own. However, you can turn them off in Settings. If that’s not an option, then these are the steps you have to follow. How to disable notifications on Android 6.0 Marshmallow or above

1. Go to Settings
2. Go to Apps
3. Scroll to the app and tap on it
4. Go to Notifications
5. Turn off Allow Notifications

You can also stop them by pressing-and-holding a notification in the Notification tray to jump into the menu, which lets you turn notifications off too. How to disable notifications on Android 5.0 Lollipop or below

1. Go to Settings
2. Go to Apps
3. Scroll to the app and tap on it
4. Uncheck the Allow Notifications checkbox.

How to disable notifications on iPhone

1. Go to Settings
2. Go to Notifications
3. Select the app
4. Turn off Allow Notifications

Of course, the problem is that turning off app notifications means the app can’t send you anything, even a notification that may be important. Meaning, say if someone sends you money on a wallet app, you won’t get the app notification if you’ve turned notifications off entirely. It will also deprecate some functionality – for instance in Android, if you turn off notifications on a music streaming app, it could also stop showing you the music playback controls in the pull-down drawer. These are some of the things to keep in mind while trying to tame excessive notifications.

Conclusion

Let us know your thoughts in the comment section below.

Check out other publications to gain access to more digital resources if you are just starting out with Flux Resource.
Also contact us today to optimize your business(s)/Brand(s) for Search Engines