Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
tsuliwaensis opened this issue Jul 4, 2019 · 29 comments
Open

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

tsuliwaensis opened this issue Jul 4, 2019 · 29 comments

Comments

@tsuliwaensis
Copy link

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.

@wakco
Copy link

wakco commented Jul 15, 2019

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

@krazyito65
Copy link

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

app.asar

@ropjov
Copy link

ropjov commented Jul 16, 2019

@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
Copy link

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
Copy link

mykeels commented Jul 16, 2019

@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
Copy link
Contributor

lvarado commented Jul 16, 2019

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
Copy link

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
Copy link
Contributor

lvarado commented Jul 16, 2019

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
Copy link

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
Copy link
Contributor

lvarado commented Jul 16, 2019

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
Copy link

tborychowski commented Jul 17, 2019

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
Copy link
Contributor

lvarado commented Jul 17, 2019

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
Copy link

brandonreid commented Jul 17, 2019

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

Screen Shot 2019-07-17 at 8 00 39 AM

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

@ransagy
Copy link

ransagy commented Jul 18, 2019

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

@yourbuddypal
Copy link

@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
Copy link

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
Copy link

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
Copy link

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

@ransagy
Copy link

ransagy commented Jul 19, 2019

@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
Copy link

andrewcartwright1 commented Jul 22, 2019

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

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
Copy link

ransagy commented Jul 22, 2019

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
Copy link

fam4r commented Jul 23, 2019

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
Copy link

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
Copy link

krazyito65 commented Jul 29, 2019

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
Copy link

@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
Copy link

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
Copy link

Gargaj commented Aug 22, 2019

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

@vagicle
Copy link

vagicle commented Sep 4, 2019

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
Copy link

Zoooook commented Jan 16, 2020

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/

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

No branches or pull requests