Feature: custom JavaScript plugins

[TheSunCat]

Is your feature request related to a problem? Please describe. Hey! I recently started using WebCord and love it for the amazing performance and Wayland support. However, I miss a few things from my previous Discord setup, one of them being the ability to block all Nitro advertising through CSS and JavaScript.

I was able to apply my custom CSS to hide most of it, but some things, such as the greyed-out disabled emoji upsells, appear to require JavaScript to block successfully.

Describe the solution you'd like I would like to be able to block these disabled emoji among other things, and the only way I've found to do that is installing some BetterDiscord plugins. As I know WebCord is focused on privacy and security, running arbitrary JavaScript would probably be hard to implement safely, so support similar to that of custom CSS, where the user must manually find and enable the feature by placing the respective file in a directory would probably be the best possible implementation for now.

Describe alternatives you've considered It would theoretically be possible to do this with a web extension, but I am not aware of any existing ones that do something like this. If custom JavaScript cannot be implemented in WebCord, my alternative would be to learn to write web extensions and rewrite the wanted behavior within one.

Additional context Disabled emoji which I would like to hide:

[SpacingBat3]

However, I miss a few things from my previous Discord setup, one of them being the ability to block all Nitro advertising through CSS and JavaScript.

You can still hide most of the things, including icons with just CSS.

💡	Take a look at attribute selectors if you want to select elements that don't have a static class names (e.g. foo-a1b23f).

(...) but some things, such as the greyed-out disabled emoji upsells, appear to require JavaScript to block successfully.

You can currently hide emoji rows with just CSS. In the future, you might be able to even to hide labels it with only CSS, using :has pseudo-class.

As I know WebCord is focused on privacy and security, running arbitrary JavaScript would probably be hard to implement safely, so support similar to that of custom CSS, where the user must manually find and enable the feature by placing the respective file in a directory would probably be the best possible implementation for now.

This is not the solution. What extensions need is a privilege-based extension loading, where manifest directly says what extension is able to do. Moreover, I might need to add another json storage file for at least some extensions requiring additional and possibly insecure privileges to access the sensitive resources and use the safeStorage to encrypt it and try to prevent tinkering with it. Extensions accessing Node will be also sandboxed to remove access to sensitive Node API and grant part of it based on the permissions.

---

This feature however won't be implemented too soon.

[TheSunCat]

Thanks for your quick reply!

You can still hide most of the things, including icons with just CSS.

Yup! I'm just down to hiding the disabled emoji and defaulting pings to off in replies.

You can currently hide emoji rows with just CSS.

I can hide disabled emoji, but they still show up as blank rows in the emoji list, and make scrolling buggy. Though I might be approaching it wrong, I haven't found a way to block the rows themselves as well as the labels (I guess CSS 4 will have that covered with :has indeed).

Nevertheless I don't think it's possible to do this properly from just CSS, as the emoji list seems to be mostly controlled from JavaScript, which if I understand correctly holds its own list of emoji to add to the list which I would need to edit.

What extensions need is a privilege-based extension loading, where manifest directly says what extension is able to do.

I agree, that's a much saner approach. Until this is implemented though, is there no possible workaround?

[SpacingBat3]

I can hide disabled emoji, but they still show up as blank rows in the emoji list, and make scrolling buggy.

That's because rows have a fixed size; you have to overwrite it (set as auto, probably add margins to icons that aren't disabled) as well as probably for all children before emoji class.

[BowDown097]

It would theoretically be possible to do this with a web extension, but I am not aware of any existing ones that do something like this.

Should be possible with the GooseMod client mod with the GooseMod for Web extension. Unfortunately, it's currently not possible to use the extension because of the Content Security Policy which disallows it from making requests to its API. Maybe something could be added to prevent this from happening?

[Henry-Hiles]

Vencord is also another client that is usable via a web extension. I cannot seem to get it to load though.

[TheSunCat]

Although I agree with the security implications of running arbitrary JavaScript, I think it would be a good idea for this to be implemented with an appropriate disclaimer, as a temporary solution until extension support is finalized. Currently every time I open WebCord I have to paste the same scripts to enable certain features I use, such as connecting to arRPC. Providing an option to automate this for users who know what they're doing would save a lot of time in the long run and allow bringing the WebCord experience to feature-parity with the official client.

[n3oney]

Vencord is also another client that is usable via a web extension. I cannot seem to get it to load though.

I've managed to get Vencord to load. In this function, I've added this code snippet:

session.defaultSession.loadExtension("/home/neoney/Downloads/vencord").then(() => console.log("Vencord loaded."));

Obviously, the path must be set to somewhere where you have the Vencord extension downloaded to. (I used this website to download the extension zip, then extracted it.)

[HidemaruOwO]

Yes, we can load Vencord that way, but modifyResponseHeaders.json in vencord will not work because session.defaultSession.loadExtension does not support manifest V3. session.defaultSession.loadExtension does not support Manifest V3, so CSP restrictions cannot be removed. Therefore, the installed theme and plugins do not work.

[n3oney]

I've been using Vencord that way for a long time. You're right that the theme function of vencord doesn't work, but thankfully WebCord also supports themes, so I just put CSS files (with no extension) in ~/.config/WebCord/Themes and it works.

As for plugins, I don't see any relation to CSP? My plugins have been working fine.

Also, if anyone wants to use webcord with vencord, there's an AUR package, and a Nix package

[Henry-Hiles]

Vencord is also another client that is usable via a web extension. I cannot seem to get it to load though.

I've managed to get Vencord to load. In this function, I've added this code snippet:

session.defaultSession.loadExtension("/home/neoney/Downloads/vencord").then(() => console.log("Vencord loaded."));

Obviously, the path must be set to somewhere where you have the Vencord extension downloaded to. (I used this website to download the extension zip, then extracted it.)

You can also get the zip from vencord github releases.

[n3oney]

You can also get the zip from vencord github releases.

Yep, also the AUR package's PKGBUILD just builds it from source.

[HidemaruOwO]

Apparently there was a bug in the plugin. Sorry.

[ThatOneCalculator]

Can confirm that the AUR package works as expected.