Injection and styling a button into the YouTube player
Hi! I'm trying to inject a button into the YouTube player, next to the Miniplayer button, but so far I've been unsucessful at styling. Here is my current code:
This code seems to insert the button at the right place, but I don't understand how to change the size of the plasmo-csui tag created by Plasmo. I tried to access it in the stylesheet, but to no avail:
How does that work exactly? I'm aware of the existence of this page: https://docs.plasmo.com/framework/content-scripts-ui/styling
But I find it quite obscure. An example would definitely help! ๐ Thanks!
Plasmo Docs
Styling Plasmo CSUI โ Plasmo
Plasmo CSUI's built-in Root Container allows extension developers to safely style their components.
![](https://utfs.io/f/4d65c2f5-47cd-4de8-a504-d00ad78db0a5-1nq2cb.png)
98 Replies
okay, I just wasted 2 days trying to understand this. I'm willing to pay 100 euros for a solution. I just need to understand how to insert that damn button in the player...
Oh now I got it
I'm not a React expert sadly ๐
but I don't understand how to change the size of the plasmo-csui tag created by PlasmoAt this point it's a matter of CSS debugging in the devtools Also, it's seems somewhat related to an issue I've had recently https://discord.com/channels/946290204443025438/1104151734848323634/1104173756638830602
done
How can style this plasmo-csui element?
![](https://utfs.io/f/4dcf2474-9aee-4c54-8485-51ce41963ebf-1nq2cb.png)
The beautiful thing with CSS is that you can override everything
okay, trying that. It doesn't seem to affect the element but maybe it has something to do with the way I import my style sheet? I'll check the docs quickly to make sure it's working
![](https://utfs.io/f/7a59ca62-9153-49c0-a74d-26ae8e5c06dc-1nq2cb.png)
Can you link to the repo?
sure I can share it, give me a minute
yeah no the css seems to be working, doing this:
works, but the size of youtube-settings-button-container doesn't change for some reason.
Let me create a repo on github quickly.
@tetec1 has reached level 2. GG!
You could also get assisted by ChatGPT, just saying ๐
GitHub
GitHub - TasseDeCafe/fluentsubs-next
Contribute to TasseDeCafe/fluentsubs-next development by creating an account on GitHub.
I tried, I have access to the gpt-4 API... it didn't really help for this specific problem
or maybe my prompts are shit
I don't know whether
SettingsButton.scss
will pose an issue being in contents/
, worth asking @louisokay, what's the standard way of adding stylesheets?