☰

"Search with Reddit / HN" on Google

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

// ==UserScript==
// @name         "Search with Reddit / HN" on Google
// @version      1.1
// @description  Adds a button to search Reddit posts with Google (inspired from Mario Ortiz)
// @author       Mael Primet
// @include      http*://www.google.*/search*
// @include      http*://google.*/search*
// @icon         https://www.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png
// @license      MIT
// @run-at       document-end
// @namespace https://greasyfork.org/users/1366101
// ==/UserScript==

const queryRegex = /q=[^&]+/g;
const siteRegex = /\+site(?:%3A|\:).+\.[^&+]+/g;
const sitePrefix = '+site%3A';

(function () {
 // Creating the 'Search on Reddit' button
  const container = document.createElement('div');
  container.className = "search-btns-container";
  const listDiv = document.createElement('div');
  listDiv.className = "serach-btns-list";
  container.appendChild(listDiv);

  // Insert the button after the .logo element
  const insertEl = document.querySelector('.main');
  insertEl.parentNode.insertBefore(container, insertEl);

  // Add external CSS styling via <style> element
  const style = document.createElement('style');
  style.innerHTML = `
    .search-btns-container {
      display:flex;
      flex-direction:column;
      align-items:center;
      padding-top: 10px;
    }
    a.search-btn {
      display: inline-block;
      border-radius: 8px;
      padding: 10px 20px;
      color: white;
      text-decoration: none;
      font-family: sans-serif;
      font-size: 14px;
      font-weight: bold;
      cursor: pointer;
      margin: 0 5px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    a.search-btn:hover {
      opacity: 0.8;
      text-decoration: underline;
    }
  `;
  document.head.appendChild(style);

  const links = [
    {
      name: "Reddit",
      icon: "https://www.redditstatic.com/desktop2x/img/favicon/apple-icon-60x60.png",
      site: "reddit.com",
      color: "#0057FF",
    },
    {
      name: "Hacker News",
      icon: "https://news.ycombinator.com/y18.svg",
      site: "news.ycombinator.com",
      color: "#FF5700",
    }
  ];

  links.forEach((siteLink) => {
    const link = document.createElement('a');
    link.className = 'search-btn';
    link.style.cssText = `background-color:${siteLink.color}`;

    //const icon = document.createElement('img');
    //icon.style.cssText = 'height:16px;width:16px;margin-right:8px;display:inline-block;';
    //icon.src = siteLink.icon;
    //link.appendChild(icon);

    link.appendChild(document.createTextNode('Search on ' + siteLink.name));
    link.href = window.location.href.replace(queryRegex, (match) => {
        return match.search(siteRegex) >= 0 ? match.replace(siteRegex, sitePrefix + siteLink.site) : match + sitePrefix + siteLink.site;
    });

    // Add the icon and the text to the link
    listDiv.appendChild(link);
  });
})();