Discord CSS injector

This project is a very simple CSS injector for Discord, written in Typescript

Features

The injector is very, very simple, so the feature list is rather inextensive:

• Does not modify your Discord installation
• Supports single CSS file
• Hot reloads on any changes
• Persists across Discord reinstallations or updates
  • Do note that despite of this, it is not guaranteed the injector will work after updating

Due to its architecture, the injector could be adapted to work with other Discord-like applications, for example Slack.

Installation

Installation is possible in one of 2 ways: either using my automated installer, or manually.

Option 1: automated installer

This option is recommended for most users. It will automatically download and set up any necessary components, and provide easy rollback options. It does, however, require Java.

1. Download the latest version of the installer from its release page
2. Open your terminal emulator of choice
3. Navigate to the directory you downloaded the installer to
4. Execute the installer using java -jar discord-css-injector-installer.jar install

• If you do not specify the location of your CSS file, the default path will be used
• If the specified (or default) file does not exist, a new, empty one will be created
• To specify the CSS file to use, run the program with the path to CSS file as the second argument (i.e. java -jar discord-css-injector-installer.jar install "D:\stuff\discord.css")

5. If using Linux, OS X, or another UNIX-based operating system, you might need to log out and log back in for necessary changes to take effect

To uninstall the injector, simply do the following:

1. Open your terminal emulator of choice
2. Navigate to the directory with the installer
3. Execute the installer with uninstall option (i.e. java -jar discord-css-injector-installer.jar uninstall)
4. If using Linux, OS X, or another UNIX-based operating system, you might need to log out and log back in for necessary changes to take effect

Option 2: manual installation

This option is only recommended for advanced users only.

Windows:

1. Download the latest version of the injector from its release page
2. Open your terminal emulator of choice
3. Go to your application data (cd "%AppData%")
4. Create a directory called DiscordCSS and enter it (mkdir DiscordCSS && cd DiscordCSS)
5. Put the downloaded discord-css-injector.js file in the directory (copy "%UserProfile%\Downloads\discord-css-injector.js" . where %UserProfile%\Downloads\discord-css-injector.js is the path you downloaded the injector to)
6. Go to Documents (cd "%UserProfile%\Documents")
7. Create a file called discord.css (echo /* Put css overrides in here */ > discord.css)
8. Close the terminal emulator (exit)
9. Open the classic Control Panel, go to System and Security > System and click Advanced system settings on the left
10. Go to Advanced tab and click the Environment Variables button on the bottom
11. In the top pane (User variables...), press New..., and enter DISCORD_CSS_FILE in the Variable name field
12. Press Browse File... button, and select the discord.css file in your Documents
13. Press OK
14. Scroll through both panes to see if a NODE_OPTIONS variable is already defined
15. If it is not, press New... under User variables... again, and type NODE_OPTIONS in the name field
16. Press Browse File... button, navigate to %AppData%\DiscordCSS (you can paste that in the address bar), and select the discord-css-injector.js file
17. This will place the location to the file in the Variable value field, wrap it in quotes (") if it is not wrapped already, and add --require with a space after at the beginning of the field (that is, before the opening quote)
18. Press OK, then press OK in the Environment Variables window
19. Restart Discord
20. Open the discord.css file in your text editor of choice and enjoy

If the NODE_OPTIONS variable did exist already, you will need to merge its contents with the contents outlined above.

Linux, OS X, other UNIX:

1. Open your terminal emulator of choice
2. Navigate to your home directory (cd)
3. Create a directory called .discordcss and enter it (mkdir .discordcss && cd .discordcss)
4. Download the latest version of discord-css-injector.js (replace v1.0.0 with the latest version number)

• using wget: wget https://git.emzi0767.com/Emzi0767/Discord-CSS-Injector/releases/download/v1.0.0/discord-css-injector.js
• using curl: curl -o discord-css-injector.js https://git.emzi0767.com/Emzi0767/Discord-CSS-Injector/releases/download/v1.0.0/discord-css-injector.js
• using fetch: fetch https://git.emzi0767.com/Emzi0767/Discord-CSS-Injector/releases/download/v1.0.0/discord-css-injector.js

5. Go back to your home directory (cd)
6. Create a file called discord.css (touch discord.css)
7. Append environment variable settings to your .profile

   cat >> $HOME/.profile <<EOF
   # STARTOF: DISCORD CSS INJECTOR
   DISCORD_CSS_FILE="$HOME/discord.css"; export DISCORD_CSS_FILE
   NODE_OPTIONS="--require $HOME/.discordcss/discord-css-injector.js \$NODE_OPTIONS"; export NODE_OPTIONS
   # ENDOF: DISCORD CSS INJECTOR
   EOF
   

8. Close Discord, log out, then log back in, and start Discord again

In order to remove the injector, you will need to perform the following steps:

1. Start your favourite terminal emulator
2. Close Discord
3. Remove the injector's directory (rm -rf $HOME/.discordcss)
4. Remove the appended environment variable settings from .profile (sed -ne '/^# STARTOF: DISCORD CSS INJECTOR/,/^# ENDOF: DISCORD CSS INJECTOR/!p' -i '.bak' test)
5. Close Discord, log out, then log back in, and start Discord again

Special thanks

I'd like to thank the following people for contributing to the project in one way or another:

• Gus Caplan (devsnek) - for pointing me to NODE_OPTIONS and providing a basic way of detecting being run in Discord