Ryan KubikBlogTwitterGames

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.


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.


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/*
// @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");

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