ssb-interop.js no longer used in Slack beta 4 about slack-night-mode HOT 29 OPEN

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)

from slack-night-mode.

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.";
}

from slack-night-mode.

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

from slack-night-mode.

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

from slack-night-mode.

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

from slack-night-mode.

@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

from slack-night-mode.

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

from slack-night-mode.

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

app.asar

from slack-night-mode.

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

from slack-night-mode.

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.

from slack-night-mode.

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.

from slack-night-mode.

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.

from slack-night-mode.

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.

from slack-night-mode.

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.

from slack-night-mode.

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.

from slack-night-mode.

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.

from slack-night-mode.

@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

from slack-night-mode.

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

from slack-night-mode.

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.

from slack-night-mode.

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.

from slack-night-mode.

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

from slack-night-mode.

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

from slack-night-mode.

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.

from slack-night-mode.

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..."?

from slack-night-mode.

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?

from slack-night-mode.

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

from slack-night-mode.

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.

from slack-night-mode.

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.

from slack-night-mode.

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/

from slack-night-mode.