Sending Notifications on Chrome Extension

200529

The goal is to...

1. Send a notification when a Chrome extension gets installed or updated, with different text for each.
2. Open a specific link when the notification is clicked.

Sending Notifications

var extensionPage = "https://chosunghyun.com/youtube-comment-language-filter";
var updateLogPage =
  "https://chosunghyun.com/youtube-comment-language-filter/updates";

chrome.runtime.onInstalled.addListener(function (object) {
  if (object.reason === "install") {
    chrome.notifications.create(extensionPage, {
      title: "YCLF is now installed 😎",
      message: "Click here to learn more about the extension!",
      iconUrl: "./images/min-icon128.png",
      type: "basic",
    });
  } else if (object.reason === "update") {
    chrome.notifications.create(updateLogPage, {
      title: "YCLF updated to v" + chrome.runtime.getManifest().version + " 🚀",
      message: "Click here to check out what's new!",
      iconUrl: "./images/min-icon128.png",
      type: "basic",
    });
  }
});

Also available on GitHub

• Note that iconUrl should be the path from manifest.json to the image file, not from the background script.
• You can use chrome.runtime.getManifest().version to get the extension version.
• To send from anywhere other than the background script, you must have a communication module between the sender and the background script to pass the notification details, then create it at background.js. Sending directly from content.js seems restricted. More in this post.

Opening Links when notifications are clicked

Generally, you would need an event listener for each notification. There's a neater way that cuts the duplicate code.

chrome.notifications.onClicked.addListener(function (notificationId) {
  chrome.tabs.create({ url: notificationId });
});

Store the link in the notificationId field and attach one event listener to the notifications. That way you can only use one event listener to open multiple types of links.

Additional Readings

• chrome.notifications section on Google Chrome Developer Docs
• Open URLs in Chrome Notifications on Stack Overflow

Note: Added June 19, 2020

This doesn't seem to be the final answer though. Click right after the popup and the page opens. Click later in the notification center and it doesn't. I'll update this if I find something better.