Chrome扩展程序*多个警报同时启动

Question

我正在创建一个任务提醒扩展。用户可以选择继续添加任务，并为每个任务设置提醒。我使用chrome.storage存储这些任务，并在存储中使用onChanged侦听器为添加到存储中的每个任务创建一个警报。但问题是，如果我为一个任务设置2分钟的提醒，为另一个任务设置3分钟的提醒。然后，在2分钟结束时，我将收到两个任务的通知，在3分钟结束时，我将再次收到两个任务的通知。

background.js

chrome.storage.onChanged.addListener(function(changes, namespace) {
let id = (changes.tasks.newValue.length)-1
let data = changes.tasks.newValue[id]

if(data.task && data.hrs && data.min){
    let totalMins = (parseInt(data.hrs*60))+parseInt(data.min)
    let alarmTime = 60*1000*totalMins
    chrome.alarms.create("remind"+id,{when:Date.now() + alarmTime})
}

chrome.alarms.onAlarm.addListener(()=>{
    let notifObj = {
        type: "basic",
        iconUrl:"./images/logo5.png",
        title: "Time to complete you  task",
        message: data.task
    }
    chrome.notifications.create('remindNotif'+id, notifObj)
}) 

popup.js

let hrs = document.querySelector("#time-hrs")
let min = document.querySelector("#time-min")
let submitBtn = document.querySelector("#submitBtn")
let task = document.querySelector("#task")


hrs.value = 0;
min.value = 1


hrs.addEventListener('change',()=>{
  if (hrs.value < 0){
    hrs.value =0;
  }
})

min.addEventListener('change',()=>{
   if (min.value < 1){
      min.value = 1;
   }
})

submitBtn.addEventListener("click", ()=>{
 if(task.value){
    chrome.storage.sync.get('tasks',(item)=>{

        let taskArr = item.tasks ? item.tasks : []
        linkArr.push({task:task.value, hrs:hrs.value, min:min.value})
        chrome.storage.sync.set({ 'tasks' : taskArr })
    })
  };
 });

manifest.json

{
    "name" : "Link Snooze",
    "description" : "This extension reminds you to open your saved links",
    "manifest_version":2,
    "version":"0.1.0",
    "icons":{
        "16":"./images/logo5.png",
        "48":"./images/logo5.png",
        "128":"./images/logo5.png"
    },
    "browser_action":{
        "default_popup":"popup.html",
        "default_icon":"./images/logo5.png"
    },
    "permissions":["storage", "notifications","alarms"],
    "background" : {
        "scripts": ["background.js"],
        "persistent" : false
    },
    "options_page":"options.html"
}

Answer 1

问题来了。

除了旧的侦听器外，还可以在存储更改时注册一个新的onAlarms侦听器。每次触发一次警报，它们都会运行。

解决方案。

当使用非持久背景脚本时，所有API侦听器必须只为同一个函数注册一次，并且必须同步完成，而不是在异步回调或await或then()中完成，否则当后台脚本自动终止并唤醒此事件时，事件将丢失。约定是在脚本开始时就这样做。到目前为止，它对您起作用的原因是，当弹出窗口打开或后台脚本devtools打开时，后台脚本仍然处于活动状态。

这样的监听器显然不能像代码中的data.task那样直接使用异步回调中的变量。解决方案是使用将数据附加到事件的不同方法，例如，使用已经包含数据的name (特别是data.task )创建警报。

chrome.alarms.create(data.task, {delayInMinutes: hrs * 60 + min});

onAlarm事件提供警报作为参数，以便您可以使用它的name，请参阅文档。

随机提示：

• 如果在创建时调用JSON.stringify(obj)并在onAlarm中调用JSON.parse(alarm.name)，则可以将对象用作警报名称。
• 在弹出窗口中，不要手动调整超出范围的值，而是在html中使用数字输入： 然后把它读成一个数字：document.querySelector("#time-min").valueAsNumber || 0