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

@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