ssb-interop.js no longer used in Slack beta 4 #234

tsuliwaensis · 2019-07-04T23:05:10Z

In Slack beta 4.0.0, the ssb-interop.js no longer exists. It looks like Slack modified the internal structure of the app, and I couldn't locate where the CSS is now located.

The text was updated successfully, but these errors were encountered:

wakco · 2019-07-15T03:40:10Z

Version 4.0.0 is now the official version of Slack, and is still missing the ssb-interpo.js file

krazyito65 · 2019-07-16T14:10:24Z

The ssb-interop file is now located in an archive: https://dev.to/mykeels/why-is-slack-changing-its-internals-4p4c

app.asar

ropjov · 2019-07-16T14:17:11Z

@krazyito65 Any idea on how to unpack and pack it again? I used npx extract, changed the file and then npx pack but slack crashed.

krazyito65 · 2019-07-16T14:20:14Z

found this on another repo: https://github.com/LanikSJ/slack-dark-mode/pull/77/files#diff-4e5b58d0c0e2e47e41878b4116e03b7f

  # Unpack Asar Archive for Slack
  sudo npx asar extract $SLACK_RESOURCES_DIR/app.asar $SLACK_RESOURCES_DIR/app.asar.unpacked

  # Add JS Code to Slack
  sudo tee -a "$SLACK_FILEPATH" < $SLACK_EVENT_LISTENER

# Insert the CSS File Location in JS
  sudo sed -i -e s@SLACK_DARK_THEME_PATH@$THEME_FILEPATH@g $SLACK_FILEPATH

  # Pack the Asar Archive for Slack
  sudo npx asar pack $SLACK_RESOURCES_DIR/app.asar.unpacked $SLACK_RESOURCES_DIR/app.asar

I haven't tried it myself yet. I'm using the SNAP version on ubuntu, so it hasn't gotten pushed to me, though I've been trying to figure out how to easily do it on windows.

mykeels · 2019-07-16T14:25:15Z

@JRoviraa if your slack crashed, your app.asar file might be corrupted.

You might want to reinstall slack, or pull the file from here. https://raw.githubusercontent.com/mykeels/slack-v40-app-asar/master/app.asar

lvarado · 2019-07-16T15:50:12Z

Has anyone gotten this working on macOS? I modified my lazy (and poor security practices) script, and I was able to see dark mode after hitting CMD+R, but the workspace switcher was displaying weird. So I quit and restarted Slack, and light mode is back as if I never did anything.

#!/bin/bash

SLACK_ASAR=/Applications/Slack.app/Contents/Resources/app.asar

sudo npx asar extract $SLACK_ASAR $SLACK_ASAR.unpacked

sudo tee -a $SLACK_ASAR.unpacked/dist/ssb-interop.bundle.js <<-'EOF'

document.addEventListener('DOMContentLoaded', function() {
 $.ajax({
   url: 'https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/variants/gruvbox-dark.css',
   success: function(css) {
     $("<style></style>").appendTo('head').html(css);
   }
 });
});
EOF

sudo npx asar pack $SLACK_ASAR.unpacked $SLACK_ASAR

I extracted the new asar to a new directory to see if my changes were still in there, and I do see them right after the source map comment as expected.

crustyboot · 2019-07-16T17:11:27Z

I ran through extraction, modification, and packing manually and have been able to get it working properly. Only difference is that I put the function in before the source map comment, but that shouldn't matter.

lvarado · 2019-07-16T17:33:28Z

Very strange... I tried this other script as-is and I get the same result:

https://github.com/LanikSJ/slack-dark-mode

Still seeing light mode but I extracted the asar and do see the modifications to ssb-interop. I even tried adding something wacky like * { background: red !important } directly to <head> in a <style> tag using this event listener... nothing. It's like DOMContentLoaded isn't firing or there's a race condition somewhere.

@crustyboot are you on macOS? I'm using 10.14.3 on a 2018 MBP with a 2.2GHz i7, if that matters.

crustyboot · 2019-07-16T18:17:59Z

Hey @lvarado, yeah I am running macOS 10.13.

So looking at your script, the other thing I did that was different was extract app.asar to a random directory like why.slack.why as app.asar.unpacked was an existing directory.

I wonder if something went sideways when you packaged app.asar.unpacked back up.

lvarado · 2019-07-16T22:17:32Z

why.slack.why
😆

Good thought, I just tried a different directory name and still no dice. Double checked the update is present by unpacking the new asar. I'll let my retinas burn for now and use the webapp with Stylish whenever possible until someone smarter and more patient than me gets this same issue.

tborychowski · 2019-07-17T09:10:24Z

This script worked for me: https://github.com/smitt04/slack-dark-theme/blob/master/darkSlack.sh#L23
(just replace the URL in the highlighted line)

lvarado · 2019-07-17T14:26:43Z

Thank you for sharing, @tborychowski! That script worked for me too. It looks like maybe $.ajax() was being unreliable for me, but the vanilla JS from that repo does the trick.

brandonreid · 2019-07-17T14:56:29Z

@tborychowski or whoever else may know.. When I run that script, I entered my password to grant the sudo access, getting this error, any ideas?

EDIT: Looks like I got it going with npm install asar -g

ransagy · 2019-07-18T14:40:23Z

Anyone managed to get it to work in Windows with ANY of these solutions?

yourbuddypal · 2019-07-19T18:17:12Z

@ransagy
I managed to get it working on windows following these steps. https://github.com/svendhhh/slack-night-mode/blob/master/README.md
Make sure your NPM is updated as well, one system I was on version 6.x, needed to upgrade to 10.

krazyito65 · 2019-07-19T18:18:52Z

pretty annoying these steps we have to take to do this, when they could just release their own dark mode already..

I've been using their builtin darkmode on android and its been great.

yourbuddypal · 2019-07-19T19:56:40Z

I strongly agree it is annoying, especially when every update requires manual effort to re-enable dark scripts. IIRC they mentioned that they plan to support dark mode for the web client, so we just have to be patient and respect the software development process.

There's probably more technical challenges than we appreciate being on the outside looking in. My hope is that this new v4 lays some kind of groundwork for improved theming.

krazyito65 · 2019-07-19T20:00:16Z

Kinda hard to be patient when they have promised native dark mode since 2014.

ransagy · 2019-07-19T20:49:24Z

@ransagy
I managed to get it working on windows following these steps. https://github.com/svendhhh/slack-night-mode/blob/master/README.md
Make sure your NPM is updated as well, one system I was on version 6.x, needed to upgrade to 10.

Ah. The JS there is significantly different, Interesting. I'll try it ASAP, thanks!

andrewcartwright1 · 2019-07-22T07:24:34Z

Thanks to the above link, I have hacked together an update for the powershell script I shared previously to apply this: #73 (comment)

Make sure you have NPM installed or install it (https://blog.teamtreehouse.com/install-node-js-npm-windows)
Make sure your slack is on the latest version (4.0.0), if not, use the old version of the script.

Instructions:

Search for Powershell in windows search
Open "Windows Powershell ISE"
Copy below script into Windows Powershell ISE
Hit save, give it any name, keep the file type as "PowerShell Files" and remember the location you saved it at. (This means you can just run that file in future from now on)
Press F5 on the keyboard to execute the script
Close Windows Powershell ISE

if((Get-Process "slack" -ErrorAction SilentlyContinue) -ne $null) {
    Write-Host "Please exit Slack to continue";
    exit 0;
}

$slackBaseDir = "$env:LocalAppData\Slack"
$installations = Get-ChildItem $slackBaseDir -Directory | Where-Object { $_.Name.StartsWith("app-") }
$version = $installations | Sort-Object { [version]$_.Name.Substring(4) } | Select-Object -Last 1
Write-Output "Choosing highest present Slack version: $version";

$modAdded = $false;
$customContent = @'

// laCour - slack-night-mode

document.addEventListener("DOMContentLoaded", function() {
    let webviews = document.querySelectorAll(".TeamView webview");
    const cssPath = 'https://raw.githubusercontent.com/laCour/slack-night-mode/master/css/raw/black.css';
    let cssPromise = fetch(cssPath).then(response => response.text());
    cssPromise.then(css => {
       let s = document.createElement('style');
       s.type = 'text/css';
       s.innerHTML = css;
       document.head.appendChild(s);
    });    
    webviews.forEach(webview => {
       webview.addEventListener('ipc-message', message => {
          if (message.channel == 'didFinishLoading')       
             cssPromise.then(css => {
                let script = `
                      let s = document.createElement('style');
                      s.type = 'text/css';
                      s.id = 'slack-custom-css';
                      s.innerHTML = \`${css}\`;
                      document.head.appendChild(s);
                      `
                webview.executeJavaScript(script);
             })
       });
    });
 });;
'@


Set-Location -Path "$($version.FullName)\resources\"

$npx=npm v npx version
$asar=npm v asar version

if ([string]::IsNullOrEmpty($npx) -or [string]::IsNullOrEmpty($asar))
{
    Write-Output "Installing Required Resources";

    if ([string]::IsNullOrEmpty($npx))
    {
        Write-Output "Installing npx";
        npm install -g npx
    }

    if ([string]::IsNullOrEmpty($asar))
    {
        Write-Output "Installing asar";
        npm install -g asar
    }
}

Write-Output "Extracting app.asar";

npx asar extract app.asar app.asar.unpacked

if ((Get-Content "$($version.FullName)\resources\app.asar.unpacked\dist\ssb-interop.bundle.js" | %{$_ -match "// laCour - slack-night-mode"}) -notcontains $true) {
    Add-Content "$($version.FullName)\resources\app.asar.unpacked\dist\ssb-interop.bundle.js" $customContent
    Write-Host "Mod Added To ssb-interop.bundle.js";
    $modAdded = $true;
} else {
    Write-Host "Mod Detected In ssb-interop.bundle.js - Skipping";
}

Write-Output "Packing app.asar.unpacked";

npx asar pack app.asar.unpacked app.asar

if ($modAdded -eq $true) {
    Write-Host "Mod Complete";
} else {
    Write-Host "Mod Already Active - No Further Action Is Needed.";
}

ransagy · 2019-07-22T08:30:15Z

This works, Thanks!

I'm guessing the really new change here is that we need to refresh and mod the webviews as you and others suggested, it's not enough to just inject the style.

fam4r · 2019-07-23T10:53:20Z

This script worked for me: https://github.com/smitt04/slack-dark-theme/blob/master/darkSlack.sh#L23
(just replace the URL in the highlighted line)

Substitution with sed:

sed -i "s/http.*/https:\/\/raw.githubusercontent.com\/laCour\/slack-night-mode\/master\/css\/raw\/black.css';/g" darkSlack.sh

briantully · 2019-07-23T16:22:13Z

Thanks for this! Anyone know how to get rid of the white titlebar on MacOSX once applying these changes for v4.0? It seems like once you get Slack in dark mode by appending the custom CSS, the window titlebar reverts to bright white.

Also, I've needed to "Reset App Data..." in order to get the dark mode results to appear (reloading doesn't work). Does anyone have a workaround that doesn't require selecting "Reset App Data..."?

krazyito65 · 2019-07-29T16:18:51Z

I'm trying to get this to work for ubuntu 'snap' installs. Is it important that I pack the asar with the node modules in the unpacked folder? or should i unpack it separately, make my changes, then repack it separately?

yourbuddypal · 2019-07-31T15:53:55Z

@andrewcartwright1 Any chance you want to source control that script and centralize updates for it? I just ran it this morning and it worked, thanks!

krazyito65 · 2019-08-11T06:46:44Z

https://github.com/LanikSJ/slack-dark-mode -- This repo has a script that works for MAc, linux(snap installs as well), and windows. You could take the script and replace the css with the css of this repo to get it to work.

Gargaj · 2019-08-22T10:11:08Z

You can also use https://github.com/Gargaj/makeitdark/blob/master/makeitdark.py if you don't want to install node.js

vagicle · 2019-09-04T06:22:54Z

I was having some issues with the desktop app on Windows after its auto-update to 4.0.2. It was not displaying the dark theme even when the ssb-interop.bundle.js & app.asar were modified correctly.

What worked for me was to exit Slack, delete everything in %appdata%\Slack (i.e. Roaming, not Local), and reopen Slack. I think all the cached files in that directory were to blame, but I didn't have the patience to figure out which ones so I deleted them all, to no ill effect.

Zoooook · 2020-01-16T02:01:30Z

It looks like the file to use is now main-preload-entry-point.bundle.js rather than ssb-interop.bundle.js. Credit to https://github.com/caiceA/slack-black-theme/

…#234) tipped me off to a fix here (https://github.com/caiceA/slack-black-theme/commit/c09f3e0fe9c3f362f3c8c9e55554da076a04a354\#diff-4e5b58d0c0e2e47e41878b4116e03b7f) which worked for me.

Zoooook mentioned this issue Jan 16, 2020

Styling entirely broken on Slack 4.2.0 #246

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ssb-interop.js no longer used in Slack beta 4 #234

ssb-interop.js no longer used in Slack beta 4 #234

tsuliwaensis commented Jul 4, 2019

wakco commented Jul 15, 2019

krazyito65 commented Jul 16, 2019

ropjov commented Jul 16, 2019

krazyito65 commented Jul 16, 2019

mykeels commented Jul 16, 2019

lvarado commented Jul 16, 2019

crustyboot commented Jul 16, 2019

lvarado commented Jul 16, 2019

crustyboot commented Jul 16, 2019

lvarado commented Jul 16, 2019

tborychowski commented Jul 17, 2019 •

edited

Loading

lvarado commented Jul 17, 2019

brandonreid commented Jul 17, 2019 •

edited

Loading

ransagy commented Jul 18, 2019

yourbuddypal commented Jul 19, 2019

krazyito65 commented Jul 19, 2019

yourbuddypal commented Jul 19, 2019

krazyito65 commented Jul 19, 2019

ransagy commented Jul 19, 2019

andrewcartwright1 commented Jul 22, 2019 •

edited

Loading

ransagy commented Jul 22, 2019

fam4r commented Jul 23, 2019

briantully commented Jul 23, 2019

krazyito65 commented Jul 29, 2019 •

edited

Loading

yourbuddypal commented Jul 31, 2019

krazyito65 commented Aug 11, 2019

Gargaj commented Aug 22, 2019

vagicle commented Sep 4, 2019

Zoooook commented Jan 16, 2020

ssb-interop.js no longer used in Slack beta 4 #234

ssb-interop.js no longer used in Slack beta 4 #234

Comments

tsuliwaensis commented Jul 4, 2019

wakco commented Jul 15, 2019

krazyito65 commented Jul 16, 2019

ropjov commented Jul 16, 2019

krazyito65 commented Jul 16, 2019

mykeels commented Jul 16, 2019

lvarado commented Jul 16, 2019

crustyboot commented Jul 16, 2019

lvarado commented Jul 16, 2019

crustyboot commented Jul 16, 2019

lvarado commented Jul 16, 2019

tborychowski commented Jul 17, 2019 • edited Loading

lvarado commented Jul 17, 2019

brandonreid commented Jul 17, 2019 • edited Loading

ransagy commented Jul 18, 2019

yourbuddypal commented Jul 19, 2019

krazyito65 commented Jul 19, 2019

yourbuddypal commented Jul 19, 2019

krazyito65 commented Jul 19, 2019

ransagy commented Jul 19, 2019

andrewcartwright1 commented Jul 22, 2019 • edited Loading

ransagy commented Jul 22, 2019

fam4r commented Jul 23, 2019

briantully commented Jul 23, 2019

krazyito65 commented Jul 29, 2019 • edited Loading

yourbuddypal commented Jul 31, 2019

krazyito65 commented Aug 11, 2019

Gargaj commented Aug 22, 2019

vagicle commented Sep 4, 2019

Zoooook commented Jan 16, 2020

tborychowski commented Jul 17, 2019 •

edited

Loading

brandonreid commented Jul 17, 2019 •

edited

Loading

andrewcartwright1 commented Jul 22, 2019 •

edited

Loading

krazyito65 commented Jul 29, 2019 •

edited

Loading