Whatsapp Web Privacy Mode

Add button and hotkey to hide contact names and avatars on web.whatsapp.com
换行
// ==UserScript==
// @name         Whatsapp Web Privacy Mode
// @namespace    graphen
// @version      3.3.1
// @description  Add button and hotkey to hide contact names and avatars on web.whatsapp.com
// @author       Graphen
// @match        https://web.whatsapp.com/
// @icon         https://i.imgur.com/LeZuNg7.png
// @grant        none
// ==/UserScript==

/* jshint esversion: 6 */
(function() {
    'use strict';
    var hidden = false;
    var defaultbkg = 'lightgrey';
    var prevName = '';

    waitForId('side').then(el => {
      //console.log(el);
    });
    function waitForId(id, nodeToObserve = document) {
      const el = document.getElementById(id);
      return el ?
        Promise.resolve(el) :
        new Promise(resolve => {
          new MutationObserver((mutations, observer) => {
            const el = document.getElementById(id);
            if (el) {
              // add F7 shortcut
              document.addEventListener("keydown", function(e) {
                  var keyCode = e.keyCode;
                  if(keyCode==118) {
                      toggleShowHide();
                  }
              }, false);
              // add Button
              addButton('Hide / F7', toggleShowHide);
              //console.log("WA Privacy: Button added.");
              observer.disconnect();
              resolve(el);
            }
          }).observe(nodeToObserve, {childList: true, subtree: true});
        });
    }

    function addButton(text, onclick, cssObj) {
        cssObj = cssObj || {position: 'absolute', top: '15px', left:'70px', 'z-index': 5000, 'font-weight':'bold', border:'black solid', 'border-radius':'10px',
                            padding:'4px', 'background-color': defaultbkg, 'min-width': '75px', 'box-shadow':'grey 3px 3px 0px 0px'};
        let button = document.createElement('button'), btnStyle = button.style;
      try{
        document.getElementById('app').appendChild(button);
      }
      catch(err){
        console.log("addButton: " + err);
      }
        button.innerHTML = text;
        button.onclick = onclick;
        button.classList = ['show-hide-btn unpressed'];

        button.onmouseover = function() {
            button.style["background-color"] = 'salmon';
        };
        button.onmouseout = function() {
            button.style["background-color"] = defaultbkg;
        };
        Object.keys(cssObj).forEach(key => btnStyle[key] = cssObj[key]);
        return button;
    }

    function toggleShowHide() {
        var btn = document.getElementsByClassName('show-hide-btn')[0];
        var panel = document.getElementById('pane-side');
        var chatname = document.querySelector('#main > header > div:nth-of-type(2) > div:nth-of-type(1) > div > span');
        var groupsubheadline = document.querySelector('#main > header > div:nth-of-type(2) > div:nth-of-type(2) > span');
        var partnerimage = document.querySelector('#main > header > div:nth-of-type(1) > div:nth-of-type(1) > img');
        var groupchatbubblenames = document.getElementsByClassName('_3FuDI');
        //console.log(btn);
        //console.log(panel);
        //console.log(chatname);
        //console.log(groupsubheadline);
        //console.log(partnerimage);
        //console.log(groupchatbubblenames);

        if (hidden) {
            // show
            //console.log("WA Privacy: Toggled show.");
            panel.setAttribute('style', 'filter:none');
            defaultbkg = 'lightgrey';
            btn.innerHTML = 'Hide / F7';
            btn.style.left = '70px';
            btn.style.top = '15px';
            btn.style["box-shadow"] = 'grey 3px 3px 0px 0px';
            try {
                // at start no chat is open
                if (chatname) {
                    chatname.innerHTML = prevName;
                    chatname.title = prevName;
                }
                // not every user/group has set an image
                if (partnerimage) {
                  partnerimage.setAttribute('style', 'filter:none;');
                }
                // subheadline for group chats
                if (groupsubheadline) {
                  groupsubheadline.setAttribute('style', 'display:block;');
                }
                // name above single message in group chat
                if (groupchatbubblenames) {
                  for (const bubble of groupchatbubblenames) {
                      bubble.setAttribute('style', 'filter:none;');
                  }
                }
            } catch(err) {
                console.log("toggleShow: " + err);
            }
            prevName = '';
        } else {
            // hide
            //console.log("WA Privacy: Toggled hide.");
            panel.setAttribute('style', 'filter:blur(10px);');
            defaultbkg = 'grey';
            btn.innerHTML = 'Show / F7';
            btn.style.left = '73px';
            btn.style.top = '18px';
            btn.style["box-shadow"] = '';
            try {
                // at start no chat is open
                if (chatname) {
                    prevName = chatname.innerHTML;
                    chatname.innerHTML = randomName();
                    chatname.title = chatname.innerHTML;
                }
                // not every user/group has set an image
                if (partnerimage) {
                    partnerimage.setAttribute('style', 'filter:blur(10px);');
                }
                // subheadline for group chats
                if (groupsubheadline) {
                    groupsubheadline.setAttribute('style', 'display:none;');
                }
                // name above single message in group chat
                if (groupchatbubblenames) {
                  for (const bubble of groupchatbubblenames) {
                      bubble.setAttribute('style', 'filter:blur(5px);');
                  }
                }
            } catch(err) {
                console.log("toggleHide: " + err);
            }
        }
        document.getElementsByClassName('show-hide-btn')[0].style["background-color"] = defaultbkg;
        hidden = !hidden;
    }
    function randomName() {
        var names = ['Grace Kelly', 'Nicolas Cage', 'Albert Einstein', 'Angus Young', 'Katy Perry', 'Leonardo DiCaprio', 'Cleopatra', 'Anonymous Pasta Lovers',
                     'Karl Lagerfeld', 'Holy Father', 'Homer Simpson', 'Barney Stinson', 'Walter White', 'Queen Victoria', 'Sheldon Cooper', 'Mahatma Gandhi'];
        return names[Math.floor(Math.random() * names.length)];
    }
})();
欢迎访问Greasy Fork镜像
