🧩 Plasmo Developers•17mo ago

Add a custom class to <plasmo-csui>

I find myself needing to add class="ytp-button" to the <plasmo-csui> so that the element shows correctly where it's injected With Svelte, of course

77 Replies

Avi•17mo ago

Is there a way to do it without

export const mountShadowHost: PlasmoMountShadowHost = ({ anchor, shadowHost }) => {
  shadowHost.classList.add("ytp-button");
  anchor.element.prepend(shadowHost);
};

export const mountShadowHost: PlasmoMountShadowHost = ({ anchor, shadowHost }) => {
  shadowHost.classList.add("ytp-button");
  anchor.element.prepend(shadowHost);
};

lab•17mo ago

I think that's the case yeah :d... Maybe we should think of a better API?

Avi•17mo ago

Well I do find myself needing to inject/display it when conditions are met, e.g. the ext is enabled AKA take a full advantage of Svelte in the CSUI's container

lab•17mo ago

Mhmm At the compiler level and framework level, how should we implement this feature :-?

Avi•17mo ago

Otherwise I could technically do it in a regular CS script, but using Svelte is always more convenient 🙃 No idea 😄

Avi•17mo ago

I'm reworking https://chrome.google.com/webstore/detail/fpoooibdndpjcnoodfionoeakeojdjaj

YouTube Watch Time Counter

Counts the total time you watch videos on YouTube.

Avi•17mo ago

I believe it has a great potential to become a popular extension, 100x better than it is now

Avi•17mo ago

I haven't fully decided on the UI, but this is the latest screenshot of a certain section

lab•17mo ago

I need some idea to improve it cuz.... I don't use Svelte xDddddd

Avi•17mo ago

Imagine if the following will be <plasmo-csui>:

<script lang="ts" context="module">
  export const config: PlasmoCSConfig = {
    matches: ["https://www.youtube.com/*"]
  };

  export const getInlineAnchor: PlasmoGetInlineAnchor = () => getVisibleElement(SELECTORS.containerRightControls);

  export const getShadowHostId: PlasmoGetShadowHostId = (): string => idElement;

  export const mountShadowHost: PlasmoMountShadowHost = ({ anchor, shadowHost }) => {
    shadowHost.classList.add("ytp-button");
    anchor.element.prepend(shadowHost);
  };

  let isEnabled;

  const storageLocal = new Storage({ area: "local" });

  storageLocal.get("isExtEnabled").then(pIsEnabled => {
    isEnabled = pIsEnabled;
  });

  storageLocal.watch({
    isEnabled({ newValue: pIsEnabled }: { newValue: boolean }) {
      isEnabled = pIsEnabled
    }
  });
</script>

<div id="ytwt" class:hidden={!isEnabled}></div>

<style lang="scss">
  :global(.html5-video-player.playing-mode) #ytwt:not(.hidden) {
    opacity: 1;
  }
</style>

<script lang="ts" context="module">
  export const config: PlasmoCSConfig = {
    matches: ["https://www.youtube.com/*"]
  };

  export const getInlineAnchor: PlasmoGetInlineAnchor = () => getVisibleElement(SELECTORS.containerRightControls);

  export const getShadowHostId: PlasmoGetShadowHostId = (): string => idElement;

  export const mountShadowHost: PlasmoMountShadowHost = ({ anchor, shadowHost }) => {
    shadowHost.classList.add("ytp-button");
    anchor.element.prepend(shadowHost);
  };

  let isEnabled;

  const storageLocal = new Storage({ area: "local" });

  storageLocal.get("isExtEnabled").then(pIsEnabled => {
    isEnabled = pIsEnabled;
  });

  storageLocal.watch({
    isEnabled({ newValue: pIsEnabled }: { newValue: boolean }) {
      isEnabled = pIsEnabled
    }
  });
</script>

<div id="ytwt" class:hidden={!isEnabled}></div>

<style lang="scss">
  :global(.html5-video-player.playing-mode) #ytwt:not(.hidden) {
    opacity: 1;
  }
</style>

lab•17mo ago

that's not working atm??

Avi•17mo ago

That cannot work I need the <div> to be in the top level Or else it will look just wrong

lab•17mo ago

wait I thought by this you mean the mountShadowHost is working atm? Or is the ytwt element right now not being mounted in the right place?

Avi•17mo ago

I made it work with a workaround But the interactivity will probably break The CSS is injected with a content script that injects the styling

lab•17mo ago

the getStyle is not working??

Gaming

Programming

Add a custom class to <plasmo-csui>