Chrome扩展程序 - 当popup.html关闭时,setInterval会停止

时间:2015-12-28 11:54:28

标签: javascript google-chrome-extension popup parameter-passing setinterval

我正在尝试构建我的第一个简单的Chrome扩展程序,而且我是Javascript的新手,所以我希望你能帮助我。

我的扩展程序只有一个目标:每X秒/分钟创建一次Google Rich Notification。 X的值来自popup.html的输入文本字段。我正在使用setInterval-Method重复创建通知。

您可以在下面看到popup.js和popup.html。

popup.js:

var NotOptions = {
    type : "image",
    title: "In die Ferne gucken!",
    message: "Nur auf den Bildschirm zu starren, ist nicht gesund",
    expandedMessage: "",};

var timeElement = document.getElementById("time");
var timeValue = null;
var time = null;
var interval = null;
timeElement.onchange = getTimeValue;

function getTimeValue() {
    timeValue = timeElement.value * 60000;
    localStorage.setItem("timeValue", timeValue);
    activateReminder();
}

function activateReminder() {
    time = localStorage.getItem("timeValue");
    clearInterval(interval);
    if(time >= 3000  && time <= 1800000) {
        interval = window.setInterval(function() {
            doNotify();         
            console.log("Time is " + time);
        }, parseInt(time));     
    }   
}

function doNotify() {
    var path = "/images/eye127.png";
    var options = null;     
    options = NotOptions;   
    options.iconUrl = path;
    options.priority = 0;
    options.imageUrl = chrome.runtime.getURL("/images/tahoe-320x215.png");
    chrome.notifications.create(options);   
}

popupt.html:

<html>
<head>
</head>
<body>  
    <h1>Watch out!</h1>
    Time in minutes:<input type="text" id="time">   
    <script type="text/javascript" src="popup.js"></script>
</body>
</html>

我的问题是只有popup.html保持打开状态才会有效。一旦关闭,setInterval就会停止工作。

但是当我在popup.js中执行以下代码时,即使关闭popup.html,我也会每隔6秒获得一次Noticifation。这是我有6秒的修复值的问题。相反,我想使用输入字段中的值。

setInterval(function() {
        doNotify();         
        console.log("Time is " + time);
    }, 6000);

现在我想做两件事:

  1. 将输入字段中的值从popup.html传递到setInterval-method
  2. 即使popup.html关闭
  3. ,setInterval也应继续使用inputfield中指定的值运行

    我怎样才能做到这一点?

    如果您想要结帐项目

    ,请链接到我的github-repo

    blink-reminder

    提前谢谢

1 个答案:

答案 0 :(得分:3)

更好的方法是将“时钟代码”移动到后台页面。

这将允许您在没有任何打开的弹出窗口的情况下运行代码。

弹出窗口仅用于设置每次执行时钟之间的秒数。为此,您可以像在代码中一样使用本地存储,也可以使用Chrome扩展程序的Messaging API。

如果您使用本地存储,则可以使用onChanged事件将背景与弹出窗口中的值更改同步。

Here more informations about background pages

Here more informations about Messaging API

Here more informations about local storage (onChanged event)