Hide Slack Sidebar Icons

hide-slack-sidebar-icons

#! /usr/bin/env bash
##############
##
## A script to inject a custom style into Slack that hides the new sidebar icons.
## This script has very little error catching or extra debug output
##
## Run at your own risk.
## Anything done here can be "uninstalled" by reinstalling Slack
##
## To run Slack in debug mode, run the following:
## export SLACK_DEVELOPER_MENU=true; open -a Slack
## With that, Slack will have a new Developer item under the View menu
##
##############

# directory with the app.asar file, default for OSX
# on linux, just search for the app.asar file
RESOURCE_DIR="/Applications/Slack.app/Contents/Resources/"

# location of the preload file
PRELOAD_FILE="$RESOURCE_DIR/app/dist/preload.bundle.js"

# this script will add an extra style element to the head tag
read -r -d '' SCRIPT <<'EOF'
​
document.addEventListener("DOMContentLoaded", function () {
  let tt__customCss = `
        .p-channel_sidebar__presence_icon.p-channel_sidebar__presence_icon--on-avatar {
          transform: translateX(-9px) translateY(-5px);
        }

        .p-channel_sidebar__mpim_counter {
          transform: scale(1.1) translateX(-5px) translateY(-2px);
        }

        .p-channel_sidebar__presence_icon.p-channel_sidebar__presence_icon--on-avatar::before {
          font-size: 20px;
          line-height: 15px;
        }

        span.p-channel_sidebar__mpim_avatars_mpim1.c-avatar {
          display: none;
        }

        .p-channel_sidebar__channel span.c-avatar {
          display: none;
        }

        .p-channel_sidebar__user_avatar--hide-presence .p-channel_sidebar__presence_icon--on-avatar {
          display: block;
          transform: scale(1.5) translateX(-3.5px) translateY(-9px);
        }
    `;
  var head = document.head;
  var iconStyle = document.createElement("style");
  iconStyle.appendChild(document.createTextNode(tt__customCss));
  head.appendChild(iconStyle);
});
EOF

# check for the npx command
if ! command -v "npx" &> /dev/null
then
  echo "npx command could not be found, install node https://nodejs.org/en/"
  exit
fi

# open resource dir; on linux, just search for the app.asar file
cd "$RESOURCE_DIR" || exit 04

# check for pre-existing app dir
if [ -d "app" ]
then
  echo "app dir alredy exists, skipping backup"
else
  # unpack asar resource
  npx asar extract app.asar app

  # move packaged asar, so electron reads from the app folder
  mv app.asar app.asar.bak
fi

#check to see if we've already added our script, there's better ways to do this I'm sure
if ! grep 'iconStyle' &> /dev/null < "$PRELOAD_FILE"
then
  echo "$SCRIPT" >> "$PRELOAD_FILE"
  echo "installed, close and reopen Slack if it's running"
else
  echo "iconStyle script already installed"
  exit 06
fi

Guide:

1. install node.js https://nodejs.org/en/ (Select LTS version) (Download and follow instructions)
2. open terminal (call spotlight write ter and you will see autocomplete).
3. write in terminal touch slack.sh (enter)
4. write open . (enter) -> will open finder
5. open file slack.sh with any text editor.
6. paste body of this gist there (save)
7. back in terminal and write sudo bash slack.sh (enter)
8. it will ask you about password, enter password and enter
9. Profit!

You can restore all back any time, just reinstall Slack.

Thanks @xaosaki, this worked for me.

However I noticed that the result added alot of space between each item in the side bar, thus making my side bar much longer than usual. Is there a way to tweak this to shrink it again?

Guide:

1. install node.js https://nodejs.org/en/ (Select LTS version) (Download and follow instructions)
2. open terminal (call spotlight write ter and you will see autocomplete).
3. write in terminal touch slack.sh (enter)
4. write open . (enter) -> will open finder
5. open file slack.sh with any text editor.
6. paste body of this gist there (save)
7. back in terminal and write sudo bash slack.sh (enter)
8. it will ask you about password, enter password and enter
9. Profit!

You can restore all back any time, just reinstall Slack.

Does anyone know how to do this but on Windows?

THANK YOU, and to all of the devs who hacked this so I didn't have to. I really tried to give the new UI a chance, but the avatars make the sidebar too busy; it's an accessibility issue for some of us more neuroatypical types. At least the MacOS users in my co. can deal with this, and there's enough info in the script to tweak Linux AFAICT; Now to cobble together a technique for Windows and we're golden. KUDOS!!

@c133 I found this gist through another one: https://gist.github.com/joshua-turner/9310780782f6526fc8717d6798a4d4b9

The way shown there should work on Windows, but it won't persist. If you can find out how to edit preload.bundle.js for Windows Slack, you could adjust the script above.