search

openark / custom-slack-css

A custom CSS for Slack App users
MIT License
22 stars 4 forks source link

Any update on this with newer versions of Slack? #8

Open MarqueIV opened 2 years ago

MarqueIV commented 2 years ago

Hi! Any update on this for newer versions of Slack? I don't see the file to edit that you mentioned, but I do see a lot of similar ones. Happy to work with you as a guinea pig if you wish. I just really want to update the appearance of Slack in the desktop client. FWIW, I'm using Version 4.27.154.

MarqueIV commented 2 years ago

FYI, I got Slack running with only the expanded folders, not the compiled ASARs, and I chown'd all the contents and it still runs. Not having any luck finding an insertion point for this tho.

Also, this surprised me, but I'm not seeing any of the styles that appear in the web version of the app. For instance, the class p-channel_sidebar__channel is one of the ones I want to style. Works great with CSS injection on the web thanks to Cascadea on Mac, but I don't see anything in the code that refers to that style anywhere so I'm not even sure they're the same. (I thought the desktop app was just the web site app wrapped in Electron so I'm confused.

Can't believe something as simple as styling an electron app is so freaking hard.

peterkos commented 2 years ago

I did some digging -- and by digging, I mean, enable inspect element, open the console, manually inject the CSS -- and I run into this wonderful error:

Refused to load the stylesheet '<stylesheet link>`
because it violates the following Content Security Policy directive: 
"style-src 'self' 'unsafe-inline' https://slack-prod.qvpc-cdn.com/ https://a.slack-edge.com/ https://b.slack-edge.com/". 
Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

My guess is that they disabled loading inline CSS externally due to this bug

MarqueIV commented 2 years ago

Pretty interesting find about that bug. Still determined to figure this out though. For instance when using the web-based version I can inject my CSS just fine. The problem is I don't want to use it in a browser. I even tried one of those apps that let you convert webpages to standalone apps but then slack bitches that it's in a non-supported browser.

Question though… How did you enable the developer tools like you said to be able to test inject your CSS in the first place? I couldn't even figure out how to do that.

MarqueIV commented 2 years ago

Oh… I missed those were links. Definitely cool to check out. Thanks!

I'll report back here if I make any progress.

MarqueIV commented 2 years ago

Ok, so it's not perfect, but it's not bad. Using your technique, I enabled the 'Inspect Element' feature, then I set up local overrides in the sources, found the topmost CSS file, added my styles to it and voila! Slack is themed the way I want!!!

Now... the downside of this is of course every time I restart Slack I have to retriever the 'Inspect Element' to reload the overrides, but once I've done that one time, it seems I can instantly close it again and it sticks around until I reboot again.

My next thought is since you can't include CSS like you mentioned, what if we did a variation? Rather than sticking in a linked style sheet, have something that reads the remote style sheet (maybe via CURL) then physically writes the contents into a element right before closing the tag. Yes, it would be something you'd have to run every time you update, just as you do now with your old technique, but it beats having to use the dev tools.

Of course the roadblock I hit there is I can't seem to find the file that has the HTML in it to insert my styles into. While I can find the CSS I was looking for (they're downloaded from Slack, not packaged locally), I can't seem to find the HTML file, or whatever 'builds' it if that's the case. Can you help with that?

peterkos commented 2 years ago

I'll take a look sometime this weekend, but good catch on putting it directly in their CSS file :pray:

MarqueIV commented 2 years ago

Just checking in. Any update on this? Would be great if we could solve this thing once and for all. :)

peterkos commented 2 years ago

Oops sorry, got busy this past weekend. Will let ya know if I get around to it soon!

MarqueIV commented 2 years ago

Thanks. So you know, the only thing I personally need help with is finding some html, css or js file that I can modify locally. Doesn't need to link out externally. I can always write an external tool to update it if Slack pushes an update that overwrites it. That would be fine.

Any chance you can help with at least that? Happy to share any experimentation I do with it as well in case something interesting comes up.

Also, one thing I thought of regarding your issue. You linked to a remote url (here on GitHub). If linking externally to a different domain is the issue, what about linking to a local css file that's already on your machine, possibly even inside the Slack folder itself? That way you could pull the latest locally (which is where you're probably editing it anyway) then use pull scripts to move/copy it where it needs to go. Just a random thought.

MarqueIV commented 2 years ago

Just checking in again. Any updates?

MarqueIV commented 1 year ago

Bueller? Bueller?

peterkos commented 1 year ago

Apologies I don't really have time to work on this lately. If I do end up having time I'll fill some info in this thread, but for now I pass the torch forward ⚡

MarqueIV commented 8 months ago

Just wondering if you or anyone you know has worked on this anymore/made any more progress?