Get rid of Slack Quick switch / Jump to widget

BYEQUICKSWITCHER.md

These instructions will help you get rid of the Slack quick-switcher on macOS. Slack 4.0.0 introduces a different packing mechanism which adds some steps. But both sets of steps will use the following JavaScript snippet:

document.addEventListener("DOMContentLoaded", function() {
  let customCustomCSS = `
  div.p-channel_sidebar__navigation_bar {
    display: none;
  }
  `
  
  let s = document.createElement('style');
  s.type = 'text/css';
  s.innerHTML = customCustomCSS;
  document.head.appendChild(s);
});

Slack < 4.0.0

1. Close Slack
2. Edit /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js
3. Paste the JavaScript snippet from above on a new line at the very bottom
4. Start Slack and enjoy a Quick switcher-free sidebar menu!

Slack => 4.0.0

1. Close Slack
2. Install NodeJS if you don't have it already (brew install node)
3. Install asar package globally: npm install -g asar
4. Unpack the code with: npx asar e /Applications/Slack.app/Contents/Resources/app.asar /Applications/Slack.app/Contents/Resources/app.asar.unpacked
5. Now open /Applications/Slack.app/Contents/Resources/app.asar.unpacked/dist/ssb-interop.bundle.js
6. Paste the JavaScript snippet from above on a new line at the very bottom
7. Save the file and repack it with: npx asar p /Applications/Slack.app/Contents/Resources/app.asar.unpacked /Applications/Slack.app/Contents/Resources/app.asar
8. Start Slack and enjoy a Quick switcher-free sidebar menu!

It looks like they now pack the asar file differently. I updated the gist and added some separate steps for 4.0.0 to unpack, edit the file, and repack it. Give it a shot.

Dude, you are awesome, it works! thanks mucho.

BTW noticed tiny typo ssb-interop.bindle.js (should be bundle)

do you have a hack to also get rid of draft mode by any chance?

I don't know what that is but I can explain how I made this one. The basics are just finding the CSS selector to use to modify CSS of. In the case of removing items that means just setting display: none; on the selected element.

1. Close Slack
2. Start it on the command line using SLACK_DEVELOPER_MENU=true /Applications/Slack.app/Contents/MacOS/Slack
3. Now you can right click items in Slack and click Inspect Element.
4. This brings up the developer console where you can see the class and ID for elements.

For example, if i wanted to get rid of the All Unreads link I might have a selector like:

div < button[aria-label="All Unreads"] {
    display: none;
  }

You may have to get creative with the CSS selectors to get rid of what you want. I am by no means a CSS expert. The Quick-switcher happened to have a specific class on a paragraph element which made it easy to remove.