Vencord For Firefox (Self-built, Non-official)

.env-template

EXT_ID=
WEB_EXT_API_KEY=
WEB_EXT_API_SECRET=
OUTPUT_FILENAME=

.gitignore

.env

Readme.md

Obviously, Vencord has stopped uploading their extension to addons.mozilla.org due to the long-waiting review, and they also decided not to go self-hosting. But I need to use that, therefore I decided to try build the addon.

Some packages are required to be installed in advance:

• NodeJS (version: 20.5.1) and npm (version: 10.8.1)
• pnpm (version: 10.7.0): npm install -g pnpm
• web-ext (version: 8.5.0): npm i -g web-ext

(Version numbers above are for reference only. Usually, you don't need to follow them.)

Here's what I've done:

1. Clone the repo with git clone https://github.com/Vendicated/Vencord --depth 1 (for clarity, let's call the directory of your clone $ROOT, which should be ./Vencord relative to your current directory.)
2. cd $ROOT (i.e. cd ./Vencord)
3. pnpm i && pnpm run buildWeb
4. cd $ROOT/dist
5. Change the ID to vencord-firefox@sth in $ROOT/dist/firefox-unpacked/manifest.json. (Sorry for my terrible and thoughtless naming flavour 😓.) If you ever need to do it yourself, make sure your ID is unique (i.e. different from my ID, and different from any existing extension signed by mozilla).
6. Sign the addon with web-ext sign -s $ROOT/dist/firefox-unpacked --channel=unlisted --api-key=... --api-secret=.... The fields left empty can be acquired from here (you need to have a Mozilla account).
7. In $ROOT/dist/web-ext-artifacts, the file with the postfix .xpi is the addon.
8. In Firefox, open about:addons and drag-and-drop the file to install.

You can download the vencord-sth.xpi file and simply do the 8th step above. The current version is 1.13.4.

compile.sh

#!/bin/bash

OUTPUT_DIR="$(pwd)"

myecho() {
  local BLUE='\033[0;34m'
  local BOLD='\033[1m'
  local NC='\033[0m' # No Color

  echo -e "${BOLD}${BLUE}::: $@ :::${NC}"
}

try_get_version() {
    local cmd_name=$1
    local cmd_path=$2

    if command -v "$cmd_path" &> /dev/null; then
        myecho "$cmd_name version: $("$cmd_path" --version)"
    else
        myecho "$cmd_name hasn't been installed."
        LACK_OF_DEP=true
    fi
}

myecho "Checking if you have installed the dependencies."
LACK_OF_DEP=false

try_get_version "Node.js" "node"
try_get_version "Pnpm" "pnpm"
try_get_version "Web-Ext" "web-ext"

if $LACK_OF_DEP ; then 
    myecho "Lack of some dependencies, leaving..."
    exit 1
fi

if [ -e "./env" ]; then
    myecho "No file named '.env'. Please create it by filling and renaming '.env-template'."
    myecho "Leaving..."
    exit 1
fi
myecho 'Loading `.env`...'
source ./.env

myecho "Cloning Vencord repo..."
git clone https://github.com/Vendicated/Vencord --depth 1
if [[ ! $? = 0 ]]; then
    myecho "Failed to clone Vencord repo, leaving..."
    exit 1
fi
cd Vencord
ROOT="$(pwd)"

myecho "Installing pnpm modules && building ..."
pnpm i && pnpm run buildWeb

myecho "Modifying manifest.json for web-ext..."
node --eval 'import fs from "node:fs";
let manifestPath = "'"$ROOT/dist/firefox-unpacked/manifest.json"'";
let manifestText = fs.readFileSync(manifestPath, { encoding: "UTF-8" });
let manifest = JSON.parse(manifestText);
manifest.browser_specific_settings.gecko.id = "'"$EXT_ID"'";
fs.writeFileSync(manifestPath, JSON.stringify(manifest));'
if [[ ! $? = 0 ]]; then
    myecho "Failed to modify manifest.json, leaving..."
    exit 1
fi

myecho "Getting Version Info..."
EXT_VER=$(node --eval 'import fs from "node:fs";
let manifestPath = "'"$ROOT/dist/firefox-unpacked/manifest.json"'";
let manifestText = fs.readFileSync(manifestPath, { encoding: "UTF-8" });
let manifest = JSON.parse(manifestText);
console.log(manifest.version);')
if [[ ! $? = 0 ]]; then
    myecho "Failed to read manifest.json. The last step (modificaation) seems to have some error..."
    exit 1
fi
myecho "The version number is '$EXT_VER'"

myecho "Building extension with Web-ext (may take 10~20 minutes)..."
web-ext sign -s "$ROOT/dist/firefox-unpacked" --channel=unlisted --api-key="$WEB_EXT_API_KEY" --api-secret="$WEB_EXT_API_SECRET"
if [[ ! $? = 0 ]]; then
    myecho "Failed to build extension, leaving..."
    exit 1
fi

myecho "Renaming the extension pack..."
cd "$OUTPUT_DIR"
mv "$ROOT/web-ext-artifacts/"*.xpi "$OUTPUT_FILENAME"
myecho "Your extension is successfully built. Please find it at '$OUTPUT_DIR/$OUTPUT_FILENAME'."
myecho "Remind: the version number is $EXT_VER."

myecho "Clearing files..."
rm -rf "./Vencord"

vencord-sth.xpi

@K4sum1 It'll be great if you can fix the issue! The issue has been there since the Firefox version was still officially supported. I didn't know how to fix that, and I didn't have time to figure it out, either. As a workaround, I just keep using Stylus when I need to add some styles.

More about Stylus

Stylus is a dedicated extension for managing and automatically injecting UserStyles. It searches styles on UserStyles.world and uso.kkx.one, where there are a lot of styles for Discord available. If you need to install a style from https://betterdiscord.app/themes, it looks like we can create a new style in Stylus, and just copy the CSS Rules from the downloaded file.

BTW I created a style to minimize the sidebar on Discord, which can be re-expanded by hovering the cursor. I gonna just put the link here in case anyone is interested.

yoooo it still errors but it looks to be mostly working. Need to figure out why font is funny now.

So, using either r3dfox or Firefox pre-99, and disabling security.csp.enable gets it mostly working.

Just pushed the release with the feature added back.

https://github.com/Eclipse-Community/r3dfox/releases/tag/v129.0-4

I think the error is funny visual bug. Font was JSLibCache being funny, I have it fixed now.

So yeah the issue is CSP. Disabling it globally is not ideal, but whatever. Maybe the extension could override Discord's CSP settings to allow themes idk.

thanks for still updating it!

Thank you so much, I really need this. I hate the new Discord UI overhaul and use this plugin to revert to the old theme... It's so hard on my eyes because of the small icons :(

the presence of this plugin seems to make discord turn into a black or white screen of death. i've even tried refreshing firefox (removing and resetting all add-ons) but to no avail. is this a known issue?

@VOlDKAT known. It states so over on the official website's browser section :/

To add, it did work for me last I used it, but broke again

it stopped working recently... when can we get a fix?