How to save an option for background.html in popup?

Question

I have a problem, what i cant solve yet. I have a popup page with a menu, and tabs, and there is a settings tab. On settings tab, i save some item to localstorage, one of them is notification_time for a desktop notification.

Note : i have no options page!

My extension has this popup window and a background page, its function is to alert user with a desktop notification. I show notification in every 5,10,30 minutes, 1,2 hours etc. And this time should be chooseable on popup pages's options menu. The problem is, if 5 minutes is saved, and when i update to 10 minutes for example, than background.html is not updating himself! I rewrited code almost 20 times, but couldnt find solution. Heres a code sample,and a printscreen to get clear about my problem.

popup :

$("#save_settings").click(function(){
        var bgp = chrome.extension.getBackgroundPage();
        localStorage.setItem("notifynumber",$("#notifynumber").val());

        if($("#notify").attr('checked')){
            localStorage.setItem('chbox','true');
        } else {
            localStorage.setItem('chbox','false');
        }

        if($("#notif_time_select :selected").val()!="default"){
            bgp.setTime(parseInt($("#notif_time_select :selected").val()));
        }

        if($("#org_select :selected").val()!="default"){
            localStorage.setItem('org',$("#org_select :selected").val().replace(/%20/g," "));
        }
    });

Note : save_settings is a button, on the tab there is a checkbox (if checked then notifications are allowed, else diabled). There are two html select tags, one for choosing some data (org = organisation), and one, for selecting time. "#notif_time_select" is the html select tag, where i choose 5,10,30 minutes etc...

So, whenever i click save button, i save checkbox state to localstorage,and i call one function from background page, to save time. : bgp.setTime(parseInt($("#notif_time_select :selected").val()));

background page:

for saving time i use function setTime:

var time = 300000; // default
function setTime(time){
    this.time=time;
    console.log("time set to: "+this.time);
}

after, i use setInterval to show notification periodically

setInterval(function(){         
                howmanyOnline("notify",function(data){
                    if(data>localStorage.getItem("notifynumber")){
                        if (!window.webkitNotifications) { // check browser support
                            alert('Sorry , your browser does not support desktop notifications.');
                        }
                        notifyUser(data); // create the notification
                    }
                    if(localStorage.getItem('tweet')=='true'){
                        if(data>localStorage.getItem("notifynumber")){
                            sendTweet(data,localStorage.getItem('org'),localStorage.getItem('ck'),localStorage.getItem('cs'),localStorage.getItem('at'),localStorage.getItem('ats'));
                        }
                    }
                });
    },time);

The code inside setInterval works fine, the only problem is,that

},time);

is not updating well. If i change settings to show notifications in every 10 minutes, it stays on 5 minute. The only way is to restart the whole extension. How could i update setInterval's frequency without restarting the whole extension? Thanks Jim

---

What if i save notif_time to localStorage too, and in background, i set up a listener, to listen for localStorage changes. Is there a way to listen for a particular localStorage item changes?!

Answer 1

Right now, setInterval only runs once, when your application loads. If you want intervals to fire at a new time interval, you should use clearInterval and then make a new call to setInterval .

// set a new time, wipe out the old interval, and set a new interval
function setTime(t) {
    window.time = t;
    clearInterval(notifInterval);
    notifInterval = setInterval(makeNotification, time);
}

// set first interval
notifInterval = setInterval(makeNotification, time);

function makeNotification() {
    // do what you need to make a notification
}

Here, notifInterval is a reference to the interval, returned by setInterval , that is used to clear it.

Answer 2

The source code in your question is not completed, but I guess you called setInterval() and then modified window.time in the background page.
Your window.time is not an object but a number value, and setInterval() can't "see" changes of window.time after invocation.

Try this:

function onTimeout() {
    // do your notification.

    setTimeout(onTimeout, time);
}

setTimeout(onTimeout, time);