Better Google

Restore google search results to older style with green link below title instead of link above title. Just tweaks the CSS and does some dynamic JS reordering of the DIVs.

  1. // ==UserScript==
  2. // @name Better Google
  3. // @namespace google
  4. // @version 0.1.16.9
  5. // @description Restore google search results to older style with green link below title instead of link above title. Just tweaks the CSS and does some dynamic JS reordering of the DIVs.
  6. // @author aligo, adambh, tejaslodaya, drwonky, yut23
  7. // @license MIT
  8. // @homepageURL https://github.com/aligo/better-google
  9. // @match https://*.google.com/search?*
  10. // @include /^https?://(?:www|encrypted|ipv[46])\.google\.[^/]+/(?:$|[#?]|search|webhp)/
  11. // @grant none
  12. // @run-at document-start
  13. // ==/UserScript==
  14.  
  15. (function() {
  16. 'use strict';
  17.  
  18. var betterGoogleRow = function(el) {
  19. var tbwUpd = el.querySelectorAll('.TbwUpd, .HGLrXd');
  20. if (tbwUpd.length > 0) {
  21. /* Google does A/B testing on the search results page, so the
  22. * structure of the page is not always the same. This code
  23. * tries to find the link element in a few different ways.
  24. * If it can't find it, it just gives up and doesn't do
  25. * anything.
  26. */
  27. var selectors = [
  28. '.yuRUbf > a',
  29. '.yuRUbf > div > a',
  30. '.yuRUbf > div > span > a',
  31. ];
  32. for (const selector of selectors) {
  33. var linkEl = el.querySelector(selector);
  34. if (linkEl) {
  35. break;
  36. }
  37. }
  38. var addEl = linkEl.nextSibling;
  39. if (!addEl) {
  40. // try the parent's sibling, for the span case
  41. addEl = linkEl.parentElement.nextSibling;
  42. }
  43.  
  44. var betterAddEl = document.createElement('div');
  45. betterAddEl.className = 'btrAdd';
  46.  
  47. if (addEl) {
  48. // this loop moves the "More options" button into betterAddEl
  49. for (var i = 0; i < addEl.children.length; i++) {
  50. var _el = addEl.children[i];
  51. if (_el.className.includes('TbwUpd') || _el.className.includes('HGLrXd')) {
  52. continue;
  53. }
  54. betterAddEl.appendChild(_el);
  55. }
  56. } else {
  57. // entry isn't fully loaded yet
  58. betterAddEl.remove();
  59. return;
  60. }
  61.  
  62. var betterEl = document.createElement('div');
  63. betterEl.className = 'btrG';
  64. betterEl.appendChild(betterAddEl);
  65.  
  66. el.appendChild(betterEl);
  67.  
  68. var urlEl = document.createElement('a');
  69. urlEl.href = linkEl.href;
  70. urlEl.target = '_blank';
  71. urlEl.className = 'btrLink';
  72.  
  73. var urlCiteEl = document.createElement('cite');
  74. urlCiteEl.innerText = linkEl.href;
  75. urlCiteEl.className = 'iUh30 bc';
  76. urlEl.appendChild(urlCiteEl);
  77.  
  78.  
  79. var maxWidth = el.clientWidth - betterAddEl.offsetWidth - 10;
  80.  
  81. betterEl.insertBefore(urlEl, betterAddEl);
  82. if (urlEl.offsetWidth > maxWidth) {
  83. urlEl.style.width = maxWidth.toString() + 'px';
  84. }
  85.  
  86. var aboutResult = el.querySelectorAll('.csDOgf');
  87. if (aboutResult.length > 0) {
  88. betterEl.appendChild(aboutResult[0]);
  89. }
  90. tbwUpd.forEach(function(el) { el.remove() });
  91. linkEl.querySelector('br:first-child').remove();
  92. }
  93. }
  94.  
  95. var prevResultCount = 0;
  96. var bettered = false;
  97.  
  98. var runBetterGoogle = function() {
  99. if (prevResultCount != document.querySelectorAll('.g .yuRUbf').length) {
  100. document.querySelectorAll('.g .yuRUbf').forEach(betterGoogleRow);
  101. prevResultCount = document.querySelectorAll('.g .yuRUbf').length;
  102. }
  103. if ( !bettered ) {
  104. if ( MutationObserver != undefined ) {
  105. var searchEl = document.getElementById('rcnt');
  106. var observer = new MutationObserver(runBetterGoogle);
  107. observer.observe(searchEl, {childList: true, subtree: true});
  108. }
  109. bettered = true;
  110. }
  111. };
  112.  
  113. var prepareStyleSheet = function() {
  114. // if dark mode is enabled (either manually or by device default),
  115. // Google adds a meta tag to the document which we can check
  116. var link_color = '#006621';
  117. var meta_color_scheme = document.querySelector('meta[name="color-scheme"]');
  118. if (meta_color_scheme != undefined && meta_color_scheme.content.includes('dark')) {
  119. // use a lighter green in dark mode
  120. link_color = '#40965b';
  121. }
  122. var style = document.createElement('style');
  123. style.setAttribute('media', 'screen');
  124. style.appendChild(document.createTextNode(''));
  125. document.head.appendChild(style);
  126. style.sheet.insertRule(`:root { --btrG-link-color: ${link_color}; }`);
  127. style.sheet.insertRule('.btrG { word-break: normal; line-height: 18px; }');
  128. style.sheet.insertRule('.btrG .btrAdd { display: inline-block; vertical-align: top; line-height: 0; }');
  129. style.sheet.insertRule('.btrG .btrLink { display: inline-block; vertical-align: top; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none !important; color: var(--btrG-link-color); }');
  130. style.sheet.insertRule('.btrG .btrLink cite.iUh30 { color: var(--btrG-link-color); font-size: 16px; }');
  131. // remove extra space used for new multiline link info card
  132. style.sheet.insertRule('.yuRUbf h3.DKV0Md { margin-top: 0px; }');
  133. };
  134.  
  135. var checkElementThenRun = function(selector, func) {
  136. var el = document.querySelector(selector);
  137. if ( el == null ) {
  138. if (window.requestAnimationFrame != undefined) {
  139. window.requestAnimationFrame(function(){ checkElementThenRun(selector, func)});
  140. } else {
  141. document.addEventListener('readystatechange', function(e) {
  142. if (document.readyState == 'complete') {
  143. func();
  144. }
  145. });
  146. }
  147. } else {
  148. func();
  149. }
  150. }
  151.  
  152. checkElementThenRun('head', prepareStyleSheet);
  153. checkElementThenRun('#rcnt', runBetterGoogle);
  154. })();