Hide Elements Over Games on Itch.io with Tampermonkey

May 18, 2023

3 min read

Itch.io presents a lot of information on its game pages in the upper right corner. Often, these elements can cover up a game and interfere with playing.

#Prior Work

NextLevelBanana made a FireFox extension that hides these elements called itchCleanScreen. It finds the user_tools element on the page and sets its visibility to hidden.

#Tampermonkey

I wanted this feature in Chrome, and am a fan of using Tampermonkey to make little scripts like this. I talk a bit more in depth about Tampermonkey in a previous post.

I took NextLevelBanana's original line of code to hide the user_tools element, and added a new button that lets you toggle the information on screen.

#Results

Here it is the script in action:

Here is the Tampermonkey userscript that creates this toggle button.

// ==UserScript==
// @name         Toggle Itch.io User Tools
// @namespace    https://ryankubik.com/
// @version      1.0
// @description  Hide the user tools on itch.io game pages
// @author       Ryan Kubik
// @match        https://*.itch.io/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function () {
  "use strict";
  window.onload = () => {
    let areToolsVisible = true;
    const userToolsElement = document.getElementById("user_tools");

    const hideButton = document.createElement("button");
    hideButton.style.visibility = "visible";
    hideButton.innerText = "👁️";
    hideButton.className = "action_btn";
    hideButton.onclick = function () {
      areToolsVisible = !areToolsVisible;

      if (areToolsVisible) {
        userToolsElement.style.visibility = "visible";
        hideButton.innerText = "👁️";
      } else {
        userToolsElement.style.visibility = "hidden";
        hideButton.innerText = "🙈";
      }
    };

    const hideButtonLi = document.createElement("li");
    hideButtonLi.appendChild(hideButton);

    userToolsElement.prepend(hideButtonLi);
  };
})();

Here's Tampermonkey's FAQ on how to install userscripts. I just go with the copy and paste route mentioned here.