Slackの背景に画像を設定する

Slack、便利ですよね。いつも使っているからこそ自分好みにしたいですよね。
私はいつも、サイドバーの色を変な色に変えたりしています。
ですが、どうしても真っ白な背景だけは変えられず、すこし寂しい感じがします。

調べてみたところ背景に(むりやり)画像が設定できるようなので自己責任で設定していきたいと思います。

1.画像を用意する

切り抜きが雑ですが、画像を切り抜きました。ちなみにデフォルトで入っているプレビューのスマート投げ縄でサクッと切り抜けます。

2.画像をBase64へ変換する

ターミナルで$ Base64 〇〇.pngとかで変換します。
画像サイズは1MB以下に抑えないとだめっぽいです。1の画像の用意で画像サイズを変える等してください。どうしても高画質がいいのであれば諦めてください。

3.いざSlackへ

とりあえずSlack.appのパッケージを表示しましょう。(こういう裏側みるとわくわくしますよね。)
その中に
Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js
があるはずですのでお好みのエディタで開きます。
一番下へ下記のようにheadへstyleを入れてあげます。
(いろいろいじれそうなので、web版slackでidとかタグなどを見ながらやるといいかもしれない)

document.addEventListener('DOMContentLoaded', function() {
   var background = `
      #messages_container{
         background-image: url('data:image/png;base64,(先程Base64変換した画像)
     ~ 省略 ~
   `;
   $("<style></style>").appendTo('head').html(background);
}

書き込んだら保存をして、Slackを再起動しましょう。
すると、画像が反映されているはずです。

まとめ

普段使っているアプリの中を覗いてみるのは結構面白かったです。
slackはまだまだいろいろいじれそうなので、なにかアイデアが浮かんだらなにかしてみようと思います。

おまけ

SlackにTwitterのタイムラインを表示させてみたが、当たり前だけど実用性がなさすぎて、ボツになった図