Is there any way to insert action buttons in notif

2019-01-15 10:59发布

站内文章 / JavaScript
59 0 0

问题:

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

回答1:

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


回答2:

You can use the Web Notifications API's Notification object. This will create a notification every 10 seconds, that when clicked on will open a new window, but can be closed with no effect.

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

Here's a Chrome notifications demo that I've found helpful:

https://developer.chrome.com/extensions/examples/api/notifications.zip

You can learn more about the Notification object:

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

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



标签： javascript google-chrome google-chrome-extension notifications
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~