Question

I have a chrome extension browser action that I want to have list a series of links, and open any selected link in the current tab. So far what I have is this, using jquery:

var url = urlForThisLink;
var li = $('<li/>');
var ahref = $('<a href="#">' + title + '</a>');
ahref.click(function(){
    chrome.tabs.getSelected(null, function (tab) {
        chrome.tabs.update(tab.id, {url: url});
    });
});
li.append(ahref);

It partially works. It does navigate the current tab, but will only navigate to whichever link was last created in this manner. How can I do this for an iterated series of links?

Answer 1

@jmort253’s answer is actually a good illustration of what is probably your error. Despite being declared inside the for loop, url has function scope since it is declared with var. So your click handler closure is binding to a variable scoped outside the for loop, and every instance of the closure uses the same value, ie. the last one.

Once Chrome supports the let keyword you will be able to use it instead of var and it will work fine since url will be scoped to the body of the for loop. In the meantime you’ll have to create a new scope by creating your closure in a function:

function makeClickHandler(url) {
    return function() { ... };
}

Inside the for loop say:

for (var i = 0; i < urls.length; i++) {
    var url = urls[i]; 
    ...    
    ahref.click(makeClickHandler(url));
    ...
}