Google Chrome中是否有任何方法在通知中插入操作按钮？ [英] Is there any way to insert action buttons in notification in Google Chrome
本文介绍了Google Chrome中是否有任何方法在通知中插入操作按钮？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要在2个按钮'allow'和'deny'中添加一个通知。当用户点击'allow'按钮时，它必须导航到一个网站，当用户点击'拒绝'时通知框不应该再出现，这是它必须关闭。我该怎么做？请帮助我
这是我的background.js
function getGmailUrl（）{
returnhttp://calpinemate.com/;
}
函数isGmailUrl（url）{
return url.indexOf（getGmailUrl（））== 0;
chrome.browserAction.onClicked.addListener（function（tab）{
chrome.tabs.query（{
url：http：// calpinemate。如果（tabs.length> 0）{
var tab = tabs [0]; $（
currentWindow：true
），function（tabs） b $ b console.log（找到（至少一个）Gmail标签：+ tab.url）;
console.log（聚焦和刷新计数...）;
chrome.tabs .update（tab.id，{active：true}）;
updateIcon（）;
} else {
console.log（Could not find Gmail tab。Creating one ... ）;
chrome.tabs.create（{url：getGmailUrl（）}）;
updateIcon（）;
}
}）;
}）;
函数updateIcon（）{
var req = new XMLHttpRequest（）;
req.addEventListener（readystatechange，function（）{
if（req.readyState == 4）{
if（req.status == 200）{
localStorage。 item = req.responseText;
//alert（localStorage.item）;
if（localStorage.item == 1）{
chrome.browserAction.setIcon（{path：calpine_logged_in.png }）;
chrome.browserAction.setBadgeBackgroundColor（{color：[190，190，190，230]}）;
chrome.browserAction.setBadgeText（{text：}）;
}
else {
chrome.browserAction.setIcon（{path：calpine_not_logged_in.png}）;
chrome.browserAction.setBadgeBackgroundColor（{color：[190,190,190,230 ]}）;
chrome.browserAction.setBadgeText（{text：}）;
}
} else {
//处理错误
alert（ERROR：status code+ req.status）;
}
}
}）;
req.open（GET，http://blog.calpinetech.com/test/index.php，true）;
req.send（null）;
}
var myNotificationID = null;
/ *出于演示目的，创建通知的
*附加到浏览器操作的onClicked事件。
*根据您的需求进行更改。 * /
chrome.browserAction.onClicked.addListener（function（）{
chrome.notifications.create（，{
type：basic，
iconUrl：http ：//calpinemate.com/icon_128.png，
标题：提醒，
消息：现在是时候去这个超酷的网站！\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ contextMessage：这是关于时间......，
按钮：[{
title：是的，让我去那里，
}，{
title： get out of my way，
$ b $}]
}，函数（id）{
myNotificationID = id;
}）;
}） ;
$ b $ *响应用户点击其中一个按钮* /
chrome.notifications.onButtonClicked.addListener（函数（notifId，btnIdx）{
if（notifId === myNotificationID）{
if（btnIdx === 0）{
window.open（...）;
} else if（btnIdx === 1）{
saySorry（）;
}
}
}）;
/ *添加这个也可以处理用户点击
*右上角的小'x'* /
chrome.notifications.onClosed.addListener（function（） {
saySorry（）;
}）;
$ b $ *处理用户的拒绝
*（如果你只想隐藏通知，简单地忽略）* /
function saySorry（）{
alert（对不起打扰您 ！）;
}
编辑background.js
var myNotificationID = null;
var oldChromeVersion =！chrome.runtime;
函数getGmailUrl（）{
returnhttp://calpinemate.com/;
}
函数isGmailUrl（url）{
return url.indexOf（getGmailUrl（））== 0;
chrome.browserAction.onClicked.addListener（function（tab）{
chrome.tabs.query（{
url：http： //calpinemate.com/*，
currentWindow：true
}，function（tabs）{
if（tabs.length> 0）{
var tab = tabs [ （至少一个）Gmail标签：+ tab.url）;
console.log（聚焦和刷新计数...）;
chrome.tabs.update（tab.id，{active：true}）;
updateIcon（）;
} else {
console.log（找不到Gmail标签。 ...）;
chrome.tabs.create（{url：getGmailUrl（）}）;
updateIcon（）;
}
}）;
}）;
函数onInit（）{
console.log（'onInit'）;
updateIcon（）;
if（！oldChromeVersion）{
chrome.alarms.create（'watchdog'，{periodInMinutes：5}）;
function onAlarm（alarm）{
console.log（'Got alarm'，alarm）;
if（alarm&& alarm.name =='watchdog'）{
onWatchdog（）;
} else {
updateIcon（）;
函数onWatchdog（）{
chrome.alarms.get（'refresh'，function（alarm）{
if（alarm） {
console.log（'Refresh alarm exists。Yay。'）;
} else {
console.log（'Refresh alarm does not exist！''+
'现在刷新并重新计划'）;
updateIcon（）;
}
}）;
}
if（oldChromeVersion）{
updateIcon（）;
onInit（）;
} else {
chrome.runtime.onInstalled.addListener（onInit）;
chrome.alarms.onAlarm.addListener（onAlarm）;
函数updateIcon（）{
var req = new XMLHttpRequest（）;
req.addEventListener（readystatechange，function（）{
if（req.readyState == 4）{
if（req.status == 200）{
var item = req.responseText;
if（item == 1）{
chrome.browserAction.setIcon（{path：calpine_logged_in.png}）;
chrome.browserAction.setBadgeBackgroundColor（{color：[190，190，190，230]}）;
chrome.browserAction.setBadgeText（{text：}）;
}
else {
chrome.browserAction.setIcon（{path：calpine_not_logged_in.png}）;
chrome.browserAction.setBadgeBackgroundColor（{color：[190，190，190，230]}）;
chrome.browserAction.setBadgeText（{text：}）;
}
} else {
alert（ERROR：status code+ req.status ）;
}
}
}）;
req.open（GET，http://blog.calpinetech.com/test/index.php，true）;
req.send（null）;
var notification = chrome.notifications.create（，{
type：basic，
iconUrl：/path/to/notification/icon.png ，
title：提醒，
消息：现在是时候去这个超酷的网站了！
按钮：[{
title：是的，让我去那里，
iconUrl：/path/to/yesIcon.png
}，{
title ：get out of my way，
iconUrl：/path/to/noIcon.png
}]
}，函数（id）{
myNotificationID = id;
}）;
chrome.notifications.onButtonClicked.addListener（函数（notifId，btnIdx）{
if（notifId === myNotificationID）{
if（btnIdx === 0）{
window .open（http://www.calpinemate.com/）;
} else if（btnIdx === 1）{
saySorry（）;
}
}
}）;
chrome.notifications.onClosed.addListener（function（）{
saySorry（）;
}）;
函数saySorry（）{
alert（抱歉打扰你！）;
}
notification.show（）;
解决方案
> chrome.notifications API 。例如：
manifest.json：
{
manifest_version：2，
name：Test Extension，
version：0.0，
background： {
persistent：false，
scripts：[
./bg/background.js
]
}，
browser_action：{
default_title：Test Extension
}，
permissions：[notifications]
}
background.js：
var myNotificationID = null;
/ *出于演示目的，创建通知的
*附加到浏览器操作的onClicked事件。
*根据您的需求进行更改。 * /
chrome.browserAction.onClicked.addListener（function（）{
chrome.notifications.create（，{
type：basic，
iconUrl：/路径/ to / notification / icon.png，
标题：提醒，
消息：是时候去这个超酷的网站了！ ：这是关于时间......，
按钮：[{
title：是的，让我去那里，
iconUrl：/path/to/yesIcon.png
$ b title {
title}
iconUrl：/path/to/noIcon.png
}]
}，函数（id ）{
myNotificationID = id;
}）;
}）;
$ b $ *响应用户点击其中一个按钮* /
chrome.notifications.onButtonClicked.addListener（函数（notifId，btnIdx）{
if（notifId === myNotificationID）{
if（btnIdx === 0）{
window.open（...）;
} else if（btnIdx === 1）{
saySorry（）;
}
}
}）;
/ *添加这个也可以处理用户点击
*右上角的小'x'* /
chrome.notifications.onClosed.addListener（function（） {
saySorry（）;
}）;
$ b $ *处理用户的拒绝
*（如果你只想隐藏通知，简单地忽略）* /
function saySorry（）{
alert（对不起打扰您 ！）;
}
I need to add a notification in the chrome with 2 buttons 'allow' and 'deny'.When the user clicks on 'allow' button, it has to navigate to a website and when the user clicks on 'deny' the notification box shouldn't appear anymore.That is it have to close.How can I do it?Please help me THis is my background.js
function getGmailUrl() {
return "http://calpinemate.com/";
}
function isGmailUrl(url) {
return url.indexOf(getGmailUrl()) == 0;
}
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.query({
url: "http://calpinemate.com/*",
currentWindow: true
}, function(tabs) {
if (tabs.length > 0) {
var tab = tabs[0];
console.log("Found (at least one) Gmail tab: " + tab.url);
console.log("Focusing and refreshing count...");
chrome.tabs.update(tab.id, { active: true });
updateIcon();
} else {
console.log("Could not find Gmail tab. Creating one...");
chrome.tabs.create({ url: getGmailUrl() });
updateIcon();
}
});
});
function updateIcon(){
var req = new XMLHttpRequest();
req.addEventListener("readystatechange", function() {
if (req.readyState == 4) {
if (req.status == 200) {
localStorage.item=req.responseText;
//alert(localStorage.item);
if(localStorage.item==1){
chrome.browserAction.setIcon({path:"calpine_logged_in.png"});
chrome.browserAction.setBadgeBackgroundColor({color:[190, 190, 190, 230]});
chrome.browserAction.setBadgeText({text:""});
}
else{
chrome.browserAction.setIcon({path:"calpine_not_logged_in.png"});
chrome.browserAction.setBadgeBackgroundColor({color:[190, 190, 190, 230]});
chrome.browserAction.setBadgeText({text:""});
}
} else {
// Handle the error
alert("ERROR: status code " + req.status);
}
}
});
req.open("GET", "http://blog.calpinetech.com/test/index.php", true);
req.send(null);
}
var myNotificationID = null;
/* For demonstration purposes, the notification creation
* is attached to the browser-action's `onClicked` event.
* Change according to your needs. */
chrome.browserAction.onClicked.addListener(function() {
chrome.notifications.create("", {
type: "basic",
iconUrl: "http://calpinemate.com/icon_128.png",
title: "REMINDER",
message: "It's time to go to this super-cool site !\nProceed ?",
contextMessage: "It's about time...",
buttons: [{
title: "Yes, get me there",
}, {
title: "Get out of my way",
}]
}, function(id) {
myNotificationID = id;
});
});
/* Respond to the user's clicking one of the buttons */
chrome.notifications.onButtonClicked.addListener(function(notifId, btnIdx) {
if (notifId === myNotificationID) {
if (btnIdx === 0) {
window.open("...");
} else if (btnIdx === 1) {
saySorry();
}
}
});
/* Add this to also handle the user's clicking
* the small 'x' on the top right corner */
chrome.notifications.onClosed.addListener(function() {
saySorry();
});
/* Handle the user's rejection
* (simple ignore if you just want to hide the notification) */
function saySorry() {
alert("Sorry to bother you !");
}
Edited background.js
var myNotificationID = null;
var oldChromeVersion = !chrome.runtime;
function getGmailUrl() {
return "http://calpinemate.com/";
}
function isGmailUrl(url) {
return url.indexOf(getGmailUrl()) == 0;
}
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.query({
url: "http://calpinemate.com/*",
currentWindow: true
}, function(tabs) {
if (tabs.length > 0) {
var tab = tabs[0];
console.log("Found (at least one) Gmail tab: " + tab.url);
console.log("Focusing and refreshing count...");
chrome.tabs.update(tab.id, { active: true });
updateIcon();
} else {
console.log("Could not find Gmail tab. Creating one...");
chrome.tabs.create({ url: getGmailUrl() });
updateIcon();
}
});
});
function onInit() {
console.log('onInit');
updateIcon();
if (!oldChromeVersion) {
chrome.alarms.create('watchdog', {periodInMinutes:5});
}
}
function onAlarm(alarm) {
console.log('Got alarm', alarm);
if (alarm && alarm.name == 'watchdog') {
onWatchdog();
} else {
updateIcon();
}
}
function onWatchdog() {
chrome.alarms.get('refresh', function(alarm) {
if (alarm) {
console.log('Refresh alarm exists. Yay.');
} else {
console.log('Refresh alarm doesn\'t exist!? ' +
'Refreshing now and rescheduling.');
updateIcon();
}
});
}
if (oldChromeVersion) {
updateIcon();
onInit();
} else {
chrome.runtime.onInstalled.addListener(onInit);
chrome.alarms.onAlarm.addListener(onAlarm);
}
function updateIcon(){
var req = new XMLHttpRequest();
req.addEventListener("readystatechange", function() {
if (req.readyState == 4) {
if (req.status == 200) {
var item=req.responseText;
if(item==1){
chrome.browserAction.setIcon({path:"calpine_logged_in.png"});
chrome.browserAction.setBadgeBackgroundColor({color:[190, 190, 190, 230]});
chrome.browserAction.setBadgeText({text:""});
}
else{
chrome.browserAction.setIcon({path:"calpine_not_logged_in.png"});
chrome.browserAction.setBadgeBackgroundColor({color:[190, 190, 190, 230]});
chrome.browserAction.setBadgeText({text:""});
}
} else {
alert("ERROR: status code " + req.status);
}
}
});
req.open("GET", "http://blog.calpinetech.com/test/index.php", true);
req.send(null);
}
var notification=chrome.notifications.create("", {
type: "basic",
iconUrl: "/path/to/notification/icon.png",
title: "REMINDER",
message: "It's time to go to this super-cool site !\nProceed ?",
contextMessage: "It's about time...",
buttons: [{
title: "Yes, get me there",
iconUrl: "/path/to/yesIcon.png"
}, {
title: "Get out of my way",
iconUrl: "/path/to/noIcon.png"
}]
}, function(id) {
myNotificationID = id;
});
chrome.notifications.onButtonClicked.addListener(function(notifId, btnIdx) {
if (notifId === myNotificationID) {
if (btnIdx === 0) {
window.open("http://www.calpinemate.com/");
} else if (btnIdx === 1) {
saySorry();
}
}
});
chrome.notifications.onClosed.addListener(function() {
saySorry();
});
function saySorry() {
alert("Sorry to bother you !");
}
notification.show();
解决方案
Everything you'll need is provided by the chrome.notifications API. E.g.:
manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",
"background": {
"persistent": false,
"scripts": [
"./bg/background.js"
]
},
"browser_action": {
"default_title": "Test Extension"
},
"permissions": ["notifications"]
}
background.js:
var myNotificationID = null;
/* For demonstration purposes, the notification creation
* is attached to the browser-action's `onClicked` event.
* Change according to your needs. */
chrome.browserAction.onClicked.addListener(function() {
chrome.notifications.create("", {
type: "basic",
iconUrl: "/path/to/notification/icon.png",
title: "REMINDER",
message: "It's time to go to this super-cool site !\nProceed ?",
contextMessage: "It's about time...",
buttons: [{
title: "Yes, get me there",
iconUrl: "/path/to/yesIcon.png"
}, {
title: "Get out of my way",
iconUrl: "/path/to/noIcon.png"
}]
}, function(id) {
myNotificationID = id;
});
});
/* Respond to the user's clicking one of the buttons */
chrome.notifications.onButtonClicked.addListener(function(notifId, btnIdx) {
if (notifId === myNotificationID) {
if (btnIdx === 0) {
window.open("...");
} else if (btnIdx === 1) {
saySorry();
}
}
});
/* Add this to also handle the user's clicking
* the small 'x' on the top right corner */
chrome.notifications.onClosed.addListener(function() {
saySorry();
});
/* Handle the user's rejection
* (simple ignore if you just want to hide the notification) */
function saySorry() {
alert("Sorry to bother you !");
}
这篇关于Google Chrome中是否有任何方法在通知中插入操作按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
