Tampermonkey userscript to display a list with the BitMEX trollbox users that you muted

Mutelist.js

// ==UserScript==
// @name         BitMEX Trollbox Mutelist
// @namespace    https://bitmex.com/
// @version      0.1
// @description  Show and edit your BitMEX trollbox mutelist (muted users)
// @author       I love Ketchup (contact me in the BitMEX trollbox)
// @homepage     userinfo.servehttp.com
// @homepageURL  userinfo.servehttp.com
// @website      userinfo.servehttp.com
// @source       userinfo.servehttp.com
// @supportURL   userinfo.servehttp.com
// @match        https://www.bitmex.com/*
// @grant        none
// @require      https://code.jquery.com/jquery-3.4.1.min.js
// ==/UserScript==

// Get 10% discount on BitMEX fees by using this link: https://www.bitmex.com/register/Yq1b9D

(function() {
    'use strict';
    let mutedUsers = [];

    const insertMutedlistButton = () => {
        $('.popUpChat .widget-controls .openIcon').before('<i id="ketchup_mutedbutton" class="fa fa-ban"></i>');
        $('#ketchup_mutedbutton' ).click(function() {
            //showMutedList();
            showMutedList();
        });
    };


    const showMutedList = () => {
        $('.chatInput').after('<span id="ketchup_mutedlistwidget" class="emojiPicker"><div class="emojiPickerTabs"><span class="">Muted Users (' + mutedUsers.length + ')</span><span id="ketchup_mutedlistwidgetclose" class="close emojiPickerEmoji">✖️</span></div><span id="ketchup_mutedlistsection" class="emojiPickerBody webkit-scrollbars"></span></span>')

        $('#ketchup_mutedlistsection').append('<div class="body"><div class="chatWidget"><div id="ketchup_mutedlist" class="chats resizesensor-wrapper"></div></div></div>');

        for (var i = 0; i < mutedUsers.length; i++) {
            $('#ketchup_mutedlist').append('<div class="chatSection" style="border-color: rgb(242, 157, 157);"><span class="chatMessage showUsername"><span class="userName">' + mutedUsers[i] + '</span><a class="user" title=""><span class="mute unmute" data-username="' + mutedUsers[i] + '" style="background: rgb(157, 241, 242);">Unmute</span></a></span></div>');
        }

        $('#ketchup_mutedlistwidgetclose').click(function() {
            $('#ketchup_mutedlistwidget').remove();
        });

        applyUnmuteClickListener();

    };

    // Apply click listener to the unmute buttons
    const applyUnmuteClickListener = () => {
        // Unmute a user. We could do this
        // by directly sending a request to the
        // REST api but that would require more
        // privileges for the Tampermonkey script.
        // Instead we paste the unmute command into
        // the trollbox and press ENTER...
        $('.mute.unmute').click(function() {
            $('.chatInput').val('/unmute ' + $(this).attr("data-username") );
            $(".chatInput").focus();

            // This just doesn't work because of ReactJS
            //$('.chatInput').trigger('input');

            // This does work, it "Simply" triggers the input event
            let input = document.getElementsByClassName("chatInput")[0];

            let event = new Event('input', { bubbles: true });
            event.simulated = true;
            let tracker = input._valueTracker;
            if (tracker) {
                tracker.setValue("some random shit");
            }
            input.dispatchEvent(event);

            // This doesn't work thanks to ReactJS
            //$('.chatInput').trigger("keydown", {which: 50, keyCode: 13});

            // This doesn't work thanks to a Chromium bug
            //var evt = new KeyboardEvent('keydown', { bubbles : true, keyCode : 13, which : 13 });

            // Workaround for the Chromium bug
            var evt = new KeyboardEvent('keydown', { bubbles : true });
            Object.defineProperty(evt, 'keyCode', {
                get : function() {
                    return 13;
                }
            });
            Object.defineProperty(evt, 'which', {
                get : function() {
                    return 13;
                }
            });

            let tracker1 = input._valueTracker;
            if (tracker1) {
                tracker1.setValue("some shit");
            }
            input.dispatchEvent(evt);

        });
    };

    Array.prototype.diff = function(a) {
        return this.filter(function(i) {return a.indexOf(i) < 0;});
    };

    const addRemoveMutedUser = (newMutedUsers) => {
        if ( $('#ketchup_mutedlistsection').length ){
            // remove a muted user
            if (mutedUsers.length > newMutedUsers.length){
                let user = mutedUsers.diff( newMutedUsers )[0];
                //$('.userName:contains("' + user + '")')
                $('.chatSection:contains("' + user + '")').remove();
            }
            // add a muted user
            else if (mutedUsers.length < newMutedUsers.length){
                let user = newMutedUsers.diff( mutedUsers )[0];
                $('#ketchup_mutedlist').append('<div class="chatSection" style="border-color: rgb(242, 157, 157);"><span class="chatMessage showUsername"><span class="userName">' + user + '</span><a class="user" title=""><span class="mute unmute" data-username="' + user + '" style="background: rgb(157, 241, 242);">Unmute</span></a></span></div>');
                applyUnmuteClickListener();
            }
        }
    };

    // We could query the rest api endpoint directly but that
    // would require special privileges in tampermonkey.
    // We listen to the original request instead.
    (function(open) {
        XMLHttpRequest.prototype.open = function() {
            this.addEventListener("readystatechange", function() {

                if (this.readyState == 4 && this.status == 200 && (this.responseURL == 'https://www.bitmex.com/api/v1/userreport/muted' || this.responseURL == 'https://www.bitmex.com/api/v1/userreport/muteUser' )){
                    var reader = new FileReader();
                    reader.addEventListener("loadend", function() {
                        let newMutedUsers = JSON.parse(reader.result);
                        addRemoveMutedUser(newMutedUsers);
                        mutedUsers = newMutedUsers;
                    });
                    reader.readAsText(this.response);
                }
            }, false);

            open.apply(this, arguments);
        };
    })(XMLHttpRequest.prototype.open);

    // Wait for the page to load completely
    $(document).ready(function() {
        // Wait for the page to REALLY load completely
        setTimeout(function() {
            insertMutedlistButton();
        }, 10000);
    });
})();

The script adds an icon to the top bar of the trollbox. If clicked a list with the users you muted opens in the bottom of the trollbox, together with unmute buttons.

See screenshot here

Tested with Chrome, Opera and Firefox.

To make it work in Firefox you have to go to about:config and change the following two settings like this:
security.csp.enable False
security.csp.experimentalEnabled True

Installation:

1. Install Tampermonkey (available for Chrome, Microsoft Edge, Safari, Opera Next, and Firefox)
Go to https://www.tampermonkey.net
Click the download button, this will redirect you to the according addon page for your browser. Click the install button.

2. Install the userscript
Click on the new Tampermonkey icon in your browser, then click "Create a new script".
A blank script template will open. Replace everything in it with the userscript above (copy and paste)
click on file, save
refresh the bitmex.com page and wait 10 seconds

3. Tired of BitMEX fees?
Get 10% discount on BitMEX fees by using this link to register