This app inserts CSS and JS files into Slack's normal web UI. This lets you improve your experience quite a bit, or lets others help you improve your experience. It's a standalone Mac app that's simple to install.
First, download https://dinosaur.s3.amazonaws.com/hackable-slack-client-0.4.2.zip and drag the Hackable Slack Client to your Applications folder. Sorry it's so big. It's got a whole copy of Chrome.
Next, decide how you want to inject hacks into the client.
- Join
#slack-hacks
. - Use the client normally. You might need to refresh (cmd-r) if you joined #slack-hacks after installing the client.
- Create
#slack-hacks
. - Add space-separated
.js
and.css
asset URLs to the purpose (not topic!) of the#slack-hacks
channel. Other text will be ignored. In order to be compatible with Slack's CSP, we use a unique URL scheme. Instead ofhttp
andhttps
, usehax
andhaxs
, respectively. To provide a modicum of security, a team owner must edit the channel purpose that injects the links. There are some examples below 👇. - Use the client normally. You might need to refresh (cmd-r) if you joined
- Add
hax://
orhaxs://
URLs to thetitle
field of your profile athttps://my.slack.com/account/profile
. Reload the client after adding URLs.
If you'd like to use some sample asset changes, set your #slack-hacks
purpose
(not topic) to be this:
haxs://slacks-hacks.herokuapp.com/assets/application.js
haxs://slacks-hacks.herokuapp.com/assets/application.css
Note the URL scheme of haxs
instead of https
! http
and https
URLs will fail to load in order to maintain compliance with CSP.
The examples for these are at https://github.com/bhuga/slacks-hacks. PRs are welcome!
This repository contains no code to update Slack; it only contains code to help you load code.
Upon loading, a javascript file will be injected into the page. This file is
static. This file finds the #slack-hacks
channel, finds its purpose
, and
parses asset URL from it. These are then injected to the page. After these have
been injected, asset URLs from the title
field of your profile will be loaded.
The Hackable Slack Client uses electron-boilerplate. The docs there apply for contributions to the main application.
If you'd like to do local development for assets, just add their URLs to the
purpose of the #slack-hacks
room. If you have joined a #slack-hacks-dev
room, those assets will be used instead.
Use cmd-alt-i
to open the web inspector to see what CSS you can add.
Javascript is more challenging, but slack's javascript minification is not
particularly aggressive, and reverse engineering is possible. TS
is the
object that everything else hangs off of, and anything ending in sig
is
a trigger. The examples hook into slack's javascript and might be a good
starting point.