Firefox WebExtension 通知 API：单击通知时如何调用函数答案

【问题标题】：Firefox WebExtension notifications API: How to call a function when the notification is clickedFirefox WebExtension 通知 API：单击通知时如何调用函数
【发布时间】：2016-06-09 08:09:27
【问题描述】：

我正在尝试使用 WebExtensions 开发 Firefox 插件。我要做的是在用户单击通知时打开一个新的 Firefox 选项卡或窗口。但它不起作用。

当我点击通知时，什么也没有发生。

我正在创建如下通知：

var q = chrome.notifications.create({
		"type": "basic",
		"iconUrl": chrome.extension.getURL("128-128q.png"),
		"title": 'title',
		"message": 'content'
	});
	
chrome.notifications.onClicked.addListener(function(notificationId) {
    window.open('http://www.google.com');
});
browser.notifications.onClicked.addListener(function(notificationId) {
    window.open('http://www.google.com');
});
	
q.onClicked.addListener(function(notificationId) {
    window.open('http://www.google.com');
});
	
var audio = new Audio('message.mp3');
audio.play();

我怎样才能做到这一点？

【问题讨论】：

标签： firefox firefox-addon firefox-addon-webextensions

【解决方案1】：

问题似乎在于您试图以一种不起作用的方式打开一个新 URL。

以下应该可以工作，使用chrome.tabs.create()：

var q = chrome.notifications.create("MyExtensionNotificationId", {
        "type": "basic",
        "iconUrl": chrome.extension.getURL("128-128q.png"),
        "title": 'title',
        "message": 'content'
    });

chrome.notifications.onClicked.addListener(function(notificationId) {
    chrome.tabs.create({url:"http://www.google.com"});
});

但是，您需要在 Firefox 47.0+ 中对此进行测试，因为最近才添加了对 chrome.notifications.onClicked() 的支持。我对 Firefox 47.0+ 的陈述是基于兼容性表的。然而，兼容性表至少有一个明确的错误。因此，可能需要更高版本的 Firefox。我测试的代码在 Firefox Nightly 版本 50.0a1 中运行，但在 Firefox 开发者版版本 48.0a2 中无法正常运行。一般来说，鉴于 WebExtensions API 正在积极开发中，如果您遇到的问题/问题未按预期运行，您应该针对 Firefox Nightly 进行测试。您还可以查看 API 的 source code 以了解实际实现的内容以及添加时间。

注意：这适用于chrome.notifications.onClicked 或browser.notifications.onClicked。但是，不要同时使用两者来添加两个单独的匿名函数，因为这样做会导致您正在做的事情发生两次。

我实际上并没有使用您的代码对其进行测试，但我确实使用notify-link-clicks-i18n WebExtensions example 的修改版本对其进行了测试。我将该示例中的 background-script.js 文件修改为：

/*
Log that we received the message.
Then display a notification. The notification contains the URL,
which we read from the message.
*/
function notify(message) {
    console.log("notify-link-clicks-i18n: background script received message");
    var title = chrome.i18n.getMessage("notificationTitle");
    var content = chrome.i18n.getMessage("notificationContent", message.url);
    let id = "notify-link-clicks-i18n::" + title + "::" + message.url;
    chrome.notifications.create(id,{
        "type": "basic",
        "iconUrl": chrome.extension.getURL("icons/link-48.png"),
        "title": title,
        "message": content
    });
}

/*
Assign `notify()` as a listener to messages from the content script.
*/
chrome.runtime.onMessage.addListener(notify);

//Add the listener for clicks on a notification:
chrome.notifications.onClicked.addListener(function(notificationId) {
    console.log("Caught notification onClicked with ID:" + notificationId);
    //Open a new tab with the desired URL:
    browser.tabs.create({url:"http://www.google.com"});
});

我更喜欢这样的事情，其中唯一的ID is possible 是提供一个唯一的 ID，它既可以标识通知是由我的插件显示的，也可以标识通知的内容。这允许侦听器函数选择仅对我的插件显示的通知和/或仅我显示的通知的子集执行操作，或者根据我显示通知的原因执行不同的操作。

您在此处无法确定什么不起作用的原因可能是因为您没有将问题减少到证明问题所需的最低限度。换句话说，最好尝试在通知 onClicked 侦听器之外单独打开一个新 URL，然后在侦听器中尝试 console.log()。

【讨论】：