Steam: add Youtube trailer link

Adds a link to search for the game's trailer on Youtube

< Feedback on Steam: add Youtube trailer link

Review: Good - script works

§
Posted: 2025-04-15

Script works, but causes bugs with SteamDB extension, because it creates another .apphub_OtherSiteInfo. It's better to either add Youtube trailer button to the existing .apphub_OtherSiteInfo, or add div with a class name other than "apphub_OtherSiteInfo" and add styles manualy to avoid conflict with extension

§
Posted: 2025-04-15

I did the second variant:

// ==UserScript==
// @name          Steam: add Youtube trailer link
// @include       http://store.steampowered.com/app/*
// @include       https://store.steampowered.com/app/*
// @description   Adds a link to search for the trailer on Youtube after the app title
// @version       1.0.2
// @author        wOxxOm
// @namespace     wOxxOm.scripts
// @license       MIT License
// @grant         none
// @run-at        document-start
// @require       https://greasyfork.org/scripts/12228/code/setMutationHandler.js
// ==/UserScript==

var css = "\
.apphub_YTTrailerButton{\
    position: relative;\
    float: right;\
}\
}"
document.body.appendChild(document.createElement('style')).innerHTML = css;

setMutationHandler(document, '.apphub_AppName', function(nodes) {

    var yt = document.createElement('div');
    var link = 'https://www.youtube.com/results?search_query=' + nodes[0].textContent.replace(' ','+') + '+trailer';
    nodes[0].parentNode.insertBefore(yt, nodes[0]);
    yt.outerHTML = 
      '<div class="apphub_YTTrailerButton" style="margin-right:1em">\
          <a class="btnv6_blue_hoverfade btn_medium" href="' + link + '">\
              <span>Trailer on Youtube</span>\
          </a>\
       </div>';

    this.disconnect();
  });

Post reply

Sign in to post a reply.