Greasy Fork镜像

Since FB changed the UI of Messenger, it stopped working.

Here is my solution:

$(document).ready(function() {

    /*Run after the sidebar loaded*/
    var keepGettingConvThreads = setInterval(
        ()=>{
            if(document.querySelector(".g0mhvs5p")){/*if the sidebar exists*/

                /*Stop the loop*/
                clearInterval(keepGettingConvThreads);

                /*get the sidebar*/
                var convThreads = document.querySelector(".g0mhvs5p");

                /*let it looks like [<] in the beginning*/
                $('body').append('');

                /*The appearance of the switch. The switch covers the head icon of the chat, and auto-hide itself.*/
                styleTagPlugIn(
                    "#showHideButton",
                    {
                        "background-color":"#000",
                        "color":"#FFF",
                        "position":"fixed",
                        "top":0,
                        "left": (convThreads.offsetWidth + "px"),
                        "z-index":1000,
                        "border-style":"solid",
                        "border-width":"10px",
                        "border-color":"#000",
                        "font-size":"40px",
                        "width":"64px",
                        "height":"64px",
                        "opacity": 0,
                        "transition": "opacity .5s"
                    }
                );

                /*And the switch appear when the mouse hovering on it.*/
                styleTagPlugIn("#showHideButton:hover", {"opacity":1});

                /*   [<] for hiding the sidebar <--> [>] for showing the sidebar    */
                $("#showHideButton").click(function(){
                    var convThreads = document.querySelector(".g0mhvs5p");
                    if(convThreads.style.display == 'none'){
                        convThreads.style.display = 'block';
                        showHideButton.value = "<";
                        showHideButton.style["left"] = convThreads.offsetWidth + "px";
                    }else {
                        convThreads.style.display = 'none';
                        showHideButton.value = ">";
                        showHideButton.style["left"] = 0;
                    }
                });

            }
        }, 500
    );
});

function styleTagPlugIn(query, list){
    var element = document.createElement("style");
    document.body.appendChild(element);
    element.innerText += query + '{\n';
    for(var key in list){
        element.innerText += "\t" + key + ": " + list[key] + ";\n";
    }
    element.innerText += '}'
}

Ahh yeah, it's broken again. New solution with UI improvement:

// ==UserScript==
// @name Toggle Messenger Sidebar [Modified]
// @namespace http://jamesswandale.com/
// @version 0.2.1
// @description Button to hide messengers list of conversations
// @match https://www.messenger.com/*
// @copyright 2015+, James Swandale
// @require http://code.jquery.com/jquery-latest.js
// ==/UserScript==

$(document).ready(function() {

    /*Run after the sidebar loaded*/
    var keepGettingConvThreads = setInterval(
        ()=>{
            if(document.querySelector('[role="navigation"]')){/*if the sidebar exists*/

                /*Stop the loop*/
                clearInterval(keepGettingConvThreads);

                /*get the sidebar*/
                var convThreads = document.querySelector('[role="navigation"]');

                /*let it looks like [<] in the beginning*/
                $('body').append('<input type="button" value="<" id="showHideButton" style="">');

                /*The appearance of the switch. The switch auto-hide itself.*/
                styleTagPlugIn(
                    "#showHideButton",
                    {
                        "background-color":"#000",
                        "color":"#FFF",
                        "position":"fixed",
                        "top":0,
                        //"left": (convThreads.offsetWidth + "px"),
                        "left": "-60px",
                        "z-index":0,
                        "border-style":"solid",
                        "border-width":"10px",
                        "border-color":"#000",
                        "font-size":"40px",
                        //"width":"64px",
                        "width":"64px",
                        //"height":"64px",
                        "height":"100vh",
                        "opacity": 0,
                        //"transition": "opacity .5s"
                        "transition": "opacity .5s, left .5s"
                    }
                );

                /*And the switch appear when the mouse hovering on it.*/
                styleTagPlugIn("#showHideButton:hover", {"opacity":1, "left": "0px"});

                /*   [<] for hiding the sidebar <--> [>] for showing the sidebar    */
                $("#showHideButton").click(function(){
                    var convThreads = document.querySelector('[role="navigation"]');
                    if(convThreads.style.display == 'none'){
                        convThreads.style.display = 'block';
                        showHideButton.value = "<";
                        //showHideButton.style["left"] = convThreads.offsetWidth + "px";
                    }else {
                        convThreads.style.display = 'none';
                        showHideButton.value = ">";
                        //showHideButton.style["left"] = 0;
                    }
                });

            }
        }, 500
    );
});

function styleTagPlugIn(query, list){
    var element = document.createElement("style");
    document.body.appendChild(element);
    element.innerText += query + '{\n';
    for(var key in list){
        element.innerText += "\t" + key + ": " + list[key] + ";\n";
    }
    element.innerText += '}'
}