Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change Chrome Tab with Javascript

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,

like image 551
Dylan Beck Avatar asked Sep 18 '17 17:09

Dylan Beck


People also ask

How do I switch tabs in Chrome using Ubuntu?

Switch to the Next Tab To jump to the next tab (on the right) press Ctrl + Tab or Ctrl + PgDn on your keyboard. This shortcut works perfectly on Windows devices and other operating systems (e.g Chrome OS on Chromebooks and Linux) with a familiar keyboard layout.


2 Answers

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})
    });  
});
like image 168
Jim Avatar answered Oct 23 '22 04:10

Jim


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.

like image 5
Divyanshu Mahajan Avatar answered Oct 23 '22 06:10

Divyanshu Mahajan