🧩 Plasmo Developers•17mo ago

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:

import { useEffect, useState } from "react";
import cssText from "data-text:~style.css";
import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo";
import settingsIcon from "url:~/assets/language_icon.png";


export const config: PlasmoCSConfig = {
  matches: ["https://www.youtube.com/*"]
};

export const getInlineAnchor: PlasmoGetInlineAnchor = () =>
  document.querySelector("#movie_player > div.ytp-chrome-bottom > div.ytp-chrome-controls > div.ytp-right-controls > button.ytp-miniplayer-button.ytp-button");

export const getShadowHostId = () => "youtube-settings-button-container";


import styleText from "data-text:./SettingsButton.scss"
import type { PlasmoGetStyle } from "plasmo"

export const getStyle: PlasmoGetStyle = () => {
  const style = document.createElement("style")
  style.textContent = styleText
  return style
}

function SettingsButton() {
  console.log("IndexPopup loading");
  return (<div>
    <img
      className="ytp-size-button ytp-button"
      onClick={() => {
        console.log("Settings button clicked");
      }}
      src={settingsIcon}
      alt={"Settings"}
    />
  </div>)
}
export default SettingsButton;

import { useEffect, useState } from "react";
import cssText from "data-text:~style.css";
import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo";
import settingsIcon from "url:~/assets/language_icon.png";


export const config: PlasmoCSConfig = {
  matches: ["https://www.youtube.com/*"]
};

export const getInlineAnchor: PlasmoGetInlineAnchor = () =>
  document.querySelector("#movie_player > div.ytp-chrome-bottom > div.ytp-chrome-controls > div.ytp-right-controls > button.ytp-miniplayer-button.ytp-button");

export const getShadowHostId = () => "youtube-settings-button-container";


import styleText from "data-text:./SettingsButton.scss"
import type { PlasmoGetStyle } from "plasmo"

export const getStyle: PlasmoGetStyle = () => {
  const style = document.createElement("style")
  style.textContent = styleText
  return style
}

function SettingsButton() {
  console.log("IndexPopup loading");
  return (<div>
    <img
      className="ytp-size-button ytp-button"
      onClick={() => {
        console.log("Settings button clicked");
      }}
      src={settingsIcon}
      alt={"Settings"}
    />
  </div>)
}
export default SettingsButton;

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:

}

#youtube-settings-button-container {
  width: 25px;
  height: 27px;
}

}

#youtube-settings-button-container {
  width: 25px;
  height: 27px;
}

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.

98 Replies

tetec1•17mo ago

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

Avi•17mo ago

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 Plasmo

At 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

tetec1•17mo ago

done

tetec1•17mo ago

How can style this plasmo-csui element?

Avi•17mo ago

The beautiful thing with CSS is that you can override everything

#youtube-settings-button-container {
  width: 25px;
  height: 27px;
  display: inline-block;
}

#youtube-settings-button-container {
  width: 25px;
  height: 27px;
  display: inline-block;
}

tetec1•17mo ago

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

tetec1•17mo ago

Avi•17mo ago

Can you link to the repo?

tetec1•17mo ago

sure I can share it, give me a minute yeah no the css seems to be working, doing this:

#plasmo-inline {
  background-color: deeppink;
}

#plasmo-inline {
  background-color: deeppink;
}

works, but the size of youtube-settings-button-container doesn't change for some reason. Let me create a repo on github quickly.

Arcane•17mo ago

@tetec1 has reached level 2. GG!

Avi•17mo ago

You could also get assisted by ChatGPT, just saying 🙃

tetec1•17mo ago

https://github.com/TasseDeCafe/fluentsubs-next

GitHub

GitHub - TasseDeCafe/fluentsubs-next

Contribute to TasseDeCafe/fluentsubs-next development by creating an account on GitHub.

tetec1•17mo ago

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

Avi•17mo ago

I don't know whether SettingsButton.scss will pose an issue being in contents/, worth asking @louis

tetec1•17mo ago

okay, what's the standard way of adding stylesheets?

Gaming

Programming

Injection and styling a button into the YouTube player