Stop GIFs on messenger.com • TBlog

Intro

I’m using mainly messenger.com to chat with my friends, I like sending gifs, it’s fun, but when those gifs keep playing over and over again it’s very distracting and annoying. Ofcourse, one solution to that is to close whole tab or just remove the gif, but these solutions were not ideal for me. I decided to write simple script that will convert all gifs on messenger.com into playable gifs.

Solution

Because I don’t want to write whole extension(for chrome in my case), I decided to use tampermonkey. Tampermonkey is browser extension(or greasemonkey for FF) that allows you to write js script that will be injected every time you load page. Like that, you can easily change page behaviour or design. There are many scripts available on greasyfork.org, none of them unfortunately is disabling gifs on messenger.com, but that’s no problem, I can build it :].

Here is the script:

// ==UserScript==
// @name         Messenger Stop GIFs
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Stop annoying gifs. Adds button to messenger.com, when clicked converts all gifs into playable gifs.
// @author       Tomas Bouda
// @match        https://www.messenger.com/*
// @grant       GM_getResourceText
// @grant       GM_addStyle
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
// @require https://gist.githubusercontent.com/TomasBouda/f091e3a7839cf561d5f007d2b0326c8b/raw/4d3e161c5ca3b98a2cc52b030982c36fc763c97e/gifffer.js
// @resource buttonCSS https://gist.githubusercontent.com/TomasBouda/ce7f6e86015c271acdb32ff71c1ec474/raw/00dc5e2029cff090f8023bbae7feb26e9edfb236/btn.css
// ==/UserScript==

(function() {
    'use strict';

    var newCSS = GM_getResourceText ("buttonCSS");
    GM_addStyle (newCSS);

    $('body').append('<button class="btn btn-outline-primary btn-sm" id="playableGifs">Stop GIF</button>');
    $("#playableGifs").css({"position":"fixed", "top":20, "left":140, "z-index":1000});
    $('#playableGifs').click(function(){
        $('.k4urcfbm.bixrwtb6.datstx6m.q9uorilb').each(function(){
            var src = $(this).attr('src');
            $(this).removeAttr('src');
            $(this).attr('data-gifffer', src);
        });

        Gifffer();
    });
})();

// ==UserScript==

// @name Messenger Stop GIFs

// @namespace http://tampermonkey.net/

// @version 0.1

// @description Stop annoying gifs. Adds button to messenger.com, when clicked converts all gifs into playable gifs.

// @author Tomas Bouda

// @match https://www.messenger.com/*

// @grant GM_getResourceText

// @grant GM_addStyle

// @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

// @require https://gist.githubusercontent.com/TomasBouda/f091e3a7839cf561d5f007d2b0326c8b/raw/4d3e161c5ca3b98a2cc52b030982c36fc763c97e/gifffer.js

// @resource buttonCSS https://gist.githubusercontent.com/TomasBouda/ce7f6e86015c271acdb32ff71c1ec474/raw/00dc5e2029cff090f8023bbae7feb26e9edfb236/btn.css

// ==/UserScript==

(function() {

'use strict';

var newCSS = GM_getResourceText ("buttonCSS");

GM_addStyle (newCSS);

$('body').append('<button class="btn btn-outline-primary btn-sm" id="playableGifs">Stop GIF</button>');

$("#playableGifs").css({"position":"fixed", "top":20, "left":140, "z-index":1000});

$('#playableGifs').click(function(){

$('.k4urcfbm.bixrwtb6.datstx6m.q9uorilb').each(function(){

var src = $(this).attr('src');

$(this).removeAttr('src');

$(this).attr('data-gifffer', src);

});

Gifffer();

});

})();

I took great library gifffer, that allows me just what I want – prevent autoplaying of animated gifs. You can see in the script that I require that library from my gist, also piece of bootstrap so I can use btn classes. This is little bit ugly but it works for now. If you are gonna use this script, change these gist links to your own!

The way I stop the gifs is that I add button to messenger.com page and I hook function to it’s click event. That function loops trough each gif, changes it’s attributes(src to data-gifffer, see usage for more info) and then calls Gifffer() function, that’s it.

Installation

To install Tampermonkey, just go to http://www.tampermonkey.net/ and click Download, it will automatically redirect your browser extension store, then click Add to Chrome, + Add to Firefox, … and tampermonkey is successfully installed. Once installed you will see little black icon in top right corner(in chrome and firefox), click it and select Create new script...

New tab will open. Now, copy my script above and paste it into tampermonkey editor you just opened, replacing all previous text. Press CTRL+S to save script. You\’re done!

Now whenever you open messenger.com, you should see litle number one 1 under tampermonkey icon, indicating that our script is running.

And ofcourse you should see Stop GIF button. Whenever you want to stop all annoying gifs just click that button and they will be converted into playable and stopped.

Ofcourse, even better would be if it worked without button, but that would require more work, because we would need to somehow detect, that user changed message thread and ensure DOM is loaded. If you know how to do that or you have other improovements, please leave a comment down bellow. Happy coding 😉