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

Question

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

I need to add a notification in chrome with two buttons "allow" and "deny". When the user clicks the "allow" button, he must go to the website, and when the user clicks "deny" the notification field should no longer appear. It needs to be closed. How can i do this? 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 `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 time to go to this super-cool site !\nProceed ?",
    contextMessage: "It about time...",
    buttons: [{
        title: "Yes, get me there",

    }, {
        title: "Get out of my way",

    }]
      }, function(id) {
    myNotificationID = id;
    });
    });

  /* Respond to the user 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 clicking 
      * the small 'x' on the top right corner */
     chrome.notifications.onClosed.addListener(function() {
     saySorry();
       });

        /* Handle the user 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 time to go to this super-cool site !\nProceed ?",
    contextMessage: "It 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();

+3

javascript google-chrome google-chrome-extension notifications

user1991 Nov 25 '13 at 9:43

source share

2 answers

API -. 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

:

http://www.sitepoint.com/introduction-web-notifications-api/

https://developer.mozilla.org/en-US/docs/Web/API/Notification/Using_Web_Notifications

-2

ognockocaten 29 . '14 20:53

gkalpak · Accepted Answer · 2013-11-25T11:10:09+0000

Everything you need is provided by the chrome.notifications API . For instance:

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 `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 time to go to this super-cool site !\nProceed ?",
        contextMessage: "It 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 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 clicking 
 * the small 'x' on the top right corner */
chrome.notifications.onClosed.addListener(function() {
    saySorry();
});

/* Handle the user rejection 
 * (simple ignore if you just want to hide the notification) */
function saySorry() {
    alert("Sorry to bother you !");
}

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

More articles: