[userscript] [Google] Do not sort tabs Google

do-not-sort-tabs-google.user.js

// ==UserScript==
// @name         [Google Search] Do not sort tabs Google
// @namespace    https://gist.github.com/Kohei-Toyoda/
// @description  Fix order of tabs on google search (forked from https://gist.github.com/tkrkt/4fa57eedf9922c0719d26d67db08b8c2 )
// @version      3
// @include      https://www.google.co.jp/search*
// @include      https://www.google.com/search*
// @grant        none
// ==/UserScript==

const hide_menu = () => {
  document.getElementById('hdtb-msb').style = "pointer-events: none; opacity: 0.2;";
}

hide_menu();

const order = [
  'search',
  'image',
  'map',
  'video',
  'news',
  'more',
  'shopping',
  'books',
  'flight',
  'finance'
];

const style = document.createElement('style');
style.textContent = `
  .hover-gray:hover {background: rgba(0,0,0,0.1)};
`;
document.head.appendChild(style);

const links = {};

const tbmMap = {
  www: 'search',
  maps: 'map',
  isch: 'image',
  vid: 'video',
  nws: 'news',
  shop: 'shopping',
  bks: 'books',
  flm: 'flight',
  fin: 'finance'
};

const main = (tab, more) => {
  Array.from(tab.querySelectorAll('.hdtb-mitem')).forEach(element => {
    const a = element.firstChild;
    const href = a.href || location.href;
    const tbm = new URL(href).searchParams.get('tbm') || new URL(href).host.split('.')[0];
    links[tbmMap[tbm]] = {
      name: element.textContent.trim(),
      href,
      tbm,
      isActive: element.classList.contains('hdtb-msel')
    };
  });
  
  
  let moreClassName;
  Array.from(more.querySelectorAll('a[role="menuitem"]')).forEach(a => {
    moreClassName = a.className;
    const tbm = new URL(a.href).searchParams.get('tbm') || new URL(a.href).host.split('.')[0];
    links[tbmMap[tbm]] = {
      name: a.textContent.trim(),
      href: a.href,
      tbm
    };
  });
  
  while(tab.firstChild && tab.removeChild(tab.firstChild));
  while(more.firstChild && more.removeChild(more.firstChild));
  
  let isTab = true;
  order.forEach(type => {
    if (type === 'more') {
      isTab = false;
    } else {
      const item = links[type];
      if (isTab) {
        const div = document.createElement('div');
        if (item.isActive) {
          div.className = 'hdtb-mitem hdtb-msel hdtb-imb';
          div.textContent = item.name;
        } else {
          div.className = 'hdtb-mitem hdtb-imb';
          const a = document.createElement('a');
          a.textContent = item.name;
          a.className = 'q qs';
          a.href = item.href;
          div.appendChild(a);
        }
        tab.appendChild(div, tab.lastChild);
      } else {
        const a = document.createElement('a');
        a.textContent = item.name;
        a.className = moreClassName + ' hover-gray';
        a.href = item.href;
        a.setAttribute('role', 'menuitem');
        more.appendChild(a);
      }
    }
  });
  show_menu();
};

let timer;
const watch = () => {
  clearInterval(timer);
  timer = setInterval(() => {
    const tab = document.getElementById('hdtb-msb-vis');
    const more = document.querySelector('#ow5 > div') || document.querySelector('#lb > div[role="menu"]');
  
    if (tab && more) {
      main(tab, more);
      clearInterval(timer);
    }
  }, 100);
};

const show_menu = () => {
  document.getElementById('hdtb-msb').style = "";
}

window.addEventListener('load',watch);
window.addEventListener('hashchange', watch, false);