Raw Source Toggle Dropdown

• Minified Source

deltaDelete / YouTubeNewTabSearch

// ==UserScript==
// @name         YouTubeNewTabSearch
// @namespace    https://openuserjs.org/users/deltaDelete
// @include      https://www.youtube.com/*
// @version      0.7
// @description  Open search in new tab
// @author       deltaDelete
// @copyright    2023, deltaDelete (https://openuserjs.org/users/deltaDelete)
// @license      MIT
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant        GM_addStyle
// @grant        GM_openInTab
// @grant        window.focus
// @run-at       document-idle
// ==/UserScript==

const localizedString = {
  'ru': 'Поиск в новой вкладке',
  'en': 'Search in new tab',
  'en-GB': 'Search in new tab',
  'en-US': 'Search in new tab'
};

var isExecuted;
const styles = `<style>
#new-tab-search:hover {
    background-color: var(--yt-spec-raised-background);
}
#new-tab-search {
    color: var(--yt-spec-text-primary);
    height: inherit;
    font-weight: 84;
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-self: left;
    justify-content: center;
    align-items: center;
    background: var(--yt-spec-general-background-a);
    width: 4.25rem;
    border-radius: 100px;
    margin-left: 1rem;
    aspect-ratio: 1/1;
}
</style>`;

const popup = `
<tp-yt-paper-tooltip fit-to-visible-bounds offset="4" role="tooltip" tabindex="-1" style="inset: 56px auto auto 100px; padding: 10px;">
  <!--css-build:shady-->
    `+ localizedString[navigator.language] + `
</tp-yt-paper-tooltip>
`;


const btn = `
<a id="new-tab-search" class="style-scope ytd-searchbox">
  <span class="material-icons">
    open_in_new
  </span>
</a>
`;

$("head").append('<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">');
$("head").append(styles);

waitForKeyElements(
    "#search-icon-legacy",
    () => {
        onPageLoad()
    }
);

function newTabSearch() {
    var searchQuery = encodeURIComponent($('input#search').val());
    console.log(searchQuery+' is okay');
    window.open('https://www.youtube.com/results?search_query='+searchQuery, '_blank');
}

function focusSearch() {
    $('#search').focus();
}

function onPageLoad() {
    $(btn).insertAfter("#search-icon-legacy");
    $('#new-tab-search').click(newTabSearch);
    $('#new-tab-search').append(popup);
}

function KeyPress(e) {
    var evtoobj = window.event? event : e;
    if (evtoobj.ctrlKey && evtoobj.keyCode == 190) {
        newTabSearch();
    }
    if (evtoobj.keyCode == 191) {
        focusSearch();
    }
}

document.onkeydown = KeyPress;