Google chrome extension 通过Chrome在后台运行JQuery秒表

我在JQuery中做了一个秒表，最初是为了我的网站，出于各种原因，我希望它是一个chrome的扩展。无论如何，它运行良好，除了一个问题。你启动它，然后一旦弹出窗口关闭，它就会停止，而我正痛苦地想办法解决这个问题

您可以在此处下载源代码-

清单

{
    "name": "TimeSamurai",
    "version": "1.0.2",
    "description": "A very simple stopwatch with a very nice oriental theme added to it.",

    "browser_action": {
        "default_icon": "images/32x32.png",
        "default_title": "TimeSamurai",
        "background_page": "background.html",
        "popup": "popup.html"
   },

    "icons": {
        "16": "images/16x16.png",
        "32": "images/32x32.png",
        "48": "images/48x48.png"
   }
}

style.css

body {
    min-width:350px;
    min-height:200px;
    background-color:black;
    background-image:url('images/bg.jpg');
    background-position:top left;
    background-attachment:scroll;
    background-repeat:repeat;}

.display {
    position:absolute;
    top:25px;
    left:50%;
    margin-left:-33px;
    font-size:18;
    font-family:times new roman;
    font-weight:bold;
    color:FFFFFF;
    z-index:1;}

.base {
    position:absolute;
    top: 50%;
    left: 50%;
    margin-left: -117px;
    margin-top: -50px;
    width:235px;}

.start {
    position:absolute;
    top:3px;
    left:50%;
    margin-left:-115px;
    width:65px;
    height:33px;
    border:0px;
    background-color:transparent;
    background-image:url('images/start.png');}

.start:hover {
    width:65px;
    height:33px;
    color:transparent;
    border:0px;
    background-color:transparent;
    background-image:url('images/starthover.png');}

.stop {
    position:absolute;
    top:3px;
    left:50%;
    margin-left:-115px;
    width:65px;
    height:33px;
    border:0px;
    background-color:transparent;
    background-image:url('images/stop.png');}

.stop:hover {
    width:65px;
    height:33px;
    color:transparent;
    border:0px;
    background-color:transparent;
    background-image:url('images/stophover.png');}

.reset {
    position:absolute;
    top:35px;
    left:50%;
    margin-left:-115px;
    width:65px;
    height:32px;
    border:0px;
    background-color:transparent;
    background-image:url('images/reset.png');}

.reset:hover {
    width:65px;
    height:32px;
    color:transparent;
    border:0px;
    background-color:transparent;
    background-image:url('images/resethover.png');}

background.html

<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
(function($) {
    jQuery.fn.stopwatch = function() {
        var clock = $(this);
        var timer = 0;

        clock.addClass('stopwatch');

        // We have to do some searching, so we'll do it here, so we only have to do it once.
        var h = clock.find('.hr');
        var m = clock.find('.min');
        var s = clock.find('.sec');
        var milli = clock.find('.mil');
        var start = clock.find('.start');
        var stop = clock.find('.stop');
        var reset = clock.find('.reset')

        stop.hide();

        start.bind('click', function() {
            timer = setInterval(do_time, 15);
            stop.show();
            start.hide();
        });

        stop.bind('click', function() {
            clearInterval(timer);
            timer = 0;
            start.show();
            stop.hide();
        });

        reset.bind('click', function() {
            clearInterval(timer);
            timer = 0;
            h.html("00");
            m.html("00");
            s.html("00");
            milli.html("00");
            stop.hide();
            start.show();
        });

        function do_time() {
            // parseInt() doesn't work here...
            hour = parseFloat(h.text());
            minute = parseFloat(m.text());
            second = parseFloat(s.text());
            millisecond = parseFloat(milli.text());

            millisecond++;

            if(millisecond > 59) {
                millisecond = 0;
                second = second + 1;
            }
            if(second > 59) {
                second = 0;
                minute = minute + 1;
            }
            if(minute > 59) {
                minute = 0;
                hour = hour + 1;
            }

            h.html("0".substring(hour >= 10) + hour);
            m.html("0".substring(minute >= 10) + minute);
            s.html("0".substring(second >= 10) + second);
            milli.html("0".substring(millisecond >= 10) + millisecond);
        }
    }
})(jQuery);

$(function() {
    $('#timer').stopwatch();
});
</script>

<html>
<head>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    chrome.extension.getBackgroundPage();
</script>
</head>
<body>
    <div class="base">
        <img src="images/base.png">
        <div id="timer"></div>
    </div>
</body>
</html>

（函数（$）{
jQuery.fn.stopwatch=函数（）{
变量时钟=$（此）；
var定时器=0；
clock.addClass（“秒表”）；
//我们必须做一些搜索，所以我们会在这里做，所以我们只需要做一次。
var h=clock.find（'.hr'）；
var m=clock.find（'.min'）；
var s=时钟查找（'.sec'）；
var mili=时钟查找（'.mil'）；
var start=clock.find（'.start'）；
var stop=clock.find（'.stop'）；
var reset=clock.find（'.reset'）
停止。隐藏（）；
start.bind（'单击'，函数（））{
定时器=设置间隔（do_时间，15）；
停止。显示（）；
start.hide（）；
});
stop.bind（'单击'，函数（））{
清除间隔（计时器）；
定时器=0；
start.show（）；
停止。隐藏（）；
});
reset.bind（'单击'，函数（））{
清除间隔（计时器）；
定时器=0；
h、 html（“00”）；
m、 html（“00”）；
s、 html（“00”）；
milli.html（“00”）；
停止。隐藏（）；
start.show（）；
});
函数do_time（）{
//parseInt（）在这里不起作用。。。
hour=parseFloat（h.text（））；
分钟=parseFloat（m.text（））；
second=parseFloat（s.text（））；
毫秒=parseFloat（milli.text（））；
毫秒++；
如果（毫秒>59）{
毫秒=0；
秒=秒+1；
}
如果（秒>59）{
秒=0；
分钟=分钟+1；
}
如果（分钟>59）{
分钟=0；
小时=小时+1；
}
h、 html（“0”。子字符串（小时>=10）+小时）；
m、 html（“0”。子字符串（分钟>=10）+分钟）；
s、 html（“0”。子字符串（秒>=10）+秒）；
html（“0”。子字符串（毫秒>=10）+毫秒）；
}
}
})（jQuery）；
$（函数（）{
$（“#计时器”）。秒表（）；
});

popup.html

<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
(function($) {
    jQuery.fn.stopwatch = function() {
        var clock = $(this);
        var timer = 0;

        clock.addClass('stopwatch');

        // We have to do some searching, so we'll do it here, so we only have to do it once.
        var h = clock.find('.hr');
        var m = clock.find('.min');
        var s = clock.find('.sec');
        var milli = clock.find('.mil');
        var start = clock.find('.start');
        var stop = clock.find('.stop');
        var reset = clock.find('.reset')

        stop.hide();

        start.bind('click', function() {
            timer = setInterval(do_time, 15);
            stop.show();
            start.hide();
        });

        stop.bind('click', function() {
            clearInterval(timer);
            timer = 0;
            start.show();
            stop.hide();
        });

        reset.bind('click', function() {
            clearInterval(timer);
            timer = 0;
            h.html("00");
            m.html("00");
            s.html("00");
            milli.html("00");
            stop.hide();
            start.show();
        });

        function do_time() {
            // parseInt() doesn't work here...
            hour = parseFloat(h.text());
            minute = parseFloat(m.text());
            second = parseFloat(s.text());
            millisecond = parseFloat(milli.text());

            millisecond++;

            if(millisecond > 59) {
                millisecond = 0;
                second = second + 1;
            }
            if(second > 59) {
                second = 0;
                minute = minute + 1;
            }
            if(minute > 59) {
                minute = 0;
                hour = hour + 1;
            }

            h.html("0".substring(hour >= 10) + hour);
            m.html("0".substring(minute >= 10) + minute);
            s.html("0".substring(second >= 10) + second);
            milli.html("0".substring(millisecond >= 10) + millisecond);
        }
    }
})(jQuery);

$(function() {
    $('#timer').stopwatch();
});
</script>

<html>
<head>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    chrome.extension.getBackgroundPage();
</script>
</head>
<body>
    <div class="base">
        <img src="images/base.png">
        <div id="timer"></div>
    </div>
</body>
</html>

chrome.extension.getBackgroundPage（）；

我想你需要一个

扩展的一个常见需求是 有一个长时间运行的脚本 管理一些任务或状态。背景 呼救

在扩展中，您可以使用后台页面存储和管理秒表的当前状态，并使用弹出页面显示任何UI/进度

---

脚本之间有几种通信方式。您可以使用popup.html/background.html或使用

chrome.extension.getBackgroundPage（）

在您的popup.html/background.html之间进行对话，这将返回背景页面的dom窗口对象。

您可以发布一些源代码吗？你的下载链接不可用。哦，是的，我忘了提到，因为我用来托管我的网站的网站你必须查看officialspeed.tk，然后转到officialspeed.tk/timesamurai/chrome/stopwatch.zip下载文件。不管怎样，源代码已经启动。很抱歉延迟回复，但我仍然无法在后台运行此程序。这个回答非常有用，但我似乎不知道我现在做错了什么。你能帮我吗，兄弟？