Skip to content

Instantly share code, notes, and snippets.

@XiaoPanPanKevinPan
Last active July 14, 2025 17:53
Show Gist options
  • Save XiaoPanPanKevinPan/3cceb1d84ea97c04fe17ad087df8def6 to your computer and use it in GitHub Desktop.
Save XiaoPanPanKevinPan/3cceb1d84ea97c04fe17ad087df8def6 to your computer and use it in GitHub Desktop.
Vencord For Firefox (Self-built, Non-official)
EXT_ID=
WEB_EXT_API_KEY=
WEB_EXT_API_SECRET=
OUTPUT_FILENAME=

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:

(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.12.5.

#!/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"
This file has been truncated, but you can view the full file.
@coatlessali
Copy link

Any chance of this getting recompiled? Having dependency hell on my machine trying to build the extension.

@XiaoPanPanKevinPan
Copy link
Author

Any chance of this getting recompiled? Having dependency hell on my machine trying to build the extension.

Hey, I just recompiled & uploaded it! Sorry for being late - I forgot Vencord's existence, for there was no serious bug happening to me during these months XD

@wotikama
Copy link

wotikama commented May 5, 2024

how to update it, should i just repeat the whole process?

@XiaoPanPanKevinPan
Copy link
Author

XiaoPanPanKevinPan commented May 14, 2024

how to update it, should i just repeat the whole process?

If you're building it yourself, then yes - at least, that's what I do. But if you're using the built version I provided above, then you can update it simply by downloading the new vencord-sth.xpi and dragging-and-dropping the file in about:addons.

@BloodDragooner2
Copy link

Hi! The vencord extension is broken for me (vencord-sth.xpi, as of yesterday) in firefox esr, and dunno why? discord crashes when i open the settings

@wotikama
Copy link

Hi! The vencord extension is broken for me (vencord-sth.xpi, as of yesterday) in firefox esr, and dunno why? discord crashes when i open the settings

Use the official userscipt https://raw.githubusercontent.com/Vencord/builds/main/Vencord.user.js

@BloodDragooner2
Copy link

I resorted to that. Thanks, @wotikama!

@XiaoPanPanKevinPan
Copy link
Author

XiaoPanPanKevinPan commented Aug 10, 2024

@BloodDragooner2 @wotikama Sorry for leaving such an issue aside for more than 3 weeks - I didn't notice the error or read the messages till today. I just rebuilt and uploaded it. Hope it works.

@K4sum1
Copy link

K4sum1 commented Aug 12, 2024

With the extension, the QuickCSS Editor is just a blank white page and I see no errors or anything in console.

@K4sum1
Copy link

K4sum1 commented Aug 12, 2024

I get this trying to add online themes

Content-Security-Policy: The page’s settings blocked a style (style-src-elem) at https://raw.githubusercontent.com/davart154/Themes/main/Icon%20Revert%202023/2023%20Icon%20Revert.css from being applied because it violates the following directive: “style-src data: 'self' 'unsafe-inline' https://cdn.discordapp.com/ https://*.hcaptcha.com https://hcaptcha.com/ https://kit.cash.app/ https://static.discord.com/ https://static-edge.discord.com/”

@K4sum1
Copy link

K4sum1 commented Aug 12, 2024

The good thing about developing my own fork is that I can just undo this and fix the problem.

https://bugzilla.mozilla.org/show_bug.cgi?id=1754301

@XiaoPanPanKevinPan
Copy link
Author

@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 StylusStylus 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.

@K4sum1
Copy link

K4sum1 commented Aug 12, 2024

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

image

@K4sum1
Copy link

K4sum1 commented Aug 12, 2024

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

@K4sum1
Copy link

K4sum1 commented Aug 13, 2024

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.

@DADA30000
Copy link

thanks for still updating it!

@Lamina022
Copy link

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 :(

@VOlDKAT
Copy link

VOlDKAT commented May 14, 2025

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?

@BloodDragooner2
Copy link

BloodDragooner2 commented May 15, 2025

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

@BloodDragooner2
Copy link

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

@YashjitPal
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment