☰

Google Search Sidebar

A user script and user style to move Google search tools to sidebar.

  1. // ==UserScript==
  2. // @name            Google Search Sidebar
  3. // @namespace       jmln.tw
  4. // @version         0.4.3
  5. // @description     A user script and user style to move Google search tools to sidebar.
  6. // @author          Jimmy Lin
  7. // @license         MIT
  8. // @homepageURL     https://github.com/jmlntw/google-search-sidebar
  9. // @supportURL      https://github.com/jmlntw/google-search-sidebar/issues
  10. // @include         /^https:\/\/(?:ipv4|ipv6|www)\.google\.(?:[a-z\.]+)\/search\?(?:.+&)?q=[^&]+(?:&.+)?$/
  11. // @exclude         /^https:\/\/(?:ipv4|ipv6|www)\.google\.(?:[a-z\.]+)\/search\?(?:.+&)?tbm=lcl(?:&.+)?$/
  12. // @compatible      firefox
  13. // @compatible      chrome
  14. // @compatible      edge
  15. // @compatible      opera
  16. // @run-at          document-end
  17. // @grant           none
  18. // ==/UserScript==
  19.  
  20. function GM_addStyle (css) {
  21.   const style = document.createElement('style')
  22.   style.type = 'text/css'
  23.   style.textContent = css
  24.   document.head.appendChild(style)
  25.   return style
  26. }
  27.  
  28. GM_addStyle(`
  29.   /** CSS Variables **/
  30.  
  31.   :root {
  32.     --user-sidebar-width: 180px;
  33.     --user-sidebar-spacer: 20px;
  34.     --user-sidebar-primary-color: #dd4b39;
  35.     --user-action-menu-spacer: 2px;
  36.     --user-action-menu-background: rgba(0, 0, 0, 0.1);
  37.     --user-action-menu-font-size: 85%;
  38.   }
  39.  
  40.   /** Navigation Bar **/
  41.  
  42.   /**
  43.    * 1. Hide "Tools" toggle button on the navigation bar.
  44.    */
  45.   #hdtb-tls {
  46.     display: none !important; /* 1. */
  47.   }
  48.  
  49.   /** Search Menu **/
  50.  
  51.   /**
  52.    * 1. Reset all CSS properties of the search menu wrapper.
  53.    * 2. Show the search menu wrapper in the proper position.
  54.    */
  55.   #hdtbMenus {
  56.     all: unset !important; /* 1. */
  57.     display: block !important; /* 2. */
  58.     position: absolute !important; /* 2. */
  59.   }
  60.  
  61.   /**
  62.    * 1. Reset all CSS properties of the search menu parent.
  63.    * 2. Place search menus vertically.
  64.    * 3. Set the gap space between each search menu.
  65.    */
  66.   #hdtbMenus div[id^="tn_"][id$="_1"] {
  67.     all: unset !important; /* 1. */
  68.     display: flex !important; /* 2. */
  69.     flex-direction: column !important; /* 2. */
  70.     gap: var(--user-sidebar-spacer) !important; /* 3. */
  71.   }
  72.  
  73.   /**
  74.    * 1. Remove the leading space of the search menu wrapper.
  75.    */
  76.   #hdtbMenus div[id^="tn_"][id$="_1"] > div:nth-child(1) {
  77.     display: none !important; /* 1. */
  78.   }
  79.  
  80.   /**
  81.    * 1. Hide the menu toggle button.
  82.    * 2. Reset all CSS properties of the dropdown menu.
  83.    * 3. Show the dropdown menu in the proper position.
  84.    * 4. Set the sidebar width with paddings.
  85.    */
  86.   #hdtbMenus div[id^="tn_"][id$="_1"] g-popup > div:nth-child(1) {
  87.     display: none !important; /* 1. */
  88.   }
  89.   #hdtbMenus div[id^="tn_"][id$="_1"] g-popup > div:nth-child(2) {
  90.     all: unset !important; /* 2. */
  91.     display: block !important; /* 3. */
  92.     position: static !important; /* 3. */
  93.     width: calc(var(--user-sidebar-width) - 20px) !important; /* 4. */
  94.     max-width: calc(var(--user-sidebar-width) - 20px) !important; /* 4. */
  95.   }
  96.  
  97.   /**
  98.    * 1. Remove the check image on the active menu item.
  99.    * 2. Set the styles of the active menu item.
  100.    */
  101.   #hdtbMenus div[id^="tn_"][id$="_1"] g-menu-item.nvELY {
  102.     background-image: unset !important; /* 1. */
  103.     color: var(--user-sidebar-primary-color) !important; /* 2. */
  104.     font-weight: bolder !important; /* 2. */
  105.   }
  106.  
  107.   /**
  108.    * 1. Set the styles of "Clear" menu item on the sidebar.
  109.    */
  110.   #hdtbMenus div[id^="tn_"][id$="_1"] > a.hdtb-mn-hd {
  111.     padding: 4px 32px !important; /* 1. */
  112.   }
  113.   #hdtbMenus div[id^="tn_"][id$="_1"] > a.hdtb-mn-hd:hover {
  114.     background-color: rgba(0, 0, 0, 0.1) !important; /* 1. */
  115.     text-decoration: unset !important; /* 1. */
  116.   }
  117.  
  118.   /**
  119.    * 1. Fix the position of the label showing "About ***,*** results...".
  120.    */
  121.   #appbar div.LHJvCe {
  122.     top: unset !important; /* 1. */
  123.     opacity: unset !important; /* 1. */
  124.   }
  125.  
  126.   /** Main Page Content **/
  127.  
  128.   /**
  129.    * 1. Set the proper position of the main page content.
  130.    *    (No "!important" here to make Shopping search display correctly.)
  131.    */
  132.   #appbar,
  133.   #center_col,
  134.   #rcnt div.M8OgIe {
  135.     margin-left: var(--user-sidebar-width); /* 1. */
  136.   }
  137.  
  138.   /**
  139.    * 1. Set the proper position of the right information block.
  140.    *    ("--rhs-margin" is the CSS variable defined by Google.)
  141.    */
  142.   #rhs {
  143.     margin-left: var(--rhs-margin); /* 1. */
  144.   }
  145.  
  146.   /**
  147.    * Do not move the right block to the bottom of the page if there's not enough
  148.    * space.
  149.    */
  150.   @supports (selector(:has(p))) {
  151.     #rcnt:has(#center_col:first-child + #rhs) {
  152.       flex-wrap: nowrap !important;
  153.     }
  154.   }
  155.  
  156.   /** Action Menu **/
  157.  
  158.   /**
  159.    * 1. Hide the dropdown arrow.
  160.    */
  161.   div.g g-popup > div {
  162.     display: none !important; /* 1. */
  163.   }
  164.  
  165.   /**
  166.    * 1. Reset all CSS properties of the dropdown menu.
  167.    * 2. Show the dropdown menu in the proper position.
  168.    */
  169.   div.g div.pkWBse {
  170.     all: unset !important; /* 1. */
  171.     display: inline-block !important; /* 2. */
  172.   }
  173.  
  174.   /**
  175.    * 1. Reset all CSS properties of the dropdown menu.
  176.    * 2. Place the menu item horizontally.
  177.    * 3. Set the gap space between each menu item.
  178.    */
  179.   div.g div.pkWBse g-menu {
  180.     all: unset !important; /* 1. */
  181.     display: flex !important; /* 2. */
  182.     flex-direction: row !important; /* 2. */
  183.     gap: var(--user-action-menu-spacer) !important; /* 3. */
  184.   }
  185.   div.g div.pkWBse g-menu-item {
  186.     all: unset !important; /* 1. */
  187.   }
  188.   div.g div.pkWBse g-menu-item > div {
  189.     all: unset !important; /* 1. */
  190.   }
  191.  
  192.   /**
  193.    * 1. Set the styles of the dropdown menu item.
  194.    */
  195.   div.g div.pkWBse g-menu-item a {
  196.     padding: 0 5px !important; /* 1. */
  197.     background-color: var(--user-action-menu-background) !important; /* 1. */
  198.     font-size: var(--user-action-menu-font-size) !important; /* 1. */
  199.   }
  200.  
  201.   /**
  202.    * Hide search time on sidebar
  203.    */
  204.   #result-stats > nobr {
  205.     display: none;
  206.   }
  207. `)