Userstyles for ChatGPT are not applying to code elements in Librewolf (Firefox fork)

[joeyryan]

Is there an existing issue outlining your problem?

• I am using the latest version of the provided userstyle.
• I have searched the existing issues and they do not solve my problem.

What userstyles are you seeing the problem on?

lbl:chatgpt

Describe your problem.

Using Librewolf with Stylus, the userstyles for code elements are not applying on ChatGPT. Most of the styles for the page takes effect except for code. It works as expected in Chromium with Stylus, however. I have not tested with Firefox, but Librewolf is a close fork so I suspect it will have the same issue. Please see screenshots.

I noticed in the dev tools that the "hljs" styles do not show up at all for code elements in Librewolf, whereas they show up in Chromium. I managed to fix the issue with a quick addition to the Catppuccin userstyles. I just copied the "hljs" styles from the Chromium devtools after I enabled Stylus with Catppuccin. It's a quick fix, so it's probably not ideal, but it should give you an idea on how to properly fix this.

Here are the userstyles I copied from Chromium and added to Librewolf:
chatgpt code userstyles.txt

Attach screenshots.

Librewolf with Stylus and Catppuccin userstyles added:

Librewolf with Stylus and Catppuccin userstyles added as well as my modifications:

Chromium with Stylus and Catppuccin userstyles added, no modifications by me:

What browser(s) are you seeing the problem on?

Librewolf 135.0-1

Any additional comments?

No response

[uncenter]

I noticed in the dev tools that the "hjkl" styles do not show up at all for code elements in Librewolf, whereas they show up in Chromium. I managed to fix the issue with a quick addition to the Catppuccin userstyles. I just copied the "hjkl" styles from the Chromium devtools after I enabled Stylus with Catppuccin. It's a quick fix, so it's probably not ideal, but it should give you an idea on how to properly fix this.

I'm pretty sure this issue is unfixable. We've known for a while that Firefox and Firefox-like browsers (e.g. Librewolf) are stricter (around content security policies) and are blocking the loading of imported files like we do for syntax highlighting. If you go to the developer tools Console or Network tabs, you will see the error message / failed request for those lines of CSS you patched in.

[joeyryan]

Thanks for the quick response. Can you not add the styles I added to the main file itself, where the rest of the styles are being applied from? Or do they still get blocked?

[uncenter]

Sure, but that would require doing the same for all of the userstyles we import external CSS from, and would require updating all of that embedded code everytime the source (e.g. https://github.com/catppuccin/highlightjs) changes - that's too high of a maintenance burden for us, hence why we use CSS imports instead.

[uncenter]

Actually, I thought this was hadn't worked for a while - but if you go to the manage page for Stylus and click the gear toggle to open options, scroll to the bottom and try enabling "Patch CSP to allow style assets". That should do the trick.

[uncenter]

Fwiw this option should be enabled by default via the all-userstyles-import:

userstyles/scripts/stylus-import/main.ts

Line 11 in aaa67de

patchCsp: true,

And is suggested in the documentation for the individual userstyle import method:

https://github.com/catppuccin/userstyles/blob/main/docs/USAGE.md#individual-userstyles

[joeyryan]

Unfortunately that option was already enabled, but it still does not load the styles properly for me. It may be because of Librewolf considering it has stricter privacy controls enabled by default that are not enabled in Firefox, but I don't know.

I understand the maintenance burden with having to manage the variables for all the stylesheets you linked to. Much of those updates can be automated, however. The end goal is making these websites look beautiful, and some of these websites like ChatGPT are extremely popular, though Librewolf far less so. I hope you consider alternative solutions like this in the future. Or perhaps mention this issue in the README with alternative solutions the user can manually apply.

Anyways, I appreciate the work you guys do with making these styles. I figured out how to get it working for myself at least :)

[uncenter]

Or perhaps mention this issue in the README with alternative solutions the user can manually apply.

Your hacky solution does not persist over updates. We cannot suggest such a method.

I understand the maintenance burden with having to manage the variables for all the stylesheets you linked to. Much of those updates can be automated, however.

I appreciate the sentiment, but you don't maintain this repository. This issue is something that will have to be solved at the browser level, since I seem to be able to get it to work on Firefox with that CSP patching enabled. There might be a Librewolf setting or you can open a bug report somewhere.

[joeyryan]

You don't need to be rude about it, I'm not trying to dictate how you run your repository, nor have I suggested that. Sometimes a hacky solution is better than no solution.