Search YouTube and More From Within Google

// ==UserScript==
// @name            Search YouTube and More From Within Google
// @namespace       lednerg
// @author          lednerg
// @license         MIT
// @description     Adds icons next to Google's search bar which let you search from other sites.
// @version         2023.4.22
// @include         /https?:\/\/(www\.)?google\.(com|(?:com?\.)?\w\w)\/.*/
// @run-at          document-end
// @supportURL      https://pastebin.com/D1PnSq6M
// ==/UserScript==

/* I am not providing any kind of help or support for this script at this time.
 * I've tested it for a week in Chrome and Firefox and it seems to be fine, but your mileage may vary.
 * If it stopped working, then Google probably changed something about their website some time after this was written.
 * EDIT April 22 2023: No longer using GM_AddStyle, which I hear doesn't work for Greasemonkey anymore. Also added a background for
 * the button container for whenever Google does their "Google doodle" things. The search form on the Google homepage is now centered. */

/* You can change the buttons as you like below. The only caveat is that the search terms need to be the very last part of the URL.
 * The domains are separate from the rest so that when there's no search query entered, the buttons will point to the domains.
 * I'm using favicons, which maybe isn't the best idea, but I don't feel like embedding images. That would work, though. */
const newButtonsList = [
    [ 'YouTube', 'https://www.youtube.com/', 'results?search_query=', 'https://www.youtube.com/favicon.ico'],
    [ 'YouTube Music', 'https://music.youtube.com/', 'search?q=', 'https://music.youtube.com/favicon.ico'],
    [ 'The Movie Database', 'https://www.themoviedb.org/', 'search?query=', 'https://www.themoviedb.org/favicon.ico'],
    [ 'Just Watch', 'https://www.justwatch.com/', 'us/search?q=', 'https://www.justwatch.com/favicon.ico'],
    [ 'Thesaurus', 'https://www.thesaurus.com/', 'browse/', 'https://www.thesaurus.com/assets/favicon-tcom-dae75822a91aa45e01d52041b4baf101.png'],
    [ 'Wolfram Alpha', 'https://www.wolframalpha.com/', 'input/?i=', 'https://www.wolframalpha.com/favicon.ico'],
    [ 'Bing', 'https://www.bing.com/', 'search?q=', 'https://www.bing.com/favicon.ico'],
    [ 'Twitter', 'https://twitter.com/', 'search?q=', 'https://www.twitter.com/favicon.ico']
]    /* [0] = Title,  [1] = Domain,  [2] = Search URL,  [3] = Image URL */

let searchForm = document.querySelector('*[name="q"]');
let searchTerms = searchForm.value;

if (searchForm) {
    searchForm.addEventListener('input', function(event) {
        searchTerms = event.target.value;
        letsRock(true);
    });
}

let newButtonsHTML = ''

function makeButtonsHTML() {
    newButtonsHTML = '<div class="customSearch">';
    for ( var i = 0; i < newButtonsList.length; i++ ) {
        newButtonsHTML = newButtonsHTML.concat( '<a title="', newButtonsList[i][0], '" class="customSearchItem" href="', newButtonsList[i][1] );
        if (searchTerms) { newButtonsHTML = newButtonsHTML.concat( newButtonsList[i][2], encodeURIComponent(searchTerms) ) }
        newButtonsHTML = newButtonsHTML.concat( '" target="_self"><span><img src="', newButtonsList[i][3], '" /></span></a>');
    }
    newButtonsHTML = newButtonsHTML.concat( '</div>' );
}

function letsRock(update) {
    var container = document.querySelector('.customSearch');
    if (!update && container ) { return }
    makeButtonsHTML();
    var insertHere = document.querySelector('button[aria-label="Search"]') || document.querySelector('button[aria-label="Google Search"]') || document.querySelector('div[aria-label="Search by image"]');
    /* First one is for most results pages such as All, News, Videos, Books, etc. Second one is for the Images results page. Third one is for Google's home page. */
    if (container) { container.remove() }
    insertHere.insertAdjacentHTML('afterend', newButtonsHTML);
}

const bodyColor = window.getComputedStyle(document.querySelector('body')).backgroundColor;

const buttonWidth = Math.ceil(newButtonsList.length / 2) * 16;

document.body.appendChild(document.createElement('style')).textContent = `
    .customSearch {
        position: relative;
        left: 10px;
        display: flex;
        flex-flow: column wrap;
        align-items: center;
        justify-content: space-around;
        gap: 4px;
        height: 44px;
        width: 0;
        padding: 0;
    }
    .customSearchItem:hover {
        filter: drop-shadow(1px 1px 1px #000)
            drop-shadow(0px 0px 2px #8b9ba1)
            drop-shadow(0px 0px 2px #8b9ba1)
            drop-shadow(0px 0px 2px #8b9ba1)
            drop-shadow(0px 0px 2px #8b9ba1);
    }
    .customSearchItem {
        display: flex;
        height: 18px;
        width: 18px;
        padding: 1px 5px;
        margin: 0px;
    }
    .customSearchItem svg,
    .customSearchItem img,
    .customSearchItem > span {
        height: 16px;
        width: 16px;
    }
    /* .minidiv = when search box is fixed to the top after scrolling down  */
    .minidiv .RNNXgb {
        margin-top: 10px !important;
        height: 32px !important;
    }
    .minidiv .customSearch {
        margin: -6px 0;
    }
    /* for Google.com home page */
    div[aria-label="Search by image"] + .customSearch {
        left: 20px;
    }
    /* centering on home page  */
    .o3j99.ikrT4e.om7nvf .A8SBwf[jscontroller="cnjECf"] {
        position: relative;
        left: -`+ buttonWidth +`px;
    }
    .o3j99.ikrT4e.om7nvf .FPdoLc.lJ9FBc {
        position: relative;
        left: `+ buttonWidth +`px;
    }
    /* for Google doodle underneath buttons  */
    .customSearch:before {
        z-index: -1;
        position: absolute;
        left: 0;
        content: "";
        background-color: `+ bodyColor +`;
        opacity: .8;
        width: `+ (buttonWidth * 2) +`px;
        height: 55px;
    }
    .minidiv .customSearch:before {
        opacity: 0;
    }
`;

letsRock();