Chrome extension: open tabs with delay

Question

I am making an extension, which has a background page (and a script associated with it: eventPage.js) and a content script (work.js)

The content script scans the web page, and retreives data in an array:

var datas = new Array();
var i = 0;
$('.szovegbox_kn tbody').each(function () {
    var data = $(this).first("tr").find("td:nth-child(5)").html();

    if (data !== undefined) {
        datas[i] = data.replace(/\s/g, '');
        chrome.runtime.sendMessage({
            data: datas[i]
        });
        i++;
    }
});

As you can see, data[i] gets sent to the background page when the variable data isn't undefined.

This is my background page's script:

chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
    if (request.data !== undefined) {
        var data = request.data;
        var newURL = "http://www.something.com/loadpage.php?dest=" + data;
        chrome.tabs.create({
            url: newURL
        });

        chrome.tabs.onUpdated.addListener(function (tabId, changeInfo) {
            if (changeInfo.status === 'complete') {
                window.setTimeout(function () {
                    chrome.tabs.remove(tabId);
                }, 3000);
            }
        });
    }
});

What I'd like to do is, that when a valid message (which's type isn't undefined) gets to the background page, the tab creation gets delayed by n seconds, and only ONE tab gets created until the tab gets closed. Right now, if in my datas[] array there's 100 records, my background page opens all 100 tabs instantely. I tried with setTimout, without success.

tl;dr: Data array gets sent to the background page, open tabs one by one with a ten second delay between them.

If you need more info, I can provide

Ben Hutchison · Answer 1 · 2013-09-11T08:57:46.130

2

It sounds like you want to throttle your event handling logic.

var tabCreationDelay = 10000; //milliseconds

var createTabThrottled = _.throttle(function(url){
    chrome.tabs.create({
        url: url
    });
}, tabCreationDelay);

chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
    if (request.data !== undefined) {
        var data = request.data;
        var newURL = "http://www.something.com/loadpage.php?dest=" + data;
        createTabThrottled(newURL);
    }

    // ...
});

There are implementations of throttling algorithms in libraries like Underscore and Lo-Dash.

edited Sep 11 '13 at 08:57

answered Sep 11 '13 at 07:57

Ben Hutchison

4,823
4
26
25

Unrelated to your question, but do you want to add an `onUpdated` event handler every time a message is received? You will end up with many handlers each trying to remove the same tab. If you add only one handler, it will still be run every time the `onUpdated` event fires. – Ben Hutchison Sep 11 '13 at 08:01
Thanks for the answer, this looks great, however only the message's url to the background page gets opened for some reason. (so if there are 20 records, only the 20th gets opened) I used Underscore. – PeterInvincible Sep 11 '13 at 08:52
Sorry, I misunderstood your question. If you want all URLs to be opened in tabs, but with a delay between each tab being opened, you can use `_.throttle` instead (same arguments). – Ben Hutchison Sep 11 '13 at 08:55
I came across another problem: For some reason _.throttle only opens 2 tabs.(the first and last) It works as intended, but if I have n records, only the first and the last gets opened in new tabs – PeterInvincible Sep 11 '13 at 09:29
It could be that the `_.throttle` function is throwing out events if multiple events occur inside one throttle window. If that's the case, you may need a more complicated asynchronicity library. I have used [Q](https://github.com/kriskowal/q) and it is very powerful (although a somewhat challenging learning curve). I think the [reduce sample](https://github.com/kriskowal/q#sequences) and [delay method](https://github.com/kriskowal/q/wiki/API-Reference#promisedelayms) fit the problem you are trying to solve. – Ben Hutchison Sep 11 '13 at 09:36
Thanks. Is it possible to make it work with _.throttle? I really don't feel like trying to do it with Q.aybe another libtaty will do it? (you mentioned lo-dash) – PeterInvincible Sep 11 '13 at 09:49
Yeah, Q is kind of a heavyweight solution. Both throttle and debounce discard extra events, so they won't do what you want. Maybe a recursive setTimeout that pops elements from your list and opens tabs... – Ben Hutchison Sep 11 '13 at 11:17

Chrome extension: open tabs with delay

1 Answers1

Linked