有沒有什麼辦法可以在谷歌瀏覽器中插入通知中的動作按鈕

Question

我需要在按鈕'允許'和'拒絕'的按鈕中添加一個通知。當用戶點擊'允許'按鈕時，它必須導航一個網站，當用戶點擊「拒絕」通知框不應該出現anymore.That是它必須close.How我能做到嗎？請幫我 這是我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(); 

Answer 1

所有您需要的是由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 !"); 
} 

Answer 2

您可以使用Web 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