时间戳

首页 > 解决方案 > Chrome 扩展程序 | 多个警报同时响起

google-chrome-extension - Chrome 扩展程序 | 多个警报同时响起

问题描述

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

背景.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 })
    })
  };
 });

清单.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"
}

标签： google-chrome-extensionchrome-extension-manifest-v2

解决方案

问题。

onAlarms当存储发生变化时，除了旧的侦听器之外，您还注册了一个新的侦听器。每次触发一个警报时，它们都会运行。

解决方案。

使用非持久性后台脚本时，所有 API 侦听器必须为同一个函数只注册一次，并且必须同步完成，而不是在异步回调或awaitorthen()中，否则当后台脚本自动终止时事件将丢失并且然后为这个事件醒来。惯例是在脚本的开头执行此操作。到目前为止，它为您工作的原因是后台脚本在弹出窗口打开或后台脚本的 devtools 打开时保持活动状态。

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

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

onAlarmevent 将警报作为参数提供，因此您可以使用它name，请参阅文档。

随机提示：

  • 如果在创建时调用 JSON.stringify(obj) 并在onAlarm.

  • 在弹出窗口中，不要手动调整超出范围的值，而是使用 html 中的数字输入：

    <input id="time-min" type=number min=0 max=59 step=1>

    然后将其读取为数字：document.querySelector("#time-min").valueAsNumber || 0

推荐阅读