show notifications in chrome extension

Question

I'm writing my first chrome extension. In my chrome extension I have added an option in Right Click Context menu.

chrome.contextMenus.create({
  "id": "MyExntesion",
  "title": "My Extension",
  "type": "normal",
  "contexts": ["image"],
  "onclick": this.handleClick
});

In my handleClick method, I want to show a notification. This notification should pop out in top right corner of the browser window which just confirms that user has clicked on the context menu. How do I do that?

I did some research but didn't find anything useful. https://developer.chrome.com/extensions/notifications this talkes about system tray notification, where as this https://developer.chrome.com/extensions/browserAction#method-setPopup lets you create new popups but they are only shown when extension icon is clicked.

Answer 1

There are 3 principal ways of showing a notification in Chrome.

1) Aforementioned chrome.notifications API. It will show a toast (not merely an indication in systray), but you as a developer have little say on how it appears. Usage overview here.

2) Standard HTML Notification API. In Chrome, looks similar to chrome.notifications, except for less control over formatting and not managed by Chrome's notification center. Usage overview here.

3) If you really want control over how it's shown, the most invasive and hard way is to inject your UI into all pages with a content script.

You face several problems if you do that:

• In general, it's harder to design the UI yourself;
• The UI will be confined to the webpage viewport;
• CSS may bleed from the page and mangle your UI (though Shadow DOM can be an answer);
• You need blanket permissions for "data on all webpages" just to show your UI. It tends to scare users away.

If you decide to go that route nonetheless, here's a question that might help: Chrome extension content scripts custom ui