Greasy Fork is available in English.

"Search with Reddit / HN" on Google

Adds a button to search Reddit posts with Google (inspired from Mario Ortiz)

  1. // ==UserScript==
  2. // @name "Search with Reddit / HN" on Google
  3. // @version 1.1
  4. // @description Adds a button to search Reddit posts with Google (inspired from Mario Ortiz)
  5. // @author Mael Primet
  6. // @include http*://www.google.*/search*
  7. // @include http*://google.*/search*
  8. // @icon https://www.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png
  9. // @license MIT
  10. // @run-at document-end
  11. // @namespace https://greasyfork.org/users/1366101
  12. // ==/UserScript==
  13.  
  14. const queryRegex = /q=[^&]+/g;
  15. const siteRegex = /\+site(?:%3A|\:).+\.[^&+]+/g;
  16. const sitePrefix = '+site%3A';
  17.  
  18. (function () {
  19. // Creating the 'Search on Reddit' button
  20. const container = document.createElement('div');
  21. container.className = "search-btns-container";
  22. const listDiv = document.createElement('div');
  23. listDiv.className = "serach-btns-list";
  24. container.appendChild(listDiv);
  25.  
  26. // Insert the button after the .logo element
  27. const insertEl = document.querySelector('.main');
  28. insertEl.parentNode.insertBefore(container, insertEl);
  29.  
  30. // Add external CSS styling via <style> element
  31. const style = document.createElement('style');
  32. style.innerHTML = `
  33. .search-btns-container {
  34. display:flex;
  35. flex-direction:column;
  36. align-items:center;
  37. padding-top: 10px;
  38. }
  39. a.search-btn {
  40. display: inline-block;
  41. border-radius: 8px;
  42. padding: 10px 20px;
  43. color: white;
  44. text-decoration: none;
  45. font-family: sans-serif;
  46. font-size: 14px;
  47. font-weight: bold;
  48. cursor: pointer;
  49. margin: 0 5px;
  50. box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  51. }
  52.  
  53. a.search-btn:hover {
  54. opacity: 0.8;
  55. text-decoration: underline;
  56. }
  57. `;
  58. document.head.appendChild(style);
  59.  
  60. const links = [
  61. {
  62. name: "Reddit",
  63. icon: "https://www.redditstatic.com/desktop2x/img/favicon/apple-icon-60x60.png",
  64. site: "reddit.com",
  65. color: "#0057FF",
  66. },
  67. {
  68. name: "Hacker News",
  69. icon: "https://news.ycombinator.com/y18.svg",
  70. site: "news.ycombinator.com",
  71. color: "#FF5700",
  72. }
  73. ];
  74.  
  75. links.forEach((siteLink) => {
  76. const link = document.createElement('a');
  77. link.className = 'search-btn';
  78. link.style.cssText = `background-color:${siteLink.color}`;
  79.  
  80. //const icon = document.createElement('img');
  81. //icon.style.cssText = 'height:16px;width:16px;margin-right:8px;display:inline-block;';
  82. //icon.src = siteLink.icon;
  83. //link.appendChild(icon);
  84.  
  85. link.appendChild(document.createTextNode('Search on ' + siteLink.name));
  86. link.href = window.location.href.replace(queryRegex, (match) => {
  87. return match.search(siteRegex) >= 0 ? match.replace(siteRegex, sitePrefix + siteLink.site) : match + sitePrefix + siteLink.site;
  88. });
  89.  
  90. // Add the icon and the text to the link
  91. listDiv.appendChild(link);
  92. });
  93. })();