16

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.

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
sublime
  • 4,013
  • 9
  • 53
  • 92

1 Answers1

39

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.

Chrome notification

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

Community
  • 1
  • 1
Xan
  • 74,770
  • 16
  • 179
  • 206
  • I don't know if you have used evernote web clipper extension, but are those notifications shown in that extension built using the third option that you suggested? – sublime Jul 28 '14 at 22:16
  • But if you are using the option 1 or 2 (I'm trying to use number 2) how do you get the registration_id in order to send push notifications to the chrome browser? And how do you wait for that notifications? Thank you for that answer! – eloibm Jun 26 '15 at 08:01
  • 1
    @eloibm _Displaying_ notifications has absolutely nothing to do with _receiving_ them. Meditate upon `chrome.gcm` **and linked docs**. If you still have questions, ask a new question - don't ask unrelated follow-up questions in comments, that's not the purpose of comments. – Xan Jun 26 '15 at 08:28