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