[PROGRAMMING] Fixing the YouTube chat CSS

RUclips changed something in the HTML structure of popout chat and broke everyone's RUclips chat overlays. Let's fix mine.
EDIT: It was not a change in the HTML structure. See the comments for our findings.
My chat CSS: gist.github.co...
//////////////////////////////////////////////////////////////////////
Join us on Discord: / discord
Donations are appreciated but are absolutely not required: streamelements...
//////////////////////////////////////////////////////////////////////
// Stream Rules
//
Applies to chat, comments, and donations.
1. Be respectful.
2. Stay on topic.
3. Avoid raising controversial topics.
4. Do not send NSFW content.
5. Do not spam.
////////////////////////////////////////////////////////////////////////
// Credits
//
- Model:
- Art: Startist17, startist17.car...
- Rig: Winry
- Music: tPenguinLTG
- Main BGM: "Here I Am (Easy listening BGM arrangement)". CC BY 4.0. / here-i-am-bgm-arr
- Opening: "A Penny For Your Thoughts". CC BY-SA 3.0, Used with permission. / a-penny-for-your-thoughts
- Ending: "Not Goodbye". CC BY-SA 3.0, Used with permission. / not-goodbye
- Intermission: "Not Goodbye (On Hold edit)". CC BY-SA 3.0, Used with permission. Edited by Penbu.
- Overlay: Penbu, tPenguinLTG
- Emotes: Crystal-Cat44, / crystal_cat44
#PenbuVT #RealTimePenbu #vtuber #vtuberen #RUclips #chat #css #obs

[@PenbuVT]

Findings: RUclips implemented a stricter security policy that caused OBS's CSS injection method to be considered insecure, thus failing. A patch has been submitted to OBS that fixes the issue (not by me): github.com/obsproject/obs-browser/pull/449
If and when this pull request is merged and released, you will have to update OBS to the latest version to get the fix.
UPDATE: OBS 30.2.3 (released August 15, 2024) has the fix!

[@PenbuVT]

The patch we made is here: gist.github.com/penbuvt/d480e3f816e6d8ede47334ab57de369d

[@Warlord4Hikage]

Yet again - no one cares about small %.
Who the F cares about 32 bit, sure.

[@SyzygyAltairCh]

we are in the presence of a coding god

[@oye-ermac]

Thing is, I'm on mac but I can't update OBS since I can no longer update macOS (I know there is kinda a fix for this but these are machines I use everyday) I'm trying to figure out what could be the way to go 🤔 I've been stuck in 28.1.2 for years (also, a external plugin support that won't work on 29+ version)

[@PenbuVT]

Unfortunately, I don't know of any patches that are being distributed for macOS. The good news is that the pull request with the fix has been merged, so it'll only be a matter of time before it's released (no ETA yet), at which point you can take the .dylib (or is it .so?) for obs-browser and hope you can replace it in your OBS version with no issues.
As I mentioned in another comment, it looks like downgrading to v24 will make chat work as far as I can tell, but then you'd be downgrading a number of major versions behind, which isn't a good idea.
If you're stuck on v28, I think your best bet might be to figure out how to build OBS 28 yourself and apply the patch to obs-browser yourself. Good luck!

[@oye-ermac]

@@PenbuVT Accidentaly found that streamlabs YT chat integration is working again (last time I checked it had a lot of lag to RUclips real time chat) so I just adapted the code and It’s working now 👌

[@Scoxta]

hey! im a Vtuber from argentina, Looking for how to solve the problem on the youtube live chat. I found your stream, I can't quite understand it but guess I'll have to wait. it was fun! Good luck

[@PenbuVT]

Thanks for dropping by! Patching and building OBS yourself like I did is probably not the way to go unless you're already used to doing that.
The easiest and safest thing to do would be to wait until OBS releases a fix for it, but that could take some time.
If you can't wait, someone from the Japanese community who made one of the popular chat CSS generators is distributing a patch for Windows: x.com/lurbpieq57481/status/1819048301158924426
I'm not on Windows, but there are instructions you can follow inside the zip file. Obviously, installing unofficial modified files from the Internet is done at your own risk.
I've heard downgrading OBS (to version 24 from my investigation) also gets around the issue, but I would not recommend doing this as there could be some incompatibilities sharing your profile between major versions. You also would lose out on any security updates, bug fixes and new features that were introduced in later versions.
Lastly, there are also some third-party services and applications that will process your chat. You'd point OBS to the service instead of RUclips. You wouldn't be able to use your existing CSS with these services without some extra work, but it can offer more flexible customizations if you're looking to take the opportunity to revamp your chat. StreamElements and SigmaNUTS come to mind, but there are others.
I hope this helps. Good luck!

[@PenbuVT]

OBS released an update last week that has the fix, v30.2.3. Install that and hopefully you're good to go, but I hear you may have to refresh the browser source's cache if it doesn't work properly at first.