我需要在chrome中添加一个通知,其中包含2个按钮'allow'和'deny'。当用户点击'allow'按钮时,它必须导航到一个网站,当用户点击'deny'时通知框不应再出现了。那就必须关闭。我该怎么做?请帮帮我 这是我的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 !");
}
编辑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();
答案 0 :(得分:23)
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;
/* 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 !");
}
答案 1 :(得分:-2)
您可以使用Web Notifications API的Notification对象。这将每隔10秒创建一个通知,单击此按钮将打开一个新窗口,但可以关闭而不起作用。
<强>的manifest.json:强>
{
"name": "Notification Demo",
"version": "0",
"description":
"Proof of concept - Web Notifications API",
"permissions": [
"notifications"
],
"background": { "scripts": ["background.js"] },
"manifest_version": 2
}
<强> background.js 强>
function show() {
notification = new Notification("Test", {
body: 'click the notification to open example.com, or click to the x to close'
});
notification.onclick = function(){
window.open('http://example.com');
window.focus();
};
};
show();
var interval = 0;
setInterval(function() {
interval++;
show();
interval = 0;
}, 10000);
以下是我发现有帮助的Chrome通知演示:
https://developer.chrome.com/extensions/examples/api/notifications.zip
您可以详细了解Notification对象:
http://www.sitepoint.com/introduction-web-notifications-api/
https://developer.mozilla.org/en-US/docs/Web/API/Notification/Using_Web_Notifications