Picture-In-Picture Icon not showing

[MiepHD]

The picture-in-picture icon of the plug-in is invisible but you can interact with it normally. The outline is shows where the icon element is (it's normally not visible).

[Zo-Bro-23]

It works for me. The icon is an SVG, so there can't be the issue of an invalid resource link either. Any idea what could be causing it?

[MiepHD]

Maybe 'cause I've no theme installed?

[Zo-Bro-23]

Nope, works even without.

I'm using 1.18 though, and even though the PIP plugin wasn't updated any time soon, that might be why you're facing the issue. Can you try 1.18 and report if the issue persists?

[Araxeus]

@Zo-Bro-23 why are you on 1.18 and not 1.19?

[Zo-Bro-23]

@Zo-Bro-23 why are you on 1.18 and not 1.19?

Didn't bother updating 'cause nothing in the changelog seemed urgent to me :) Also, I'm on a temporary computer right now (like I said earlier) while my laptop gets repaired, so I thought I'll just update it once I get my laptop back. Updated it now tho 😁

[MiepHD]

I think the svg is missing

[Zo-Bro-23]

On a related note, I'm currently working on adding a new plugin. I had the same issue, where when I add an icon using Javascript, it automatically removes the SVG and the icon becomes invisible. Looking at the code for the PIP plugin, it's very similar to what I tried doing. I didn't understand this behavior, so I created a StackOverflow question. It didn't receive any answers, but one comment said that the issue was being caused because the YTM Javascript automatically removes any innerHTML added to elements. I still don't get why anyone would do this though.

The StackOverflow user suggested using ShadowDOM, but I'm unfamiliar with what that is. Help would be appreciated (@Araxeus). Since the issue is the same, fixing it for me will fix it for the PIP plugin!

PS: I still don't know why the PIP plugin works for me, considering that my own plugin doesn't 🥴

[Araxeus]

I'll look into it later

Meanwhile notice that there are a few plugins that inject custom elements (and work), notably:

Navigation

• VideoToggle
• Downloader
• SpeedChanger
• PiP (the button in the menu)

[Zo-Bro-23]

That's true. I wonder how those do it. My aim is simple: I want to inject a like button into the top-level-buttons div. Using copied code from YTM, the following will work:

<tp-yt-paper-icon-button class="like style-scope ytmusic-like-button-renderer" title="Like" aria-label="Like" role="button" tabindex="0" style-target="host" aria-disabled="false" aria-pressed="false"><!--css-build:shady--><tp-yt-iron-icon id="icon" class="style-scope tp-yt-paper-icon-button"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope tp-yt-iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope tp-yt-iron-icon"><path d="M18.77,11h-4.23l1.52-4.94C16.38,5.03,15.54,4,14.38,4c-0.58,0-1.14,0.24-1.52,0.65L7,11H3v10h4h1h9.43 c1.06,0,1.98-0.67,2.19-1.61l1.34-6C21.23,12.15,20.18,11,18.77,11z M7,20H4v-8h3V20z M19.98,13.17l-1.34,6 C18.54,19.65,18.03,20,17.43,20H8v-8.61l5.6-6.06C13.79,5.12,14.08,5,14.38,5c0.26,0,0.5,0.11,0.63,0.3 c0.07,0.1,0.15,0.26,0.09,0.47l-1.52,4.94L13.18,12h1.35h4.23c0.41,0,0.8,0.17,1.03,0.46C19.92,12.61,20.05,12.86,19.98,13.17z" class="style-scope tp-yt-iron-icon"></path></g></svg><!--css-build:shady-->
</tp-yt-iron-icon></tp-yt-paper-icon-button>

But this is what I get when I try to do this using DOM manipulation:

As the image shows, I insert an element with SVG, but the element that is actually inserted is invisible, and the response from appendChild() shows the element with the SVG omitted. I'd really appreciate some help as to why this is happening (or some better alternatives to inject an icon). Thanks!

PS: I haven't tried this by actually making a plugin yet; only using Chrome DevTools for the real YTM site. I'm assuming that won't make a difference.

[Araxeus]

this f9820df (#964) fixed it
(I later added a more generalized way of doing it because the unmaximize button was broken too)

The problem was the replaceWith function.

[Zo-Bro-23]

this f9820df (#964) fixed it (I later added a more generalized way of doing it because the unmaximize button was broken too)

The problem was the replaceWith function.

Cool! Can you help me with my issue though? Maybe just give me some sample code for how I can inject an element (icon). Thanks!

[Araxeus]

Bruh. You said it was the same issue (svg omitted on insert)

So maybe just try my fix? (Place the svg after placing the containing element)

If you can't figure it out, please add me on discord