bhuga / hackable-slack-client Goto Github PK

Inject CSS or JS into Slack, per-team.

License: The Unlicense

HTML 4.21% JavaScript 84.46% CSS 3.11% NSIS 6.41% Shell 1.80%

horrible

hackable-slack-client's Introduction

Hackable Slack Client

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.

Installation

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.

Someone on my team set this up, and I want to use it.

Join #slack-hacks.
Use the client normally. You might need to refresh (cmd-r) if you joined #slack-hacks after installing the client.

I want to set this up so my whole team can use some hacks

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 of http and https, use hax and haxs, 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

I just want to use this myself, or I want to overwrite some team-wide hacks

Add hax:// or haxs:// URLs to the title field of your profile at https://my.slack.com/account/profile. Reload the client after adding URLs.

Example Hacks

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!

Development

How it works

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.

Hacking

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.

hackable-slack-client's People

Contributors

Stargazers

Watchers

Forkers

soedr rubiojr mistydemeo digideskio 110percent antonydevanchi righteousgambit

hackable-slack-client's Issues

Give me back zoom controls.

Official Slack client has Command+ and Command- to zoom in and out. Is there a way for you to expose those shortcuts from Chrome (which has the same)?

Support Slack's Command+[ and Command+] shortcuts

In the vanilla Slack client, you can use Command+[ and Command+] to navigate back and forward in history respectively:

In hackable-slack-client, these shortcuts seem to be ignored. It would be awesome if hackable-slack-client supported these shortcuts.

No love for Windows? 😢

After searching for hours how to open the Chromium dev tools in the Slack Widows client and coming up with nothing, my only remaining option is to find a hackable Slack client. Sadly, you guys only support macOS. Any chance you'll ever support Windows?

"A JavaScript error occurred in the main process"

After waking my computer from sleep, everything seemed to be fine except that clicking on links popped up an error dialog:

Uncaught Exception:
Error: Attempting to call a function in a renderer window that has been closed or released. Function provided here: expose-window-apis.js:8:43.
    at EventEmitter.ret (/Applications/Hackable Slack Client.app/Contents/Resources/atom.asar/browser/lib/rpc-server.js:168:19)
    at emitMany (events.js:113:20)
    at EventEmitter.emit (events.js:182:7)

Restarting fixed it, and it looks like it's probably an Electron thing anyway, but I thought I'd write it down in case it looks familiar

Slacks hack loader does not seem to run?

I'm not able to change the theme using the instructions in the README.

In my profile, I changed my title field to haxs://slacks-hacks.herokuapp.com/assets/application.css, but to no avail. This file appears to be available over the open internet and should set my interface to use Helvetica as a font, amongst other changes. This doesn't happen though.

Reading the slack-hacks-loader.js script, I'm expecting the console to output Slack hacks loader loading.... But pulling up the console in the process shows no such message.

Weird scrolling behavior in some channels

When I switch to one of a select few channels, the view appears scrolled up a little bit from the bottom of the messages. Here's a gif:

I don't see this happen with the vanilla Slack client.

Confusing Setup

The setup instructions say the following:

I just want to use this myself, or I want to overwrite some team-wide hacks

Add hax:// or haxs:// URLs to the title field of your profile at https://my.slack.com/account/profile. Reload the client after adding URLs.

But when I go to the URL https://my.slack.com/account/profile I do not see a title field anywhere. If I click 'edit profile' the available fields are 'first name', 'last name', 'what I do', 'phone number', 'timezone', and 'skype'.

Can I get more clarification on what I'm supposed to do in this step?

Feature request: link to users' Team profile page

I keep thinking this feature exists and trying to use it.

shift+up in long messages scrolls history rather than selecting text

Steps:

type a lot of words in the message field; enough that it goes to at least two lines high
put the cursor on the second or lower line
press shift+up

Expected result: text will be selected

Actual result: previous message appears in the message field