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

【问题标题】：Chrome Extension - setInterval stopping when popup.html closedChrome 扩展程序 - 当 popup.html 关闭时 setInterval 停止
【发布时间】：2015-12-28 11:54:28
【问题描述】：

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

我的扩展程序只有一个目标：每 X 秒/分钟创建一个 Google 富通知。 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 秒收到一次通知。这是我有 6 秒的固定值的问题。相反，我想使用输入字段中的值。

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

现在我想做两件事：

从 popup.html 的 inputfield 传递值到 setInterval 方法
即使 popup.html 关闭，setInterval 也应继续以输入字段中指定的值运行

我怎样才能做到这一点？

如果你想签出项目，请点击这里链接到我的 github-repo

blink-reminder

提前谢谢你

【问题讨论】：

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

【解决方案1】：

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

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

弹出窗口仅用于设置每次执行时钟之间的秒数。为此，您可以像在代码中那样使用本地存储，或者使用 Chrome 扩展的消息传递 API。

如果使用本地Storage，可以使用onChanged事件来同步后台与弹窗中值的变化。

Here more informations about background pages

Here more informations about Messaging API

Here more informations about local storage (onChanged event)

【讨论】：

我添加了一个执行时钟代码的 background.js 文件，在 popup.js 中我设置了时间段的值。在那里我执行 chrome.runtime.reload();这样 background.js 就会“注意到”变化。是否有一种“更干净”的方式来告诉 background.js 文件时间段的值已更改？
你可以在localStorage的onChange事件上添加listner。任何本地存储值的任何更改都会引发它，因此您必须检查更改的值是否是您的。我已经编辑了答案