Skip to content

Instantly share code, notes, and snippets.

@xaosaki
Forked from ryanhatfield/hide-slack-sidebar-icons
Last active November 23, 2020 19:47
Show Gist options
  • Save xaosaki/bcf99ce41a8e5e79ac7e1a6ecd5ddff1 to your computer and use it in GitHub Desktop.
Save xaosaki/bcf99ce41a8e5e79ac7e1a6ecd5ddff1 to your computer and use it in GitHub Desktop.
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
@stefandesu
Copy link

Worked perfectly for me, thanks!

@xaosaki
Copy link
Author

xaosaki commented Nov 17, 2020

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.

Copy link

ghost commented Nov 17, 2020

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?

@c133
Copy link

c133 commented Nov 18, 2020

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?

@P4Halbig
Copy link

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!!

@stefandesu
Copy link

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment