jan jongerden

Removing a div with Greasemonkey

To get rid of minor annoyances in your favorite websites, you can use Greasemonkey to tweak html where needed. The hide image and ALT buttons on Mastodon images are such an annoyance - I rarely need these buttons, but they do interfere with images. Text in images may become unreadable, like in the messages from inspirational Skeletor: Skeletor image with unreadable text

greasemonkey

Greasemonkey is an add-on for Firefox that allows a user to add custom behaviour to pages by creating scripts that run on page load and can modify the html, css or javascript on a page. For Chrome Tampermonkey will do the same. To get Greasemonkey running, get it here and restart your browser. You will now see a little monkey head in the top right corner of your browser. You can install the script below by opening this link to the script in your browser. Alternatively you can click the monkey's head and choose New user script.... Fill out the required fields and then paste the script content below in the edit window (by default pasting is disabled in the editor, so you may have to enable this first).

The Greasemonkey script that will hide the buttons: 
// ==UserScript== 
// @name         Mastodon Image Liberator 
// @namespace    janjongerden.nl 
// @version      1.0 
// @description  Hide the buttons on top of images 
// @author       Jan Jongerden 
// @include      https://mas.to/* 
// @grant        none 
// ==/UserScript== 
 
const cleanButtons = () => { 
    const hideButtons = document.querySelectorAll('.media-gallery__actions__pill'); 
 
    hideButtons.forEach(element => { 
        element.style.display = 'none'; 
    }); 
 
    const altButtons = document.querySelectorAll('.media-gallery__item__badges'); 
 
    altButtons.forEach(element => { 
        element.style.bottom = '-9px'; 
    }); 
}; 
 
var repeater = setInterval(cleanButtons, 1000);
The script is run on page load, for all urls starting with https://mas.to/ and hides the buttons. The hide image button is removed completely and the ALT button is only pushed down a bit, as I do find it useful occasionally. The procedure is repeated every second, as new images are loaded on the fly as you scroll down your message feed. Of all Greasemonkey annotations in the header, the most interesting part is the @include, which states on which pages the script should run. If your home is a different Mastodon instance, you should adjust this accordingly. You can check the API reference to learn more about the other tags. The syntax of the body of the user script is just plain javascript.

When installed, the image is cleaned up, and Skeletor's piece of wisdom can be enjoyed: Skeletor image with readable text

the mobile story

For mobile a slightly different approach is needed: the Greasemonkey add-on is not yet available for Firefox on Android as far as I can tell. However, there is an alternative extension, the Unified Script Injector (USI). Even though the extension claims to have only limited support for Greasemonkey scripts, it did the job for this simple script. Once you have installed the extension, you can add new user scripts by going to the FireFox menu, open Extensions -> USI, choose 'create new userscript' and paste the content of the user script. I'm sure similar solutions are available for other mobile browsers, but I haven't tried this myself.

caveats

Greasemonkey scripts are inherently fragile as small changes in the target page could break your script. When a css class is renamed or the html structure is changed, you may have to update the logic in your script. Another issue is modifying elements that accidentally match your filter, like removing other buttons with the same css class, which could break the layout or functionality of the page.

html hacks

related blogs: