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