title: Getting JQuery Stopwatch Run In Background via Chrome
body: <p>Well I made a stopwatch in JQuery, originally for my website, and then I wanted it to be a chrome extension for a variety of reasons. Anyway it runs fine except one problem. You start it, then as soon as the popup window closes it stops, and I'm having a pain trying to figure out how to fix this.</p>
  
  <p>You can download the source here - <a href="http://officialspeed.tk/timesamurai/chrome/stopwatch.zip" rel="nofollow">http://officialspeed.tk/timesamurai/chrome/stopwatch.zip</a></p>
  
  <p><strong>Manifest</strong></p>
  
  <pre><code>{
      "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"
     }
  }
  </code></pre>
  
  <p><strong>style.css</strong></p>
  
  <pre><code>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');}
  </code></pre>
  
  <p><strong>background.html</strong></p>
  
  <pre><code>&lt;link rel="stylesheet" href="style.css" /&gt;
  &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  (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 &gt; 59) {
                  millisecond = 0;
                  second = second + 1;
              }
              if(second &gt; 59) {
                  second = 0;
                  minute = minute + 1;
              }
              if(minute &gt; 59) {
                  minute = 0;
                  hour = hour + 1;
              }
  
              h.html("0".substring(hour &gt;= 10) + hour);
              m.html("0".substring(minute &gt;= 10) + minute);
              s.html("0".substring(second &gt;= 10) + second);
              milli.html("0".substring(millisecond &gt;= 10) + millisecond);
          }
      }
  })(jQuery);
  
  $(function() {
      $('#timer').stopwatch();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>popup.html</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="style.css" /&gt;
  &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      chrome.extension.getBackgroundPage();
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="base"&gt;
          &lt;img src="images/base.png"&gt;
          &lt;div id="timer"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>