Skip to content
This repository has been archived by the owner on Jul 8, 2022. It is now read-only.

Slack 4.0.0 update breaks compatibility #98

Open
iaman opened this issue Jul 9, 2019 · 90 comments
Open

Slack 4.0.0 update breaks compatibility #98

iaman opened this issue Jul 9, 2019 · 90 comments

Comments

@iaman
Copy link

iaman commented Jul 9, 2019

The long and short of this is that the src directory no longer exists inside of app.asar.unpacked. I'm digging in to see if I can find another place where we can get a foothold for binding the event and doing the CSS insertion required for this to work, but I think Slack may be trying to crack down on custom theming.

@iaman iaman changed the title Slack update breaks compatibility Slack 4.0.0 update breaks compatibility Jul 9, 2019
@suratovvlad
Copy link

I was able just to make asar unpack for app.asar, and beautify
C:\Program Files\Slack\resources\app\dist\ssb-interop.bundle.js, as described here for Skype, but didn't find yet the place to insert provided script

@iaman
Copy link
Author

iaman commented Jul 10, 2019

@suratovvlad Well, that's going to be a pain to do every update but it should be workable. I'll spend some time this weekend figuring out where we can do the style insertion and submit a PR to update the readme if somebody doesn't beat me to it.

@3b0b
Copy link

3b0b commented Jul 10, 2019

I was planning on a first step of getting it working from the developer console, and the first stumbling block I've hit is that document.querySelectorAll("webview"); doesn't find anything anymore, and I can't figure out what I'm looking for instead. I can inject the styles into each team individually, but I can't inject them from the container into each team.

@gulo-gulo
Copy link

This is the only solution I could find for Slack 4.0.0:
https://github.com/LanikSJ/slack-dark-mode/blob/slack-4.0/slack-dark-mode.sh

@swcisel
Copy link

swcisel commented Jul 15, 2019

@sudochownrwhoami that works for you? I've cloned the repo, checked out the slack-4.0 branch, and run the script. It runs without error, but I don't see a difference when I load Slack.

@david1602
Copy link

@swcisel I have tried reproducing that on windows but couldn't get it to work either

@MortalFlesh
Copy link

@sudochownrwhoami solution works for me (on osx).

@smitt04
Copy link

smitt04 commented Jul 15, 2019

This is the bash script I use

#! /usr/bin/env bash

JS="
// First make sure the wrapper app is loaded
document.addEventListener('DOMContentLoaded', function() {
  // Fetch our CSS in parallel ahead of time
  const cssPath = 'https://raw.githubusercontent.com/caiceA/slack-raw/master/slack-4';
  let cssPromise = fetch(cssPath).then((response) => response.text());

  // Insert a style tag into the wrapper view
  cssPromise.then((css) => {
    let s = document.createElement('style');
    s.type = 'text/css';
    s.innerHTML = css;
    document.head.appendChild(s);
  });
});"

OSX_SLACK_RESOURCES_DIR="/Applications/Slack.app/Contents/Resources"
LINUX_SLACK_RESOURCES_DIR="/usr/lib/slack/resources"

if [[ -d $OSX_SLACK_RESOURCES_DIR ]]; then SLACK_RESOURCES_DIR=$OSX_SLACK_RESOURCES_DIR; fi
if [[ -d $LINUX_SLACK_RESOURCES_DIR ]]; then SLACK_RESOURCES_DIR=$LINUX_SLACK_RESOURCES_DIR; fi
if [[ -z $SLACK_RESOURCES_DIR ]]; then
  # Assume on windows if the linux and osx paths failed.
  # Get Windows environment info:
  WIN_HOME_RAW="$(cmd.exe /c "<nul set /p=%UserProfile%" 2>/dev/null)"
  WIN_HOME="$(wslpath $WIN_HOME_RAW)"

  # Find latest version installed
  APP_VER="$(ls -dt ${WIN_HOME}/AppData/Local/slack/app*/)"
  IFS='/', read -a APP_VER_ARR <<< "$APP_VER"
  
  SLACK_RESOURCES_DIR="${WIN_HOME}/AppData/Local/slack/${APP_VER_ARR[8]}/resources"
fi

SLACK_FILE_PATH="${SLACK_RESOURCES_DIR}/app.asar.unpacked/dist/ssb-interop.bundle.js"

echo "Adding Dark Theme Code to Slack... "
echo "This script requires sudo privileges." && echo "You'll need to provide your password."

sudo npx asar extract ${SLACK_RESOURCES_DIR}/app.asar ${SLACK_RESOURCES_DIR}/app.asar.unpacked
sudo tee -a "${SLACK_FILE_PATH}" > /dev/null <<< "$JS"
sudo npx asar pack ${SLACK_RESOURCES_DIR}/app.asar.unpacked ${SLACK_RESOURCES_DIR}/app.asar

It requires you have nodejs and the asar package installed globally with npm i -g asar

@Pymptech
Copy link

Is there a solution for Windows or am I missing something?

@smitt04
Copy link

smitt04 commented Jul 15, 2019

I am not 100% sure about the windows side of it, but once you find where your app.asar file is in windows, the npm steps should work. It might be as simple as changing the SLACK_RESOURCES_DIR to the windows location and updating the path separators to be \

@smitt04
Copy link

smitt04 commented Jul 15, 2019

@Pymptech you could also try running the script with https://itsfoss.com/install-bash-on-windows/ once you update the paths

@Pymptech
Copy link

Awesome I will try that! Thanks!

@smitt04
Copy link

smitt04 commented Jul 15, 2019

@caiceA It is just a bash script. I save it in ~/scripts/darkSlack.sh then just run it with ~/scripts/darkSlack.sh whenever slack updates

@caiceA
Copy link

caiceA commented Jul 15, 2019

@smitt04 Big thanks i got it i need to make some changes because i use my own designed theme. which is better one in terms of look and feel you can check my Github for that Slack Black Theme Here

@leo150
Copy link

leo150 commented Jul 15, 2019

@smitt04 Thank you, your solution works.

@smitt04
Copy link

smitt04 commented Jul 15, 2019

Updated the script to use @caiceA CSS file, he seems to be updating the CSS the fastest for slack-4

@caiceA
Copy link

caiceA commented Jul 15, 2019

@smitt04 i love my theme actually !!! i couldn't open my white slack for 2 days unless I saw your script 😅

@misterpyrrhuloxia
Copy link

misterpyrrhuloxia commented Jul 16, 2019

Hey, guys. Here's a beginner script I just made for reenabling dark mode on Slack 4.0. It's for mac and it assumes you already have the custom js code that you used to append to ssb-interop.js in a file on your computer.

https://github.com/misterpyrrhuloxia/Reenable-Dark-Mode-after-update-to-Slack-4.0


Here's the direct code in case you want it here:

#!/bin/bash

### With Slack 4.0, they are packing away ssb-interop.bundle.js in app.asar ###
### This bash script for Mac will unpack the app.asar, append your code to the file, repack it, and remove the unpacked directory ###
### You must have Node installed first in order to run npx with asar ###
### I got this idea from here – https://dev.to/mykeels/why-is-slack-changing-its-internals-4p4c ###

slackdir="Enter your Slack Resources directory"
slack_custom_css="Enter your full path to your file containing your custom js for the css that will be appended to ssb-interop.bundle.js"

npx asar extract $slackdir/app.asar $slackdir/extracted-asar;
sleep 4;
cat $slack_custom_css >> $slackdir/extracted-asar/dist/ssb-interop.bundle.js;
npx asar pack $slackdir/extracted-asar $slackdir/app.asar;
rm -r $slackdir/extracted-asar;

For the $slackdir variable, enter your Slack Resources directory. For the $slack_custom_css variable, enter your full path to your file containing your custom js for the css that will be appended to ssb-interop.bundle.js.

@caiceA
Copy link

caiceA commented Jul 16, 2019

this simple installation solution can solve everyone's problem
MAC
https://github.com/caiceA/slack-black-theme

@tarantulae
Copy link

For windows I found this 7z extension for asar files.
http://www.tc4shell.com/en/7zip/asar/

I was able to unpack %localappdata%/slack/app-4.0.0/resources/app.asar
I edited app/dist/ssb-interop.bundle.js with the slack custom CSS code
I renamed the original app.asar to .old then opened /app with 7zip and created app.asar
I relauched slack and the theme is working again

@guyhalestorm
Copy link

guyhalestorm commented Jul 16, 2019

I also got @smitt04 's script (I REALLY like your look @caiceA , looks slick!) to work on Windows via Ubuntu (if you have it installed from the Windows Store) using node.js. I saved it as slackBlack.sh and changed the first line to #!/bin/bash since that's what I always use in bash scripts in Ubuntu, not sure if it was absolutely necessary or not.

SLACK_RESOURCES_DIR="/mnt/c/Users/YOUR USERNAME/AppData/Local/slack/app-4.0.0/resources" <-- Change YOUR USERNAME to, well, your username. The app version number will have to be updated every time Slack updates, but us Windows folks are already used to that.

First run commands, assuming you don't have nodejs and npm installed already:

chmod u+x slackBlack.sh
sudo apt install nodejs npm
sudo npm i -g npx asar
./slackBlack.sh

@guyhalestorm
Copy link

guyhalestorm commented Jul 16, 2019

Update: I automated the process for Windows so you don't have to enter your username OR update it with the current Slack version. It'll always work.

#!/bin/bash
JS="
// First make sure the wrapper app is loaded
document.addEventListener('DOMContentLoaded', function() {

  // Fetch our CSS in parallel ahead of time
  const cssPath =
    'https://raw.githubusercontent.com/caiceA/slack-raw/master/slack-4';
  let cssPromise = fetch(cssPath).then((response) => response.text());
  let customCustomCSS = \`
   :root {
      /* Modify these to change your theme colors: */
      --primary: #61AFEF;
      --text: #ABB2BF;
      --background: #282C34;
      --background-elevated: #3B4048;
   }
   \`;

  // Insert a style tag into the wrapper view
  cssPromise.then((css) => {
    let s = document.createElement('style');
    s.type = 'text/css';
    s.innerHTML = css + customCustomCSS;
    document.head.appendChild(s);
  });
});"

#Get Windows environment info:
WIN_HOME_RAW="$(cmd.exe /c "<nul set /p=%UserProfile%" 2>/dev/null)"
WIN_HOME="$(wslpath $WIN_HOME_RAW)"

#Find latest version installed
APP_VER="$(ls -dt ${WIN_HOME}/AppData/Local/slack/app*/)"
IFS='/', read -a APP_VER_ARR <<< "$APP_VER"

#Automatically set paths
SLACK_RESOURCES_DIR="${WIN_HOME}/AppData/Local/slack/${APP_VER_ARR[8]}/resources"
SLACK_FILE_PATH="${SLACK_RESOURCES_DIR}/app.asar.unpacked/dist/ssb-interop.bundle.js"

echo "Adding Dark Theme Code to Slack... "
echo "This script requires sudo privileges." && echo "You'll need to provide your password."

sudo npx asar extract ${SLACK_RESOURCES_DIR}/app.asar ${SLACK_RESOURCES_DIR}/app.asar.unpacked
sudo tee -a "${SLACK_FILE_PATH}" > /dev/null <<< "$JS"
sudo npx asar pack ${SLACK_RESOURCES_DIR}/app.asar.unpacked ${SLACK_RESOURCES_DIR}/app.asar

@smitt04
Copy link

smitt04 commented Jul 16, 2019

Updated the script to support linux and windows (thanks to @guyhalestorm)

Like everyone else added the script to github https://github.com/smitt04/slack-dark-theme

@JOY
Copy link

JOY commented Jul 16, 2019

Looking for a simpler solution for non-tech guy like me.

@JOY
Copy link

JOY commented Jul 16, 2019

Updated the script to support linux and windows (thanks to @guyhalestorm)

Like everyone else added the script to github https://github.com/smitt04/slack-dark-theme

Cannot apply on Windows 10 so I opened an issue on your git: smitt04/slack-dark-theme#2

@theRealAJR
Copy link

The bash script for Windows did not work for me (all sudo npx asar calls resulted in /usr/bin/env: ‘node’: No such file or directory).
So I installed the 7zip asar plugin (http://www.tc4shell.com/en/7zip/asar/), extracted app.asar to a directory, patched dist/ssb-interop.bundle.js, opened app.asar with 7zip as archive, removed dist/ssb-interop.bundle.js, and copied the modifed ssb-interop.bundle.js to folder dist in the open archive.

I did that before trying the script and for some reason slack would not start with the modified app.asar so I ran the script to get a modified version of dist/ssb-interop.bundle.js, which I appended here, in case someone else has the same problem.

ssb-interop.bundle.js.zip

@tarantulae
Copy link

tarantulae commented Jul 17, 2019

I think some of the previous posts left out a backtick in the script.

I've created a Windows powershell script to make this easier for anyone on windows who isn't running wsl. This only requires 7zip and the Asar addin.

Like everyone else I added it to github.
https://github.com/tarantulae/slack-black-theme-4.0PS

@smitt04
Copy link

smitt04 commented Jul 17, 2019

Updated the windows script, should work better, requires WSL and nodejs installed still

https://github.com/smitt04/slack-dark-theme

@anthonynorthrup314
Copy link

I have expanded on the work from @tarantulae and uploaded my revised PowerShell script here:
https://github.com/anthonynorthrup314/slack-black-theme-4.0PS

This script also avoids extracting/compressing the entire ASAR file by simply modifying the relevant file within. From my testing, full extraction/compression resulted in nearly a 200% file size increase. While a simple 7-Zip update command only required a few kilobytes.

The script also prompts for uninstallation if it detects the backup already exists. Alternatively, I've provided the steps for restoring the original ASAR file.

@caiceA
Copy link

caiceA commented Jul 23, 2019

@linglingfool, first of all, I like your display name LINGLINGFOOL which is cool its good suggestion i know how to do, will do tomorrow. today i am traveling

@misterpyrrhuloxia
Copy link

I'm on a mac and ever since the 4.0 update, I've been just decompressing the app.asar file, modifying the ssb-interop.bundle.js file, and then recompressing using the script I made below:

#!/bin/bash

### With Slack 4.0, they are packing away ssb-interop.bundle.js in app.asar ###
### This bash script for Mac will unpack the app.asar, append your code to the file, repack it, and remove the unpacked directory ###
### You must have Node installed first in order to run npx with asar ###

slackdir="Enter your Slack Resources directory"
slack_custom_css="Enter your full path to your file containing your custom js for the css that will be appended to ssb-interop.bundle.js"

npx asar extract $slackdir/app.asar $slackdir/extracted-asar;
sleep 4;
cat $slack_custom_css >> $slackdir/extracted-asar/dist/ssb-interop.bundle.js;
npx asar pack $slackdir/extracted-asar $slackdir/app.asar;
rm -r $slackdir/extracted-asar;

But as of today, this does not work any longer. I'm not sure what's going on. Has anyone else experienced this?

@knwpsk
Copy link

knwpsk commented Jul 24, 2019

Double extra good karma @caiceA and @jlanza
Installed the mod today using the 7-zip method, works great.

@ttownsend78
Copy link

I think some of the previous posts left out a backtick in the script.

I've created a Windows powershell script to make this easier for anyone on windows who isn't running wsl. This only requires 7zip and the Asar addin.

Like everyone else I added it to github.
https://github.com/tarantulae/slack-black-theme-4.0PS

The true hero in this thread! :)

@lukerhd
Copy link

lukerhd commented Jul 25, 2019

Same issue as @misterpyrrhuloxia - albeit my script is a Go app, checked the uncompressed ssb-interop.bundle.js and my code snippet adding css is still there o.O

@anthonynorthrup314
Copy link

@lukerhd and @misterpyrrhuloxia,

I recommend using the darkSlack.sh script provided in Nockiro's black theme (based on the script provided earlier in this thread by @smitt04):
https://github.com/Nockiro/slack-black-theme

While this is configured to use the CSS provided in the same repository, the script can be easily modified for your own custom CSS. I used it earlier this morning to update my Slack theme on a machine running macOS Mojave version 10.14.6, and Slack version 4.0.0 (production).

@3b0b
Copy link

3b0b commented Jul 31, 2019

I found https://www.reddit.com/r/Slack/comments/cexjol/slack_version_400_css_modifications_dark_theme/evigz17?utm_source=share&utm_medium=web2x where someone asserts that the reason the lato.less approach isn't reliable may have to do with font caching, which is a bummer.

@brucegomes
Copy link

brucegomes commented Jul 31, 2019

@smitt04 solution worked for me on osx

@apckdev
Copy link

apckdev commented Aug 1, 2019

As for Windows, I've been working on it for a longer period of time. Unfortunately, I don't have much time to focus on it right now, but based on my research I've created an almost foolproof self-elevated script for Slack Windows client (just 1-2 clicks):

https://github.com/appollock/dark-slack-windows

There's no need to install 7-zip, nor to read/write content to/from file buffer. The script will create a temp instance of the 7-zip and uninstall 7-zip along with all leftovers after applying theme. There're some minor things to fix to make it production ready, but as I stated - I don't have that much time to focus on it. Njoy.

Written and tested with PS 2.0, so it works on Windows 7 (NT 6.1) and above

@bigdoods
Copy link

bigdoods commented Aug 2, 2019

Maybe someone should update the Readme with the conclusion of this issue.

I am on linux and I can't make out which is the correct approach for me...

@ghost
Copy link

ghost commented Aug 14, 2019

As for Windows, I've been working on it for a longer period of time. Unfortunately, I don't have much time to focus on it right now, but based on my research I've created an almost foolproof self-elevated script for Slack Windows client (just 1-2 clicks):

https://github.com/appollock/dark-slack-windows

There's no need to install 7-zip, nor to read/write content to/from file buffer. The script will create a temp instance of the 7-zip and uninstall 7-zip along with all leftovers after applying theme. There're some minor things to fix to make it production ready, but as I stated - I don't have that much time to focus on it. Njoy.

Written and tested with PS 2.0, so it works on Windows 7 (NT 6.1) and above

Works great, thanks for this.

@benjamhooper
Copy link

If you're using windows use this in powershell (running in Administrator mode):

iex (new-object net.webclient).downloadstring('https://raw.githubusercontent.com/benjamhooper/slack-custom-theme/master/slackcustomtheme.ps1')

Run this for a custom slack theme, just use this repo's theme. The raw link: https://raw.githubusercontent.com/earlduque/Slack-Dark-Theme/master/dark.css

If you have issues, please visit here: https://github.com/benjamhooper/slack-custom-theme

@JOY
Copy link

JOY commented Aug 14, 2019

If you're using windows use this in powershell (running in Administrator mode):

iex (new-object net.webclient).downloadstring('https://raw.githubusercontent.com/benjamhooper/slack-custom-theme/master/slackcustomtheme.ps1')

Run this for a custom slack theme, just use this repo's theme. The raw link: https://raw.githubusercontent.com/earlduque/Slack-Dark-Theme/master/dark.css

If you have issues, please visit here: https://github.com/benjamhooper/slack-custom-theme

Sorry but what should I put on this?
Enter a exact path of http url or an exact path on file system.:

@benjamhooper
Copy link

@LeGiangAnh

Paste link of the url(raw link of the css in this repo): https://raw.githubusercontent.com/earlduque/Slack-Dark-Theme/master/dark.css

Or use a system path if you have downloaded a custom theme to your computer, Ex: c:\path\path\path\nameoftheme.css

@JOY
Copy link

JOY commented Aug 15, 2019

@LeGiangAnh

Paste link of the url(raw link of the css in this repo): https://raw.githubusercontent.com/earlduque/Slack-Dark-Theme/master/dark.css

Or use a system path if you have downloaded a custom theme to your computer, Ex: c:\path\path\path\nameoftheme.css

Hi. It works but all the message hyperlink is black and is very hard to notice:
image

@benjamhooper
Copy link

benjamhooper commented Aug 15, 2019

@LeGiangAnh then report it as an issue in this repo. It's the theme. https://github.com/widget-/slack-black-theme/issues/new

@fleutot
Copy link

fleutot commented Aug 23, 2019

@smitt04
Debian Buster here.

So the new thing is you need to unpack/re-pack the asar file? In previous installs, I already had the /usr/lib/slack/resources/app.asar.unpacked/src/static dir out of the box, where the ssb file to edit was. Unpacking and repacking was not needed.

I'm stuck at this unpacking and packing stuff, because I don't find the packages I need to install for npx and asar.

@smitt04
Copy link

smitt04 commented Aug 23, 2019

@fleutot you need node and npm to install the packages. As those are just javascript so the packages exist on all OSes.

The reason you need to unpack it is because the file you need to edit is now hidden, and then when slack restarts it only looks at the packed version so we need to repack it

@Naphier
Copy link

Naphier commented Aug 24, 2019

I've tried just about every option here. The scripts seem to succeed just fine, but slack remains god-awful white. Will try a manual extraction/modification of the asar tomorrow.
Slack 4.0.2 ☹️

@cmcconnell1
Copy link

@Naphier I've tried a few options/projects for dark slack. A few stopped working for me recently post 4.x on macos mojave (Slack Version 4.0.2 (App Store). The code using the below project/method continues to work for me, but of course YMMV.
'Hope this helps others.

cat ~/bin/slack-dark-theme-post-v4
#!/usr/bin/env bash

cd $GIT_HOME
#git clone https://github.com/LanikSJ/slack-dark-mode && cd slack-dark-mode \
cd slack-dark-mode && git pull
chmod +x slack-dark-mode.sh && ./slack-dark-mode.sh
killall Slack && sleep 5  && open -a "/Applications/Slack.app"

@Naphier
Copy link

Naphier commented Aug 28, 2019

Using Windows over here. Still haven't got it to start working again. Wondering if windows is holding open a process somewhere not very visible. Will try again when I have a chance. Complained to Slack again that they need to get it together and just give us dark mode already! 😛

@benjamhooper
Copy link

benjamhooper commented Aug 28, 2019

@Naphier this repo seems to be no longer maintained. Here is a windows solution: https://github.com/caiceA/slack-black-theme if you don't like the theme. Use a solution I have came up with here. https://github.com/benjamhooper/slack-custom-theme

@Naphier
Copy link

Naphier commented Aug 28, 2019

Thanks @benjamhooper re-install of slack then running the ps1 script seems to have worked with caiceA's theme. Had already tried yours. Not sure what the diff was, but I'm blaming it on the slack install now, not you all. Thank again.

@benjamhooper
Copy link

@Naphier no problem! The script I wrote is just a means of installing any theme for slack, it doesn't have one build it in. It prompts you to enter in the url or os path of the theme of your choice. With @caiceA I built that script to install his theme directly.

@Naphier
Copy link

Naphier commented Aug 28, 2019 via email

@tgburgin
Copy link

tgburgin commented Sep 4, 2019

Anyone else seeing colour bands on the top and bottom of the chat window?

image
image

@zkxs
Copy link

zkxs commented Sep 6, 2019

For you script writers out there, the following asar pack arguments will build the asar file with the same exclusions Slack is using. This definitely cuts down the filesize, and might also prevent issues with files existing in both app.asar and app.asar.unpacked.

asar pack --unpack "{*.node,*.woff2,*.svg,*.less,*.ico,emoji_2017_12_06_sheet_apple_64_indexed_256.webp,emoji_2017_12_06_sheet_google_64_indexed_256.webp,logo_spinner.gif,no_connection.webp}" --unpack-dir "{dist/static/extensions/react-devtools,dist/static/fonts}" app_extracted app.asar.2

I've had my own go at a theme installation script (Mac OSX only presently). The only thing it really has going for it is that I'm paranoid about double-patching and building the asar file wrong and I therefore do some extra validation.

@Izgalicia
Copy link

Izgalicia commented Sep 12, 2019

Good news guys! New dark mode.
https://www.macrumors.com/2019/09/12/slack-dark-mode-mac/

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests