javascript - 谷歌浏览器扩展程序: Alert when Modal/popup closed

标签 javascript jquery google-chrome google-chrome-extension

我创建了 google chrome 的计时器和警报扩展。如果用户设置的时间(提醒时间)等于当前时间,则会发出警报。这可以正常工作,但前提是扩展程序打开。我想在扩展程序未打开时发出警报。

这是一个开放的扩展。仅当扩展打开时才触发警报。

enter image description here

这是我的 jquery 代码,它检查时间并根据条件触发警报。

window.setInterval(function(){

    // Get/Display CurrentTime

    $(document).ready(function(){
        // Check If Time set
        $("#RemindTime").text(localStorage.getItem("newtime"));
        var RemindTime = localStorage.getItem("newtime");
        RemindTime = RemindTime+":00";

        var today = new Date();
        var cHour = (today.getHours()<10?'0':'') + today.getHours();
        var cMin = (today.getMinutes()<10?'0':'') + today.getMinutes();
        var cSec = (today.getSeconds()<10?'0':'') + today.getSeconds();
        var currentTime = cHour+ ":" + cMin + ":" +cSec;
        $("#CurrentTime").text(currentTime);

        // Tell If Time Passed Or Not
        if(RemindTime == currentTime)
        {
            // Alert if set time is equal to current time
            alert("Your reminder is in progress");
            $("#status").text("Your reminder is in progress");
        }
        if(localStorage.getItem("newtime") < currentTime)
        {
            $("#status").text("Your reminder is over");
        }
        if(localStorage.getItem("newtime") > currentTime)
        {
            // Calculate Difference to be pass
            var start = currentTime;
            var end = localStorage.getItem("newtime");

            s = start.split(':');
            e = end.split(':');

            min = e[1]-s[1];
            hour_carry = 0;
            if(min < 0){
                min += 60;
                hour_carry += 1;
            }
            hour = e[0]-s[0]-hour_carry;
            diff = hour + ":" + min;

            $("#status").text("Your reminder will execute after "+hour+" Hour and "+min+" Min.");
        }

        // Set New Reminder time for new reminder
        $("#submit").click(function(){

            if($("#newtime").val())
            {
                var newtime = $("#newtime").val();
                localStorage.setItem("newtime", newtime+":00");
            }
            else
            {
                var newtime = currentTime;
                localStorage.setItem("newtime", newtime);
            }

            $("#RemindTime").text(newtime);
        });


    });
    }, 100);

HTML

  <body>
        <div class="container">
            Current Time : <span id="CurrentTime"></span>
        </div>
        <div class="container">
            Remind Time : <span id="RemindTime"></span>
        </div>
        <br><hr>
        <div class="container">
            <span id="status"></span>
        </div>
        <br><hr>
        <div class="container">
            Change Time : <input type="time" name="newtime" id = "newtime" />
            <br>
            <input type = "button" id="submit" value="Set Time"/>
        </div>
      </body>

ma​​nifest.json

  {
  "manifest_version": 2,

  "name": "Remind Me :) ",
  "description": "This extension shows a Simple Time Counter for slected time",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["popup.html"],
    "persistent": false
  },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/"
  ]
}

最佳答案

使用 Event page (您已经有一个,但请参阅下面的第一点)和 alarms API :

  • 为了清晰起见,我建议使用单独的背景页面文件

  • manifest.json

      "background": {
          "scripts": ["eventPage.js"],
          "persistent": false
      },
      "permissions": [
          "alarms"
      ],
    
  • popup.js 向事件页面发送消息:

      // in 60 minutes
      chrome.runtime.sendMessage({name: "alarm 1", time: {delayInMinutes: 60}});
      // in 1 minute
      chrome.runtime.sendMessage({name: "alarm 2", time: {when: Date.now() + 1 * 60e3}});
    
  • eventPage.js:

      chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
          if (msg.time) {
              chrome.alarms.create(msg.name, msg.time);
          }
      });
    
      chrome.alarms.onAlarm.addListener(function(alarm) {
          alert(alarm.name + " fired, wake up!");
      });
    
  • 使用 notifications API 代替 alert() 可能会更好

检查the samples您还可以在其中了解如何组织后台(事件)页面与扩展程序的其他部分之间的通信。

注意:发布 Chrome 扩展程序后,即使您设置较小的值(例如 5 秒(5000 毫秒)),实际间隔也会四舍五入为 1 分钟。

来源:https://developer.chrome.com/docs/extensions/reference/alarms/#method-create

In order to reduce the load on the user's machine, Chrome limits alarms to at most once every 1 minute but may delay them an arbitrary amount more. That is, setting delayInMinutes or periodInMinutes to less than 1 will not be honored and will cause a warning. when can be set to less than 1 minute after "now" without warning but won't actually cause the alarm to fire for at least 1 minute.

To help you debug your app or extension, when you've loaded it unpacked, there's no limit to how often the alarm can fire.

关于javascript - 谷歌浏览器扩展程序: Alert when Modal/popup closed,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31715840/

相关文章:

php - Javascript eval() 不工作

javascript - 无法使用不同的名称访问正则表达式值

javascript - 使用元素的属性值获取元素

javascript - 使用javascript计算两个日期之间的时间差

javascript - Float32Array 在与 WebGL (Chrome) 交互时不更新 ArrayBuffer 以反射(reflect)分配的值

javascript 的 onmousemove/event.clientX 正在运行但会抛出错误

javascript - 仅在关闭时隐藏窗口 [Electron]

Javascript 函数、Ready、Click、Each、Next、This 和 Toggle

jQuery 输入值 div id 和改变颜色

security - Google Chrome 认为 Delphi 应用程序为 'dangerous'