Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Get rid of Slack Quick switch / Jump to widget

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!
@andyshinn
Copy link
Author

andyshinn commented Jul 15, 2019

Hmm, can you try searching for the file:

find /Applications/Slack.app -name ssb-interop.js

@marceltrautmann
Copy link

marceltrautmann commented Jul 15, 2019

no dice. doesn't seem to exist :-( yet slack works normally (just that dumb "jump to.." section taking to much valuable space)

@andyshinn
Copy link
Author

andyshinn commented Jul 15, 2019

What Slack version? I am on 3.4.2. Maybe the folder layout / files has changed between versions. What is in the dist folder? Any index.js anywhere? I had just pulled the instructions from https://github.com/widget-/slack-black-theme which is a very similar CSS replacement.

@marceltrautmann
Copy link

marceltrautmann commented Jul 16, 2019

Version 4.0.0 (Production)

But what's odd is that I'm sure when I first set out to do this I found the dir in question, got distracted & when I came back it was gone. It's as if it knew I was coming for it and ran :-|

Below is the content of /dist. It looked suspiciously similar but alas no ssb-interop.js
image

@andyshinn
Copy link
Author

andyshinn commented Jul 16, 2019

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.

@marceltrautmann
Copy link

marceltrautmann commented Jul 16, 2019

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

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

@marceltrautmann
Copy link

marceltrautmann commented Jul 16, 2019

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

@andyshinn
Copy link
Author

andyshinn commented Jul 16, 2019

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.

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