Chrome 丰富的通知 - 如何使用它

Question

我尝试使用 Chrome 丰富的通知有 2-3 天。我已经阅读了一些关于此的评论，但没有人告诉如何使用实现它。

1. 我想在 html 测试页面中尝试一下。我怎样才能做到这一点？因为我无法显示至少一个基本的通知... :(
2. 我想在我正在构建的扩展中实现这一点。我怎样才能做到这一点？有特殊说明吗？

我不需要这个简单的通知：

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--    

我需要丰富的通知，因为我需要它提供的一堆选项。

有人可以帮助我提供教程或 html 测试页以了解如何实现它吗？

Answer 1

1) 您不能在具有适当权限的扩展之外使用大多数chrome API。所以你不能在一个独立的 HTML 文件中测试它 - 除非它被打包在一个扩展中，即一个选项页面。

因此您可以将test.html 文件添加到扩展程序的文件夹中，并将其打开为

chrome-extension://yourExtensionIdHere/test.html

不过，在后台脚本中测试它可能更容易。

2) 好吧，你需要阅读the docs！ this article也有一些例子。

要记住的要点：

1. 你需要声明"notifications"权限。

2. 您不能在内容脚本中使用它们。

3. 图标是必需的。

4. 需要回调（甚至什么都不做）（这是 Chrome 42 之前的错误）。

   我强烈建议使用诊断回调：

   function diag() {
     if (chrome.runtime.lastError) {
       console.error(chrome.runtime.lastError.message);
     }
   }
   
   chrome.notifications.create(id, options, diag);
   

   它会在使用 API 时警告您任何错误。