Greasy Fork is available in English.

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. `)