user1991 user1991 - 7 months ago 16
Javascript Question

Is there any way to insert action buttons in notification in Google Chrome

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();

Answer

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 !");
}