Javascript redirect and reset timer

Question

Newbie to JS. Working with a count down timer and an alert.

Trying to create an alert that pops up after 5 seconds of inactivity and when Yes is clicked - you will be redirected to a certain URL. When Cancel is clicked, the timer will be reset and you may stay on the page (until the timer runs out, etc, etc).

The code will be used in a Google Extension.

The code I have so far is as follows - I've mad a JS fiddle. The timer reset doesn't work when 'cancel' is clicked.

If somebody could lend any advice I would be grateful.

http://jsfiddle.net/johnny_s/c7h1qf49/

My myscript.js

var div = document.createElement("div");
div.id = "timer";
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "white";
div.style.position = "fixed";
div.style.top = "50%";
div.style.left = "50%";
div.innerHTML = "Hello";
document.body.appendChild(div);

var IDLE_TIMEOUT = 5; //seconds
var _idleSecondsTimer = null;
var _idleSecondsCounter = 0;

document.onclick = function () {
    _idleSecondsCounter = 0;
};

document.onmousemove = function () {
    _idleSecondsCounter = 0;
};

document.onkeypress = function () {
    _idleSecondsCounter = 0;
};

_idleSecondsTimer = window.setInterval(CheckIdleTime, 1000);

function CheckIdleTime() {

    _idleSecondsCounter++;

    var oPanel = document.getElementById("timer");

    if (oPanel) oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";

    if (_idleSecondsCounter >= IDLE_TIMEOUT) {
        window.clearInterval(_idleSecondsTimer);

        if (confirm('You are being redirected due to inactivity - click Cancel for more time, or OK to go to home page?')) {
            //test go to google
            document.location.href = "http://www.google.com";
        } else {
            //reset the timer to 5
        }

    }
}

My manifest.json looks as follows;

{
"update_url": "https://clients2.google.com/service/update2/crx",

  "manifest_version": 2,

  "name": "Idle Reset",
  "description": "Reset the browser to a single tab pointing at the home page when idle.",
  "version": "1.0.3",
  "background": {
    "scripts": ["eventPage.js"],
    "persistent": false
  },
  "permissions": [
    "tabs",
    "idle"
  ],
  "options_page":   "options.html",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["zepto.min.js", "kiosk.js", "myscript.js"],
      "css": [ "reset.css"]
    }
  ]
}

How is that code executed? Is it a [content script](https://developer.chrome.com/extensions/content_scripts)? What happens if you [debug it](http://stackoverflow.com/questions/895751/google-chrome-javascript-debugger-and-content-scripts)? Post the contents of manifest.json — wOxxOm, Nov 30 '15 at 17:17

score 0 · Accepted Answer · answered Dec 02 '15 at 09:06

With help from @sdespont I got it working, with a few amendments.

The working code is;

var div = document.createElement("div");
div.id = "timer";
div.style.display = "none";
div.style.width = "200px";
div.style.height = "200px";
div.style.background = "red";
div.style.color = "white";
div.style.position = "fixed";
div.style.top = "80%";
div.style.left = "50%";
document.body.appendChild(div);

var timeoutID;
var timerID;
var idleTimeout = 5; 
var idleSecondsTimer = null;
var idleSecondsCounter = 0;

function setup() {
    this.addEventListener("mousemove", resetTimer, false);
    this.addEventListener("mousedown", resetTimer, false);
    this.addEventListener("keypress", resetTimer, false);
    this.addEventListener("DOMMouseScroll", resetTimer, false);
    this.addEventListener("mousewheel", resetTimer, false);
    this.addEventListener("touchmove", resetTimer, false);
    this.addEventListener("MSPointerMove", resetTimer, false);

    startTimer();
}
setup();

function startTimer() {
    // wait 2 seconds before calling goInactive
    timeoutID = setTimeout(goInactive, 2000);
}

function resetTimer(e) {
    clearTimeout(timeoutID);
    clearTimeout(timerID);    
    goActive();
}

function goInactive() {
    idleSecondsCounter = 0;

    div.style.display = "block";
    div.innerHTML = "Inactivity detected. Redirecting in ...<span id='countdown'>" + (idleTimeout - idleSecondsCounter) + "</span> ...please touch screen to close this message";
    // show a count down here then redirect to google.com

    timerID = setInterval(function(){ 
        idleSecondsCounter++; 

        if(idleSecondsCounter >= 6) {
            clearTimeout(timerID);    
            window.location.href = "http://google.com";
        } else {            
            document.getElementById("countdown").innerHTML = (idleTimeout - idleSecondsCounter);
        }
    }, 1000);    
}

function goActive() {
    div.style.display = "none";
    startTimer();
}

Javascript redirect and reset timer

1 Answers1