How to open a new tab just after the current tab?

Question

I'm developing a chrome extension and I want to open a new tab, but after the current tab that user is on. This is what I've tried to do:

function clickEvent(info, tab) {
    update();
    var url= "http://google.com";
    var id = tab.id+1;
    chrome.tabs.create({'url': url, 'index': id});
}

but the created tab opens at the end of tabs queue in chrome tab bar. After removing 'index': id from chrome.tabs.create, the result is same. I don't know how can I resolve the problem. Can anybody help me?

Answer 1

It sounds like you're creating a 'child' tab, in which case you should set both the index and the openerTabId:

function addChildTab(url, parentTab) {
    chrome.tabs.create({
        'url': url,
        'windowId': parentTab.windowId,
        'index': parentTab.index + 1, // n.b. index not id
        'openerTabId': parentTab.id   // n.b. id not index
    });
}

Setting the openerTabId means that the new tab will properly be associated as a child tab of the parent tab, hence:

• If you close the child tab while it is active, the parent tab will become the active tab (rather than, say, the tab to the right of the child tab). This makes it behave the same way as links that the user opens in new tabs.
• Extensions that show tabs in a tree will work properly.

See also https://code.google.com/p/chromium/issues/detail?id=67539 which added this.

---

Note: if you're opening the tab in the background (by passing active:false), then parentTab.index + 1 isn't quite right, and instead ideally you'd insert the new tab after existing child (and grandchild) tabs of parentTab:

function addBackgroundChildTab(url, parentTab) {
    chrome.tabs.query({'windowId': parentTab.windowId}, function(tabs) {
        var parentAndDescendentIds = {};
        parentAndDescendentIds[parentTab.id] = true;
        var nextIndex = parentTab.index + 1;
        while (nextIndex < tabs.length) {
            var tab = tabs[nextIndex];
            if (tab.openerTabId in parentAndDescendentIds) {
                parentAndDescendentIds[tab.id] = true;
                nextIndex++;
            } else {
                break;
            }
        }
        chrome.tabs.create({
            'url': url,
            'active': false,
            'windowId': parentTab.windowId,
            'index': nextIndex,
            'openerTabId': parentTab.id
        });
    });
}

But that may be overkill for your purposes, in which case sticking with parentTab.index + 1 as in my first code sample should be fine.

Answer 2

The tab is appended at the end because you're using the wrong argument (id should be index). The tab id is a positive integer which uniquely identifies tabs within a session. Consequently, the value of id is always higher than the number of tabs.

The position of the tab can be read from the index property. So, replace id with index:

function clickEvent(info, tab) {
    update();
    var url = "http://google.com/";
    var index = tab.index + 1;
    chrome.tabs.create({'url': url, 'index': index});
}