Slack デスクトップアプリの最新版にカスタム CSS を当てる方法


BetterDiscord のようにカスタム CSS の適用を Slack でもしたかったのですが,最新版の v4.3.2 で行う方法を探すのが難しかったので簡単にまとめました.

はじめに

この方法は Slack 公式の機能ではありません.
何らかのデータ破損等が発生しても一切責任は負いませんので,自己責任でお願いします.

方法

Slack がインストールされたディレクトリを開きます.

OS ディレクトリ
Windows %LOCALAPPDATA%\slack
macOS /Applications/Slack.app/Contents
Linux /usr/lib/slack

app-x.x.x のうち一番バージョンが高いものを開きます.
resources 内の app.asar を以下のコマンドで展開します.

$ npx asar extract app.asar app.asar.tmp

展開された app.asar 内の main-preload-entry-point.bundle.js の末尾に以下を追記します.

main-preload-entry-point.bundle.js
document.addEventListener('DOMContentLoaded', function() {
    document.head.appendChild(
        Object.assign(document.createElement('style'), {
            innerHTML: `
/* 適用したいカスタム CSS */
            `
        })
    );
});

再度 app.asar に戻します.

$ npx asar pack app.asar.tmp app.asar

Slack のアプリで メニュー → ヘルプ → トラブルシューティング → キャッシュを消去して再起動 をクリックします.
これで完了です.