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();
In windows, go to Settings > System > Notifications & Actions > In Get notification and actions from these sender section select Google chrome.
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 !");
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With