I'm looking for a way to change tabs (got to the next open tab, which is essentially like holding CTRL and pressing the TAB key) through code on a webpage. I want to be able to click anywhere on the page and it will go to the next tab? I understand the clicking on the webpage part, just not how to access the chrome tabs.

Is this even possible?

Thanks,

I'm looking for a way to change tabs (got to the next open tab, which is essentially like holding CTRL and pressing the TAB key) through code on a webpage. I want to be able to click anywhere on the page and it will go to the next tab? I understand the clicking on the webpage part, just not how to access the chrome tabs.

Is this even possible?

Thanks,

• javascript
• html
• google-chrome

• Are you making an extension?? – epascarello Commented Sep 18, 2017 at 17:56
• Its only possible with extensions or if you are opening the tab from your site.. you can't access other tabs – sumeet kumar Commented Sep 18, 2017 at 18:00

3 Answers 3

Yes and no.

If you mean can you advance to the next tab using JavaScript within a website: If you did not open the other tabs via window.open (e.g. trying to advance to another tab that was not opened directly from the current website), then no, it is not possible. If it were possible it would be a security risk and give attackers another vector to "ID" a user or potentially find a way to gain access to information about the other tabs a user has open.

If you did open the tabs within the website, you can focus to them:

var newTabs = [];

newTabs.push( window.open("https://example.com", "_blank") );

// Add more tabs?

// Sorry, no way to figure out what the "next" tab is in the
// browser's list of tabs via straight on-site JavaScript,
// just go by next index in the array...
newTabs[0].focus();

If you are referring to Chrome browser extension that you are working on then, yes, you can advance to the next tab using the Tabs API. NOTE: This may not work, I did not test it but seems to fit with the documentation and examples I have seen. If you try and find a better solution let me know and I will update):

// Query current active tab in the current active window:
chrome.tabs.query({currentWindow: true, active: true}, function(tabsArray) {
    // If there are fewer than 2 tabs, you are on the only tab available.
    // Nothing left to do.
    if( tabsArray.length < 2 ) return;
    // Else query tab with incremented index (e.g. next tab):
    chrome.tabs.query({index: (tabsArray[0].index+1)}, function(nextTabsArray){
        // There is no next tab (only 1 tab or user is on last tab)
        if( nextTabsArray.length < 1 ) return;
        // Else, yay! There is a next tab, lets go!
        chrome.tabs.update(nextTabsArray[0].id, {active: true})
    });  
});

As @jim said, it is not possible to switch tabs from within a website using JavaScript. But it can be done using the Chrome Extension Tabs API which is used in Chrome Extensions.

Below is a code snippet from the extension that I'm working on. It would switch to the very next tab when triggered:

chrome.tabs.query({ currentWindow: true }, (tabsArray) => {
  // If only 1 tab is present, do nothing.
  if (tabsArray.length === 1) return;

  // Otherwise switch to the next available tab.
  // Find index of the currently active tab.
  let activeTabIndex = null;
  tabsArray.forEach((tab, index) => {
    if (tab.active === true) {
      activeTabIndex = index;
    }
  });

  // Obtain the next tab. If the current active
  // tab is the last tab, the next tab should be
  // the first tab.
  const nextTab = tabsArray[(activeTabIndex + 1) % tabsArray.length];

  // Switch to the next tab.
  chrome.tabs.update(nextTab.id, { active: true });
});

I hope this solves your query. Let me know if you have any better suggestions.

If you know the window name (typically if you created the window), and you are on the same domain, you can switch to it with the window name part of the call to window.open.

const myTab = window.open('https://stackexchange.com/questions', 'questions') // first call opens it

myTab.name = 'tags' // renaming window is fine

window.open('https://stackexchange.com/tags', 'tags') // second call switches to it

The window will reload, so bear that in mind.

If you have access to the tab you wish to switch to, theoretically you could do the following, using postMessages:

// assuming you have this set up:
// https://stackoverflow.com/questions/33957477/cross-domain-localstorage-with-javascript

// in the tab for https://same.domain/page-one
Window.name = 'new name'; // set current window name
sendMessage('new name') // using the linked code

// switch to the other tab, e.g. https://same.domain/page-two

// In your message event listener
function receiveMessage(e){
  window.SiblingName = e.data;
}

window.open('https://same.domain/page-one', window.SiblingName)

I haven't got the above to work though.