0

For 2-3 days I'm trying to use Chrome rich notification. I've read some reviews regarding this but nobody tells how to use implement it.

  1. I want to try it in a html test page. How can I do this? because I couldn't manage to show at least a basic notification... :(
  2. I want to implement this in an extension that I'm building. How can I do this? There are special instructions?

I don't need this simple notification:

function notifyMe() {

      if (!("Notification" in window)) {
        alert("This browser does not support desktop notification");
      }

      else if (Notification.permission === "granted") {
        var notification = new Notification("Message");
      }

      else if (Notification.permission !== 'denied') {
        Notification.requestPermission(function (permission) {

          if(!('permission' in Notification)) {
            Notification.permission = permission;
          }

          if (permission === "granted") {
            var notification = new Notification("Message");
          }
        });
      }
    }//--Notification code--

I need rich notification because I need a bunch of options which this is offering.

Can someone help me with a tutorial or a html test page to understand how to implement it?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
chrysstyann
  • 37
  • 5
  • What you show here is NOT what is called [Rich Notifications](https://developer.chrome.com/apps/richNotifications) (that would be [`chrome.notifications` API](https://developer.chrome.com/apps/notifications)). Here's it's just plain [web notification API](https://developer.mozilla.org/en/docs/Web/API/notification). – Xan Jan 20 '15 at 21:58
  • I know what I showed here. This is why I said "I don't need this simple notification:" I need something to set the title, the body etc. – chrysstyann Jan 21 '15 at 08:30
  • You should make that "don't" **bold**, I missed it the first time I read the question. It makes little sense to include such a complete example of what you **don't** need - just the name and a link to docs would be sufficient. – Xan Jan 21 '15 at 08:32

1 Answers1

3

1) You can't use most of chrome APIs outside extensions with proper permissions. So you cannot test it in a standalone HTML file - unless it's packed in an extension, i.e. an options page.

So you can add a test.html file to an extension's folder, and open it as

chrome-extension://yourExtensionIdHere/test.html

It might be easier to test it in the background script though.

2) Well, you need to read the docs! There's also some examples in this article.

Points to remember:

  1. You need to declare the "notifications" permission.

  2. You can't use them in a content script.

  3. Icon is required.

  4. Callbacks (even doing nothing) are required (this was a bug until Chrome 42).

    I highly recommend using a diagnostic callback:

    function diag() {
  if (chrome.runtime.lastError) {
    console.error(chrome.runtime.lastError.message);
  }
}

chrome.notifications.create(id, options, diag);

    It will warn you of any errors while using the API.

Xan
  • 74,770
  • 16
  • 179
  • 206
  • Callbacks are probably [going to be optional](https://code.google.com/p/chromium/issues/detail?id=163750#c20) in Chrome 42. – Rob W Jan 20 '15 at 22:39
  • @RobW I never doubted that after you self-assigned that bug ;) – Xan Jan 20 '15 at 22:40
  • I just want to know how can I implement this API with a web page then. I understood that I can't use it implemented as – chrysstyann Jan 21 '15 at 08:41
  • You _can't_ use it outside an extension. As sad as that is. See http://stackoverflow.com/q/24632983/934239 - if you want to add rich notifications to a website, you need to write an extension and ask your users to install it. Edit: better question is this one: http://stackoverflow.com/q/26621042/934239 – Xan Jan 21 '15 at 08:45